Was ist der Loop Builder in Divi 5?
Der Loop Builder ist ein neues Feature in Divi 5 mit dem du endlich ein eigenes Design für deine Blogübersicht erstellen kannst. Während die Designmöglichkeiten mit dem Standard-Blogmodul sehr eingeschränkt sind, kannst du mit dem Loop Builder dein Bloglayout komplett frei gestalten. Die Inhalte werden dabei über dynamische Elemente hinzugefügt – also Titel, Beitragsbilder, Kategorien oder Textauszüge.
In diesem Tutorial zeige ich dir Schritt für Schritt, wie du mit dem Loop Builder dein individuelles Bloglayout erstellen kannst.
Tutorial als Video anschauen
Du siehst gerade einen Platzhalterinhalt von Standard. Um auf den eigentlichen Inhalt zuzugreifen, klicke auf den Button unten. Bitte beachte, dass dabei Daten an Drittanbieter weitergegeben werden.
Weitere InformationenBeispiel: Blog als Liste
Das Listenlayout erstellen
Beginne mit dem Design deiner Liste. Du kannst es nach deinen Wünschen gestalten. Dabei fügst du die Elemente, die du nutzen möchtest, zunächst als Platzhalter ein; wir ordnen sie später dem passenden dynamischen Inhalt zu.
- Bild für unser Featured Image
- Heading – für den Blogtitel
- 1 Textmodul für die Meta-Daten (falls gewünscht)
- 1 Textmodul für den Textauszug
- 1 Textmodul oder Button für „mehr lesen“
Loop aktivieren und dynamische Inhalte zuordnen
Als nächstes aktivieren wir die Loop-Funktion. Damit stehen uns dann auch die dynamischen Inhalte zur Verfügung, die wir später benötigen:
- Gehe in die Einstellungen der Zeile
- Aktiviere die Option „Loop“ im ersten Reiter unter Content
- Wähle als Posttype: Beiträge
- Wähle eine Kategorie, falls du nur eine bestimmte Kategorie anzeigen lassen möchtest. Ansonsten einfach leer lassen
Sobald du den Loop aktiviert hast, wird deine Vorlage vervielfacht. Du hast jetzt immer noch deine Platzhalter sichtbar.
Im nächsten Schritt ordnest du die dynamischen Inhalte zu, jeder Beitrag in deinem Loop wird dann sofort aktualisiert.
Dynamische Elemente finden
Das Symbol, das wie ein Stapel Münzen aussieht – hier im Screenshot gelb markiert – ist das Symbol, das du für das hinzufügen der dynamischen Inhalte benötigst.
Gehe als erstes in die Einstellungen deines Bildes. Statt ein Bild hinzuzufügen, klickst du auf das Symbol und findest hier „Loop Featured Image“. Mit einem Klick darauf werden allen deinen Beiträgen die jeweiligen Bilder zugeordnet.
Du siehst jetzt schon, dass jede Veränderung, die du am Inhalt oder Design vornimmst, auf alle Beiträge innerhalb des Loops angewendet werden.
Alle weiteren dynamischen Elemente zuordnen:
Gehe jetzt in die Einstellungen der einzelnen Elemente. Du findest hier immer auch das Symbol für die dynamischen Inhalte. Wähle entsprechend aus:
- für das Modul Heading – Loop Posttitel
- Für die Meta-Daten gibt es eine Besonderheit: du kannst immer nur ein dynamisches Element zuordnen. Du kannst also entscheiden Loop Publish Date für das Datum zu verwenden oder z.B. Loop Post Terms für die Kategorien. Wenn du mehrere Daten in einer Zeile anzeigen lassen möchtest, kannst du es vielleicht mit einer nested row probieren, wo du dann mehrere Spalten zur Verfügung hast.
- Um einen Textauszug anzeigen zu lassen – Loop Excerpt. Hier kannst du noch die Wortanzahl einstellen, um es passend für dein Layout zu haben.
- Für „mehr lesen“ kannst du entweder ein Textmodul verwenden und diesen Text so vorgeben oder auch ein Blogmodul. In beiden Fällen gehst du in die Einstellungen (Reiter Content) und öffnest dann „Link“. Bei Module Link URL wählst du „Loop Link“. Dies kannst du auch für das Bild und für Heading noch einstellen, dann wird alles entsprechend zum Blogbeitrag verlinkt.
Achtung: Wenn deine Blogbeiträge mit dem Divi-Builder erstellt sind, werden (Stand September 2025) keine automatischen Textauszüge erstellt. Versuche in diesem Fall im Dashboard deine Beitrags manuell einen Textauszug hinzuzufügen. Zuverlässig funktioniert es momentan, wenn deine Beiträge mit dem Gutenberg-Editor von WordPress erstellt sind.
Stelle dein Design fertig
Jetzt hast du alle Elemente hinzugefügt. Gestalte deine Blogliste jetzt nach deinen Wünschen. Alles was du in einem Element änderst, wird automatisch in allen anderen auch geändert.
Blog als Grid
Wenn du deine Blogansicht als Grid haben möchtest, müssen wir beim Layout noch etwas beachten.
Wähle z.B. das 3-Spaltenformat und gestalte die erste Spalte nach deinen Wünschen. Hier ist auch interessant, das Group Module zu verwenden.
Wenn du alle Platzhalter hinzugefügt hast, müssen wir wieder unseren Loop aktivieren. Diesmal nicht direkt in den Zeileneinstellungen, sondern in den Einstellungen der Spalte.
Nachdem du es aktiviert hast, wird dein Layout ungefähr so aussehen – das korrigieren wir gleich.
Gehe dazu wieder zurück und öffne jetzt die Einstellungen der Zeile.
- Wechsle zum Tab Design
- Gehe zu „Layout“
- stelle sicher, dass als Layout-Style Flex eingestellt ist
- und finde hier den Punkt „wrapping“
Sobald du das aktiviert hast, wird dein Layout wieder richtig angezeigt.
Designen und abschließen
Deine nächsten Schritte sind die gleichen wie oben beim Listenlayout. Du ordnest die Dynamischen Elemente entsprechend zu und passt das Design noch deinen Wünschen an.
Weitere Tutorials zu Divi 5
Hier auf meinem Blog findest du weitere Tutorials zum Divi 5. Oder schau auch gerne auf meinem Youtube-Kanal vorbei.
- Zum Youtube-Kanal
- Meine Erfahrungen mit Divi 5 / Mit Bugs und Übersicht der neuen Features
0 Comments