Anleitung: Divi-Module ineinander verschachteln

Was ihr benötigt:

  • Divi
  • Ein Child Theme
  • Ein einigermaßen vernünftiges Verständnis, wie man copy / pastet

Divi ist ein unglaublich flexibles Theme und wir sind riesige Fans – wir haben mehr als 90% der von uns entwickelten Webseiten in den vergangenen 3 Jahren mit Divi aufgesetzt! Mittlerweile konnte es zudem zum beliebtesten Premium-Theme für WordPress überhaupt werden und die Konkurrenz hinter sich lassen. Trotz seiner hohen Flexibilität kommt es ab und an vor, dass man an die Grenzen des sonst so vielseitigen Page Builders stößt und zwar dann, wenn man Divi-Module ineinander verschachteln möchte.

Konkretes Beispiel: Mehrspaltige Inhalte innerhalb eines Tab-Moduls

Unser Kunde Christian Wiederer wollte für die Webseite seiner SEO Agentur Five 8 ein Tab-Modul haben, in dem die Inhalte jeweils zweispaltig dargestellt werden sollten, also „Text links / Bild rechts“. Grundsätzlich ist sowas mit einem floatenden Bild möglich, jedoch tut man sich dann relativ schwer mit der Optimierung für mobile Endgeräte (da der Text um das Bild herum fährt oder das Bild plötzlich viel zu breit dargestellt wird und immer nur 2 – 3 Wörter neben dem Bild erscheinen).

Schöner wäre da schon ein standardmäßig zweispaltiges Layout, das auf mobilen Endgeräten auf eine einspaltige Darstellung umspringt – eben genauso wie eine Zeile mit 2 Spalten das bei Divi standardmäßig tut. Nach einigem Herumprobieren haben wir eine Lösung entwickelt, mit der man noch wesentlich mehr Flexibilität beim Aufbau von Divi-Seiten hat: Ein eigener Shortcode, der schlichtweg die Inhalte eines in der Bibliothek abgespeicherten Elements rein lädt.

Die Vorgehensweise

Zunächst geht ihr in die Divi-Bibliothek und klickt dort auf „Neu hinzufügen“. Wählt Zeile (wichtig!) als Layouttyp und gebt eurer Zeile einen leicht zu merkenden Namen, z. B. eben „zweispaltiger Inhalt für Tab-Modul“.

Anschließend fangt ihr mit der Bearbeitung der Zeile an, also legt fest, dass diese zwei (oder mehr) Spalten haben soll, packt nach links ein Text-Modul und nach rechts ein Bild. Speichert das Layout im Anschluss ab. Wenn ihr jetzt in die URL-Zeile eures Browsers schaut, könnt ihr die post-ID erspähen. Diese ist die Zahl nach „?post=„. Im nächsten Screenshot ist es also beispielsweise die „218831“.

In der URL-Zeile könnt ihr die Post ID erspähen.

 

Jetzt müsst ihr nur noch den Code für den neuen Shortcode in der functions.php eures Child Themes rein posten. Hier der komplette Code:

function inhalt_shortcode( $atts, $content = null ) {
$a = shortcode_atts( array(
'id' => '',
), $atts );
if($a['id'] == '') return "Fehler - es wurde keine ID angegeben!";

return ‚

‚ . do_shortcode(get_post_field(‚post_content‘, $a[‚id‘])) . ‚

‚;
}
add_shortcode( ‚inhalt‘, ‚inhalt_shortcode‘ );

 

Damit seid ihr auch schon so gut wie durch! Ihr könnt jetzt ein Tab-Modul (oder einen Slider, etc.) auf einer anderen Seite erstellen und dann im Inhalts-Bereich des jeweiligen Tabs, in dem ihr den zweispaltigen Inhalt einfügen möchtet, den ihr eben in der Bibliothek abgespeichert habt, den Shortcode:

[inhalt id="218831"]

 

eintragen. Das war’s auch schon. So sollte das in etwa aussehen:

Mit dem neuen Shortcode könnt ihr jetzt ganz schnell in der Bibliothek gespeicherte Layouts innerhalb von anderen Modulen rein laden.

 

Damit werden euch jetzt ganz neue Möglichkeiten eröffnet, da ihr jetzt fleißig Divi-Module ineinander verschachteln könnt. Selten werdet ihr zuvor wohl eine Zeile INNERHALB von einem Tab-Modul eingesetzt haben, jetzt geht das aber relativ locker von der Hand. Mittlerweile sind wir ein großer Fan des relativ einfachen „inhalt“-Shortcodes, denn mit diesem lassen sich noch ganz andere Dinge anstellen – z. B. kann man mit ein paar zusätzlichen Erweiterungen und etwas Styling dafür sorgen, dass einzelne Module erst dann sichtbar werden, wenn auf ein anderes Modul geklickt wird. So kann sich ein Blurb plötzlich als Trigger für einen längeren Textblock definieren lassen – und das geht sogar ganz ohne Javascript und jQuery. Auf dieses Thema gehen wir in einem unserer nächsten Beiträge näher ein.

P.S: Wir streamen derzeit regelmäßig viele der von uns vorgenommenen Webseiten-Optimierungen auf Twitch. Schaut am besten mal auf unserem Kanal vorbei und klickt am besten auf follow, damit ihr benachrichtigt werden, wenn wir wieder live gehen!

Über Oliver Gehrmann

Oliver Gehrmann ist Gründer der Agentur nexTab, Fan von Sammelkartenspielen, verheiratet und Vater von zwei Jungs, von denen gerüchteweise sogar vereinzelt Bilder in dieser Webseite eingearbeitet sind...