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