Mit der neuesten Version von Divi, Divi 5, eröffnet sich Dir eine völlig neue Welt an Gestaltungsmöglichkeiten – vor allem durch die sogenannten nested rows oder verschachtelten Zeilen. Wenn Du wie ich schon oft an Layouts gesessen hast und Dir gewünscht hast, flexiblere und modernere Designs mit weniger Aufwand umzusetzen, dann wirst Du Divi 5 lieben. Hier zeige ich Dir, wie Du mit den verschachtelten Zeilen in Divi 5 nicht nur moderne Personal Cards bauen kannst, sondern auch wie Du dadurch viel Zeit sparst und Deine Website auf ein neues Level hebst.
Inhaltsverzeichnis
- Was sind Divi 5 Nested Rows überhaupt?
- Warum verschachtelte Zeilen so wichtig für Dein Webdesign sind
- Schritt-für-Schritt: So baust Du eine Personal Card mit Divi 5 Nested Rows
- Warum ich Divi 5 Nested Rows lieben gelernt habe
- Praktische Tipps für den Umgang mit Divi 5 Nested Rows
- Wo Du die Beispiel-Layouts herunterladen kannst
- Ausblick: Group Modules in Divi 5
- FAQ – Häufig gestellte Fragen zu Divi 5 Nested Rows
- Fazit – Divi 5 Nested Rows sind ein Must-Have für modernes Webdesign
Was sind Divi 5 Nested Rows überhaupt?
Okay, lass uns erstmal klären, worum es hier eigentlich geht. In Divi 5 ist es jetzt möglich, innerhalb einer Zeile weitere Zeilen einzufügen – also Zeilen in Zeilen. Klingt erstmal simpel, aber das ist ein echter Gamechanger. Bis jetzt war es oft ein Krampf, komplexe Layouts zu bauen, bei denen Du zum Beispiel in einer Spalte mehrere unterschiedliche Abschnitte nebeneinander oder übereinander anordnen wolltest. Meistens musste man dafür mit CSS-Tricks arbeiten oder aufwändige Workarounds bauen.
Mit den verschachtelten Zeilen kannst Du jetzt direkt im Divi Builder modular und flexibel Layouts bauen, die viel moderner aussehen und vor allem viel leichter zu bearbeiten sind. Das bringt Dir nicht nur mehr kreative Freiheit, sondern macht Deine Arbeit auch effizienter.
Die Personal Cards als Beispiel für einen Anwendungsfall der neuen nested rows in Divi 5.
Die Struktur der nested rows in der Wireframe Ansicht von Divi 5. Hier sind einer Zeile Module, aber auch weitere Zeilen als nested rows zugeordnet.
Warum verschachtelte Zeilen so wichtig für Dein Webdesign sind
Ich erinnere mich noch gut an meine ersten Projekte mit Divi. Da habe ich oft Stunden damit verbracht, Layouts zu bauen, die eigentlich ganz einfach sein sollten – aber die Technik hat mir einen Strich durch die Rechnung gemacht. Zum Beispiel, wenn ich eine Personal Card bauen wollte, die aus Bild, Text, Social Icons und Buttons besteht. Die Anordnung nebeneinander und übereinander war nur mit kompliziertem CSS möglich.
Mit Divi 5 und den verschachtelten Zeilen kannst Du jetzt genau solche Layouts einfach umsetzen. Du sparst Dir das ständige Hantieren mit CSS, kannst alles direkt im Builder per Drag & Drop anpassen und das Ergebnis sieht richtig professionell aus.
Schritt-für-Schritt: So baust Du eine Personal Card mit Divi 5 Nested Rows
Ich nehme Dich jetzt mit durch ein konkretes Beispiel, das ich selbst gebaut habe. Du kannst die Beispiel-Layouts übrigens auch herunterladen – den Link findest Du weiter unten. So kannst Du direkt loslegen und die Struktur im Detail nachvollziehen.
1. Neue Zeile mit drei Spalten anlegen
Als erstes legst Du eine neue Zeile mit einer Struktur aus drei Spalten an. Das ist der Rahmen für Deine Personal Card. In der linken Spalte kommt das Bild, in der mittleren und rechten Spalte später der Text und weitere Elemente.
2. Bild-Modul einfügen
Jetzt fügst Du in der linken Spalte ein Bild-Modul ein. Wähle ein passendes Bild aus Deiner Mediathek aus. Das Bild wird die Basis für Deine Personal Card sein.
3. Verschachtelte Zeile unter dem Bild einfügen
Hier kommt der Clou: Unter dem Bild fügst Du jetzt innerhalb des Bild-Moduls eine verschachtelte Zeile ein. Das machst Du, indem Du im Modul auf das Plus-Symbol klickst und „New Row“ auswählst, anstatt ein neues Modul einzufügen.
Für unser Beispiel brauchst Du eine zweispaltige verschachtelte Zeile. Diese kannst Du auswählen und einfügen.
Die Wireframe Ansicht in Divi 5 mit einer nested row, die unterhalb eines Bild-Moduls eingefügt ist.
4. Zeilenabstände anpassen – mit Copy & Paste der Designattribute
Ein kleiner Stolperstein ist oft, dass die verschachtelte Zeile nicht direkt am Bild anliegt, sondern zu weit unten liegt. Hier hilft die neue Funktion in Divi 5, mit der Du Designattribute wie Margin (Außenabstand) kopieren und exakt einfügen kannst.
Das geht so: Du klickst mit der rechten Maustaste auf die Zeile, von der Du die Einstellungen übernehmen willst, und wählst „Copy Attributes“. Dann fügst Du diese in die neue Zeile ein und kannst sogar filtern, welche Attribute übernommen werden sollen – zum Beispiel nur die Designwerte, ohne den Inhalt.
Ich habe das selbst ausprobiert und es funktioniert super präzise. So kannst Du schnell ein konsistentes Design erzeugen, ohne alle Abstände und Stile manuell einzustellen.
Das neue Attribute Management in Divi 5. Du kannst die Attribute (Modul-Stile) kopieren und gefiltert in das neu erstellte Modul einfügen.
5. Bild abrunden und Schatten hinzufügen
Damit die Personal Card richtig schick aussieht, rundest Du das Bild noch ab und fügst einen kleinen Schatten hinzu. Auch hier kannst Du die Einstellungen von einem bestehenden Bild kopieren und auf das neue Bild anwenden. Das spart enorm viel Zeit und sorgt für ein einheitliches Erscheinungsbild.
6. Social Media Icons und Buttons hinzufügen
Jetzt brauchst Du natürlich noch die Social Media Icons und einen Button, zum Beispiel „Kontakt“ oder „Mehr erfahren“. Auch diese Module kannst Du einfach kopieren und in die verschachtelte Zeile einfügen. So bleibt alles konsistent.
Für die Anordnung von Button und Text nebeneinander ist es jetzt nicht mehr notwendig, komplizierte CSS-Regeln zu schreiben. Divi 5 erlaubt es, solche Layouts direkt über die verschachtelten Zeilen zu realisieren.
Das Webdesign der Personal Cards wird in Divi 5 zum Kinderspiel.
7. Feinjustierung der Spaltenbreiten und Abstände
Manchmal siehst Du kleine weiße Zwischenräume, die Du nicht möchtest. Das liegt oft an der Spaltenbreite oder den Margins der Zeilen. Hier kannst Du in den Design-Einstellungen der Zeile den Spaltenabstand anpassen oder die Abstände manuell verändern. So passt alles perfekt zusammen.
Bei den nested rows ist zu beachten, dass der Spaltenabstand der umfassenden Zeile Auswirkungen auf die innerhalb liegenden Zeilen hat. In diesem Beispiel besteht noch eine Lücke zur blauen Zeile, der Spaltenabstand noch auf drei steht und auf zwei verkleinert werden muss.
Warum ich Divi 5 Nested Rows lieben gelernt habe
Ich persönlich habe mit Divi 5 nested rows schon unzählige Layouts gebaut und es ist jedes Mal ein gutes Gefühl, wie viel einfacher und flexibler das Ganze geworden ist. Früher musste ich Stunden damit verbringen, CSS zu schreiben, um einfache Designs nebeneinander zu platzieren. Heute kann ich das direkt im Builder machen und mich auf das Wesentliche konzentrieren – das Design und die Inhalte.
Außerdem ist es viel einfacher, Änderungen vorzunehmen. Wenn Du mal ein Element austauschen oder verschieben willst, klickst Du einfach im Builder und ziehst es an die neue Position. Keine Angst mehr vor kaputtem Layout oder komplizierten Stylesheets.
Ein weiterer Vorteil: Du kannst Deine Layouts viel besser strukturieren und übersichtlich halten. Besonders bei größeren Projekten, wie Teamseiten, Preisübersichten oder Produktdarstellungen, merkst Du den Unterschied sofort.
Praktische Tipps für den Umgang mit Divi 5 Nested Rows
- Arbeite mit Kopieren & Einfügen von Designattributen: Nutze die neue Funktion, um Stile schnell und konsistent zu übertragen. Das spart viel Zeit.
- Teste die Drahtgitteransicht: Hier kannst Du die Struktur Deiner verschachtelten Zeilen besser erkennen und verstehen.
- Beginne mit einfachen Layouts: Gerade wenn Du neu bist, baue erst einfache verschachtelte Zeilen, bevor Du komplexe Strukturen versuchst.
- Vermeide unnötige Abstände: Kontrolliere immer die Margins und Padding, um unschöne Lücken zu vermeiden.
- Nutze vorhandene Module: Kopiere Social Icons, Buttons und Überschriften aus bestehenden Layouts, um Zeit zu sparen.
- Speichere Deine Layouts als Vorlagen: So kannst Du sie immer wieder verwenden und musst nicht jedes Mal von vorne anfangen.
Wie Du die Beispiel-Layouts herunterladen kannst
Damit Du direkt loslegen kannst, habe ich die Beispiel-Layouts, die ich im Tutorial verwendet habe, zum Download bereitgestellt. So kannst Du sie in der Divi Bibliothek importieren und Schritt für Schritt nachvollziehen.
Ausblick: Group Modules in Divi 5
Ein weiterer spannender neuer Bereich in Divi 5 sind die sogenannten Group Modules. Damit kannst Du Module gruppieren und als Einheit bearbeiten – ein weiteres Feature, das Deine Arbeit noch effizienter macht. In einem separaten Artikel oder Video werde ich Dir zeigen, wie das genau funktioniert und welche Vorteile es bringt.
FAQ – Häufig gestellte Fragen zu Divi 5 Nested Rows
Was sind verschachtelte Zeilen in Divi 5?
Verschachtelte Zeilen (nested rows) sind Zeilen, die innerhalb einer anderen Zeile eingefügt werden können. So kannst Du komplexere Layouts bauen, indem Du mehrere Ebenen von Zeilen und Spalten kombinierst.
Warum sollte ich verschachtelte Zeilen verwenden?
Sie ermöglichen flexiblere Layouts ohne kompliziertes CSS. Du kannst Inhalte besser anordnen, übersichtlich gestalten und schneller Anpassungen vornehmen.
Kann ich bestehende Layouts mit nested rows anpassen?
Ja, Du kannst bestehende Layouts kopieren, verschachtelte Zeilen hinzufügen und so Layouts modernisieren oder erweitern.
Wie funktioniert das Kopieren von Designattributen?
Du kannst mit Rechtsklick auf ein Modul oder eine Zeile die Designattribute kopieren und an anderer Stelle einfügen. Dabei kannst Du filtern, welche Attribute übernommen werden sollen, z.B. nur Margins oder Schatten.
Gibt es Nachteile bei verschachtelten Zeilen?
Manchmal kann es zu ungewollten Abständen kommen, wenn die Margins nicht korrekt eingestellt sind. Das lässt sich aber leicht durch Anpassungen beheben.
Brauche ich Programmierkenntnisse für nested rows?
Nein, das ist gerade das Tolle: Du kannst alles im Divi Builder ohne Programmierung umsetzen.
Fazit – Divi 5 Nested Rows sind ein Must-Have für modernes Webdesign
Wenn Du Deine Divi-Websites auf das nächste Level bringen möchtest, sind die verschachtelten Zeilen in Divi 5 ein absolutes Muss. Sie geben Dir die Freiheit, komplexe und ansprechende Layouts schnell und unkompliziert zu bauen, ohne Dich mit CSS oder komplizierten Workarounds herumzuschlagen. Wie Du Deine Divi 4 Website auf Divi 5 updatest, erfährst Du hier.
Ich kann Dir nur empfehlen, die Funktion auszuprobieren und Deine eigenen Designs damit zu bauen. Du wirst merken, wie viel Spaß das macht und wie professionell Deine Website dadurch wirkt.
Falls Du noch mehr über die neuen Features in Divi 5 erfahren möchtest, halte Ausschau nach meinen weiteren Beiträgen und Videos – es gibt noch viel zu entdecken!
Viel Erfolg beim Gestalten mit Divi 5 und den verschachtelten Zeilen!
Divi 5 Website erstellen
Buche jetzt Deinen Web-Dialog und wir planen Deine neue WordPress-Website noch heute.
0 Kommentare