Lesefortschritt:

Titel des Divi-Blurb-Moduls oberhalb des Bildes anzeigen

27. Oktober 2024 | Divi-Theme, Scripts

Dieser Beitrag beinhaltet 653 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.

Das Blurb-Modul des Divi-Themes – zu deutsch mit dem sperrigen Titel «Informationstext-Modul» – ist eine gute Möglichkeit, einen Inhalt mit einem kurzen Text und einem passenden Bild anzuteasen. Die Gestaltungsmöglichkeiten sind zwar etwas beschränkt, sie lassen sich aber leicht erweitern. Beispielsweise lässt sich der Blurb-Titel oberhalb des verwendeten Bildes anzeigen.

So wie nebenan zeigt sich das Informationstext-Modul von Haus aus:

 

Erst wird das Bild gezeigt, dann der Titel, dann der Body-Text.

Der Titel lässt sich aber recht leicht oberhalb des Bildes platzieren. Dafür vergeben Sie dem entsprechenden Modul eine CSS-Klasse namens «move-blurb-title».

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Diesen Klassennamen können Sie im Tab «Erweitert» des entsprechenden Moduls einfügen. Öffenen Sie diesen, gehen dann auf «CSS-ID und Klassen» und fügen ihn in das Textfeld «CSS-Klasse» ein.

Nun benötigen Sie noch ein kleines Script, das wir Ihnen unten zur Verfügung stellen. Kopieren Sie es und fügen es dem <head>-Bereich Ihrer Website hinzu. Im Backend unter Divi/Theme-Optionen/Integration:

<script>
jQuery(document).ready(function() {
jQuery(".move-blurb-title").each(function () {
 var modhead = jQuery(this).find('.et_pb_module_header')
 var modimg = jQuery(this).find('.et_pb_main_blurb_image');
      jQuery(modhead).prependTo(modimg);
});
});
</script>

Nun zeigt sich das Informationstext-Modul von oben wie nebenan:

 

Der Titel wird von unterhalb nach oberhalb des Bildes verschoben.

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This