6 neue Bildgalerien, die mit verschachtelten Zeilen von Divi 5 gebaut wurden (kostenloser Download)

Wenn Sie jemals versucht haben, eine Bildergalerie manuell zu erstellen, wissen Sie, wie schnell die Dinge chaotisch werden. Unebene Bilder, falsch ausgerichtete Reihen und nicht reagierende Designs verwandeln eine einfache Galerie in einen Albtraum.

Selbst in Divi 4 bedeuteten komplexe Bildstrukturen häufig das Stapeln mehrerer Zeilen und Spezialabschnitte, den Abstand und Stunden der manuellen Anpassung. Aber mit Divi 5 können Sie all das überspringen.

Dank seiner neuen verschachtelten Zeilen können Sie fortgeschrittenere Bildergaleriestrukturen erstellen. In diesem Beitrag zeigen wir Ihnen, wie Sie 6 Galerie -Layout -Designs bieten, um Ihnen einen Vorsprung zu bieten.

Divi 5 ist bereit, auf neuen Websites verwendet zu werden, warten Sie jedoch ein wenig, bevor Sie vorhandene migrieren.

Verwenden verschachtelter Reihen zum Erstellen komplexer Layouts

Divi 4 hatte bereits alles, was Sie brauchten, um Bildgalerien zu erstellen, aber das Erstellen komplexer Layouts fühlte sich oft klobig an. Divi 5 führt verschachtelte Reihen ein, die Ihnen eine schnellere und sauberere Möglichkeit bieten, fortgeschrittene Galerie -Layouts visuell zu erstellen, ohne dass Hacks erforderlich sind.

Abonnieren Sie unseren YouTube -Kanal

Was sind verschachtelte Reihen?

Verschachtelte Zeilen sind eine leistungsstarke neue Layout -Funktion in Divi 5, mit der Sie eine Reihe in eine andere platzieren können, wodurch Sie mehr Kontrolle darüber geben, wie Sie Ihre Seite strukturieren. Dies ermöglicht es, komplexe Abschnitte direkt im visuellen Builder zu entwerfen, ohne Code schreiben oder sich auf Problemumgehungen verlassen zu müssen.

Eine Zeile nisten ist wie das Hinzufügen eines weiteren Moduls. Sie müssen nur über das Element schweben, in dem Sie Ihre Zeile platzieren möchten, und klicken Sie auf die Plus -Schaltfläche, um eine neue Zeile auszuwählen. Dann können Sie aus all diesen Zeilenlayouts wählen, die perfekt für verschiedene Galeriestrukturen geeignet sind.

Diese verschachtelte Reihe verhält sich genau wie eine reguläre Reihe. Sie können eine Spaltenstruktur auswählen, Module hinzufügen und bei Bedarf eine weitere Zeile nisten - dank der unendlichen Nestabilität. Sie können die Größe der Größe auch durch das Ziehen der Größe auch ändern. Das Anpassen der Breiten fühlt sich daher intuitiv an und beinhaltet keine Mathematik- oder Abstands -Hacks.

Auch verschachtelte Zeilen reagieren standardmäßig voll und ganz. Direkt vom Bauunternehmer können Sie Ihr Layout über verschiedene Bildschirme optimieren. Da es Teil des Divi 5 -Frameworks ist, funktioniert es perfekt mit anderen Funktionen wie Option Group Presets und Designvariablen. Wir werden auch Tipps zur Kombination verschachtelter Zeilen mit den erweiterten Funktionen von Divi 5 teilen, um Ihren Galerie -Design -Workflow zu optimieren.

Erfahren Sie alles über die verschachtelten Reihen von Divi 5

Was macht verschachtelte Reihen unterschiedlich?

In Divi 4 beinhaltete das Erstellen benutzerdefinierter Bildergalerie -Layouts kreativ Zeilen, Spezialabschnitte und Layouts, um fortschrittlichere Designs zu erreichen. Dies bedeutete, dass es schwierig wäre, wenn Sie kein Design-Know-how hätten. Und selbst wenn Sie die Erfahrung hatten, waren Sie auf ein paar Layoutstrukturen beschränkt.

Verschachtelte Reihen bieten einen intuitiveren Ansatz. Sie müssen sich nicht mehr auf separate Reihen oder Spezialabschnitte verlassen. Sie können leicht Zeilen nisten und sie mit Modulen mischen und anpassen, um unbegrenzte Designmuster zu erstellen. Möchten Sie ein Produkt -Showcase erstellen? Erstellen Sie eine zweispaltige Zeile, fügen Sie Ihr vorgestelltes Bild links und Beschreibung rechts hinzu, nisten Sie eine dreispaltige Zeile unter dem linken Bild und fügen Sie unterstützende Bilder hinzu. Ihre Vorstellungskraft ist die Grenze!

6 Bildergalerie -Layouts Sie können mit verschachtelten Zeilen erstellen

Um Ihnen einen Einblick in das zu geben, was möglich ist, haben wir sechs Bildergalerie -Layout -Designs mit Anweisungen dazu erstellt, wie verschachtelte Reihen zum Entwerfen verwendet wurden. Lass uns über sie gehen.

Layout 1: Inline -CTA -Galerie

Das Layout des geschichteten Netzes verwendet ein modernes Gitter im Magazinstil, das ein Projekt mit einer Kombination aus großen Bildern, unterstützenden Aufnahmen und sorgfältig platzierter Text hervorhebt. Der erste Abschnitt ist eine 2-Spal-verschachtelte Reihe (verschachtelt in einer weiteren 2-Spalte-Reihe) mit zwei Bildern, und als nächstes ist ein weiteres großes Bild. Ein horizontales Textbanner bricht das Netz und fügt einen Kontext und einen Anruf auf die Handlung hinzu. Der untere Abschnitt bringt ein weiteres dreispaliges Layout, um die Geschichte fortzusetzen, aber mit Platz für eine längere Textbeschreibung.

Dieses Design eignet sich perfekt für Portfolios, Immobilien -Showcases oder redaktionelle Layouts, die visuelle Rhythmus und klare Inhaltshierarchie erfordern. Es funktioniert wunderschön über Bildschirmgrößen, während es sich immer noch strukturiert und beabsichtigt fühlt.

Wie man es baut

Beginnen Sie mit einer zweispaltigen Reihe. Fügen Sie ein Bild rechts hinzu und nisten Sie eine weitere Zeile in der linken Spalte. Fügen Sie allen Bildern hinzu. Dann wird eine weitere verschachtelte Reihe unter ein Banner gestellt, um neben einem anderen Satz einen Textabsatz zu halten. Wiederholen Sie die gesamte Struktur oder nehmen Sie einige Änderungen vor, z. B. die Textzeile über verschachtelte Bilder.

Dieses Layout ist einzigartig, wie verschachtelte Zeilen in jedem visuellen Abschnitt verwendet werden. Die verschachtelten Zeilen von Divi 5 ermöglichen eine strukturelle Flexibilität, mischen Zeilenformate in einer einzelnen Spalte und schichten sie unter kontextbezogene Elemente.

Layout 2: Split Focus Gallery

Ein zweispaltiges Layout, bei dem die linke Spalte ein vertikales Bild über einem kurzen Textblock stapelt, und die rechte Spalte enthält ein großes Bild, gefolgt von einer Reihe von drei kleineren unterstützenden Bildern. Diese Anordnung beleuchtet einen visuellen Hauptmoment, während sowohl der schriftliche Kontext als auch ein sekundärer Bildstreifen innerhalb desselben Layouts Platz ermöglichen.

Das Layout der Split Focus Gallery eignet sich perfekt für Hochzeits-, Event- oder Blumengalerien, in denen jeder visuelle Block einen einzigen Moment oder eine einzelne Emotion erfasst. Es funktioniert auch gut, wenn Sie ein mutiges fokales Bild mit unterstützenden Miniaturansichten und ein kleines Zitat, ein Testimonial oder eine Intro -Nachricht kombinieren möchten.

Wie man es baut

Erstellen Sie eine 2-Spal-Reihe. Stapeln Sie in der linken Spalte mit zwei separaten Zeilen ein vertikales Bild oben und ein Textmodul. Fügen Sie in der rechten Spalte ein einzelnes Bildmodul oben für das vorgestellte Foto ein und fügen Sie dann eine verschachtelte Zeile mit drei Spalten direkt darunter hinzu, um kleinere unterstützende Bilder zu halten.

Der Schlüssel ist das Einstellen von Polster und setzt die Dachrinnenbreite in der verschachtelten Reihe auf 1 , um alles fest und sauber zu halten. Wenn Sie später die Bilder hinzugefügt haben, erstellen Sie eine Randvoreinstellung (festgelegte Randbreite auf 2 und Randfarbe weiß ) und wenden Sie ihn auf alle Elemente an.

Layout 3: Project Spotlight Gallery

Dieses Layout verwandelt Ihre Bildergalerie in ein Präsentieren einzelner Projekte oder Angebote. Anstatt nur Visuals anzuzeigen, erhält jedes Element ein eigenes Etikett und ein eigenes Handlungsaufruf, was es ideal für Portfolios, Rezepte, Produkthighlights oder Fallstudien macht.

Eine kurze zweispaltige Zeile folgt jedem Bild. Die linke Seite enthält eine schnelle Beschreibung oder einen Projektnamen, und die rechte Seite verfügt über eine Schaltfläche, die den Benutzer einlädt, Aktionen wie jetzt zu bestellen . Das Layout der Project Spotlight Gallery bringt mehr Zweck und Interaktion in Ihre Galerie.

Wie man es baut

Unter jedem Bild haben wir eine zweispaltige verschachtelte Reihe hinzugefügt. Wir haben die linke Spalte für eine kurze Beschreibung und die rechte Spalte verwendet, um eine Taste zur Aufruf-Action zu erhalten. Anschließend haben wir die Schaltfläche mit globalen Stilen gestylt und diese Struktur für jede Galerieartikel wiederholt, um die Konsistenz aufrechtzuerhalten. Um das Zeilenüberlagerung zum Bild zu machen, haben wir die Position auf absolut mit vertikalem Offset 40px und Z Index 1000 festgelegt.

Wir haben allen Bildern auch ein Schattenvoreingang hinzugefügt, das der Galerie nicht nur einen polierten Look verleiht, sondern mir auch Zeit gespart hat, indem ich das konsistente Branding in nur wenigen Klicks über mehrere Module hinweg anwenden konnte.

Layout 4: Scrollscover Gallery

Das Layout der Scroll -Enthüllung von Galerie ist für visuelles Geschichtenerzählen ausgelegt, das sich als Benutzer scrollen. Jeder Abschnitt verfügt über ein großes Bild, das mit kleineren unterstützenden Visuals gepaart ist (erstellt durch Verschachteln mehrerer Zeilen).

Es eignet sich perfekt für redaktionelle Galerien, Rezept -Showcases (Hervorhebung von Schritten oder Zutaten) oder Unternehmensteamseiten, die Gruppenmomente interaktiv erfassen möchten. Anstatt die Zuschauer zu überwältigen, führt es sie jeweils visuell durch jede Geschichte.

Wie man es baut

Die Struktur ist einfach: Erstellen Sie eine Zwei-Spalten-Reihe. Fügen Sie ein Bildmodul, eine Überschrift, einen Text und eine Schaltfläche links hinzu. Nisten Sie auf der rechten Seite eine neue Zeile mit zwei Spalten und fügen Sie die Bildmodule in jede einzelnen ein, um die Visuals zu unterstützen. Anschließend können Sie alternativ einzelne und zweispaltige Reihen stapeln, um ein mauerwertiges Raster zu erstellen.

Der Schlüsselspieler dieses Layouts ist der linke Abschnitt, der festhält. Um Ihren vorgestellten Abschnitt zu kleben, müssen Sie eine Modulgruppe erstellen und die Einstellungen für Scroll -Effekte aktivieren. Klicken Sie auf Ihre Modulgruppe und gehen Sie zu Einstellungen> Erweitert> Bildlaufeffekte.

Lassen Sie Ihre Modulgruppe nach oben kleben und stecken Sie die untere klebrige Grenze auf den Körperbereich. Wenn Benutzer nach unten scrollen, hält sich das vorgestellte Bild fest, während sich die anderen Bilder weiter verbessern.

Layout 5: gestaffelte Produktgalerie

Nicht jede Galerie braucht ein fokales Bild oder eine komplexe Struktur. Manchmal brauchen Sie nur eine Reihe von Bildern, die in einer gestaffelten Struktur angeordnet sind, und hier glänzen verschachtelte Reihen leise.

Dieses Layout ist ideal für E-Commerce- oder produktorientierte Websites, auf denen Sie eine Sammlung hervorheben möchten, ohne dass sie sich wie ein typisches Netz anfühlt. Es verwendet viel Weißraum und verschachtelte Reihen, um die visuelle Monotonie zu brechen, indem sie in einem einzigen Abschnitt ein-, zwei- und dreispaltige Bildreihen mischen. Das Ergebnis ist ein ausgewogenes Layout, das sich handgefertigt und redaktionell anfühlt und perfekt für Produktdetails, materielle Nahaufnahmen oder ergänzende Gegenstände vorgestellt wird.

Es eignet sich besonders gut für Marken mit taktilen oder luxuriösen Produkten wie Lederwaren, Keramik oder handgefertigten Gegenständen, in denen visuelle Geschichtenerzählungen wichtig sind.

Wie man es baut

Erstellen Sie eine zweispaltige Reihe. Fügen Sie ein gestapeltes Layout von Bildern mit verschachtelten Zeilen in der linken Spalte hinzu. Eine Reihe hat zwei kleine Fotos nebeneinander und die andere hat ein vertikales Bild. Nest in der rechten Spalte eine neue Zeile mit drei Spalten und fügen Sie Produktbilder ein. Platzieren Sie unten Ihren Text und Ihre Schaltfläche.

Um den überlappenden Handtascheneffekt zu erstellen (wie im handgefertigten handwerklichen Abschnitt) , fügen Sie ein Bildmodul in der Zeile hinzu und verwenden Sie die absolute Positionierung (erweitert> Position> absolut ). Verwenden Sie dann die Offset-Sliders und Z-Index, um sie zwischen den beiden Abschnitten zu schichten. Auf diese Weise erstellen Sie Layouts im Magazin-Stil, bei dem Bilder das Netz für zusätzliches visuelles Interesse brechen.

Layout 6: Asymmetrisches Portfolio -Netz

Das asymmetrische Portfolio-Gitterlayout kombiniert Geschichtenerzählen und Bilder in einem sauberen Zwei-Spal-Format. Verwenden Sie die linke Spalte, um ein Projekt mit einer Überschrift, einer kurzen Beschreibung und einer CTA vorzustellen. In der rechten Spalte steht eine dreispaltige verschachtelte Reihe über einem großen Bild, das die perfekte Gelegenheit bietet, wichtige Grafiken mit unterstützenden Aufnahmen zu zeigen.

Dieses Design ist ideal für Designer, Fotografen oder Agenturen, die kuratierte Fallstudien oder Portfolios präsentieren. Es hält sich auf die Aufmerksamkeit konzentriert, während es einen natürlichen Rhythmus und einen mobilen Fluss anbietet.

Wie man es baut

Beginnen Sie mit einer zweispaltigen Reihe. Fügen Sie in der linken Spalte ein Textmodul für Ihren Titel und Ihre Beschreibung hinzu, gefolgt von einem Schaltflächenmodul (falls Sie möchten).

Fügen Sie eine verschachtelte Zeile in der rechten Spalte hinzu. Wählen Sie das dreispaltige Layout und stapeln Sie ein anderes Bildmodul. Fügen Sie drei unterstützende Bilder in die verschachtelte Zeile und ein großes Bild in das gestapelte Bildmodul ein. Verwenden Sie andere Zeilenstrukturen, um mehr Muster zu erstellen.

Um alles in Einklang zu bringen, stellen Sie die Dachrinnenbreite auf 1 ein und machen Sie Ihre Bilder vor dem Hochladen auf konsistente Höhen. Verwenden Sie eine globale Bildvoreinstellung (z. B. einen weichen Rand oder einen Drop -Schatten) und eine Schwebeffekte, um die Dinge interaktiv zu halten, aber raffiniert.

Sie würden auch eine weitere verschachtelte Zeile bemerken, die das Bild überlagert. Wir haben die Position auf absolut eingestellt, um den Overlay -Effekt zu erzeugen .

Top -Tipps zum Erstellen interaktiver Bildgalerien

Sobald Ihr Layout vorhanden ist, streuen Sie einige zusätzliche Details, um Ihre Galerien polierter zu gestalten. So wie: wie:

1. Erzeugen Sie Schwebeffekte

Das Hinzufügen von Schwebeffekten ist eine der einfachsten Möglichkeiten, um Ihre Bildgalerien dynamischer zu fühlen. Es fügt Interaktivität hinzu, ohne vom Inhalt abzulenken, und dabei hilft sich, sich lebendig zu fühlen, wenn Benutzer sich mit ihnen beschäftigen.

In Divi 5 ist es einfach, Ihre Bilder zu schwebenden Auswirkungen auf Ihre Bilder hinzuzufügen. Während der Bearbeitung können Sie problemlos in Schwebewechsel (und Responsive Modi) wechseln und Ihre Einstellungen anpassen.

Sie müssen nicht für jede unterschiedliche Bild- oder Einstellungsoption zu schweben. Wechseln Sie einfach einmal, nehmen Sie Änderungen an allen Elementen vor, die Sie anpassen möchten, und speichern Sie. Wir haben die Grenzfarbe geändert, aber Sie können auch Filter, verwandeln, Schatten hinzufügen und einfacher.

Sie können dies auf einzelne Bilder anwenden oder als Voreinstellung speichern, wenn Sie möchten, dass alle Ihre Bilder genauso verhalten. Es ist ein kleines Detail, aber Ihre Galerie fühlt sich nachdenklich und interaktiv an, und Divi macht es mühelos.

2. Verwenden Sie die Attribute für Kopieren/Einfügen, um Stile schnell auf Bilder anzuwenden

Das manuelle Anpassung jedes Bildes in einer Galerie kann zeitaufwändig sein, insbesondere wenn sie konsistente Stile wie Grenzen, Schatten oder Schwebeffekte anwenden. Während Voreinstellungen für globale Stile hervorragend sind, möchten Sie für jede geringfügige Anpassung möglicherweise kein neues Voreinsatz erstellen.

Das Attributmanagementsystem von Divi 5 bietet eine optimierte Lösung. Mit nur wenigen Klicks können Sie Stile aus einem Bild kopieren und auf andere anwenden. Sie müssen den gleichen Anpassungsvorgang für jedes Bild nicht manuell wiederholen. Sie können einfach Konsistenz kopieren und einfügen und einfügen.

Passen Sie beispielsweise ein Element an und kopieren Sie und fügen Sie seine Attribute in die anderen Elemente ein, um den Stil zu replizieren.

Divi 5 ermöglicht auch eine stärkere Kontrolle. Beispielsweise können Sie bestimmte Attributgruppen kopieren und einfügen, z. B. nur die Entwurfseinstellungen oder nur die Schwebeffekte. Dies macht Ihren Workflow effizient und kohäsiv.

3.. Verwenden Sie Clamp, um flüssige und reaktionsschnelle Bilder zu erstellen

In einem modernen Galerie -Layout sollten Ihre Bilder nicht nur skalieren, sondern auch intelligent auf verschiedene Bildschirmgrößen reagieren. Genau das hilft Ihnen mit der CLAMP () -Funktion zu erreichen.

Divi 5 unterstützt Clamp () und viele andere fortgeschrittene Einheiten, mit denen Sie überall die Größenwerte eingeben können, einschließlich Bildbreite, Polsterung und Margenfeldern. Clamp () ist ideal für die Reaktionsfähigkeit. Sie können einen minimalen, idealen und maximalen Wert in einer Zeile festlegen.

Beispielsweise fordert eine Klemme (1200px, 30VW, 1400px) Divi auf, niemals unter 1200 Pixel zu gehen, bis zu 30% der Ansichtsfensterbreite zu skalieren, sie jedoch bei 1400 PX zu beenden.

Dies ist besonders nützlich für Bildstreifen oder gestaffelte Layouts, bei denen Sie ein flüssigeres Netz ohne Haltepunkte wünschen. In Kombination mit verschachtelten Zeilen hilft Clamp () jedem Block auf natürliche Weise, ohne separate mobile Anpassungen zu benötigen.

4. Vorschau und Optimierung für verschiedene Geräte

Sobald Ihr Layout auf dem Desktop gut aussieht, können Sie es einfach für Tablets und Mobile mit den integrierten reaktionsschnellen Bearbeitungswerkzeugen von Divi einstellen. Wechseln Sie zwischen Geräteansichten und passen Sie die Einstellungen wie Bildgröße, Abstand und Textausrichtung für jeden Bildschirm an.

Zum Beispiel möchten Sie möglicherweise die Polsterung zwischen Zeilen auf mobilen oder Stapelspalten anders reduzieren, um ein besseres Bildlauferlebnis zu erhalten. Wenn Sie diese Einstellungen ein paar Minuten dauern, können Sie sich auf jedem Bildschirm sauber und professionell anfühlen.

Laden Sie die Galerie -Layouts kostenlos herunter

Möchten Sie die Galerie -Layouts 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!

Erstellen Sie verschachtelte Bildgalerien (und mehr) mit Divi 5

Die verschachtelten Zeilen von Divi 5 vereinfachen komplexe Layouts, indem Sie Zeilen innerhalb von Zeilen platzieren können. Sie bieten auch unendliche Nestabilität und präzise Kontrolle über Ihre Designs.

Verschachtelte Reihen sind nur eines der exklusiven Funktionen von Divi 5. Suchen Sie nach Divi's neues Layout-System von Divi, das auch eine Vielzahl neuer Zeilenvorlagen und Flexbox-Steuerelemente einführt, um Ihnen alle Werkzeuge und Einfachheit zu bieten, um jedes Layout zu erstellen, das Sie sich vorstellen können.

Wenn wir Divi 5 weiter verbessern, können Sie noch mehr Funktionen erwarten, die Ihre Entwurfsfunktionen verbessern und Ihren Workflow vereinfachen.

Wenn Sie Galerien auf die harte Weise gebaut haben, ist jetzt der perfekte Zeitpunkt, um Divi 5 zu probieren und zu erfahren, wie verschachtelte Zeilen und visuelle Layout -Tools alles vereinfachen können.

Divi 5 ist bereit, auf neuen Websites verwendet zu werden, warten Sie jedoch ein wenig, bevor Sie vorhandene migrieren.