Beschriften von Bildecken in einem beeindruckenden Galerieraster mit Divi

Suchen Sie nach einer einzigartigen und schönen Möglichkeit, Bilder in einer Galerie auf Ihrer Website anzuzeigen? Wenn ja, werden Sie diesen Beitrag sicher lieben. Wir zeigen Ihnen, wie Sie Bildecken mit Textbausteinen als Teil eines schönen Designs abschneiden, das über alle Bildschirmgrößen zu 100 % reaktionsschnell bleibt. Dies ist eine großartige Möglichkeit, Ihren Bildern nummerierte Etiketten hinzuzufügen und gleichzeitig ein tolles Design zu erhalten. Sie können auch die JSON-Datei des Designbeispiels kostenlos herunterladen.

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Laden Sie das Layout des Galeriebereichs KOSTENLOS herunter

Um das kostenlose Layout des Galeriebereichs 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!

Abonnieren Sie unseren Youtube-Kanal

Beginnen wir mit der Neuerstellung

Neuen Abschnitt hinzufügen

Abstand

Als erstes müssen Sie der Seite, an der Sie gerade arbeiten, einen neuen Abschnitt hinzufügen. Öffnen Sie die Abschnittseinstellungen und entfernen Sie alle standardmäßigen oberen und unteren Polster.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Hintergrundfarbe

Fügen Sie als nächstes eine weiße Hintergrundfarbe hinzu.

• Hintergrundfarbe: #ffffff

Größe

Gehen Sie zu den Größeneinstellungen und entfernen Sie den gesamten Abstand zwischen den Spalten, Zeilen und Abschnitten, indem Sie die folgenden Einstellungen anwenden:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%

Abstand

Fahren Sie fort, indem Sie alle standardmäßigen oberen und unteren Polster entfernen.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Spalte 1, 2, 3 & 4 Hauptelement

Um nun sicherzustellen, dass eine 4-Spalten-Struktur über alle Bildschirmgrößen hinweg beibehalten wird, stellen wir sicher, dass jede der Spalten ihre 25 %-Breite behält, indem wir jedem Spaltenhauptelement die folgende Zeile CSS-Code einzeln hinzufügen:

width: 25% !important;

Bildmodul zu Spalte 1 hinzufügen

1:1 Bild hochladen

Zeit, Module hinzuzufügen! Fügen Sie der ersten Spalte ein neues Bildmodul hinzu und laden Sie ein quadratisches Bild Ihrer Wahl hoch (oder verwenden Sie eines, das Sie in dem gezippten Ordner finden, den Sie am Anfang dieses Beitrags herunterladen konnten).

Leuchtkasten

Aktivieren Sie als nächstes die Lightbox-Option in den Link-Einstellungen.

• In Lightbox öffnen: Ja

Größe

Um sicherzustellen, dass das Bild auf allen Bildschirmgrößen reagiert, aktivieren wir auch die Option "Vollbreite erzwingen".

• Volle Breite erzwingen: Ja

Standardfilter

Wir ändern auch die Helligkeit.

• Helligkeit: 50%

Hover-Filter

Und wir bringen es beim Schweben auf '100%' zurück.

• Helligkeit: 100%

Standard-Z-Index

Gehen Sie zu den Sichtbarkeitseinstellungen und stellen Sie sicher, dass der Z-Index in seinem Standardzustand '0' bleibt.

• Z-Index: 0

Hover-Z-Index

Beim Hover möchten wir jedoch, dass es das nummerierte Label Text Module überlappt, das wir in den nächsten Schritten hinzufügen werden. Dazu erhöhen wir den Hover-Z-Indexwert.

• Z-Index: 100

Bildmodul 3 Mal klonen und in verbleibende Spalten platzieren

Nachdem Sie das Image-Modul in Spalte 1 abgeschlossen haben, können Sie es dreimal klonen. Platzieren Sie die Duplikate in den drei verbleibenden Spalten der Zeile.

Bilder ändern

Ändert die Bilder in den Duplikaten.

Oberen Rand zum Bildmodul in Spalte 2 hinzufügen

Und fügen Sie dem Bildmodul in der zweiten Spalte einen oberen Rand hinzu.

• Obere Marge: 24,7 vw

Textmodul unter Bildmodul Nr. 1 hinzufügen

Inhalt hinzufügen

Das nächste Modul, das wir in Spalte 1 benötigen, ist ein Textmodul. Fügen Sie dem Inhaltsfeld eine Zahl hinzu.

Hintergrundfarbe

Ändern Sie als nächstes die Hintergrundfarbe. Diese Farbe muss mit der Hintergrundfarbe übereinstimmen, die Sie der Zeile zugewiesen haben.

• Hintergrundfarbe: #ffffff

Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Texteinstellungen.

• Textschriftart: Lora
• Textausrichtung: Rechts
• Textfarbe: #000000
• Textgröße: 3vw
• Textzeilenhöhe: 3vw

Größe

Wir verkleinern auch die Breite des Moduls.

• Breite: 7vw

Abstand

Schaffen Sie als nächstes in den Abstandseinstellungen etwas Platz für das Modul.

• Obere Polsterung: 0.5vw
• Untere Polsterung: 2.5vw
• Rechte Polsterung: 0.9vw

Z-Index

Und erhöhen Sie den Z-Index.

• Z-Index: 99

Textmodul dreimal klonen

Nachdem Sie die allgemeinen Schritte für das Textmodul abgeschlossen haben, können Sie es dreimal klonen.

Positionierung

Positionieren Sie die Duplikate entsprechend:

Textmodule anpassen

Textmodul #1

Negative obere Marge

Es ist an der Zeit, die verschiedenen Textmodule entsprechend ihrer Position anzupassen! Öffnen Sie das Textmodul in Spalte 1 und fügen Sie einen negativen oberen Rand hinzu.

• Obere Marge: -5,9 vw

Box Schatten

Wir fügen auch einen Boxschatten mit den folgenden Einstellungen hinzu:

• Horizontale Position des Boxschattens: 7vw
• Vertikale Position des Boxschattens: 5.9vw
• Stärke der Box-Schattenausbreitung: 0px
• Schattenfarbe: rgba (35,50,255,0.94)

Textmodul #2

Nummerierung ändern

Fahren Sie fort, indem Sie das Textmodul in der zweiten Spalte öffnen und die Nummer ändern.

Textausrichtung

Ändern Sie auch die Textausrichtung.

• Textausrichtung: Links

Modulausrichtung

Und ändern Sie die Modulausrichtung in den Größeneinstellungen.

• Modulausrichtung: Rechts

Abstand

Fahren Sie mit den Abstandseinstellungen fort und fügen Sie einen negativen oberen Rand hinzu. Fügen Sie die Polsterung auch auf der linken statt der rechten Seite hinzu.

• Obere Marge: -6vw
• Linke Polsterung: 0.9vw

Box Schatten

Vervollständigen Sie das Textmodul-Design, indem Sie einen Kastenschatten hinzufügen.

• Horizontale Position des Boxschattens: 7vw
• Vertikale Position des Kastenschattens: -6vw
• Stärke der Box-Schattenausbreitung: 0px
• Schattenfarbe: #ededed

Textmodul #3

Nummerierung ändern

Weiter zum Textbaustein in Spalte 3! Ändern Sie die Nummer im Inhaltsfeld.

Negative obere Marge

Gehen Sie zur Registerkarte Design und fügen Sie einen negativen oberen Rand hinzu.

• Obere Marge: -6vw

Box Schatten

Verwenden Sie auch einen Kastenschatten.

• Horizontale Position des Boxschattens: -7vw
• Vertikale Position des Kastenschattens: -6vw
• Stärke der Box-Schattenausbreitung: 0px
• Schattenfarbe: #ff2323

Textmodul #4

Nummerierung ändern

Weiter zum nächsten und letzten Textbaustein. Ändern Sie auch hier die Nummer.

Textausrichtung

Ändern Sie dann die Textausrichtung.

• Textausrichtung: Links

Modulausrichtung

Ändern Sie auch die Modulausrichtung in den Größeneinstellungen.

• Modulausrichtung: Rechts

Abstand ändern

Ändern Sie als nächstes die Abstandseinstellungen.

• Obere Marge: 24,7 vw
• Unterer Rand: -6vw
• Linke Polsterung: 0.9vw

Box Schatten

Und vervollständigen Sie das Textmodul-Design, indem Sie einen Kastenschatten mit den folgenden Einstellungen hinzufügen:

• Horizontale Position des Boxschattens: -7vw
• Vertikale Position des Boxschattens: -5.9vw
• Stärke der Box-Schattenausbreitung: 0px
• Schattenfarbe: #000000

Ganze Zeile klonen

Sobald Sie die Zeile fertiggestellt haben, können Sie sie beliebig oft klonen, je nachdem, wie viele Bilder Sie anzeigen möchten.

Nummerierung & Bilder ändern

Stellen Sie sicher, dass Sie alle Bilder und Zahlen ändern und fertig!

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie eine ansprechende Galerie mit beschrifteten Bildecken erstellen. Dies ist eine einzigartige Möglichkeit, Ihre Bilder ästhetisch ansprechend zu präsentieren. Sie konnten die JSON-Datei auch zu Beginn des Tutorials herunterladen. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.