Divi-Accordions oder Tabs mit Modulen bestücken

20. November 2022 | Divi-Theme, functions.php |

Geschätzte Lesezeit für diesen Beitrag: ca. 4 Minuten.

Normalerweise lassen sich die praktischen Accordion- oder Tab-Module des Divi-Themes bloss mit Text füllen. Jedoch sind – mit ein wenig Programmierung – auch andere Inhalte möglich: Formulare zum Beispiel, Personenmodule, Call-To-Action-Module – sogar ganze Divi-Sections oder Zeilen und vieles mehr. Wenn Sie wollen, sogar weitere Accordions oder Tabs.

Die Vorbereitung ist einfach. Folgenden Code müssen Sie in die Datei functions.php Ihres Divi-Child-Themes kopieren. Die Datei finden Sie unter Design/Theme Editor:

function showmodule_shortcode($moduleid) {
extract(shortcode_atts(array('id' =>'*'),$moduleid)); 
return do_shortcode('[et_pb_section global_module="'.$id.'"][/et_pb_section]');
}
add_shortcode('showmodule', 'showmodule_shortcode');

Das war schon der Hauptharst der Vorbereitungen. Nun geht es an die Gestaltung:

  • Dafür wechseln Sie in die Divi-Bibliothek – im Backend unter Divi/Divi-Bibliothek (bzw. Divi/Divi-Library).
  • Hier können Sie Ihre Layouts ablegen: Sektionen, Zeilen oder auch nur einzelne Module. Sie haben unbegrenzte Möglichkeiten.
  • Wenn Sie mit dem ersten Layout bereit sind, öffnen Sie das Layout und werfen Sie einen Blick in die Adressleiste. Die Zahlenfolge nach «?post=» ist nun interessant für Sie. In unserem Beispiel ist es 10379. Dies ist die ID des Layouts, welches wir im nächsten Schritt verwenden wollen – notieren Sie also diese Zahl.
  • Nun wechseln Sie in die Beiträge oder in die Seiten und öffnen einen bestehenden Inhalt oder erstellen ein neuen. Fügen Sie ein, was Sie benötigen: Ein Accordion- oder ein Tab-Modul.
  • In das Contentfeld können Sie da keine Module direkt einfügen – jedoch beliebigen Text. In unserem Beispiel ist der folgende Text korrekt:
[showmodule id="10379"]
  • Die Zahl 10379 ersetzen Sie mit der ID des Layouts, welches Sie vorhin in der Bibliothek erstellt und gespeichert haben.
  • Sobald Sie die Seite oder den Beitrag publizieren, wird im entsprechenden Accordion-Modul oder Tab exakt der Inhalt Ihres Biotheks-Layouts angezeigt.

Tipp: Wenn Se diesen Inhalt dereinst veränder wollen, können Sie dies tun, müssen ihn jedoch in der Bibliothek suchen und bearbeiten.

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This