So verwenden Sie die Positionsoptionen von Divi zum Erstellen von Image-Bundles

Egal, ob Sie einen frischen neuen Look für eine Bildergalerie suchen oder einfach nur eine schöne Anzeige für Produktbilder wünschen, dieses Tutorial sollte helfen. Normalerweise können wir beim Hinzufügen von Bildern zu einer Divi-Website das Design auf ein Bild pro Spalte beschränken. Obwohl dies traditionell ein sicheres und sauberes Design ist, können Sie feststellen, dass durch das Gruppieren von Bildern in derselben Spalte schöne Bilderbündel-Designs erstellt werden können, die in ein- oder mehrspaltigen Layouts großartig aussehen.

In diesem Tutorial zeigen wir Ihnen, wie Sie die integrierten Positionsoptionen von Divi verwenden, um 3 kreative Bildpakete zu entwerfen, die Sie auf vielfältige Weise für Ihre Website verwenden können.

Lass uns anfangen.

Vorgeschmack

Hier ist ein kurzer Blick auf die Designs, die wir in diesem Tutorial erstellen werden.

Bildpaket-Design #1

Beginnen Sie mit dem Bauen von Design Nr. 1

Bildpaket-Design #2

Beginnen Sie mit dem Bauen von Design #2

Bildpaket-Design #3

Beginnen Sie mit dem Bauentwurf #3

Laden Sie das Layout KOSTENLOS herunter

Um die Designs aus diesem Tutorial in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Um das Abschnittslayout in Ihre Divi-Bibliothek zu importieren, navigieren Sie zur Divi-Bibliothek.

Klicken Sie auf die Schaltfläche Importieren.

Wählen Sie im Portabilitäts-Popup die Registerkarte Import und wählen Sie die Download-Datei von Ihrem Computer.

Klicken Sie dann auf die Schaltfläche Importieren.

Sobald dies erledigt ist, wird das Abschnittslayout im Divi Builder verfügbar sein.

Kommen wir zum Tutorial, ja?

Was Sie brauchen, um loszulegen

Um zu beginnen, müssen Sie Folgendes tun:

1. Falls noch nicht geschehen, installieren und aktivieren Sie das Divi-Theme.
2. Erstellen Sie eine neue Seite in WordPress und verwenden Sie den Divi Builder, um die Seite im Frontend zu bearbeiten (visueller Builder).
3. Wählen Sie die Option „Von Grund auf neu erstellen“.

Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.

Bildpaket Nr. 1 gestalten

Für dieses erste Bildbündel-Design werden wir zwei (leicht gedrehte) Bilder auf jeder Seite eines mittleren Bildes positionieren.

Beginnen Sie mit dem Hinzufügen einer einspaltigen Zeile zu einem regulären Abschnitt.

Mittleres Bild hinzufügen

Fügen Sie in der Spalte ein Bildmodul hinzu.

Laden Sie dann ein Bild in das Modul hoch.

Für diese Bilder verwenden wir Screenshots aus dem Fitness Coach Layout Pack. Jeder von ihnen sollte 880 x 1200 Pixel groß sein.

Öffnen Sie die Bildeinstellungen und aktualisieren Sie Folgendes:

• Breite: 50%
• Modulausrichtung: Mitte

Fügen Sie einen Boxschatten wie folgt hinzu:

• Box Shadow: siehe Screenshot
• Vertikale Position des Boxschattens: 0px
• Stärke der Box-Schattenunschärfe: 38px
• Stärke der Box-Schattenausbreitung: 5px
• Schattenfarbe: rgba(0,0,0,0.2)

Setzen Sie dann den Z-Index auf 1, damit er über den anderen Bildern im Bündel bleibt.

• Z-Index: 1

Linkes Bild hinzufügen

Um das linke Bild im Bundle zu erstellen, fügen Sie ein neues Bild unter dem mittleren Bild hinzu.

Aktualisieren Sie das Bild mit einem neuen (stellen Sie sicher, dass alle die gleiche Größe haben, um die besten Ergebnisse zu erzielen).

Aktualisieren Sie auf der Registerkarte Design die Breite wie folgt:

• Breite: 30%

Fügen Sie dann den Boxschatten wie folgt hinzu:

• Box Shadow: siehe Screenshot
• Schattenfarbe: rgba(0,0,0,0.2)

Als nächstes geben Sie dem Bild eine absolute Position an der linken mittleren Position, so dass es neben dem mittleren Bild auf der linken Seite sitzt.

• Position: absolut
• Ort: linke Mitte

Um dem Bild eine kleine Drehung zu verleihen, aktualisieren Sie die Option zum Transformieren des Drehens wie folgt:

Transformieren Z-Achse drehen: -10deg

Fügen Sie das richtige Bild hinzu

Um das rechte Bild zu erstellen, öffnen Sie das Ebenenfeld und duplizieren das linke Bild.

Beschriften Sie die Bildbausteine ​​(linkes Bild, rechtes Bild etc.), damit Sie sie später leicht identifizieren können. Öffnen Sie dann die Einstellungen für das duplizierte Bild und passen Sie den Speicherort wie folgt an:

• Lage: Mitte rechts

Passen Sie dann die Option zum Drehen der Transformation wie folgt an:

• Transformieren Drehen Z-Index: 10deg

Vergessen Sie nicht, das doppelte Bild durch ein neues zu ersetzen.

Sehen Sie sich nun das bisherige Ergebnis an.

Hinzufügen von Bildpaketen zu mehreren Spalten

Da die Bilder innerhalb einer Spalte positioniert sind, können Sie dieses Bildbündeldesign problemlos zu mehreren Spaltenlayouts hinzufügen.

Um das Image-Bundle mehreren Spalten hinzuzufügen, duplizieren Sie die Zeile mit dem aktuellen Image-Bundle.

Duplizieren Sie in der duplizierten Zeile die Spalte, um eine weitere Spalte mit dem enthaltenen Image-Bundle zu erstellen. Dadurch werden die Bildpakete in einem zweispaltigen Layout erstellt.

Um eine Zeile mit drei Bildpaketen zu erstellen, duplizieren Sie die zweispaltige Zeile und duplizieren Sie dann eine der Spalten in der duplizierten Zeile. Dadurch erhalten Sie ein dreispaltiges Layout.

Endergebnis

Hier ist das endgültige Design für Image Bundle #1.

Bildpaket #2 gestalten

Dieses nächste Design enthält ein Bildbündel mit fünf Bildern – ein Bild in der Mitte und vier an jeder Ecke der Säule.

Erstellen Sie zunächst einen neuen regulären Abschnitt mit einer Viertel-Halb-Viertel-Spaltenzeile.

Bild in der Mitte hinzufügen

Fügen Sie in der mittleren Spalte ein Bildmodul hinzu.

Laden Sie dann ein Bild in das Modul hoch. Wir verwenden Bilder aus dem Möbelgeschäft Layout Pack (je 800px x 1200).

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

• Hintergrundfarbe: #f7f3ec

• Breite: 55%
• Modulausrichtung: Mitte

• Rand: 0px
• Polsterung: 5 % oben, 5 % unten, 5 % links, 5 % rechts

Erhöhen Sie auf der Registerkarte "Erweitert" den Z-Index um 1, um sicherzustellen, dass das Bild über den anderen Bildern im Z-Raum bleibt.

• Z-Index: 1

Bild oben links hinzufügen

Um das Bild oben links hinzuzufügen, fügen Sie unter dem mittleren Bild in der mittleren Spalte ein neues Bildmodul hinzu.

Laden Sie ein neues Bild in das Modul hoch.

Aktualisieren Sie dann die Designeinstellungen wie folgt:

• Breite: 40%
• Rand: 0px unten

Spaltenabstand

Die Höhe der Spalte wird durch die Höhe des mittleren Bildes und die Höhe der oberen und unteren Auffüllung bestimmt, die wir hinzufügen. Um unseren absolut positionierten Bildern den richtigen Abstand zu geben, müssen wir die Höhe der Spalte erhöhen, indem wir den oberen und unteren Abstand erhöhen.

• Polsterung (Desktop): 12% oben, 12% unten
• Polsterung (Tablet): 24% oben, 24% unten

Als nächstes geben Sie dem oberen linken Bild eine absolute Position wie folgt:

• Position: Absolut
• Ort: oben links

Bild oben rechts hinzufügen

Nachdem das Bild oben links vorhanden ist, duplizieren Sie das Bild, um das Bild oben rechts zu erstellen.

(An dieser Stelle ist es eine gute Idee, jedem der Bilder Labels hinzuzufügen, um sie später leichter identifizieren zu können.)

Öffnen Sie das Duplikat (oben rechts) und aktualisieren Sie die Position der absoluten Position:

• Ort: oben rechts

Bild unten links hinzufügen

Um das Bild unten links zu erstellen, duplizieren Sie das Bild oben rechts und aktualisieren Sie die Beschriftungen nach Bedarf.

Öffnen Sie die Einstellungen für das Duplikat (unten links) und aktualisieren Sie die absolute Positionsposition:

• Ort: unten links

Bild unten rechts hinzufügen

Um das untere rechte Bild zu erstellen, duplizieren Sie das untere linke Bild und aktualisieren Sie das Etikett nach Bedarf. Aktualisieren Sie dann das Bild und geben Sie ihm einen neuen Speicherort:

• Ort: unten rechts

Rahmen-Schatten-Design-Akzent hinzufügen

Um einen schönen Designakzent hinzuzufügen, können wir dem oberen linken Bild wie folgt einen Kastenschatten hinzufügen:

• Box Shadow: siehe Screenshot
• Horizontale Position des Boxschattens: -170px
• Vertikale Position des Kastenschattens: 170px
• Schattenfarbe: rgba(36,57,74,0.07)

Fügen Sie dem oberen rechten Bild wie folgt einen kostenlosen Box-Shadow-Designakzent hinzu:

• Box Shadow: siehe Screenshot
• Horizontale Position des Kastenschattens: 170px
• Vertikale Position des Kastenschattens: 170px
• Schattenfarbe: rgba(36,57,74,0.07)

Text zur linken Spalte hinzufügen

Um dem Design etwas Text hinzuzufügen, fügen Sie ein neues Textmodul in die linke Spalte ein.

Inhalt

Aktualisieren Sie dann den Inhalt wie folgt:

<h2>Image Bundle</h2>

Textdesign

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

• Überschrift 2 Schriftart: Montserrat
• Überschrift 2 Schriftstil: TT
• Überschrift 2 Textausrichtung: rechts
• Überschrift 2 Textfarbe: #24394a
• Überschrift 2 Textgröße: 34px
• Überschrift 2 Buchstabenabstand: 4px
• Überschrift 2 Zeilenhöhe: 1.3em

Linke Spalte auffüllen

Um den Text etwas nach unten zu bringen, öffnen Sie die Einstellungen für die linke Spalte und aktualisieren Sie den folgenden Abstand:

• Polsterung: 20% übrig

Text zur rechten Spalte hinzufügen

Um den Text in der rechten Spalte zu erstellen, kopieren Sie den Textbaustein in die linke Spalte und fügen Sie ihn in die rechte Spalte ein. Öffnen Sie dann die Texteinstellungen und aktualisieren Sie Folgendes:

• Überschrift 2 Textausrichtung: links

Rechte Spalte auffüllen

Fügen Sie wie für die linke Spalte der rechten Spalte (Spalte 3) die folgende Auffüllung hinzu, um das Textmodul zu schließen.

• Polsterung: 33% oben

Abschnitt Hintergrund

Um das Design fertigzustellen, öffnen Sie die Abschnittseinstellungen und fügen Sie die folgende Hintergrundfarbe hinzu:

• Hintergrundfarbe: #f7f3ec

Hier das bisherige Ergebnis.

Hinzufügen von Bildpaketen zu mehreren Spalten

Um dieses Bildpaket mehreren Spalten hinzuzufügen, duplizieren Sie die Zeile und löschen Sie dann die linke und rechte Spalte in der doppelten Zeile, sodass nur die Spalte mit dem Bildpaket übrig bleibt.

Wählen Sie mit der Mehrfachauswahl das obere linke Bild und das obere rechte Bild aus. Öffne die Einstellungen und nimm den Box-Shadow heraus.

Dann duplizieren Sie die Spalte ein- oder zweimal, um die mehreren Spalten mit den enthaltenen Image-Bundles zu erstellen.

Wenn Sie ein dreispaltiges Layout für Ihr Image-Bundle erstellen, öffnen Sie die Spalteneinstellungen für jede Spalte und aktualisieren Sie die Auffüllung wie folgt:

• Polsterung: 8% oben, 8% unten

Endergebnis

Hier ist das Endergebnis.

Und hier ist es auf dem Handy.

Bildpaket-Design #3

Für dieses letzte Bildpaket-Design werden wir 5 Bilder nebeneinander mit subtiler 3D-Rotation positionieren, um eine schöne Anzeige für Dinge wie untergeordnete Themen oder Layoutpakete zu erstellen.

Zeile hinzufügen

Fügen Sie zunächst eine einspaltige Zeile zu einem regulären Abschnitt hinzu.

Mittleres Bild hinzufügen

Fügen Sie innerhalb der Zeile ein Bildmodul hinzu.

Laden Sie dann ein Bild in das Bildmodul hoch. Wir verwenden dieselben 880 x 1200 Pixel großen Screenshots aus dem Fitness Coach Layout Pack, die wir für Design Nr. 1 verwendet haben.

Aktualisieren Sie auf der Registerkarte Design die Größenoptionen wie folgt:

• Breite: 30%
• Modulausrichtung: Mitte

Geben Sie dem Bild dann einen subtilen Box-Shadow:

• Box Shadow: siehe Screenshot
• Vertikale Position des Boxschattens: -12px
• Stärke der Box-Schattenunschärfe: 28px
• Schattenfarbe: rgba(0,0,0,0.11)

Als nächstes nehmen Sie den standardmäßigen unteren Rand heraus, indem Sie ihn auf 0px setzen.

• Rand: 0px unten

Um sicherzustellen, dass das Bild beim Überlappen über den anderen Bildern bleibt, passen Sie den Z-Index an.

• Z-Index: 2

Spaltenperspektive hinzufügen

Bevor wir den Rest der Bilder zum Bildpaket hinzufügen, müssen wir der Spalte benutzerdefiniertes CSS hinzufügen, das den Bildern eine Perspektive hinzufügt, wenn sie mit den Transformationsoptionen gedreht werden. Dadurch entsteht ein realistischer 3D-Effekt.

Mittleres linkes Bild hinzufügen

Nachdem wir nun unsere Perspektive festgelegt haben, können wir mit dem Hinzufügen der anderen Bilder beginnen.

Um das mittlere linke Bild zu erstellen, duplizieren Sie das mittlere Bild.

Aktualisieren Sie die Bildbeschriftungen im Feld Ebenen nach Bedarf und aktualisieren Sie dann das Modul für duplizierte Bilder mit einem neuen Bild.

Öffnen Sie die Einstellungen für das Bild und aktualisieren Sie die absolute Positionsposition und den Z-Index wie folgt:

• Ort: unten links
• Z-Index: 1

Fügen Sie dann die folgenden Transformationsoptionen hinzu, um das Bild zu positionieren und zu drehen.

• Transformieren X-Achse übersetzen: 75%
• Transformieren X-Achse drehen: 30deg

Linkes Bild hinzufügen

Um das linke Bild zu erstellen, duplizieren Sie das gerade erstellte mittlere linke Bild.

Öffnen Sie die Einstellungen für das neue Bild und aktualisieren Sie die Breite:

• Breite: 20%

Passen Sie dann die Transformationsübersetzungsoption wie folgt an:

• Transformieren X-Achse übersetzen: 0px

Passen Sie dann den Z-Index so an, dass das Bild hinter dem mittleren linken Bild bleibt.

• Z-Index: 0

Bild in der Mitte rechts hinzufügen

Als Nächstes fügen wir dem Bildpaket ein Bild in der Mitte rechts hinzu.

Um das Bild zu erstellen, öffnen Sie das Ebenen-Popup. Dann duplizieren Sie das mittlere linke Bild, ziehen Sie das duplizierte Bild unter das linke Bild und beschriften Sie es dann entsprechend (dh „mittleres rechtes Bild“).

Öffnen Sie die Einstellungen für das mittlere rechte Bild und ändern Sie die absolute Positionsposition wie folgt:

• Ort: unten rechts

Passen Sie dann die Transformationsoptionen wie folgt an:

• Transformieren Übersetzen X-Achse: -75%
• Transformieren X-Achse drehen: -30deg

Rechtes Bild hinzufügen

Um das rechte Bild (das letzte) zu erstellen, können wir das linke Bild duplizieren. Ziehen Sie dann das doppelte Bild unter das mittlere rechte Bild und beschriften Sie es mit "rechtes Bild".

Öffnen Sie die richtigen Bildeinstellungen und aktualisieren Sie die absolute Positionsposition wie folgt:

• Ort: unten rechts

Passen Sie als Nächstes die Transformationsdrehung an.

• Transformieren X-Achse drehen: -30deg

Sehen Sie sich das bisherige Ergebnis an.

Und hier ist das gleiche Bildpaket zu mehreren Spalten hinzugefügt.

Abschließende Gedanken

Sobald wir verstehen, wie die absolute Positionsoption von Divi funktioniert, können wir sie verwenden, um einige ziemlich tolle Bildbündel-Designs zu erstellen. Das Beste an diesen Bildpaketen ist, dass sie in einer einzigen Spalte enthalten sind, sodass sie in mehreren Spalten gut aussehen und auch auf Mobilgeräten perfekt skalieren.

Ich hoffe, dies gibt Ihnen etwas Inspiration, um erstaunliche Bilddarstellungen für Ihr nächstes Projekt zu erstellen.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!