In diesem Beitrag erkläre ich dir, wann du das klassische Blog-Modul von Divi verwenden solltest und wann der neue Loop Builder aus Divi 5 die bessere Wahl ist. Dieses Thema habe ich ursprünglich in einem Video auf dem Elegant Themes Kanal behandelt — dort habe ich (Ankit) die Unterschiede, typische Einsatzszenarien und praktische Schritte zur Gestaltung dynamischer Feeds demonstriert. Hier bekommst du eine strukturierte, erweiterte und praktisch orientierte Anleitung in Textform, damit du genau weißt, welches Werkzeug dein Projekt optimal unterstützt.
Überblick: Warum es zwei Tools gibt
Divi 5 bietet zwei Ansatzpunkte, um Listen von Inhalten auf deiner Website anzuzeigen: das traditionelle Blog-Modul und den flexiblen Loop Builder. Beide können Beiträge dynamisch aus WordPress ziehen und präsentieren, aber sie verfolgen unterschiedliche Philosophie‑ und Design‑Ansätze.
- Das Blog-Modul ist schnell, konsistent und ideal für klassische Feeds mit Titeln, Bild, Auszügen und Metadaten.
- Der Loop Builder ist ein Baukasten: Du designst jede Kartenansicht selbst mit beliebigen Divi‑Modulen und bindest dynamische Felder an.
Die Wahl zwischen beiden Werkzeugen entscheidet darüber, wie viel Designfreiheit du brauchst, wie komplex deine Inhalte sind und wie viel Zeit du investieren möchtest.
Mini-Glossar: Begriffe, die du kennen solltest
Bevor wir tiefer einsteigen, klären wir ein paar Begriffe, die im Umgang mit Divi, Loop Builder und dynamischen Inhalten immer wieder auftauchen.
- Custom Post Type (CPT): Eine Inhaltsart, die über die standardmäßigen „Beiträge“ und „Seiten“ hinausgeht. Beispiele sind Produkte, Immobilien, Team‑Profile oder Kursseiten.
- Custom Field: Ein benutzerdefiniertes Feld, das zusätzliche Informationen zu einem Post speichert — z. B. Preis, Bewertung, Zimmeranzahl oder Allergene in einem Menü.
- Repeater Field: Ein Feldtyp, der eine Liste oder eine Gruppe von Elementen innerhalb eines einzelnen Posts speichern kann — z. B. Zutatenlisten oder Ausstattungsmerkmale.
- ACF, Pods, Meta Box, Toolset: Beliebte Plugins, um CPTs und Custom Fields zu erstellen und zu verwalten.
Teil 1: Das Blog-Modul — schnell, vertraut, eingeschränkt
Das Blog-Modul ist Divi’s „Go‑to“, wenn du einen klassischen Beitrag‑Feed brauchst. Du ziehst das Modul einfach in deine Seite, wählst die Post‑Quelle aus (z. B. Beiträge oder ein CPT) und schaltest per Toggle die sichtbaren Elemente ein oder aus: Featured Image, Titel, Kategorie, Auszug, Autor, Datum usw.
Wann das Blog-Modul ideal ist
- Wenn du in wenigen Minuten einen Standard‑Blogfeed erstellen möchtest.
- Für Unternehmensblogs, News‑Seiten oder einfache Portfolios, bei denen Besucher eine vertraute Darstellung erwarten.
- Wenn du hauptsächlich Standardfelder wie Titel, Featured Image, Auszug und Metadaten verwendest.
- Für Nutzer, die eine klare, einfache Bedienoberfläche bevorzugen und keine komplexen Bindungen benötigen.
Stärken des Blog-Moduls
- Schnelle Einrichtung: wenige Klicks, sofort sichtbar.
- Einheitliche, getestete Layouts: zuverlässig und responsiv.
- Geringe Fehlerquelle: Weniger Optionen bedeutet weniger Komplexität und weniger potenzielle Fehler.
Schwächen und Einschränkungen
Das Blog-Modul ist nicht darauf ausgelegt, beliebige Custom Fields anzuzeigen oder stark angepasste Layouts zu realisieren. Du bist mit einer festen Struktur ausgeliefert: Titel, Bild, Auszug, Metadaten in vordefinierten Positionen. Möchtest du Elemente neu anordnen, zusätzliche Felder wie Social Links, Zertifikate oder spezielle Attributes anzeigen oder komplett andere Karten‑Layouts bauen, stößt du schnell an Grenzen. In vielen Fällen wäre dann custom CSS oder ein anderes Modul nötig.
Teil 2: Der Loop Builder — modular, flexibel, leistungsstark
Der Loop Builder ist nicht ein einzelnes Modul, sondern ein Container, der dein eigenes Karten‑Layout für jeden Eintrag wiederholt. Du baust mit Divi‑Modulen (Bild, Überschrift, Text, Button, etc.) eine Vorlage — und verbindest jede Komponente dynamisch mit Daten aus dem jeweiligen Beitrag oder Custom Field.
Wie der Loop Builder funktioniert
- Erstelle einen Loop‑Container auf deiner Seite.
- Füge innerhalb dieses Containers beliebige Divi‑Module hinzu: Bild, Headline, Text, Button, Icon, etc.
- Binde jedes Modul an dynamische Inhalte: Bild → Featured Image, Headline → Post Title, Text → Custom Field oder Excerpt, Button → Post URL.
- Der Loop wiederholt diese Struktur automatisch für jeden passenden Post (Beiträge oder CPTs).
Das Ergebnis: Jedes Kartenlayout ist komplett individuell gestaltbar — vom Aufbau über die Typografie bis hin zur Positionierung der Elemente.
Darum ist Loop Builder so mächtig
- Du kontrollierst exakt, welche Daten angezeigt werden — inklusive Custom Fields und Repeater Fields.
- Mit Divi‑Modulen kannst du beliebige Komponenten in die Schleife integrieren (z. B. Ratings, Icons, Kacheln, CTA‑Buttons).
- Das gleiche Layout kannst du leicht für verschiedene Post‑Typen wiederverwenden, indem du die Datenbindung änderst.
- Kein festes Template‑Layout: Du bestimmst Reihenfolge und Anordnung ohne CSS‑Hacks.
Praktische Beispiele: Wie du Loop Builder für verschiedene Inhalte nutzt
Hier zeige ich ein paar konkrete Szenarien, in denen der Loop Builder seine Stärken ausspielt.
1. Standard‑Blog mit eigener Karte
Anstatt die Standards des Blog‑Moduls zu akzeptieren, kannst du mit Loop Builder eine Karte konstruieren, die sich deutlich unterscheidet: Titel, Kategorie, Veröffentlichungsdatum und Featured Image in einer asymmetrischen Anordnung — alles responsiv und pixelgenau.
2. Immobilienliste
Ein typischer Bereich, in dem Loop Builder brilliert: Erstelle eine Karten‑Vorlage mit:
- Überschrift → Titel der Immobilie
- Textmodul → Schlafzimmer, Badezimmer, Quadratmeter (aus Custom Fields)
- Button → Link zur Detailseite
- Bild → Galerie oder Featured Image
Mit ACF oder Pods lassen sich diese Felder komfortabel verwalten und direkt per Loop binden.
3. E‑Commerce Produktraster
Produkte benötigen oft Preis, Verfügbarkeit, Bewertung und CTA. Der Loop Builder erlaubt dir, genau diese Felder in der Kartenstruktur zu platzieren — kombiniert mit Add‑to‑Cart‑Buttons oder Schnellansicht‑Modulen.
4. Kurs‑ oder Mitgliederübersicht
Für Bildungssites kannst du Kursdauer, Preis, Level oder Bewertungen aus Custom Fields in die Karte holen und ansprechende Layouts erstellen, die Nutzer konvertieren.
Loop Builder + Flexbox: So entstehen professionelle Layouts ohne CSS
Eine der größten Neuerungen in Divi 5 ist die tiefe Integration von Flexbox. Kombiniert mit dem Loop Builder ergeben sich damit extrem flexible, responsive und saubere Layouts — ganz ohne eigene CSS‑Regeln.
Schritt‑für‑Schritt: Grid mit Flexbox im Loop Builder
- Äußeren Loop‑Container stylen: Aktiviere Flex, setze die Richtung auf Row und aktiviere Wrap für mehrere Reihen. Passe den Gap‑Wert an, um Abstand zwischen den Karten zu erzeugen.
- Innere Struktur anpassen: Wähle die Spalte oder das Gruppenmodul innerhalb der Loop‑Karte und stelle Flex Richtung auf Row, wenn Bild und Text nebeneinander stehen sollen.
- Sizing festlegen: Verteile das Verhältnis (z. B. Bild 50 %, Text 50 %) über die Flex‑Basis/Size Optionen der untergeordneten Module.
- Responsivität: Wechsle zu Tablet/Mobilansicht und passe Richtung und Größe an — etwa indem du auf Mobil die Richtung auf Column stellst, damit Bild über Text erscheint.
Dieses Vorgehen führt zu sauberen, konsistenten Kartenrastern, die in allen Bildschirmgrößen gut aussehen, ohne dass du eigenes CSS schreiben müsstest.
Entscheidungshilfe: Wann welches Tool verwenden?
Hier eine kompakte Entscheidungsübersicht, die du in deiner täglichen Projektarbeit nutzen kannst.
Wähle das Blog‑Modul, wenn:
- Du ein Standard‑Feed brauchst: Titel, Bild, Auszug, Datum, Autor.
- Du wenig Zeit hast und eine sofortige Lösung möchtest.
- Deine Inhalte keine speziellen Custom Fields benötigen.
- Du eine einfache, benutzerfreundliche Oberfläche bevorzugst.
Wähle den Loop Builder, wenn:
- Du Custom Post Types mit individuellen Feldern nutzt (z. B. Immobilien, Produkte, Kurse).
- Du einzigartige Kartenlayouts brauchst, die nicht dem Standard entsprechen.
- Du Repeater Fields oder komplexe Datenstrukturen darstellen willst.
- Du volle Kontrolle über Design und Anordnung der Module willst — inklusive Flexbox‑Layouts.
Tipps für die Praxis: Effizienter Workflow mit Divi 5
Ein paar praktische Empfehlungen, damit deine Arbeit mit Loop Builder und Blog‑Modul geschmeidig läuft:
- Baue wiederverwendbare Vorlagen: Erstelle Loop‑Vorlagen als Global oder Library Items, die du auf mehreren Seiten nutzen kannst.
- Nutze ACF/Pods klug: Definiere saubere Feldnamen und Feldgruppen — das macht die Bindung im Loop Builder eindeutig und wartbar.
- Teste Responsivität früh: Setze dir Breakpoints und prüfe schon beim Design, wie Karten in verschiedenen Größen reagieren.
- Beginne mit dem mobilen Layout: Oft ist es einfacher, die Struktur zuerst auf Mobil zu definieren und dann für Desktop zu erweitern.
- Performance im Blick behalten: Große Bildmengen können Feeds verlangsamen — nutze Bildoptimierung und Lazy Loading.
Integration mit ACF und anderen Plugins
Der Loop Builder ist dafür gemacht, mit populären Custom‑Field‑Plugins wie ACF, Pods oder Meta Box zusammenzuarbeiten. Sobald deine Felder definiert sind, bindest du sie in Divi an — ganz ohne zusätzliche Code‑Mapping.
Praktische Hinweise:
- Verwende aussagekräftige Feldnamen (z. B. price, bedrooms, rating), damit du sie leicht im Divi‑Interface findest.
- Repeater Fields kannst du in Loop Templates per Sub‑Loop oder durch selektive Ausgabe innerhalb einer Karte darstellen.
- Wenn du mehrere Post‑Typen mischst, achte darauf, dass die Felder vorhanden sind oder stelle Fallback‑Texte/Bilder bereit, um leere Felder elegant zu behandeln.
Häufige Fehler und wie du sie vermeidest
- Fehlende Felder: Füge Fallbacks hinzu (z. B. Standardbild), damit Layouts bei fehlenden Custom Fields nicht kaputtgehen.
- Unklare Feldnamen: Einheitliches Naming spart Zeit beim Binden und bei der Fehlerbehebung.
- Performance‑Probleme: Nutze Bildoptimierung, Pagination und Lazy Load für große Feeds.
- Responsivität ignoriert: Teste alle Breakpoints, besonders bei Flexbox‑Layouts.
FAQ — Häufige Fragen
Kann das Blog‑Modul Custom Fields anzeigen?
Standardmäßig zeigt das Blog‑Modul keine benutzerdefinierten Felder, außer es handelt sich um sehr einfache CPT‑Setups, die den Standard‑Post‑Content nutzen. Für individuelle Felder ist der Loop Builder die bessere Wahl.
Brauche ich Programmierkenntnisse für den Loop Builder?
Nein. Der Loop Builder arbeitet visuell mit Divi‑Modulen. Du bindest Felder per Auswahl an, und Flexbox‑Einstellungen sind per UI steuerbar. Für sehr spezielle Datenmanipulationen kann jedoch ein wenig PHP oder Custom Shortcode nötig werden, ist aber in vielen Fällen nicht erforderlich.
Wie skaliert der Loop Builder bei vielen Einträgen?
Der Loop Builder ist für beliebig viele Einträge ausgelegt, aber performance‑technisch gelten dieselben Regeln: Pagination, Caching und optimierte Bilder sind entscheidend, damit große Feeds schnell laden.
Kann ich die gleiche Loop‑Vorlage für unterschiedliche Post‑Typen verwenden?
Ja. Du kannst das Design wiederverwenden und lediglich die Datenbindung anpassen (z. B. andere Custom Fields für Immobilien vs. Produkte).
Wann sollte ich noch zusätzliches CSS verwenden?
In den meisten Fällen reicht die Divi‑UI. Falls du Spezialeffekte, sehr feine Typografie‑Tweaks oder browserübergreifende Fallbacks brauchst, kann Custom CSS sinnvoll sein. Aber für viele Layouts genügt Loop Builder + Flexbox vollständig.
Fazit: Beide Tools gehören in dein Toolkit
Zusammengefasst: Das Blog‑Modul ist dein schneller, zuverlässiger Weg zu klassischen Feeds — perfekt für einfache Blogs oder Portfolios. Der Loop Builder dagegen ist das Schweizer Taschenmesser für maßgeschneiderte, datengetriebene Karten und komplexe Inhalte. Wenn du Flexibilität, Custom Fields oder einzigartige Layouts brauchst, wirst du den Loop Builder lieben. Beide Tools zusammen geben dir die Wahl: schnell und konservativ oder kreativ und maßgeschneidert.
Meine Empfehlung: Halte beide Optionen bereit. Starte mit dem Blog‑Modul für einfache Fälle und greife zum Loop Builder, sobald Inhalte komplexer werden oder du ein individuelles Design umsetzen willst. Wenn du Divi 5 und seine Public Alpha ausprobierst, wirst du sehen, wie Loop Builder und Flexbox deinen Workflow auf ein neues Level bringen.