10 Gitterlayouts mit verschachtelten Zeilen von Divi 5 (kostenloser Download)

Netzlayouts bieten eine strukturierte und dennoch flexible Möglichkeit, Inhalte zu organisieren, die Benutzererfahrung zu verbessern und eine nahtlose Reaktionsfähigkeit auf den Geräten zu gewährleisten. Mit der Veröffentlichung von Divi 5 Public Alpha haben Webdesigner ein neues Toolset, um wunderschöne Gitterlayouts zu erstellen, die kreative Grenzen überschreiten. Mit einem vollständig neu gestalteten visuellen Bauunternehmer und leistungsstarken neuen Funktionen wie verschachtelten Zeilen, fortschrittlichen Einheiten und Modulgruppen können Sie problemlos geschichtete, komplexe Layouts erstellen.

In diesem Beitrag präsentieren wir Raster -Layouts, die Sie problemlos mit Divi 5 erstellen können, von symmetrischen Feature -Grids bis hin zu dynamischen Mauerwerksblogs und interaktiven Portfolio -Showcases. Egal, ob Sie ein Portfolio, ein E-Commerce-Geschäft oder ein Unternehmenswebsite entwerfen, diese Layouts werden Sie dazu inspirieren, Ihre Designs zu erhöhen und Ihr Publikum zu fesseln.

Lassen Sie uns untersuchen, wie die fortschrittlichen Funktionen von Divi 5 diese Layouts im kreativen Netzstil ermöglichen.

Divi 5 ist bereit, auf neuen Websites verwendet zu werden, aber wir empfehlen noch nicht, vorhandene Websites in Divi 5 zu konvertieren.

Key Divi 5 -Funktionen für Gitterlayouts

Die umgebaute Stiftung von Divi 5 führt Funktionen ein, die das Erstellen von Netzlayouts erleichtern als je zuvor. Diese Tools ermöglichen es Designern, komplexe, optisch ansprechende Netze mit Präzision und Effizienz zu erstellen und gleichzeitig die Flexibilität über Geräte aufrechtzuerhalten. Im Folgenden untersuchen wir die wichtigsten Divi 5 -Funktionen, mit denen das Handwerk schöne Netzlayouts ermöglichen.

Abonnieren Sie unseren YouTube -Kanal

Verschachtelte Reihen

Mit der Nested-Zeilen von Divi 5 können Sie Zeilen innerhalb von Zeilen platzieren und unendliche Nestabilität bieten, um komplizierte Gitterstrukturen mit einer intuitiven Drag & Drop-Schnittstelle zu erstellen. Diese Funktionalität vereinfacht das Design mehrschichtiger Netze und bietet Ihnen eine genaue Kontrolle über die Platzierung des Moduls.

Unabhängig davon, ob Sie ein komplexes Produkt -Showcase oder ein geschichteter Portfolio -Netz erstellen, Nexted -Zeilen ermöglichen es Ihnen, Inhalte intelligenter zu organisieren, wodurch Ihre Layouts dynamisch und visuell ansprechend werden.

Anpassbare Haltepunkte

Responsives Design ist für moderne Websites von entscheidender Bedeutung, und die anpassbaren Haltepunkte von Divi 5 machen es einfach, sicherzustellen, dass Ihre Gitter auf jedem Gerät makellos aussehen. Sie können sieben Desktops, Tablets und mobile Haltepunkte verwenden, sodass sich die Gitter nahtlos an verschiedene Bildschirmgrößen anpassen können.

In Kombination mit Canvas Scaling, das in verschiedenen Haltepunkten innerhalb des visuellen Builders Echtzeit-Voransichten Ihrer Layouts bietet, stellt diese Funktion sicher, dass Ihre Gitter für die Reaktionsfähigkeit optimiert sind und ein konsistentes Benutzererlebnis auf allen Geräten liefern.

Modulgruppen

Modulgruppen optimieren den Prozess des Entwerfens und Aufrechterhaltung einer konsistenten Netzästhetik. Durch die Zusammengruppierung von Modulen können Sie kollektives Styling anwenden und diese Gruppen auf mehreren Seiten wiederverwenden, Zeit sparen und die Konsistenz der Gestaltung sicherstellen.

Dies ist besonders nützlich für Gitterlayouts wie Blog -Posts oder Produktkarten, bei denen konsistente Designelemente wie Schriftarten, Farben oder Schwebeffekte für einen zusammenhängenden Look auf Ihrer Website unerlässlich sind.

Entwurfsvariablen

Mit Designvariablen bietet Divi 5 zentralisierte Verwaltung von wichtigen Designelementen wie Farben, Schriftarten, Links, Typografie und mehr. Diese Funktion sorgt für eine Einheitlichkeit in Ihren Netzlayouts - und Ihrer gesamten Website - erleichtert die Aufrechterhaltung einer konsistenten visuellen Identität. Stile werden im Variablen -Manager festgelegt und können überall angewendet werden, wo immer Sie möchten

Müssen Sie eine Farbe oder einen Schriftart aktualisieren? Mit Designvariablen können Sie Änderungen an einem Ort vornehmen, sie sofort auf alle Abschnitte und Seiten anwenden, Ihren Workflow optimieren und Ihre Designs poliert halten.

Fortgeschrittene Einheiten

Die fortgeschrittenen Einheiten von Divi 5 bieten Ihnen eine detaillierte Kontrolle über den Abstand und die Größe mit Optionen wie VW, VH, REM und EM. Diese Einheiten ermöglichen dynamische und reaktionsschnelle Gitterlayouts, die perfekt über Geräte hinweg skalieren. Sie können die Polsterung, Ränder oder Elementgrößen mit dem Variablenmanager einstellen. Fortgeschrittene Einheiten bieten die Flexibilität, die Netzkomponenten auszurichten und genau zu skalieren, um sicherzustellen, dass Ihre Layouts funktional und visuell harmonisch sind.

Attributverwaltung

Das Attributmanagement beschleunigt den Entwurfsprozess, indem Sie Attribute über Konstruktionselemente kopieren, einfügen und zurücksetzen. Diese Funktion ist von größter Bedeutung, um konsistente Stile wie den Schwebeffekt oder den Abstand auf mehrere Module anzuwenden. Durch die Reduzierung von Wiederholungsaufgaben können Sie sich auf Kreativität konzentrieren und gleichzeitig die Entwicklung komplexer Gitterlayouts beschleunigen.

Diese Divi 5 -Funktionen arbeiten zusammen, um beispiellose Flexibilität und Effizienz zu bieten, wodurch es einfacher ist, atemberaubende, reaktionsschnelle Netzlayouts zu erstellen, die die Benutzererfahrung verbessern und Ihre Webdesigns erhöhen.

10 Beispiele für kreative Netzlayout in Divi 5

Netzlayouts sind ein Eckpfeiler des modernen Webdesigns, und mit Divi 5 war es nie einfacher, sie zu bauen. Egal, ob Sie Produkte, Portfolios, Teammitglieder oder FAQs präsentieren, Divi 5 ist in der Lage, Layouts zu bauen, die funktional und visuell atemberaubend sind. Schauen wir uns 10 Beispiele für Netzlayouts an, die Sie mit Divi 5 erstellen können.

1. symmetrisches Merkmalsraster

Symmetrische Feature -Gitter bieten eine großartige Möglichkeit, Produkte, Dienstleistungen oder Portfolioartikel sauber und organisiert zu präsentieren. Dieser Netzstil eignet sich perfekt zum Hervorheben strukturierter Inhalte und ist in seiner Anwendung vielseitig. Sie können für Geschäftswebsites, Portfolios und Zielseiten verwendet werden und bieten einen polierten Look, der die Benutzer mühelos durch Informationen führt.

Im folgenden Beispiel haben wir ein Vierspaltnetz gebaut, um ein Apothekergeschäft zu präsentieren. Wir können in wenigen Minuten einen professionellen, polierten Look mit verschachtelten Zeilen, Modulgruppen und Attributmanagement erzielen.

2. Mauerwerk

Ein Mauerwerksraster ist ein dynamisches Layout im Pinterest-Stil, das Blog-Beiträge, Portfolioartikel oder sogar Rezepte unterschiedlicher Höhen in einem visuell ansprechenden, dicht gepackten Raster arrangiert. Im Gegensatz zu herkömmlichen Gittern mit festen Reihenhöhen können Mauerwerksnetze den Inhalt auf natürliche Weise fließen und vertikale Lücken füllen, um einen nahtlosen organischen Look zu erzeugen. Dieser Netzstil ist perfekt für Websites, die visuelles Geschichtenerzählen priorisieren, wie Blogs, Magazine oder kreative Portfolios. Mit den nativen Funktionen von Divi 5 ist es intuitiv und effizient, ein stilvolles und reaktionsschnelles Mauerwerk zu schaffen.

Im folgenden Beispiel haben wir verschachtelte Zeilen und Modulgruppen kombiniert, um ein Mauerwerk für Rezepte zu erstellen, wobei die Abkürzungen von Divi schneller duplizieren.

3. Interaktives Portfolio -Netz

Ein interaktives Portfolio -Netzlayout bietet eine ansprechende Möglichkeit, Ihre Arbeiten zu präsentieren. Sie können Lightbox -Popups, Schwebeffekte, Schaltflächen und mehr einbeziehen, damit Benutzer Ihre Inhalte erkunden können. Dieser Gitterstil eignet sich hervorragend für Websites, die darauf abzielen, ihr Publikum mit visuellen Arbeiten wie Fotografie, Design oder beides zu fesseln und gleichzeitig eine nahtlose Navigation und Interaktivität zu bieten.

Mit den erweiterten Funktionen von Divi 5 können Designer reaktionsschnelle, benutzerfreundliche Portfolio-Netze erstellen, die kreative Arbeiten effektiv hervorheben.

4. Produktausstellungsraster

Ein Produkt -Showcase -Netz bietet eine einzigartige Möglichkeit, Ihre Bestseller, vorgestellte Produkte oder neue Produkte zu bieten, die Sie der Welt vorstellen. Sie können ein strukturiertes, optisch ansprechendes Layout mit Bildern, Titeln, Preisen und Schaltflächen erstellen, die für E-Commerce-Stores optimiert sind. Mit einem Netzlayout können Sie ein sauberes, organisiertes Layout erstellen, damit Benutzer die Kaufentscheidungen durchsuchen und treffen können.

Mit DIVI 5 können Sie leistungsstarke Funktionen nutzen, um reaktionsschnelle, markenkonsistente Layouts zu erstellen, die das Engagement und die Konvertierungen vorantreiben.

5. Teammitgliedsnetz

Mit Teammitgliedern können Sie Teamprofile mit Bildern, Namen, Rollen und sozialen Links präsentieren. Dieser Netzstil schafft eine professionelle und zugängliche Präsentation, die ihn ideal für Websites macht, die das Fachwissen und die Persönlichkeit ihres Teams hervorheben. Teamnetze eignen sich perfekt für Unternehmensseiten, Agenturen oder gemeinnützige Organisationen, können jedoch auf jeder Website angewendet werden, auf der Sie Menschen präsentieren müssen.

Im folgenden Beispiel verwenden wir ein dreispaliges Netz mit verschachtelten Zeilen und wenden Designvariablen an, um die Schriftgröße reaktionsmäßig zu steuern.

6. Dienstleistungsraster

Ein Netzlayout ist eine großartige Möglichkeit, die Dienstleistungen eines Unternehmens zu präsentieren. Es zeigt Dienste in einem organisierten, scannbaren Format, was es ideal für Websites macht, die ihre Wertversprechen kommunizieren müssen. Perfekt für Agenturen, Freiberufler oder dienstleistungsbasierte Unternehmen verwendet die erweiterten Funktionen von Divi 5, um reaktionsschnelle, ansprechende Layouts zu erstellen, die Kundenanfragen und -konvertierungen vorantreiben.

Im folgenden Beispiel verwendeten wir eine vierspaltige Zeile, haben eine Calc () -Formel für den Zeilenabstand zugewiesen und Modulgruppen und verschachtelte Zeilen integriert, um den Entwurfsprozess zu beschleunigen.

7. Event -Zeitplan Grid

Der Event-Schedule-Grid-Stil eignet sich perfekt für die Organisation und Präsentation zeitempfindlicher Informationen professionell und übersichtlich. Damit ist es ideal für Websites, die Veranstaltungen wie Konferenzen, Workshops oder Community-Versammlungen veranstalten. Mit den Funktionen von Divi 5 können Sie Daten, Titel und Beschreibungen in einem Netzformat hinzufügen, um den Besuchern leicht zu finden, was sie wollen.

Das folgende Beispiel zeigt ein dreispaliges Layout mit verschachtelten Zeilen, um Ereignisse funktional und ästhetisch anzuzeigen.

8. Preisstischraster

Divi 4 (und Divi 5) sind mit einem Preismodul ausgestattet, aber es ist auf Preisgestaltung, Knopf und Aufzählungszeichen beschränkt. Für diejenigen, die die native Funktionalität von Divi erweitern und ein Preisgitter aufbauen möchten, der ihren Bedürfnissen gerecht wird, bietet Divi 5 eine Möglichkeit, dies zu tun. Sie können ein Preisnetz erstellen, das Ihre Inhalte mithilfe von verschachtelten Zeilen, Modulgruppen und Attributverwaltung atemberaubend anzeigt.

Sie können beispielsweise ein dreispaliges Layout erstellen, das Preisgestaltung, Funktionen und mehrere Tasten bietet, ohne sich den Einschränkungen des integrierten Preismoduls entsprechen zu müssen. Sie können die Reaktionseinstellungen für kleinere Bildschirme optimieren und dann eine Optionsgruppe voreinstellen, um 50% Breitenspalten zu erhalten, um sicherzustellen, dass Ihre Spalten perfekt auf Tablet und Mobilgeräte ausgerichtet sind.

9. FAQ -Akkordeon Grid

Ein FAQ -Abschnitt auf Ihrer Website kann den Benutzern helfen, auf eine Liste der häufig gestellten Fragen zuzugreifen und ihnen eine bessere Vorstellung davon zu geben, was Sie anbieten. Dieser Netzstil kombiniert die Klarheit eines Netzes mit der Interaktivität von Akkordeonmodulen und macht es ideal für Websites, die präzise, ​​zugängliche Informationen bereitstellen müssen. Perfekt für Supportseiten, Hilfszentren oder Informationsstandorte, nutzt das FAQ -Netz die robusten Funktionen von Divi 5, um reaktionsschnelle, ansprechende Layouts zu erstellen, die die Benutzererfahrung verbessern.

In diesem Beispiel haben wir verschachtelte Zeilen verwendet, um einen ansprechenden FAQ -Abschnitt mit Informationsvideos und Fragen und Antworten zu erstellen, um den Benutzern die relevanten Informationen zur Verfügung zu stellen, die sie benötigen, um eine fundierte Entscheidung zu treffen.

10. Bildgalerie -Raster

Ein Galerie -Raster mit einem Lightbox -Popup ist eine visuell auffällige Möglichkeit, Fotografie, Portfolio -Beispiele oder andere Bilder zu präsentieren. Dieser Gitterstil eignet sich perfekt zum Präsentieren des visuellen Geschichtenerzählens und ist ideal für Websites, die atemberaubende Bilder wie Kunstgalerien, Reiseblogs oder Fotografie priorisieren. Mit Divi 5 können Designer reaktionsschnelle, ansprechende Galerie -Gitter erstellen, die fesseln.

Im folgenden Beispiel verwenden wir ein einfaches Vierspaltlayout, um Bilder zu präsentieren. Für einen zusätzlichen Touch haben wir Lightbox auf den Bildern aktiviert und ein soziales Freigabemodul in der unteren rechten Ecke jedes Fotos hinzugefügt.

Tipps zum Erstellen effektiver Netzlayouts in Divi 5

Dank der leistungsstarken, flexiblen Funktionen von Divi 5 ist es einfacher als je zuvor, effektive Netzlayouts zu erstellen. Unabhängig davon, ob Sie ein Feature -Grid oder eine dynamische Bildergalerie mit Overlay -Elementen erstellen, können diese Tipps die Funktionen von Divi 5 maximieren, um reaktionsschnelle, kohärentes und effizientes Design zu erstellen, die das Benutzererlebnis Ihrer Website stärken.

1. Nutzen Sie verschachtelte Zeilen

Die verschachtelten Zeilen von Divi 5 erzeugen komplexe, vielschichtige Gitterstrukturen. Sie können Inhalte organisieren, indem Sie Zeilen innerhalb von Zeilen nisten, z. B. Bilder und Text in einer einzelnen Gitterzelle für eine genaue Ausrichtung. Verschachtelte Zeilen eignen sich perfekt zum Aufbau von Layouts wie Portfolio -Gittern oder Veranstaltungszeitplänen und bieten Ihnen die Flexibilität, kreative, strukturierte Netze zu entwerfen.

2. Optimieren Sie die Reaktionsfähigkeit

Mithilfe von Canvas -Skalierung und anpassbaren Haltepunkten können Sie sicherstellen, dass Ihre Gitter auf jedem Gerät makellos aussehen. Testen Sie Layouts innerhalb des visuellen Builders in Echtzeit, um die Anpassung der Anpassung an Desktop-, Tablet- und Mobilgeräte. Sie können Spaltenbreiten, Abstand oder Schriftgrößen an bestimmten Haltepunkten einstellen, um die Benutzerfreundlichkeit und die visuelle Anziehungskraft aufrechtzuerhalten. Mit den anpassbaren Haltepunkten von Divi 5 können Sie für alle Benutzer eine nahtlose Erfahrung sicherstellen, von großen Bildschirmen bis hin zu Smartphones.

3.. Verwenden Sie Modulgruppen für die Effizienz

Modulgruppen in Divi 5 können Ihren Workflow optimieren, indem Sie ähnliche Netzelemente wie Produktkarten oder Teammitgliedsprofile gruppieren. Sie können gleichzeitig konsistentes Styling - Schriftarten, Farben, Schwebeffekte usw. - auf mehrere Module anwenden und sie über Seiten hinweg wiederverwenden. Dies ist eine Zeitspanne für die Aufrechterhaltung der Gleichmäßigkeit in Gittern wie Preistabellen oder FAQs, die Reduzierung von sich wiederholenden Änderungen und der Gewährleistung eines polierten Looks.

4. Behalten Sie die Konsistenz mit Entwurfsvariablen bei

Verwenden Sie Designvariablen, um die Kontrolle über Farben, Schriftarten, Abstand, Links und mehr zu zentralisieren. Indem Sie diese Elemente an einem Ort definieren, können Sie Stile weltweit aktualisieren, um Service -Gitter oder Galerie -Layouts visuell harmonisch zu halten.

5. Experimentieren mit fortgeschrittenen Einheiten

Verbessern Sie die Flexibilität Ihrer Gitter, indem Sie erweiterte Einheiten wie VH, VW, REM, Calc () oder Clamp () für dynamischen Abstand und Größen verwenden. Diese Einheiten ermöglichen es Ihren Gitterelementen, basierend auf der Größe der Ansichtsfenster oder der Schrifteinstellungen flüssig zu skalieren, wodurch die Reaktionsfähigkeit und die visuelle Balance sichergestellt werden.

Laden Sie die Layouts der Raster -Abteilung kostenlos herunter

Möchten Sie die Gitterlayouts in Divi 5 verwenden? Abonnieren Sie unten, um Zugriff auf die JSON -Dateien zu erhalten. Sie können diese in Ihre Divi -Bibliothek hochladen und anschließend auf Ihre Seiten importieren.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Treten Sie dem Divi -Newsletter bei und wir senden Ihnen eine Kopie des ultimativen Divi -Landing -Layout -Pakets sowie Tonnen anderer erstaunlicher und kostenloser Divi -Ressourcen, Tipps und Tricks per E -Mail. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi -Meister sein. Wenn Sie bereits abonniert sind, geben Sie einfach Ihre E -Mail -Adresse unten ein und klicken Sie auf Download, um auf das Layoutpaket zuzugreifen.

HERUNTERLADEN

Sie haben erfolgreich abonniert. Bitte überprüfen Sie Ihre E -Mail -Adresse, um Ihr Abonnement zu bestätigen und Zugriff auf kostenlose wöchentliche Divi -Layout -Packs zu erhalten!

Kreativität mit Divi 5 ausgeben

Mit Divi 5's Suite von Funktionen, von verschachtelten Zeilen bis hin zu Attributverwaltung, können Designer leicht vielseitige, reaktionsschnelle und visuell atemberaubende Netzlayouts aufbauen. Divi 5 bietet beispiellose Flexibilität, Präzision und Effizienz, um ein Netzlayout zu erstellen, von Feature -Grids bis hin zu interaktiven Portfolios. Unabhängig davon, ob Sie eine E-Commerce-Website, eine über Seite oder einen FAQ-Abschnitt, die moderne Schnittstelle von Divi 5 und erweiterte Funktionen erstellen, machen Sie Ihre kreative Vision einfach zum Leben.

Sind Sie bereit, die Möglichkeiten zu erkunden? Tauchen Sie in das Divi 5 Public Alpha ein, um mit der Erstellung Ihrer Gitterlayouts zu experimentieren. Wie bereits erwähnt, ist Divi 5 für neue Websites geeignet, empfehlen jedoch nicht, es auf vorhandenen Websites zu verwenden, zumindest noch nicht.

Wir würden gerne Ihre Kreationen sehen. Teilen Sie Ihre einzigartigen Netzlayouts in unseren sozialen Medien oder Kommentaren unten.