So erstellen Sie eine interaktive Bildcollage mit den Positionsoptionen von Divi

Die neuen Positionsoptionen von Divi öffnen die Tür zum Erstellen einzigartiger Bildcollagen-Layouts unter Verwendung der absoluten Positionseigenschaft. Auf diese Weise können Sie jedes Element Ihres Designs genauer platzieren. Und sobald Sie dies mit den unzähligen Kombinationen von Designeinstellungen in Divi kombinieren, können Sie einige ziemlich erstaunliche Bildcollagen entwerfen.

In diesem Tutorial zeige ich Ihnen, wie Sie die integrierten Positionsoptionen von Divi verwenden, um in wenigen Minuten eine schöne interaktive Bildcollage für Ihre Divi-Website zu erstellen.

Lass uns anfangen!

Vorgeschmack

Hier ist ein kurzer Blick auf das interaktive Bildcollagen-Layout, das wir in diesem Tutorial erstellen werden.

Laden Sie das Layout KOSTENLOS herunter

Um das Bildcollagen-Layout 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 Layout in Ihre Seite zu importieren, entpacken Sie einfach die ZIP-Datei und ziehen Sie die JSON-Datei in den Divi Builder.

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.

Erstellen der interaktiven Bildcollage mit den Positionsoptionen von Divi

Optimieren der Zeile und Spalte

Erstellen Sie zunächst eine einspaltige Zeile.

Zeileneinstellungen

Als nächstes müssen wir die Zeile aktualisieren, damit wir keinen zusätzlichen Platz zwischen den Modulen haben (über die Bundstegbreite), also setzen wir die Bundstegbreite auf 1. Wir müssen auch sicherstellen, dass die Zeile die volle Breite des Browserfensters überspannt so können wir die vw-Längeneinheiten nutzen, um unsere Bilder zu positionieren (die vw-Längeneinheit (Viewport width) bezieht sich auf die Breite des Browserfensters). Wenn die Breite auf 100 % eingestellt ist, können wir mit vw-Längeneinheiten unsere Bilder innerhalb der Zeile/Spalte positionieren, sodass die Position auf allen Browserbreiten für ein nahtloses responsives Design erhalten bleibt. Und um einen Bildüberlauf außerhalb der Zeile auszublenden, müssen wir den Überlauf auf ausgeblendet setzen.

Optimieren Sie dazu die Zeileneinstellungen wie folgt:

Einstellen der Spaltenhöhe

Standardmäßig wird die Höhe der Spalte durch die Höhe des Inhalts (oder der Divi-Module) bestimmt. Divi-Module (wie alle divs in HTML) haben standardmäßig eine statische Position, was bedeutet, dass sie der übergeordneten Spalte tatsächlichen Platz/Höhe hinzufügen, da sie im normalen Fluss der Seite positioniert ist. Divi-Module, die eine absolute Position haben, brechen jedoch aus dem normalen Fluss aus und schaffen keinen tatsächlichen Platz/Höhe für die Säule. Aus diesem Grund müssen wir der Spalte eine bestimmte Höhe hinzufügen, damit wir die Bilder dann in einem vorgegebenen Raum positionieren können.

Öffnen Sie dazu die Zeileneinstellungen und aktualisieren Sie die Spalteneinstellungen, indem Sie das folgende benutzerdefinierte CSS zum Hauptelement hinzufügen.

height: 40vw;

Stellen Sie auf der Registerkarte Telefon die Höhe auf den Standardzustand zurück, da wir auch die Bilder auf dem Telefon wieder in eine statische Position ändern. Fügen Sie dem Telefon-Tab das folgende benutzerdefinierte CSS hinzu:

height: auto !important;

Titeltext hinzufügen

Wenn die Spaltenhöhe eingestellt ist, können wir damit beginnen, unsere absolut positionierten Elemente zur Spalte hinzuzufügen. Beginnen wir damit, ein Textmodul für den Titel unseres Bildcollagen-Layouts hinzuzufügen.

Inhalt des Textmoduls

Aktualisieren Sie dann den Text mit folgendem Inhalt:

<h2>Recent Work</h2>

Einstellungen für das Textmodul

Aktualisieren Sie dann die Textmoduleinstellungen wie folgt:

• Überschrift 2 Schriftart: Limelight
• Überschrift 2 Textausrichtung: Mitte
• Überschrift 2 Textfarbe: #24005b
• Überschrift 2 Textgröße: 5vw (Desktop und Tablet), 50px (Telefon)
• Breite: 100%
• Max. Breite: 35vw (Desktop und Tablet), 100 % (Telefon)
• Position: Absolut (Desktop), Standard (Telefon)
• Horizontaler Versatz (Desktop): 35vw

Bilder erstellen und positionieren

Nun, da der Titel vorhanden ist, erstellen wir das erste Bild für unsere interaktive Bildcollage. Die Idee ist, das erste mit allen Optimierungen zu erstellen, damit wir es duplizieren können, um das Erstellen und Positionieren der restlichen Bilder für die Collage zu vereinfachen.

Optimieren des ersten Bildes mit Hover-Effekten, Lightbox und absoluter Positionierung.

Fügen Sie zunächst ein Bildmodul unter dem Textmodul hinzu.

Laden Sie dann ein Bild in das Modul hoch und wählen Sie die Option, das Bild in einer Lightbox zu öffnen. Jetzt wird das Bild beim Klicken in einer Lightbox angezeigt.

Bild beim Hover skalieren

Fügen Sie zusätzlich zur Lightbox-Interaktion einen Hover-Effekt hinzu, der dazu führt, dass das Bild etwas größer wird. Aktualisieren Sie dazu die folgende Transformationsoption:

• Maßstab transformieren (Hover): 115%

Absolute Positionierung mit Z-Index-Priorität bei Hover

Um unser Bild zu positionieren, verwenden wir eine absolute Position mit vw-Längeneinheiten. Aktualisieren Sie die Positionsoptionen wie folgt:

Auf Desktop (und Tablet)

• Position: absolut
• Ort: Oben links
• Vertikaler Versatz: 5vw
• Horizontaler Versatz: -2vw

Am Telefon

• Position: Standard

Beim Schweben

• Z-Index: 2

Bilddesign und responsive Einstellungen

Aktualisieren Sie dann Folgendes:

• Bildausrichtung: links (Desktop), Mitte (Telefon)
• Breite: 75% (Telefon)
• Max. Breite: 20vw (Desktop und Tablet), 100 % (Telefon)
• Rand (Telefon): 30px unten
• Box Shadow: siehe Screenshot
• Sättigung: 0% (Desktop), 100% (Hover)

Verwenden des ersten Bildes als Vorlage zum schnellen Erstellen und Positionieren der anderen Bilder

Sobald das erste Bild fertig ist, ist es wirklich einfach, neue Bilder zu erstellen, um die interaktive Bildcollage zu erstellen. Es ist auch ein leistungsstarkes Designwerkzeug, da Sie die Bilder an Ort und Stelle ziehen und die Größe anpassen können, während Sie das Design in Echtzeit anzeigen.

Hier ist der Prozess…

1. Duplizieren Sie das Bild, indem Sie auf das Duplikat-Symbol klicken. Das duplizierte Bild wird absolut an derselben Stelle direkt über dem zu duplizierenden Bild positioniert.
2. Ziehen Sie das Bild an Ort und Stelle. Da das duplizierte Bild die vw-Längeneinheit des vorherigen Bildes übernimmt, können Sie das Bild mithilfe des Ziehsymbols genau an der gewünschten Stelle in der Zeile positionieren.
3. Aktualisieren Sie das Image mit einem neuen.
4. Passen Sie die Größe des Bildes mit den integrierten Größenoptionen an.

Hier ist eine Illustration, wie das aussehen würde, wenn das zweite Bild erstellt wird.

Das Coole an diesem Vorgang ist, dass die Position (vertikaler und horizontaler Versatz) jedes Mal bestimmt wird, wenn Sie das Bild an die richtige Stelle ziehen. Sie müssen die Offset-Positionen nicht manuell in den Einstellungen aktualisieren.

Aber damit Sie die Offsets sehen können, die ich für dieses Beispiel verwendet habe, füge ich sie für jedes Bild unten zusammen mit den Größenanpassungen ein.

Bild #2 Aktualisierungen

• Vertikaler Versatz: 10,06 vw
• Horizontaler Versatz: 16,51 vw
• Maximale Breite: 18 vw

Bild #3 Aktualisierungen

• Vertikaler Versatz: 24,25 vw
• Horizontaler Versatz: 7.13vw
• Maximale Breite: 20vw

Bild #4 Aktualisierungen

• Vertikaler Versatz: 17,69 vw
• Horizontaler Versatz: 31,91 vw
• Maximale Breite: 18vw

Bild #5 Aktualisierungen

• Vertikaler Versatz: 12vw
• Horizontaler Versatz: 46,82 vw
• Maximale Breite: 15vw

Bild #6 Aktualisierungen

• Vertikaler Versatz: 19.13vw
• Horizontaler Versatz: 58,84 vw
• Maximale Breite: 12vw

Bild #7 Aktualisierungen

• Vertikaler Versatz: 28,24 vw
• Horizontaler Versatz: 54,2 vw
• Maximale Breite: 10vw

Bild #8 Aktualisierungen

• Vertikaler Versatz: 32.5vw
• Horizontaler Versatz: 74,04 vw
• Maximale Breite: 8vw

Bild #9 Aktualisierungen

• Vertikaler Versatz: 1,01vw
• Horizontaler Versatz: 75.5vw
• Breite: 27vw
• Maximale Breite: 27vw

Hintergrundbild hinzufügen

Für den letzten Schliff fügen Sie dem Abschnitt ein Hintergrundbild hinzu und Sie sind fertig!

Endergebnis

So sieht die interaktive Bildergalerie auf Desktop und Tablet aus. Beachten Sie die Hover-Effekte, die das Bild in den Vordergrund bringen, die Vollfarbversion des Bildes anzeigen und das Bild größer skalieren. Dann können Sie auf das Bild klicken, um den Lightbox-Effekt anzuzeigen.

Hier ist das Design auf dem Telefondisplay.

Ändern des Positionspunkts für die Bilder für verschiedene Layout-Designs

Da die Versätze für jedes der Bilder relativ zum Positionspunkt sind, können wir den ursprünglichen Positionspunkt für die Bilder ändern, um unser Design in Sekundenschnelle aus verschiedenen Richtungen zu sehen.

Verwenden Sie dazu die Mehrfachauswahlfunktion von Divi, um alle Bildmodule auszuwählen. Öffnen Sie dann eine der Bildmoduleinstellungen, um die modalen Elementeinstellungen aufzurufen.

Dann können Sie die Position in jeder der vier Ecken für verschiedene Strukturen des Layouts ändern.

Lage in der oberen rechten Ecke

Position in der unteren linken Ecke

Position in der unteren rechten Ecke

Abschließende Gedanken

Die neuen Positionsoptionen von Divi sind sowohl leistungsstark als auch bequem. Und wie wir in diesem Tutorial erfahren haben, bieten sie uns einige wunderbare Designwerkzeuge zum Entwerfen einzigartiger Layouts für unsere Bilder. Hoffentlich dient diese interaktive Bildcollage als kleine Inspiration für Ihr nächstes Projekt.

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

Danke schön!