Wer im WordPress-Block-Editor („Gutenberg“) arbeitet und trotzdem Divi-Gestaltung nutzen will, fragt sich: Kann ich ein einzelnes Divi-Modul als Block einfügen, zum Beispiel einen Divi-Button? Die kurze Antwort für Divi 5: Nein, einzelne Module gibt es dort nicht. Divi bringt genau einen Block mit, den „Divi Layout“. In diesem Block baust du mit dem Visual Builder ein ganzes Layout, und das lässt sich zwischen normale Blöcke setzen.
Das ist also anders, als es der Titel mancher älterer Anleitungen vermuten lässt. Ich zeige dir, wie der Block funktioniert, wo die Oberfläche noch englisch ist und was beim Speichern passiert. Getestet mit Divi 5.13 (deutsche Oberfläche) und WordPress 7.1, Stand Oktober 2026.
Was es im Block-Editor gibt und was nicht
Ich habe den Block-Inserter nach Divi-Modulen durchsucht. „Button“ findet nur den normalen WordPress-Block „Buttons“, „Lottie“ findet keinen Block und „Modul“ ebenfalls nicht. Ein Treffer für „Divi“ ist dagegen vorhanden: „Divi Layout“, einsortiert in der Kategorie „Text“. In der Kopfleiste des Editors sitzt außerdem ein Knopf „Use The Divi Builder“. Der schaltet die ganze Seite auf den Divi Builder um, ist also ein anderer Weg.
Zwei Möglichkeiten gibt es also: die ganze Seite im Divi Builder bauen, oder einen Teil der Seite als „Divi Layout“-Block in den Block-Editor einbetten. Dieser Artikel behandelt die zweite.
Schritt 1: Den Block „Divi Layout“ einfügen
Klicke im Block-Editor auf das blaue Plus oben links, das den Block-Inserter öffnet, und tippe „Divi“ ein. Wähle „Divi Layout“.
Die Suche nach „Divi“ findet den Block „Divi Layout“.Es erscheint ein Kasten mit der Überschrift „Divi Layout“ und zwei Knöpfen. Der Text ist englisch: „Load a layout from the Divi Library or build a new Divi layout“. Die Knöpfe heißen „Build New Layout“ und „Load From Library“.
Der frisch eingefügte Block bietet zwei Wege an.Weg A: Ein neues Layout bauen
Ein Klick auf „Build New Layout“ öffnet den Visual Builder direkt im Editor. Du siehst einen leeren Canvas mit einem Plus, die gewohnte linke Leiste und das Einstellungsfeld rechts. Oben rechts stehen zwei Knöpfe: „Beenden“ und „Speichern & Beenden“. Baue dein Layout wie auf einer normalen Divi-Seite und klicke dann auf „Speichern & Beenden“.
Weg B: Ein vorhandenes Layout laden
Mit „Load From Library“ öffnet sich ein Dialog mit drei Reitern: „Premade Layouts“ (die fertigen Divi-Layouts, bei mir 154 Pakete mit zusammen 1100 Layouts), „Your Saved Layouts“ und „Your Existing Pages“. Der dritte Reiter listet vorhandene Seiten deiner Website, auch das ist eine Quelle für Layouts. Mit dem Suchfeld links grenzt du die Liste ein.
Reiter „Your Existing Pages“: Eine vorhandene Seite dient als Vorlage.Ein Klick auf die Seite öffnet „Layout Details“. Dort steht der Knopf „Dieses Layout verwenden“. Er übernimmt das Layout in den Block.
Mit „Dieses Layout verwenden“ landet das Layout im Block.Eine Besonderheit: Der Reiter „Your Saved Layouts“ war bei mir leer, obwohl ich im Visual Builder einen Abschnitt über „In Bibliothek Speichern“ gesichert hatte. Ich habe nicht geklärt, woran das liegt. Möglicherweise listet der Block nur komplette Layouts. Wenn du also eigene Bausteine im Block nutzen willst, ist der Reiter „Your Existing Pages“ der sichere Weg.
Das Layout bearbeiten: „Edit Layout“
Nach dem Laden zeigt der Block im Editor keine Vorschau, sondern nur einen grauen Kasten mit dem Text: „Select the block and click „Edit Layout“ in the sidebar to view and edit your content.“ Das ist Absicht, nicht ein Fehler. Die Gestaltung siehst du erst im Divi Builder.
Wähle den Block aus und öffne rechts die Einstellungen (Reiter „Block“). Dort steht der Abschnitt „Select Layout“ mit drei Einträgen:
- „Edit Layout“ öffnet das Layout im Visual Builder.
- „Change Layout“ wechselt zu einem anderen Layout.
- „Clear Layout“ leert den Block.
In der Seitenleiste des Blocks: „Edit Layout“, „Change Layout“ und „Clear Layout“.„Edit Layout“ habe ich getestet. „Change Layout“ und „Clear Layout“ habe ich nicht ausgelöst, ihre Namen sind aber eindeutig. Auch der Radierer in der Block-Werkzeugleiste hat den Hinweis „Clear Layout“.
„Edit Layout“ öffnet das Layout im Visual Builder, hier mit „Speichern & Beenden“ oben rechts.Speichern und Ergebnis
Klicke im Builder auf „Speichern & Beenden“. Du landest wieder im Block-Editor. Speichere dort die Seite mit dem blauen Knopf „Speichern“. In der Seite steckt jetzt ein Block divi/layout mit den Divi-Blöcken darin. Dein normaler Absatz davor bleibt unverändert.
Auf der Live-Seite stehen dein Gutenberg-Absatz und das Divi-Layout untereinander:
Das Divi-Layout steht zwischen den normalen WordPress-Blöcken.Wann der Block sinnvoll ist
- Ein Teil der Seite soll besonders gestaltet sein: zum Beispiel ein Handlungsaufruf mit Button in einem sonst schlichten Beitrag.
- Du schreibst gern im Block-Editor: Du behältst deinen gewohnten Ablauf, nutzt Divi aber für einzelne Bereiche.
- Du willst die ganze Seite gestalten: Dann ist „Use The Divi Builder“ in der Kopfleiste der bessere Weg, weil du nicht zwischen zwei Editoren wechselst.
Rechne damit, dass im Editor nur der Platzhalter sichtbar ist. Wer sofort sehen will, wie das Ganze aussieht, öffnet die Vorschau der Seite.
Divi gibt es bei Elegant Themes (Werbung).
