Divi 5 Loop Builder Blog: So erstellst Du individuelle Blog-Layouts Schritt für Schritt

video thumbnail for 'Divi 5 Blog Layout einfach mit dem Loop Builder erstellen + Layout Download'

Die wichtigsten Fragen und Antworten in Kürze:

Was ist der Divi 5 Loop Builder?

Der Divi 5 Loop Builder ist eine Funktion in Divi 5, mit dem wiederholbare Layouts für Beitrags- und Produkt-Seiten erstellt werden können. Der Loop Builder ermöglicht dynamische Inhalte, Vorlagen und individuelle Loop-Strukturen.

Wie funktioniert der Divi 5 Loop Builder?

Der Divi 5 Loop Builder nutzt dynamische Module und Query-Optionen, um Beiträge zu filtern und in definierten Schleifen anzuzeigen. Nutzer legen Template-Blöcke und Abfragen fest, die automatisch Inhalte rendern.

Welche Vorteile bietet der Divi 5 Loop Builder?

Der Divi 5 Loop Builder vereinfacht die Erstellung individueller und konsistenter Archiv- und Blog-Layouts, erhöht Design-Konsistenz und reduziert manuelle Anpassungen durch wiederverwendbare Loop-Vorlagen.

Kann der Divi 5 Loop Builder dynamische Felder nutzen?

Ja, der Divi 5 Loop Builder unterstützt dynamische Felder wie Post-Titel, Featured Image, Meta-Daten und ACF-Felder, um Inhalte automatisch in Loop-Templates einzufügen.

Ist der Divi 5 Loop Builder kompatibel mit Plugins?

Der Divi 5 Loop Builder ist mit vielen WordPress-Plugins kompatibel, insbesondere solchen, die Standard-Datenbanken und dynamische Felder nutzen; spezielle Integrationen hängen vom jeweiligen Plugin ab.

Wie beeinflusst der Divi 5 Loop Builder die Seitenladezeit?

Der Divi 5 Loop Builder kann die Ladezeit beeinflussen, abhängig von Abfragen, Bildern und Caching. Optimierte Queries und Bildkomprimierung reduzieren Performance-Einbußen.

Wie erstelle ich eine Loop-Vorlage mit dem Divi 5 Loop Builder?

Im Divi Theme Builder von Divi 5 eine neue Loop-Vorlage anlegen, Loop-Module hinzufügen, Query-Parameter festlegen und dynamische Felder einbinden; Vorlage speichern und auf Bereiche anwenden.

Divi 5 Loop Builder Blog macht Schluss mit komplizierten CSS-Tricks oder Plugins von Drittanbietern. Er erlaubt Dir, dynamische Blog-Layouts per Klick im Divi Builder zu bauen. In diesem Artikel zeige ich Dir Schritt für Schritt, wie Du mit dem Loop Builder in Divi 5 attraktive Blog- und Produktübersichten erstellst, wie Du dynamische Inhalte einbindest und wie Du Feinheiten wie Farben, Abstände und Links sauber umsetzt. Mache Divi 5 mit dem neuen Release samt Loop Builder zu Deinem neuen Standard. Alle Divi News zum Loop Builder findest Du in diesem Beitrag.

Divi Video-Tutorial: Der neue Loop Builder in Divi 5 für individuelle Bloglayouts und WooCommerce-Produkte Schritt für Schritt erklärt.

Warum der Divi 5 Loop Builder auf dem Blog einen echten Unterschied macht

Früher warst Du bei individuellen Blog-Layouts in Deiner Divi 4 Website oft gezwungen, CSS zu schreiben oder Workarounds zu verwenden. Das Divi 5 Update samt Divi 5 Loop Builder Blog ändert das: Loop-Elemente im Editor wiederholen eine Struktur automatisch und füllen diese mit dynamischen Inhalten wie Featured Image, Titel, Auszug, Autor oder Datum. Das spart Zeit und gibt Dir gestalterische Freiheit — ohne frickelige Code-Anpassungen.

Screenshot einer Blog-Grid-Übersicht mit Beitrags-Thumbnails und Titeln, Beispiel für Divi Loop Layout — Das klassische Layout der Blogbeiträge in Dvi 4 kann mit dem Divi 5 Loop Builder in jeden Designwunsch und jedes Bloglayout umgesetzt werden.

Wie funktioniert der Divi 5 Loop-Builder Ansatz?

Divi Builder Vorschau mit wiederholten Beitragskacheln und Einstellungsleiste — Ein Beispiel eines dynamischen Bloglayouts mit dem Divi 5 Lopp Builder: Die Inhalte sind nicht mehr von oben nach unten angeordnet sondern von links nach rechts.

Bevor Du startest: Voraussetzungen

Stelle sicher, dass Deine Beitragsdaten im WordPress Backend vollständig sind: Titel, Featured Image, Kategorie, Autor und Auszug. Diese Felder liefert WordPress und werden später als dynamischer Inhalt in den Loop gezogen. Auch für WooCommerce Produkte kannst Du den Loop-Builder nutzen. Dafür müssen die Daten Deiner Produkte befüllt sein.

Schritt 1 — Blog Layout-Grundgerüst bauen

Füge auf Deiner Divi Blog Website eine neue Sektion mit einer zweispaltigen Zeile (row) hinzu, wie auf dem Screenshot.

Divi Spaltenauswahl-Dialog mit verschiedenen Layout-Vorlagen — Eine zweispaltige Zeile wird später mit dem Divi 5 Loop Builder automatisch für mehrere Blogbeiträge vervielfacht.

In die rechte Spalte fügst Du ein Bild ein, das später das Featured Image Deines Blogbeitrags anzeigt und das Design der Webseite ergänzt. In die linke Spalte werden ein Titel-Modul sowie Text-Module und ein Button als Platzhalter eingefügt, die nach der Aktivierung der Divi 5 Loop Builder Funktion mit den dynamischen Inhalten aus den Blogbeiträgen im WordPress Backend befüllt werden.

Divi-Editor: Zeile mit grünem Rahmen ausgewählt, zeigt die Loop-Auswahl für die Vorlage — Die Grundstruktur des neuen Bloglayouts in Divi 5. Auch die Anordnung der Inhalte von rechts nach links ist flexibel möglich.

Schritt 2 — Divi 5 Loop Builder aktivieren

Gehe in den Einstellungen der Zeile in den Inhaltstab – Schleife (Loop) und aktiviere den Schalter Schleifenelement.

Schritt 3 — Dynamische Loop-Inhalte zuweisen

Ersetze die statischen Platzhalter durch dynamischen Inhalt:

Bildmodul → Loop Featured Image
Überschrift → Loop Post Title
Text für Auszug → Loop Excerpt
Button-Link → Loop Link

Gehe dazu in das Inhaltstab des jeweiligen Moduls und klicke das kleine Variablen-Icon an. Daraufhin werden die dynamischen Loop-Inhaltsmöglichkeiten zur Auswahl angezeigt. Nachdem Du z. B. Loop Excerpt für ein Textmodul gewählt hast, wird der Textauszug angezeigt.

Divi Editor: Bildmodul ausgewählt mit sichtbarer 'Bild' Einstellungssektion zum Zuweisen von Loop Featured Image — Den dynamischen Inhalt des Featured Images im Bild setzen. Wenn der dynamische Loop-Inhalt ausgewählt wurde, werden die weiteren Bilder automatisch geladen.

Loop Link auf Bild oder ganze Spalte setzen

Auch den Button „mehr lesen“ kannst Du mit dem dynamischen Inhalt „Loop-Link“ befüllen, sodass es automatisch zum richtigen Blogbeitrag verlinkt. Den Loop-Link kannst Du optional auch auf das Bild, die Überschrift oder die ganze Zeile/Spalte setzen.

Divi Builder: Bildmodul mit geöffneten Link-Einstellungen neben der Loop-Voransicht mit drei Beiträgen — Den dynamischen Loop-Link kannst Du auf den Button, aber auch in jedes andere Element des Bloglayouts einfügen.

Divi 5 Flexbox nutzen: Elemente zentrieren und ausrichten

Jetzt ist Dein Loop-Bloglayout fertig und Du kannst optional noch die Flexboxfunktion der Zeile zum Ausrichten von Bild und Text nutzen. Gehe dazu in das Design-Tab der Zeile und wähle Layout. Hier musst Du „Biegen“ für das Flexbox-Layout auswählen, um das Design Deiner Webseite zu gestalten. Mit dem hier angezeigten Button Align – Center richtest Du den Text samt Button mittig zum Bild aus, was das Design der Webseite optimiert.

Mehr über Flexbox Layout in Divi 5 erfahren: Divi 5 Flexbox – komplexe Website-Designs per Mausklick – alles was Du wissen musst!

Divi 5 Editor zeigt Kacheln und rechte Einstellungen zur Ausrichtung (Flexbox)

Group Modules: Kategorie, Datum und Autor nebeneinander anordnen

Wenn Du das Datum, den Autor und die Kategorie des Blogs dynamisch eingefügt hast und diese Angaben in einer Zeile nebeneinanderstehen sollen, kannst Du das mit den neuen Divi5 Group Modules umsetzen. Füge die Module innerhalb eines Divi 5 Gruppenmoduls ein und richte ihre Anordnung mit der Flexboxfunktion im Designtab nebeneinander aus.

Mehr zu den neuen Group Modules in Divi 5 erfahren: Diese Features unterstützen die Gestaltung Deiner Webseiten: Divi 5 Group Modules – Individuelles Webdesign in WordPress schnell und einfach umgesetzt

Divi 5 Loop Builder: Gruppiertes Modul mit Beitrags-Meta (Datum) neben Titel und Auszug in der Editor-Ansicht — Mit einem Gruppenmodul kannst Du das Datum der Veröffentlichung, die Autor oder die Blogkategorie einfach nebeneinander ausrichten, weil das Divi 5 Gruppenmodul auch über die Flexboxfunktion verfügt.

Divi 5 Strukturübersicht verwenden

Bei Arbeiten mit Modulen, Zeilen und den dynamischen Inhalten verliert man in Divi 5 manchmal die Übersicht. Nutze deshalb die neue Strukturübersicht auf der linken Seite. Hier wird die gesamte Websitestruktur angezeigt, in der Du auch navigieren kannst.

Divi 5 Editor mit Loop-Vorlage, Beitragskacheln und rechter Einstellungsleiste — Die Divi 5 Strukturübersicht in der linken Seitenleiste erleichtert das Navigieren zwischen den Modulen, Zeilen und Sektionen in Divi.

Vergleich: Altes Blog-Modul vs Divi 5 Loop Builder

Das klassische Blog-Modul aus Divi 4 ist schnell, aber limitiert: Hintergrundfarbe, Umrandungen oder individuelle Abstände lassen sich oft nur global setzen. Mit dem Divi 5 Loop Builder Blog bekommst Du granularere Kontrolle — jede Kachel kann eigene Abstände, Farbe und Ecken bekommen, ohne eigene CSS-Klassen zu schreiben.

Divi Editor: Drei Beitrags-Kacheln oben und Listen-Karten ‚Our Blog‘ unten als Vergleich von Grid- und Listenlayout — An diesem Beispiel ist der Unterschied zwischen dem alten Blog-Modul aus Divi Version 4 und dem neuen Loop-Builder Bloglayout oben gut zu erkennen. Die Hintergrundfarbe im alten Divi Blog-Modul kann nur global gesetzt werden und nicht für jeden Blogbeitrag einzeln, was die Anpassung des Designs erschwert.

Mehrere Divi 5 Blog-Layout-Varianten: Liste, Grid oder Kachel?

Mit dem neuen Loop Builder ist in Divi 5 jedes Bloglayout möglich. Komplexe Grid-Layouts genauso wie Listen-Darstellungen mit Text und Bild nebeneinander.

Divi Editor mit markierter Zeile (Zeile Einstellungen) zur Veranschaulichung von Loop in Zeile vs Spalte — Oben die klassische Layoutstruktur der Beiträge untereinander und unten nebeneinander. Auch Grud-Layouts der Blogbeiträge sind flexibel möglich in Divi 5.

Farben intelligent nutzen: Primary Color und Variationen in Divi 5

In die Divi 5 sind Farben, wie die Hintergrundfarbe des Blogs in diesem Beispiel einmalig per Variablen zu hinterlegen. Benötigt man weitere Farben, kann man mit Helligkeitsfiltern Abwandlungen dieser Grundfarben erstellen. Ändert man die Primärfarbe in den Divi 5 Variablen später, ändert sich auch die Abwandlung passend.

Divi Loop Builder Ansicht: Blog-Grid zeigt abgestufte Primary Color auf Kacheln — Die Hintergrundfarbe des Bloglayouts mit den Divi 5 Farbvariablen festlegen.

Feinschliff: Abstände, Rundungen und Schriftgrößen

Zum Abschluss passe Innenabstände (Padding), Rahmenradius und Schriftgrößen an:

Innenabstand: 24px links/rechts für eine luftige Kachel
Runde Ecken: 20px in der Spalte
Spaltenabstand: 10px über Flexbox-Optionen

Blog-Kacheln im Divi Editor mit abgerundeten Ecken und gleichmäßigen Abständen

Wie Du die Anzahl der Beiträge oder eine Kategorie filterst

Wie im alten Blogmodul aus Divi 4 auch, kannst Du im Divi 5 Blog Loop Builder die Anzahl der angezeigten Beiträge begrenzen, nur eine bestimmte Kategorie anzeigen oder auch einzelne Blogbeiträge auswählen, die beispielsweise nur auf der Startseite und nicht auf der Blogseite angezeigt werden. Die Optionen findest Du an der Stelle, an der der Loop aktiviert wurde, um die Content-Anzeige zu supporten. In diesem Beispiel in der Zeile unter Inhalt.halt.

Ergebnis des Divi 5 Loop Builders: gefilterte Blog-Kacheln in einem 3x2 Grid mit sichtbarer Seitenleiste — Begrenze die Anzahl der angezeigten Blogbeiträge im Loop-Builder oder zeige nur Beiträge einer bestimmten Blog-Kategorie an, um das Design zu optimieren.

WooCommerce mit dem Divi 5 Loop Builder nutzen

Wenn Du einen Online-Shop mit Divi betreibst und dafür das WordPress Plugin WooCommerce nutzt, kannst Du den Divi 5 Loop Builder hierfür genauso nutzen. Lege einfach Deine Produkte mit Preisen und Inhalten an und wähle im Loop Builder statt Posts (Beiträge) Products (Produkte). Dann kannst Du die dynamischen Inhalte analog zum Vorgehen im Blog einfügen.

WooCommerce Produkt-Grid im Divi Loop Builder mit Produktnamen, Preis und Call-to-Action-Button — Erstelle jede beliebige Darstellung Deiner WooCommerce-Shop und Produktseite mit dem Divi 5 Loop Builder. Es gibt keine Begrenzungen mehr wie in Divi 4.

Praktische Tipps aus Erfahrung

Ein paar Dinge, die mir in Projekten immer wieder helfen:

Arbeite von innen nach außen: Baue zuerst die Kachel komplett, bevor Du den Loop-Builder aktivierst.
Teste responsiv: Flexbox verhält sich anders auf mobilen Ausgabegeräten — prüfe jede Breakpoint-Ebene.
Verwende die Strukturübersicht in Divi 5, wenn Divi Module verschwinden oder unerwartet verschachtelt sind.
Nutze Divi 5 Farbvariablen, damit spätere Designanpassungen zentral sind.

Die Arbeit mit dem Divi 5 Loop Builder Blog fühlt sich nach Freiheit an. Gleichzeitig musst Du diszipliniert sein, damit die Blog-Templates sauber bleiben und das Design ansprechend wirkt.

Häufige Stolperfallen und ihre Lösungen

Probleme, die Du schnell löst:

Leeres Bildmodul → Loop Featured Image nicht korrekt für den dynamischen Inhalte aktiviert.
Elemente untereinander statt nebeneinander → Flexbox im Gruppen-Modul aktivieren und Ausrichtung prüfen.
Falsche Überschriftenauszeichnung → H1 nur für die Seite verwenden, Beitragstitel in H2 formratieren

Divi Editor mit hervorgehobener Gruppe und Bearbeitungs-Tooltip, zeigt Modulstruktur

Divi 5 Blog-Layout Download: Fertige Layouts nutzen

Lade Dir kostenlose Layouts für Deinen Blog in Divi 5 herunter. Die json-Datei kannst Du einfach in Deiner Divi-Bibliothek importieren.

Divi 5 Blog Loop Layouts bieten neue Möglichkeiten zur Gestaltung und Verbesserung des Content.

Divi 5 Blog Loop Layouts herunterladen.

Divi 5 WooCommerce-Shop Loop Layouts herunterladen.

Divi-Editor zeigt mehrere fertige Loop-Layouts: Karten-Grid oben und Listen-Kacheln unten — Auf den Seiten von Elegant Themes kannst Du Dir fertig umgesetzte Layouts für den Divi 5 Loop Builder kostenlos herunterladen.

So testest Du Dein Loop-Layout richtig

Checklist für Tests:

Desktop, Tablet, Mobile prüfen
Beitrag ohne Featured Image im Backend testen
Mehrere Kategorien und Beiträge unterschiedlicher Länge testen
Produktseiten prüfen, wenn WooCommerce im Spiel ist

Divi 5 Editor: klare Ansicht des Blog-Grid-Layouts mit rechter Einstellungsleiste — Das fertig umgesetzt Divi 5 Loop Blog-Layout aus dem YouTube-Tutorial. Abonniere den Kanal jetzt für alle Updates.

Loop Beispiele für Einsatzszenarien

Typische Einsatzfälle der neuen Technik:

Startseite: Drei hervorgehobene Beiträge mit Button
Blog-Archiv: Zwei- oder dreispaltiges Grid
Shop-Highlight: Produktkarten mit Preis und Kauf-CTA, um das Design der Verkaufswebseiten zu verbessern.
Kategorie-Übersicht: Custom-Design pro Kategorie, um die Webseiten ansprechend zu gestalten.

Mit dem Divi 5 Loop Builder Blog baust Du alle diese Szenarien ohne zusätzlichen Code.

Gibt es Performance-Bedenken?

Nicht mehr als bei normalen Blog-Modulen. Achte auf optimierte und komprimierte Featured Images und verwende Lazy Load. Bei sehr großen Loops kann Caching helfen.

Fazit: Warum Du heute mit Divi 5 starten solltest

Der Divi 5 Loop Builder Blog ist ein echter Gamechanger. Er macht dynamische Layouts zugänglich, reduziert den Bedarf an CSS und beschleunigt den gesamten Blog-Workflow. Für Designer, Entwickler und Website-Betreiber bedeutet das weniger Frust und mehr Design-Freude. Probiere es aus, arbeite mit variablen Farben und Divi 5 Group Modules, und Du wirst sehen, wie schnell Du professionelle Blog- und Shop-Layouts in Divi 5 bauen kannst. Auch mit Konkurrenten wie Elementor oder Bricks ist Divi 5 dank seines neuen Systems längst auf Augenhöhe.

Mehr erfahren: Divi 5 vs. Elementor — Welcher WordPress Page Builder ist besser für Deine Website?