Worum es geht
In der Facebook-Gruppe Divi Theme Deutsch hatte ein Mitglied folgende Fragestellung:
Hallo zusammen, weiß jemand Rat? Ich habe z.B. zwei Inhaltsmodule übereinander (z.B. Bild und darunter Handlungsaufforderung). Diese habe ich durch 0 Abstand und Hintergrundfarben visuell zusammengeschmolzen, sodass es wie ein Block aussieht. Gibt es eine Möglichkeit, diese zwei Elemente gemeinsam in der Bibliothek abzuspeichern, damit ich diese immer wieder verwenden kann? Also einzelne Module oder Spaltensets klar, aber zwei oder drei Module untereinander..? Wie würdet Ihr da vorgehen? Vielen Dank.
Meine Idee hierzu war, die Module mittels Shortcode ineinander zu nesteln, um dann das „umschließende” Modul in der Bibliothek abspeichern zu können. Damit kreiert man sozusagen globale Module von Hand, denn die eingenesteten Module kommen dann aus der Layout-Bibliothek und können später auch nur dort bearbeitet werden.
Code für die functions.php
Bevor wir anfangen können, unser einzubettendes Modul zu erstellen, müssen wir in der function.php unseres Childthemes ein wenig Code schreiben.
Hinweis: Um solche Änderungen vorzunehmen, bitte immer zumindest ein leeres Childtheme nutzen. Das besteht aus einer functions.php, einer stylesheet.css und einem screenshot.jpg. Ich selber habe dann bis vor kurzem auch immer eine footer.php drin gehabt. Den Footer baue ich mittlerweile aber auch in der Layout-Bibliothek und füge ihn per ID in meinen Websites ein. Das ist aber ein Thema für ein anderes Tutorial. Wer kein nacktes Childtheme hat, kann sich das gerne hier herunterladen. Einfach unter WordPress > Designs > Themes als neues Theme hochladen und aktivieren.
Hier nun der Code, der in der functions.php in die Zeile vor das schließende ?> eingefügt werden muss:
https://gist.github.com/MrsDivi/ba88dbfd22253c48eb04ad977c7fc944
Content erstellen
In diesem Beispiel möchte ich in einer Vollbreiten Sektion einen Slider mit Kontaktformular einfügen. Normalerweise kann man im Vollbreiten Slider einen Titel, einen Untertitel, ein Bild, Text und eine Taste einfügen. Zuerst muss ich nun mein Kontaktformular erstellen, dass ich nachher in den Slider einbetten möchte.
Dazu gehe ich in der linken Spalte im Backend auf Divi > Divi-Bibliothek und dann auf Add New.
Nun erstellt man das Kontaktformular wie sonst auch. Dazu erfernt man zunächst den Placeholder (Platzhalter) indem man das X auf der rechten Seite anklickt und dann einfach das Kontaktformularmodul auswählt. Wenn dann alles eingestellt ist (Texte, Felder, Angaben zum Empfänger und ggf. das Meldungsschema), das Modul speichern.
Nun muss man sich die ID des Moduls aufschreiben oder merken. Diese findet man oben in der Browserzeile. Die Zahl hinter „post=” ist unsere ID und die kann zwischen 3 bis 6 Ziffern lang sein, je nach dem, wie umfangreich die Website bereits ist. In diesem Beispiel ist die Modul-ID 299.
Hinweis: Das Einbetten mittels Shortcode funktioniert auch für ganze Zeilen, Sektionen und Layouts. Hierzu legt man diese mit dem entsprechenden Layouttyp an und ermittelt, wie oben beschrieben, die ID des Layouts.
Content mittels Shortcode an anderer Stelle einfügen
Nun gilt es den Content – hier das Kontaktformular-Modul – an der gewünschten Stelle einzufügen. Dazu benötigt man den folgenden Shortcode:
https://gist.github.com/MrsDivi/bbc643632e5e35b734678786260dc07d
Natürlich muss dazu nun die ID entsprechend geändert werden. In diesem Fall auf 299. Den Shortcode fügt man dann ins Textfeld des Vollbreiten Sliders ein. Da ich hier ein Kontaktformular in die Vollbreiten Sektion einfüge, werde ich die Taste (Button) leer lassen und sonst nur den Titel ausfüllen.
Das ganze sieht dann so aus – schön ist es nicht, aber zur Demonstration reicht es:
Anwendungsbeispiele und Fazit
Der Einsatz von Shortcodes für Module und andere Elemente aus der Layout-Bibliothek bietet beinahe unbegrenzte Möglichkeiten und der Fantasie sind dabei keine Grenzen gesetzt. Folgende Szenarien sind denkbar:
- Platzierung von Inhalten innerhalb von Informationstexten
- Ergänzung von Slidern
- Kombination von Spezialsektionen und normalen Sektionen
- Einfügen von mehreren Buttons als Menüvariante in der Header-Sektion (das habe ich z. B. auf meiner neuen Website gemacht, siehe Bild)
- Preistabellen innerhalb von Registerkarten (Tabs)
- Handlungsaufrufe in der Seitenleiste
- uvm.
Ich bin mir sicher, dass Elegant Themes das irgendwann zum Standard machen wird, vielleicht als Nested Modules oder so in der Art. Bis dahin hilft dieses kleine Tutorial dabei, Divis Flexibilität noch weiter auszubauen. Viel Spaß dabei!
