Wie du ein Team-Verzeichnis mit Divi 5’s Loop Builder erstellst

Mit der Loop Builder-Funktion in Divi 5 kannst du ganz einfach ein responsives Grid erstellen — und das mit der kostenlosen Version von Advanced Custom Fields (ACF). In diesem Beitrag zeigen wir dir, wie du ACF konfigurierst, CSS Grid einrichtest und den Loop Builder nutzt, um ein Team-Portfolio-Grid in weit unter einer Stunde zu bauen.

Inhaltsverzeichnis

• Was ist Loop Builder?
• Wie du ein Team-Verzeichnis mit Loop Builder baust
• Schritt 1: ACF konfigurieren
• Schritt 2: Den Loop erstellen
• Schritt 3: Spalte gestalten (stylen)
• Schritt 4: Inhalt zur Spalte hinzufügen
• Schritt 5: Layout für kleine Bildschirme anpassen
• Nutze den Divi 5 Loop Builder noch heute!

Was ist Loop Builder?

Der Loop Builder von Divi 5 ist ein Feature, mit dem du dynamische, wiederholbare Layouts direkt im Visual Builder oder Theme Builder erstellen kannst. Damit umgehst du die Einschränkungen von Divis standardmäßigen Blog- und Portfolio-Modulen. Im Gegensatz zu traditionellen Modulen bietet der Loop Builder volle Kontrolle über Abfragen (Queries) und Designs — und das für nahezu jeden Inhaltstyp.

Du kannst Beiträge (Posts), Begriffe (Terms), Nutzer (Users) oder Custom Post Types durchlaufen — z. B. Projekte oder, wie in diesem Tutorial, Team-Mitglieder — und dynamische Daten mühelos einbinden. Style dabei nur eine Karte (Card) im Loop: Alle weiteren Elemente übernehmen automatisch dieses Design, was dir stundenlange manuelle Anpassungen spart. Durch die Einbindung von Flexbox und CSS Grid kannst du auch fortgeschrittene Layouts wie Masonry-Grids oder Karussells (z. B. mit dem Group Carousel Modul) umsetzen — für perfekt symmetrische Arrangements.

Der Loop Builder funktioniert sowohl auf einer normalen Seite im Visual Builder als auch global im Theme Builder — ideal für skalierbare und wartbare Websites.

Wie du ein Team-Verzeichnis mit Loop Builder baust

In diesem Tutorial erstellen wir einen Custom Post Type für Team-Mitglieder mit der kostenlosen Version von ACF. Im Folgenden führen wir Schritt für Schritt durch die Einrichtung von ACF — inklusive Post Type, Feldgruppe und Custom Fields — sowie durch den eigentlichen Loop. Am Ende weißt du, wie man ein vollständig responsives Team-Verzeichnis erstellt, das du auf jeder Divi-Website einsetzen kannst.

Schritt 1: ACF konfigurieren

1. Installiere und aktiviere das Plugin Advanced Custom Fields (ACF) auf deiner Divi-Website.
2. Gehe zu ACF → Post Types und klicke auf + Add Post Type, um einen neuen Post Type anzulegen:
• Plural Label: Teams
• Singular Label: Team Member
• Post Type Key: team_member
• Taxonomies: Category
• Vergewissere dich, dass Public aktiviert ist.
3. Aktiviere unter Erweiterte Konfiguration (Advanced Configuration) im General-Tab folgende Optionen: Featured Image, Titel, Editor, Auszug (Excerpt) und Custom Fields.
4. Klicke auf Save Changes. Der neue Post Type sollte danach in der linken Toolbar erscheinen.
5. Erstelle jetzt eine neue Feldgruppe: Gehe zu ACF → Field Groups → + Add Field Group und nenne sie z. B. Team Member Details. Unter Settings wähle als Regel: Post Type → is equal to → Team Member. Speichern.
6. Lege nun die Custom Fields an. Beispielhafte Felder könnten sein:

Feld Label	Feld Name	Feld Typ
Position / Title	position_title	Text
Bio	member_bio	Text Area
Email Address	member_email	Email
Phone Number	member_phone	Text
LinkedIn URL	linkedin_url	URL
Facebook URL	facebook_url	URL
Instagram URL	instagram_url	URL

7. Nach dem Anlegen aller Felder: Save Changes.
8. Erstelle anschließend den ersten Team-Mitglied Eintrag: Team Members → Add New Team Member. Vergib hier Titel und ein Featured Image und fülle die Custom Fields mit den entsprechenden Informationen aus.
9. Wiederhole diesen Schritt für alle Team-Mitglieder, die du in deinem Verzeichnis haben willst.

Schritt 2: Den Loop erstellen

1. Erstelle eine neue Seite in Divi oder öffne eine bestehende — z. B. deine „Über uns“-Seite.
2. Füge eine neue Flex-Row mit einer einzigen Spalte hinzu.
3. Öffne die Einstellungen der Row, öffne das Elemente-Menü und klicke das Edit-Icon der Column.
4. Gehe in das Loop-Menü und aktiviere Loop Element.
5. Belasse bei „Query Type“ die Einstellung Post Type und wähle bei „Post Type“ deinen zuvor angelegten Custom Post Type (Team Member).
6. Wenn du willst, kannst du über „Only Include Posts With Specific Terms“ bestimmte Kategorien auswählen — z. B. nur bestimmte Teams.
7. Lege bei „Posts Per Page“ z. B. 12 fest (oder eine andere Zahl — je nachdem, wie viele Mitglieder du zeigen willst).
8. Wechsle anschließend zum Design-Tab der Row: Setze das Layout auf Grid, definiere z. B. 20 px vertikalen und horizontalen Abstand (Gap) und wähle z. B. 3 Spalten (Columns).

Schritt 3: Spalte gestalten (Styling)

Nun kannst du die Spalte, die den Inhalt enthält, gestalten:

• Innerhalb der Column → Design → Spacing: z. B. 25 px Padding auf allen Seiten.
• Im Border-Menü: 20 px Border-Radius, 1 px Border-Width und als Farbe z. B. #cfcfcf.
• Im Hintergrund (Background): Farbe #ffffff setzen.

Schritt 4: Inhalt zur Spalte hinzufügen

1. Füge innerhalb der Column ein Image Module hinzu.
2. Klicke auf das Dynamic Content Icon und wähle Loop Featured Image. Style das Bild nach Wunsch.
3. Füge ein Heading Module hinzu und setze den dynamischen Inhalt auf Loop Post Title (für den Namen des Team-Mitglieds).
4. Füge ein weiteres Heading Module hinzu und wähle als dynamischen Inhalt ein Custom Field — z. B. Position / Title.
5. Füge ein Text Module hinzu, wähle bei Dynamic Content ein Custom Field, z. B. die Bio des Mitglieds.
6. Um Social Icons oder Kontaktinfos hinzuzufügen: Füge eine Nested Row (geschachtelte Zeile) mit mehreren Spalten hinzu — z. B. 5-Spalten-Row für unterschiedliche Icons/Links.
7. Im Nested Row → Design: z. B. Horizontal Gap 10 px, Align Items auf Center setzen.
8. In jede Spalte der Nested Row: Füge ein Icon Module hinzu, z. B. ein E-Mail-Icon, und weise mit Dynamic Content das passende Custom Field zu (z. B. E-Mail-Adresse, LinkedIn, Social-Profile etc.).
9. Du kannst Icon-Module kopieren und nur Icon und dynamisches Feld anpassen, um schnell mehrere Icons zu platzieren.
10. Optional: Passe das vertikale Spacing an, und setze ggf. in der Row-Einstellung „Justify Content“ auf „Space Between“, damit die Karten gleichmäßig verteilt sind.
11. Speichere am Ende das Layout im Visual Builder.

Schritt 5: Layout für kleine Bildschirme anpassen

Letzter Schritt: Sorge dafür, dass dein Team-Verzeichnis auf mobilen Geräten gut aussieht. Mit Divi 5 kannst du bis zu 7 Breakpoints aktivieren:

1. Öffne das Drei-Punkte Menü oben im Visual Builder und aktiviere die gewünschten Breakpoints.
2. Speicher das Layout.
3. Du kannst auch mit dem Responsive Editor auf Section-, Row-, Column- oder Modulebene arbeiten — um z. B. Anzahl der Spalten, Spaltenbreite (Column Span) oder andere Einstellungen je Gerätetyp anzupassen.
4. Insbesondere: Passe für kleinere Geräte die Anzahl der Columns an, ändere ggf. Spaltenbreite, Abstände, Padding etc., damit alles schön responsiv bleibt.

Nutze den Divi 5 Loop Builder noch heute!

Mit dem Loop Builder reicht eine einmalige Einrichtung — und du kannst unendlich viele Use-Cases wie Team-Verzeichnisse, Portfolios, Testimonials, Produktlisten etc. realisieren. Tausche einfach Post Types aus, ändere Abfragen (Queries) oder re-use Layouts auf deiner gesamten Seite. Dein Team-Verzeichnis ist damit professionell, responsiv und leicht aktualisierbar — perfekt für wachsende Teams.

Viel Spaß beim Ausprobieren!