Ein Divi Modul überall per Shortcode verwenden

von | 5. August 2018 | Tutorials

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.

Ein Divi Modul überall per Shortcode verwenden 1

Wichtig ist, dass hierbei der Layouttyp Modul ausgewählt ist. Als Layout Name kann man einen Namen vergeben, der leicht erkennen lässt, worum es geht.

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.

Ein Divi Modul überall per Shortcode verwenden 2

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.

Ein Divi Modul überall per Shortcode verwenden 3

Das ganze sieht dann so aus – schön ist es nicht, aber zur Demonstration reicht es:

Ein Divi Modul überall per Shortcode verwenden 4

Natürlich habe ich in diesem Fall die Slider-Bedienelemente deaktiviert. Möchte ich nun nachträglich das Kontaktformular bearbeiten, muss ich dazü natürlich wieder in die Divi-Bibliothek.

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!

Eure Tanya

©2019 - Ein Design mit von Divi Mastermind - Benny
Impressum | Datenschutz

Divi ist ein eingetragenes Warenzeichen von Elegant Themes. Diese Website ist weder mit Elegant Themes verbunden noch wird sie von Elegant Themes unterstützt.