Divi 5 bringt mit der Nested Rows Funktion eine völlig neue Art, Websites zu gestalten. Entwickelt von Elegant Themes, eröffnet dieses Feature eine Welt voller Möglichkeiten, indem es erlaubt, Reihen innerhalb von Reihen zu verschachteln – und das unbegrenzt. Egal, ob Du neu bei Divi bist oder schon lange damit arbeitest, Nested Rows machen Dein Design flexibler, schneller und ersparen Dir den Griff zu Custom CSS. In diesem Artikel zeige ich Dir, wie Du mit Nested Rows komplexe und beeindruckende Layouts erstellst – ganz ohne Stress.
Was sind Nested Rows in Divi 5?
Stell Dir Nested Rows wie eine russische Matroschka-Puppe vor – Du kannst Reihen innerhalb von Reihen stapeln, so tief Du möchtest. Das bedeutet, dass Du spannende, komplexe Layouts erstellen kannst, ohne Dich mit den Einschränkungen der Specialty Sections aus Divi 4 herumschlagen zu müssen.
Mit den neuen Optionen zur Spaltengröße bleiben Deine Designs auf jedem Bildschirm scharf und präzise. Dieses Feature ist ein zentraler Bestandteil von Divi 5s Fortschritt hin zu einem flexiblen, flexbox-basierten Layoutsystem, das Webdesign nicht nur einfacher, sondern auch spaßiger macht.
Erste Schritte: Hero Section mit Nested Rows erstellen
Beginnen wir mit einem praktischen Beispiel: dem Erstellen einer Hero Section mit verschachtelten Reihen. Diese besteht aus einem Hauptbereich mit drei Spalten:
- Die erste Spalte enthält mehrere verschachtelte Reihen für ein komplexes Layout.
- Die zweite Spalte zeigt ein Bild.
- Die dritte Spalte kombiniert ein weiteres Bild mit einem Code-Formular.
So kannst Du die volle Flexibilität von Nested Rows nutzen, um unterschiedliche Inhalte elegant nebeneinander zu platzieren.
Um die Hero Section zu bauen, fügst Du zunächst eine neue reguläre Sektion mit drei Spalten hinzu. Danach kannst Du einen Hintergrundverlauf hinzufügen, um das Design lebendig zu machen. Ein Bildmodul sorgt für den visuellen Effekt, während Überschriften und Icons in den verschachtelten Reihen für Struktur und Information sorgen.
Der Clou: Nested Rows erlauben es Dir, innerhalb einer Spalte neue Reihen mit verschiedenen Layoutstrukturen hinzuzufügen, z.B. zwei Spalten für Icons und Überschriften nebeneinander. So kannst Du ganz ohne Custom CSS komplexe Designs realisieren.
Im Beispiel werden Icons und Überschriften in einer verschachtelten zwei-Spalten-Reihe platziert, deren Design-Attribute Du bequem kopieren und einfügen kannst, um Zeit zu sparen. Anschließend kannst Du weitere Ebenen von verschachtelten Reihen hinzufügen, um noch komplexere Strukturen zu gestalten, wie z.B. Textblöcke oder weitere Überschriften nebeneinander.
In der dritten Spalte kannst Du dann Bilder und Kontaktformulare hinzufügen, komplett mit Überschriften und individuell gestalteten Feldern. So hast Du eine professionelle Hero Section, die Besucher anspricht und zum Handeln motiviert.
Footer mit Nested Rows gestalten
Nachdem wir die Hero Section gemeistert haben, gehen wir an einen weiteren wichtigen Bereich: den Footer. Auch hier bieten Nested Rows enorme Vorteile, um verschiedene Inhalte übersichtlich und ansprechend zu strukturieren.
Der Footer wird in zwei Hauptabschnitte unterteilt:
- Ein oberer Bereich mit einer zweispaltigen Layoutstruktur, die verschachtelte Reihen für Icons und Texte auf der linken Seite sowie einen Button auf der rechten Seite enthält.
- Ein unterer Bereich mit drei Spalten, der ein Logo, Texte, weitere verschachtelte Reihen mit Icons und Texten sowie ein Kontaktformular umfasst.
Um den oberen Bereich zu bauen, fügst Du eine reguläre Sektion mit zwei Spalten hinzu. In der linken Spalte kannst Du eine weitere verschachtelte Reihe mit zwei Spalten anlegen, um kleine Icons neben Texten anzuordnen. Auf der rechten Seite kommt ein Button-Modul zum Einsatz, dessen Design Du einfach per Kopieren und Einfügen übernehmen kannst.
Der untere Bereich ist etwas komplexer: Er besteht aus drei Spalten. Die erste Spalte zeigt ein Logo, darunter Text und eine verschachtelte Reihe mit mehreren Icon-Text-Kombinationen, die Du durch Duplizieren und Anpassen schnell erstellen kannst.
Die zweite Spalte ist für Menüs vorgesehen, die Du mit Überschriftenmodulen und Textmodulen strukturierst. Auch hier helfen Nested Rows, um die Inhalte übersichtlich und responsiv anzuordnen.
In der dritten Spalte findest Du schließlich ein Kontaktformular, das Du mit einer passenden Überschrift ergänzt. Die Felder des Formulars kannst Du individuell anpassen, um genau die Informationen abzufragen, die Du brauchst.
Warum Nested Rows Dein Design-Game verändern
Mit Nested Rows in Divi 5 kannst Du komplexe Layouts erstellen, die früher nur mit Spezialmodulen oder Custom CSS möglich waren – und das in einem Bruchteil der Zeit. Sie geben Dir die Freiheit, kreativ zu sein, ohne technische Hürden.
Außerdem sorgt die Flexbox-basierte Struktur für responsive Designs, die auf jedem Gerät gut aussehen. So kannst Du sicher sein, dass Deine Website professionell und benutzerfreundlich wirkt.
Mehr Inspiration gefällig?
Im Blogpost zur Nested Rows Funktion findest Du zehn kreative Layout-Beispiele, die Dich weiter inspirieren und Dir zeigen, wie vielseitig Nested Rows sind. Schau unbedingt vorbei, um noch mehr aus Divi 5 herauszuholen!
Fazit: Nested Rows sind ein mächtiges Werkzeug, das das Webdesign mit Divi 5 revolutioniert. Probiere es aus, experimentiere mit verschachtelten Strukturen und entdecke, wie einfach es ist, atemberaubende Websites ohne Programmierkenntnisse zu bauen.
Viel Spaß beim Designen und bis zum nächsten Mal!