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 nxt_content_shortcode( $atts, $content = null ) {
$a = shortcode_atts( array(
'id' => '',
), $atts );
if($a['id'] == '') return "Fehler - es wurde keine ID angegeben!";
return '<div class="nxt_content_container">' . do_shortcode(get_post_field('post_content', $a['id'])) . '</div>';
}
// Initialize the shortcode defined above after WordPress is done initializing
add_action('init', 'nxt_add_custom_shortcodes');
function nxt_add_custom_shortcodes() {
add_shortcode('inhalt', 'nxt_content_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!
Hallo Oliver
es wäre toll, wenn ihr zuoberst einen Hinweis macht, dass es mit dem php nicht mehr klappt. Oder den Artikel ganz weg nehmt.
Mit freude anfangen und dann frustriert sein ist keine gute Werbung :/
LG Norbert
Sorry, ich verstehe nicht ganz, was du meinst. Mit PHP hat das Thema eigentlich relativ wenig zu tun. Welche Fehlermeldung erscheint bei dir denn, wenn du das testest?
hallo, ich bin eurer Anleitung „Divi-Module ineinander verschachteln“ gefolgt bekomme aber nachdem ich den Code in functions.php im Child Themes eingegeben habe :
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‘ );
die Fehlermeldung Parse Error in function.php genau an der stelle wo der Code eingefügt ist. I
Ist der Code ausschnit auf der Webseite richtig? was mache ich falsch?
Leider scheint es seit einem Update Probleme mit der Ausgabe von Code auf unserer Seite zu geben. Schau am besten mal auf Divi-Tutorials, dort haben wir ein Plugin installiert, durch das man Code auch hübsch hervorgehoben und nicht irgendwie verunstaltet einbinden kann: https://divi-tutorials.com/shortcodes/divi-module-ineinander-verschachteln-mit-shortcodes#shortcodes
Dort findest du ebenfalls nochmal ein erklärendes Video, das dir hoffentlich bei der Umsetzung hilft.