Trick # 254 | Dieser Beitrag beinhaltet 946 Wörter. – Geschätzte Lesezeit: ca. 5 Minuten.
Das Divi-Theme kommt mit einem Informationstext-Modul (auf englisch: Blurb-Modul) daher. Problem: Nur der Titel und das Icon sind anklickbar. Wenn Sie das gesamte Modul verlinken möchten, dann erfahren Sie hier wie das geht.
Als erstes vergeben Sie dem Informationstext-Modul eine CSS-Klasse. Dafür bearbeiten Sie das Modul, gehen auf den Tab «Erweitert», dann auf «CSS-ID & Klassen» und fügen im Textfeld «CSS-Klasse» den Namen «blurb_click» ein.
Und natürlich müssen Sie einen Link hinterlegen, der beim Anklicken aufgerufen werden soll. Das ist möglich im Inhalt-Tab des Moduls.
Weiter benötigen Sie noch etwas JavaScript-Code. Diesen fügen Sie in den <head>-Bereich Ihrer Website ein. Im Backend unter Divi/Theme-Optionen/Integration:
Standard-Beispiel eines Blurb-Moduls
Standardmässig ist nur das Icon und der Titel im Divi-Informationstext-Modul verlinkt.
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".blurb_click").click(function() {
window.location = $(this).find("a").attr("href");
return false;
});
});
</script>Das funktioniert jetzt schon mal: Das gesamte Informationstext-Modul ist nun mit der URL verlinkt, welche Sie im Modul angegeben haben.
Link in einem neuen Browser-Tab öffnen
Wenn es sich beim Informationstext-Link um eine externe Seite handelt, dann möchten Sie vermutlich, dass per Klick ein neuer Browser-Tab öffnet. Auch das geht mit ei wenig JavaScript-Code.
Zunächst aber müssen Sie die CSS-Klasse des Informationstext-Moduls (unter Erweitert/CSS-ID & Klassen/CSS-Klasse) anpassen. Geben Sie dort den Klassennamen «blurb_click_newtab» ein.
Und schliesslich hier noch der Code:. Dieser gehört in den <head>-Bereich Ihrer Website – im Backend unter Divi/Theme-Optionen/Integration:
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".blurb_click_newtab").click(function() {
var blurbLink = $(this).find("a");
blurbLink.attr("target", "_blank");
window.open(blurbLink.attr("href"));
return false;
});
});
</script>In beiden Fällen wird für das perfekte Ergebnis noch eine Zeile CSS fällig. Fügen Sie diese ein unter Design/Custpmizer/Zusätzliches CSS:
.blurb_click:hover, .blurb_click_newtab:hover {
cursor: pointer;
}Dieser Code bewirkt, dass der Mauszeiger bei der Bewegung über das Informationstext-Modul zum «Klickfinger» wird.
Ein Hinweis noch: Die JavaScript-Codes machen das ganze Modul zum selben Link. Auch den enthaltenen Text. Wir empfehlen darum, dort keine anderslautenden Links zu hinterlegen – die User könnten sonst verwirrt werden.
Neues Beispiel eines Blurb-Moduls
Nun ist das ganze Informatiostext-Modul verlinkt.
Werbung
Werbung
