So zeigen Sie den Titel und die Bildunterschrift Ihres Galeriebilds mit Divi . an

Wenn Sie eine Website erstellen, bei der Bilder eine zentrale Rolle im Design spielen, möchten Sie vielleicht irgendwann eine Galerie einfügen. Hier kommt das Divi Gallery-Modul ins Spiel. Es ermöglicht Ihnen, Bilder direkt aus Ihrer Medienbibliothek auszuwählen und in einer organisierten Struktur anzuzeigen. Standardmäßig können Sie auch den Titel und die Bildunterschrift jedes Bildes dynamisch anzeigen. Wenn Sie jedoch die Textmenge begrenzen möchten, die in Ihrem Design angezeigt wird, möchten Sie möglicherweise den Titel und die Bildunterschrift eines Bildes nach unten schieben, wenn Sie mit der Maus darauf zeigen. In diesem Tutorial zeigen wir Ihnen genau, wie das geht. Sie können die JSON-Datei auch 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.

Desktop

Handy, Mobiltelefon

Laden Sie das Layout KOSTENLOS herunter

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

https://youtu.be/p6Bh7wz3HMc

Abonnieren Sie unseren Youtube-Kanal

1. Bilder mit Titeln und Bildunterschriften hochladen

Gehe zur Medienbibliothek

Der erste Teil dieses Tutorials konzentriert sich auf das Hinzufügen der Bilder mit Titeln und Bildunterschriften zu Ihrer Medienbibliothek. Um dorthin zu gelangen, navigieren Sie zu Ihrem WordPress-Dashboard > Medien > Bibliothek.

Bilder hochladen

Laden Sie dort die Bilder hoch, die Sie in Ihre Galerie aufnehmen möchten.

Titel und Bildunterschriften hinzufügen

Sie müssen jedem Bild einzeln einen Titel und eine Bildunterschrift hinzufügen. Um das optimale Ergebnis zu erzielen, versuchen Sie, für jedes Bild eine ähnliche Textlänge beizubehalten.

2. Design mit Divi . erstellen

Erstellen Sie eine neue Seite oder öffnen Sie eine vorhandene Seite

Sobald Ihre Bilder hochgeladen wurden, ist es an der Zeit, das Design in Divi zu erstellen. Erstellen Sie eine neue Seite oder öffnen Sie eine neue und aktivieren Sie den Visual Builder oben.

Abschnitt 1 hinzufügen

Hintergrundfarbe

Fügen Sie Ihrer Seite einen neuen Abschnitt hinzu und öffnen Sie die Abschnittseinstellungen. Wenden Sie die folgende Hintergrundfarbe an:

• Hintergrundfarbe: #ededed

Zeile 1 hinzufügen

Spaltenstruktur

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

Abstand

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen, gehen Sie zum Design-Tab und wenden Sie den folgenden oberen und unteren Rand an:

• Höchste Marge: 5%
• Untere Marge: 5%

Textmodul zu Spalte 1 hinzufügen

H2-Inhalt hinzufügen

Es ist Zeit, Module hinzuzufügen, beginnend mit einem Textmodul in Spalte 1, das einige H2-Inhalte enthält.

H2-Texteinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die H2-Texteinstellungen entsprechend:

• Überschrift 2 Schriftart: Montserrat
• Überschrift 2 Textgröße:
  • Desktop: 62px
  • Tablet: 48px
  • Telefon: 32px
• Überschrift 2 Zeilenhöhe: 1.3em

Größe

Ändern Sie auch die maximale Breite des Moduls über verschiedene Bildschirmgrößen hinweg.

• Maximale Breite:
  • Desktop: 500px
  • Tablet: 400px
  • Telefon: 250px

Trennmodul zu Spalte 1 hinzufügen

Sichtweite

Das nächste und letzte Modul, das wir in Spalte 1 benötigen, ist ein Divider-Modul. Stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

• Teiler anzeigen: Ja

Leitung

Wechseln Sie dann zur Registerkarte Design und ändern Sie die Linienfarbe.

• Linienfarbe: #ffc000

Größe

Ändern Sie auch die Größeneinstellungen des Moduls.

• Teilergewicht: 5px
• Maximale Breite: 100px
• Höhe: 5px

Textmodul zu Spalte 2 hinzufügen

Inhalt hinzufügen

In Spalte 2 benötigen wir als einziges Modul ein Textmodul mit einigen Beschreibungsinhalten.

Texteinstellungen

Ändern Sie die Texteinstellungen des Moduls wie folgt:

• Textschriftart: Lato
• Textzeilenhöhe: 2.2em

Abstand

Wenden Sie auch einen oberen Rand an.

• Oberer Rand: 50px

Abschnitt 2 hinzufügen

Fügen Sie einen weiteren Abschnitt unter dem vorherigen hinzu.

Hintergrund mit Farbverlauf

Öffnen Sie die Abschnittseinstellungen und wenden Sie einen Verlaufshintergrund an.

• Farbe 1: #ededed
• Farbe 2: #ffffff
• Verlaufstyp: Linear
• Startposition: 20%
• Endposition: 20%

Abstand

Wechseln Sie zur Registerkarte Design des Abschnitts und entfernen Sie alle standardmäßigen oberen und unteren Abstände.

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

Zeile 1 hinzufügen

Spaltenstruktur

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

Hintergrundfarbe

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen und wenden Sie eine Hintergrundfarbe an.

• Hintergrundfarbe: #f4f4f4

Größe

Fahren Sie als nächstes mit den Größeneinstellungen der Zeile fort und wenden Sie die folgenden Änderungen an:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 2
• Breite: 90%
• Maximale Breite: 1580px

Abstand

Wir passen auch die Padding-Werte an.

• Obere Polsterung: 150px
• Untere Polsterung: 0px
• Linke Polsterung: 5%
• Rechte Polsterung: 5%

Galeriemodul zur Spalte hinzufügen

Hochgeladene Bilder auswählen

Zeit, die Bilder mit einem Galeriemodul hinzuzufügen! Wählen Sie im ersten Teil dieses Tutorials die Bilder aus, die Sie in Ihre Medienbibliothek hochgeladen haben.

Elemente

Der Hover-Effekt macht nur auf dem Desktop Sinn. Auf kleineren Bildschirmgrößen gibt es keinen Hover, und die Berührung löst stattdessen einen Lightbox-Effekt aus. Aus diesem Grund zeigen wir Titel und Bildunterschrift nur auf dem Desktop an und deaktivieren sie auf kleineren Bildschirmgrößen. Wir deaktivieren auch die Paginierung. Sie finden diese Optionen in den Elementeinstellungen.

• Titel und Bildunterschrift anzeigen
  • Desktop: Ja
  • Tablet & Telefon: Nein
• Paginierung anzeigen: Nein

Layout

Wechseln Sie zur Design-Registerkarte des Moduls und ändern Sie als nächstes das Layout.

• Layout: Gitter
• Ausrichtung der Miniaturansicht: Hochformat

Überlagerung

Wir ändern auch die Overlay-Einstellungen.

• Farbe des Überlagerungssymbols: #ffffff
• Overlay-Hintergrundfarbe: rgba(0,0,0,0.25)

Texteinstellungen

Als Nächstes ändern wir die Textfarbe in den Texteinstellungen.

• Textfarbe: Hell

Einstellungen für Titeltext

Dann formatieren wir den Titeltext.

• Titelüberschriftsebene: H3
• Titelschriftart: Montserrat
• Titeltextgröße: 20px

Einstellungen für Untertiteltext

Wir ändern auch die Einstellungen für den Untertiteltext.

• Beschriftungsschriftart: Lato
• Beschriftungstextfarbe: #effef
• Untertitel-Buchstabenabstand: 0.5px
• Höhe der Untertitelzeile: 1.9em

Galerie-Element CSS

Dann wechseln wir zum Tab "Erweitert". Dort fügen wir dem CSS-Feld für den Titel des Galerieelements die folgenden CSS-Codezeilen hinzu:

padding-top: 20px;
padding-left: 7%;
padding-right: 7%;

CSS für Galerie-Elemente

Und wir verwenden diese Codezeilen im CSS-Feld für die Beschriftung des Galerieelements:

padding-top: 20px;
padding-left: 7%;
padding-right: 7%;
padding-bottom: 20px;

3. Wenden Sie den Reveal-Effekt an

CSS-ID zum Galeriemodul hinzufügen

Nachdem unser Design nun an Ort und Stelle ist, können wir uns auf einige notwendige Schritte konzentrieren, um den Enthüllungseffekt zu erzielen. Als erstes fügen wir unserem Galeriemodul eine CSS-ID hinzu.

• CSS-ID: divi-gallery

Codemodul unter Galeriemodul hinzufügen

Dann fügen wir ein Code-Modul unter dem Galerie-Modul hinzu.

Style-Tags hinzufügen

Um den Effekt zu erzeugen, verwenden wir CSS-Code. Um unser Codemodul für diesen Code vorzubereiten, platzieren wir einige Style-Tags in der Codebox.

CSS-Code zwischen Style-Tags einfügen

Und wir kopieren und fügen die folgenden Zeilen CSS-Code zwischen den style-Tags ein:

#divi-gallery .et_pb_gallery_item h3, #divi-gallery .et_pb_gallery_item p {
visibility: hidden;
opacity: 0;
transform: translateY(-50px);
background-color: #FE7541;
margin-bottom: 0px !important;
margin-top: 0px !important;
}
  
#divi-gallery .et_pb_gallery_item h3, #divi-gallery .et_pb_gallery_item p, #divi-gallery .et_pb_gallery_image {
-webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
-moz-transition: 300ms all cubic-bezier(.4,0,.2,1);   
-o-transition: 300ms all cubic-bezier(.4,0,.2,1); 
-ms-transition: 300ms all cubic-bezier(.4,0,.2,1);   
transition: 300ms all cubic-bezier(.4,0,.2,1); 
}

#divi-gallery .et_pb_gallery_item:hover h3, #divi-gallery .et_pb_gallery_item:hover p {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
  
#divi-gallery .et_pb_gallery_item:hover div {
transform: translateY(-10px);
}

Das ist es! Speichern Sie Ihre Seiteneinstellungen und beenden Sie den Visual Builder, um das Ergebnis anzuzeigen, wenn Sie mit der Maus über eines der Galerieelemente fahren.

Vorschau

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

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie mit dem integrierten Galeriemodul von Divi kreativ werden. Genauer gesagt haben wir Ihnen gezeigt, wie Sie den Titel und die Bildunterschrift eines Bildes nach unten schieben können, wenn Sie den Mauszeiger auf dem Desktop bewegen. Dies hilft Ihnen, ein visuelles Design beizubehalten, ohne zu viel Text auf einmal anzuzeigen. Sie konnten die JSON-Datei auch kostenlos herunterladen! Wenn Sie Fragen oder Anregungen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen.

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.