10 kreative verschachtelte Reihenstrukturen, die Sie in Divi 5 bauen können

Die Nested Zeilen von Divi 5 bietet eine neue Möglichkeit, Websites mit DIVI zu erstellen. Mit verschachtelten Zeilen können Sie Reihen mit unendlicher Verhinderung in Reihen platzieren und die Flexibilität für die einfachen Aufbau komplexer, atemberaubender Layouts freischalten. Diese Funktion ist ein entscheidender Schritt in Richtung des fortschrittlichen Layoutsystems von Divi 5 von Divi 5 und stellt die Bühne für eine neue Ära der Entwurfsmöglichkeiten fest. Unabhängig davon, ob neu in Divi oder ein langjähriger Benutzer, verschachtelte Zeilen kreativer sein, Layouts schneller erstellen und die Notwendigkeit von benutzerdefiniertem CSS vermeiden.

In diesem Beitrag werden wir 10 innovative Möglichkeiten untersuchen, um verschachtelte Reihen zu nutzen und Sie dazu inspirieren, die Grenzen der Layout -Funktionen von Divi 5 zu überschreiten.

Ein kurzer Hinweis: Divi 5 befindet sich derzeit in der öffentlichen Alpha -Phase, was es perfekt für neue Projekte macht, aber noch nicht für die Migration bestehender Divi 4 -Standorte empfohlen wird. In diesem Sinne tauchen wir ein, um das Potenzial verschachtelter Reihen freizuschalten.

Was sind verschachtelte Reihen in Divi 5?

Mit verschachtelten Zeilen in Divi 5 können Sie Zeilen in andere Zeilen platzieren und die Notwendigkeit von Spezialabschnitten beseitigen, die Layoutmöglichkeiten in Divi 4 einschränken. Sie können Zeilen so tief stapeln wie Ihr Design und erstellen komplizierte und dynamische Layouts ohne viel Aufwand. Mit neuen Spaltengrößenoptionen bieten verschachtelte Zeilen eine genaue Kontrolle über Ihre Layoutstrukturen, sodass Sie Pixel-Perfekt-Designs erstellen können. Dieses Feature ist ein Eckpfeiler der Mission von Divi 5, das, was mit WordPress -Seitenbauern möglich ist, neu zu definieren.

Wichtige Vorteile verschachtelter Reihen

Die Einführung verschachtelter Reihen bringt eine Vielzahl von Vorteilen zu Divi 5:

• Sie können komplexe, benutzerdefinierte Layouts erstellen: Unabhängig davon, ob Sie eine mehrstufige Preisseite oder ein Portfolio-Raster erstellen, können Sie mit verschachtelten Zeilen komplexe Designs erstellen, die zuvor einen Spezialabschnitt oder benutzerdefinierten CSS benötigten.
• Es schafft einen vereinfachten Workflow: Im Vergleich zu den Einschränkungen von Divi 4 werden verschachtelte Zeilen das Webdesign rationalen, sodass es einfacher ist, Inhalte auf verschiedene Weise zu organisieren, ohne sich an einen einschränkenden Spezialbereich zu halten.
• Es handelt sich um ein grundlegendes Update für Divi: Nested Rows legt die Grundlage für das kommende System von Divi 5 von Flexbox-basiertem System, das in Kürze eine schnellere Leistung, verbesserte Reaktionsfähigkeit und noch kreativere Designoptionen verspricht.

Wie man auf verschachtelte Reihen zugreift

Der Einstieg mit verschachtelten Reihen in Divi 5 ist ein Kinderspiel. Fügen Sie Ihrer Seite eine übergeordnete Zeile hinzu und platzieren Sie dann eine neue Zeile mit der Registerkarte Neue Zeile .

Sie können nach Bedarf die Zeilen innerhalb von Zeilen fortsetzen, wobei jede Ebene dieselben robusten Anpassungsoptionen bietet, z. B. Spaltenanpassungen und Modulplatzierungen.

Die Benutzeroberfläche ist so konzipiert, dass sie benutzerfreundlich sein und nahtlos in das No-Code-Designsystem von Divi 5 integriert werden, damit Sie sich eher auf Kreativität als auf technische Hürden konzentrieren können. Unabhängig davon, ob Sie einen einfachen Heldenabschnitt oder ein komplexes Menü ordnen, verschachtelte Zeilen machen den Vorgang reibungslos und zugänglich.

Tipps einrichten

Um das Beste aus verschachtelten Reihen zu machen, denken Sie an diese praktischen Tipps:

• Beginnen Sie mit einer sauberen Installation: Da Divi 5 noch in der Öffentlichkeit in Alpha ist, beginnen Sie mit einer neuen Installation von WordPress und Divi für neue Projekte. Auf diese Weise können Sie die aktualisierte Architektur vollständig nutzen und Kompatibilitätsprobleme mit vorhandenen Divi -Websites vermeiden.
• Test auf Staging: Sie können Divi 5 auch auf einer Staging -Site verwenden. Dieser Ansatz hilft Ihnen dabei, die Funktionen von Divi 5 und ihr Potenzial zu erforschen, während Sie alle Fehler im Alpha-Stufe, die Live-Websites beeinflussen könnten, umgehen.

Kreative verschachtelte Reihenstrukturen, die Sie in Divi 5 bauen können

Verschachtelte Zeilen können einzigartige Layouts erzeugen, einschließlich Heldenabschnitte, asymmetrischen Portfolio -Gitter, interaktiven FAQs und vielem mehr. Lassen Sie uns einige Anwendungsfälle untersuchen, um zu verstehen, wie sie funktionieren und wie Sie sie in Ihren Projekten verwenden können.

1. Heldenabschnitte

Erstellen Sie faszinierende Heldenabschnitte mit verschachtelten Reihen für geschichtete Inhalte. Dieses Beispiel begann mit einer 3-Spal-Zeile, einer Verschachtelungsreihen für Schaltflächen, Zahlenzähler und einem Lead-Capture-Formular. Wir haben einen Hintergrundgradienten für einen polierten Look hinzugefügt, um den Helden hervorzuheben und wichtige Informationen hervorzuheben.

2. Asymmetrisches Portfolio -Gitter

Verschachtelte Zeilen sind eine hervorragende Option, um asymmetrische Gitter zu erstellen. In diesem Beispiel haben wir mit einer 2-Spalte-übergeordneten Zeile begonnen und der 2. Spalte eine 3-Spalte-Zeile hinzugefügt, gefolgt von einer einzelnen Zeile in der 2. Spalte. Das Ergebnis ist ein Layout im Mauerwerkstil, das perfekt für die Darstellung der Arbeit eines Fotografen mit Flair ist.

3.. Präsentationsprodukte

Für diejenigen, die eine auffällige Möglichkeit haben, Produkte zu bieten, sind verschachtelte Zeilen eine großartige Möglichkeit, dies zu tun. In diesem Beispiel haben wir mit einer 3-Spal-Reihe begonnen und dann eine 2-Spal-Reihe hinzugefügt, um die Preis- und Kaufoptionen zu bieten. Das Ergebnis ist ein ansprechendes, in Shop-fertiges Layout, das Ästhetik und Funktionalität in Einklang bringt.

4. Header

Mit verschachtelten Zeilen können Sie einzigartige Header für Ihre Website erstellen. Im folgenden Beispiel haben wir verschachtelte Zeilen verwendet, um links zwei Klappzahlen und eine Taste rechts in der oberen Reihe hinzuzufügen. Wir haben in der unteren Reihe ein zweispaliges Layout verwendet und dann eine 5-Spal-verschachtelte Zeile fallen, um das Menü zu erstellen. Schließlich haben wir jedem Menü-Link mit einer 2-Spal-verschachtelten Zeile Symbole hinzugefügt.

5. Fußzeilen

Mit verschachtelten Zeilen können Sie featurereiche Fußzeilen erstellen, die das Engagement vorantreiben. Im folgenden Beispiel haben wir mit einer 3-Spal-Reihe begonnen und verschachtelte Zeilen hinzugefügt, um wichtige Kontaktinformationen zu enthalten. Mit verschachtelten Zeilen können Sie Fußzeilen erstellen, die Besucher zum Handeln ermutigen.

6. Wissensbasisinhalt

Verschachtelte Zeilen können einen FAQ -Abschnitt, Video -Tutorials und andere wichtige Inhalte hervorheben. Zum Beispiel können Sie eine 2-Spal-Zeile mit einem Akkordeonmodul links einrichten und dann verschachtelte Zeilen für Videos, Text, Kontaktschaltflächen und mehr hinzufügen.

7. Interaktive Preistische

Mit verschachtelten Zeilen können Sie dynamische Preistabellen für Preisstufen, Funktionen und CTAs erstellen. Ja, Divi hat bereits eine Preistabelle, aber es ermöglicht kein Hinzufügen mehrerer Tasten. In diesem Beispiel haben wir mit einer 3-Spal-Reihe begonnen und dann eine 2-Spal-Reihe verschachtelt, um zwei Tasten für die Interaktivität zu präsentieren.

8. Interaktive Videogalerien

Verschachtelte Zeilen können zum Erstellen interaktiver Videogalerien verwendet werden, die Links anzeigen, Text enthalten und mehr enthalten, sodass Sie blogähnliche Abschnitte erstellen können, um wichtige Videos auf Ihrer Website zu finden. Im folgenden Beispiel verwenden wir verschachtelte Zeilen für Spielsymbole und -tasten, wodurch der Abschnitt eine skurrile, interaktive Schnittstelle verleiht.

9. Teammitglied Fotos

Die Verwendung von verschachtelten Zeilen für die Präsentation von Teammitgliedern, Künstlern oder einer Sammlung von Menschen ist eine großartige Möglichkeit, die neueste Funktion von Divi 5 zu nutzen. In diesem Beispiel haben wir mit einem 3-Spal-Layout begonnen und dann eine 2-Spalte-Reihe für die sozialen Medien-Ikonen verschachtelt. Wir haben die Transformationskontrollen und Positionseinstellungen von Divi 5 verwendet, um die Symbole über das Teammitglied -Bild zu platzieren. Von dort aus fügten wir eine weitere Einspalten-Reihe für die Biografie hinzu, gefolgt von einer zweispaltigen Reihe für Kontakt- und Bio-Tasten.

10. Aufruf zum Handeln von Bannern

Wenn Sie nach einer Möglichkeit suchen, auf Ihrer Website einen auffälligen Call-to-Action-Abschnitt zu erstellen, sind verschachtelte Zeilen perfekt für den Job. Sie können E-Mail-Opt-In-Formulare, Bilder, Schaltflächen und mehr kombinieren, um Ihre Leser zum Handeln zu ermutigen. Im folgenden Beispiel verwendeten wir eine verschachtelte Zeile, um ein Bild und zwei Schaltflächen nebeneinander zu bieten.

Best Practices für das Entwerfen mit verschachtelten Reihen

Sie können das Potenzial verschachtelter Zeilen maximieren, indem Sie ein paar Best Practices folgen. Betrachten Sie die Tipps:

1. Planen Sie Layouts mit Skizzen: Bevor Sie in die verschachtelten Zeilen von Divi 5 eintauchen, sollten Sie Ihre Zeilenstrukturen skizzieren oder verdrahten, um die Hierarchie und den Inhaltsfluss abzubilden. Dies kann Ihnen eine gute Vorstellung von dem Look geben, den Sie suchen, und sorgt für eine logische Organisation von Zeilen und Spalten.
2. Nisten weiter nisten: Während Divi 5 unendliche Verschachtelung unterstützt, können übermäßige Schichten eine Herausforderung zu bearbeiten. Um eine saubere Schnittstelle aufrechtzuerhalten, müssen Sie für die meisten Layouts 2-3-Stufen nisten.
3. Hebel -Spaltengröße: Erstellen Sie reaktionsschnelle Designs mithilfe der Spaltengrößen- und Ausrichtungsoptionen von Divi 5. Passen Sie beispielsweise die Spaltenbreiten in verschachtelten Zeilen an, um mobilfreundliche Layouts zu gewährleisten.
4. Organisieren Sie sich mit Etiketten: Etiketten Sie im visuellen Bauunternehmer mit einzigartigen Namen, um organisiert zu bleiben. Dies ist besonders wichtig in komplexen Layouts wie Portfolios oder Preistabellen.
5. Reaktionsfähigkeit der Test: Vorschau verschachtelte Zeilenlayouts auf Desktop-, Tablet- und Mobilgeräten mithilfe der Haltepunkte von Divi 5, um die korrekten Inhaltsstapel sicherzustellen.
6. Verwenden Sie visuelle Hinweise: Versuchen Sie, Hintergrundfarben, Gradienten oder Muster in verschachtelte Reihen visuell zu unterscheiden.

Kreativität mit verschachtelten Reihen in Divi 5 freigesetzt

Verschachtelte Reihen in Divi 5 markieren eine neue, aufregende Möglichkeit, Websites mit Divi zu erstellen. Sie befähigen Sie, alles von atemberaubenden Heldenabschnitten bis hin zu komplizierten Videogalerien ohne die Einschränkungen von Spezialabschnitten oder benutzerdefinierten CSS zu erstellen. Die 10 kreativen Reihenstrukturen, die wir untersucht haben, zeigen die Flexibilität und Präzision des Flexbox-basierten Systems von Divi 5, wobei hervorgehoben wird, was möglich ist.

Während Divi 5 sich durch seine öffentliche Alpha -Phase weiterentwickelt, ist jetzt der perfekte Zeitpunkt, um sie herunterzuladen und mit verschachtelten Reihen zu experimentieren. Wir empfehlen noch nicht, Divi auf vorhandenen Websites zu verwenden, aber wir empfehlen Ihnen, Layouts mit verschachtelten Reihen auf neuen Builds oder Staging -Sites zu bauen, um sicher zu sein.