So zeigen Sie Bilder mit horizontalen Hover-Rastern und verstecktem Überlauf mit Divi . an

Da die neuen Größenoptionen von Divi herausgekommen sind, haben wir einige Tutorials erstellt, die Ihnen zeigen, wie Sie Hover-Enthüllungen erstellen. In diesen Tutorials wurde der versteckte Inhalt vertikal platziert. In einigen Fällen möchten Sie jedoch möglicherweise stattdessen eine horizontale Fuge erstellen. In diesem Beitrag zeigen wir Ihnen, wie Sie Bilder mit Hover-Rastern und den Überlaufoptionen von Divi anzeigen können. Damit diese Arbeit funktioniert, ist ein etwas anderer Ansatz erforderlich. Wir verwenden eine einspaltige Zeile und platzieren alle Module untereinander und beim Hover verwandeln wir die Spalte in ein horizontales Raster. 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 Hover Grids-Layout KOSTENLOS herunter

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

Beginnen wir mit der Neuerstellung!

Abonnieren Sie unseren Youtube-Kanal

Neuen Abschnitt hinzufügen

Beginnen Sie damit, der Seite, an der Sie gerade arbeiten, einen neuen regulären Abschnitt hinzuzufügen.

Neue Zeile hinzufügen

Spaltenstruktur

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

Standard-Hintergrund mit Farbverlauf

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und fügen Sie den folgenden Farbverlaufshintergrund hinzu:

• Farbe 1: #b1ffc4
• Farbe 2: #ffffff
• Verlaufstyp: Radial
• Radiale Richtung: Mitte
• Startposition: 28%
• Endposition: 28%

Hintergrund mit Farbverlauf schweben

Ändern Sie den Farbverlaufshintergrund bei der Mausbewegung.

• Farbe 1: #b1ffc4
• Farbe 2: #ffffff
• Verlaufstyp: Radial
• Radiale Richtung: Links
• Startposition: 5%
• Endposition: 5%

Abstand

Gehen Sie zu den Abstandseinstellungen und ändern Sie als nächstes die Werte für Abstand und Rand.

• Obere Polsterung: 0px
• Untere Polsterung: 0px
• Oberer Rand: 50px
• Unterer Rand: 50px

Standardrahmen

Fügen Sie als nächstes den Randradius '50px' zur oberen rechten und unteren rechten Ecke hinzu.

Grenze schweben

Bringen Sie die Ecken beim Schweben auf '0px' zurück.

Standard-Box-Schatten

Fügen Sie als nächstes einen subtilen Boxschatten hinzu, indem Sie die folgenden Einstellungen verwenden:

• Stärke der Box-Schattenunschärfe: 50px
• Schattenfarbe: rgba(0,0,0,0.09)

Hoverbox-Schatten

Entfernen Sie den Boxschatten beim Schweben, indem Sie die Schattenfarbe durch eine vollständig transparente ersetzen.

• Schattenfarbe: rgba(0,0,0,0)

Textmodul zur Spalte hinzufügen

H2-Inhalt hinzufügen

Es ist Zeit, mit dem Hinzufügen von Modulen zu beginnen, beginnend mit einem Textmodul. Geben Sie einen H2-Inhalt Ihrer Wahl ein.

H2-Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die H2-Texteinstellungen entsprechend:

• Überschrift 2 Schriftart: Acme
• Überschrift 2 Schriftstil: Unterstreichen
• Überschrift 2 Unterstreichungsfarbe: #00ff3f
• Überschrift 2 Textfarbe: #000000
• Überschrift 2 Textgröße: 3vw

Abstand

Fügen Sie als nächstes einige benutzerdefinierte Abstandswerte hinzu.

• Obere Polsterung: 6vw
• Untere Polsterung: 7vw
• Linke Polsterung: 2vw

Bildmodul zur Spalte hinzufügen

Bild hochladen

Das zweite Modul, das wir in dieser Spalte benötigen, ist ein Image-Modul. Laden Sie ein Landschaftsbild Ihrer Wahl hoch.

Leuchtkasten

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

• In Lightbox öffnen: Ja

Größe

Und erzwinge die volle Breite des Bildes in den Größeneinstellungen. Dadurch wird sichergestellt, dass das Bild auf allen Bildschirmgrößen reagiert.

• Volle Breite erzwingen: Ja

Bildmodul zweimal klonen

Sobald Sie das erste Image-Modul abgeschlossen haben, können Sie es zweimal klonen.

Bilder ändern

Ändern Sie die Bilder in beiden Duplikaten. Stellen Sie sicher, dass die hochgeladenen Bilder die gleichen Abmessungen haben wie das erste Bild.

Hover-Effekt zu Row hinzufügen

Größe

Nachdem wir nun die grundlegenden Zeilen- und Moduleinstellungen abgeschlossen haben, ist es an der Zeit, den Hover-Effekt auszuführen! Wir beginnen damit, die Höhe und Breite der Zeile zu ändern und die Überläufe auszublenden. Öffnen Sie die Größeneinstellungen der Zeile und nehmen Sie die folgenden Änderungen vor:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Breite: 20%
• Maximale Breite: 100%
• Höhe: 15.9vw

Hover-Größen

Bringen Sie die Breite beim Schweben auf '100%' zurück. Dadurch können die Bilder angezeigt werden, sobald die Zeile mit der Maus bewegt wird.

• Breite: 100%

Sichtweite

Wechseln Sie als nächstes zur Registerkarte "Erweitert" und blenden Sie die Überläufe aus. Dadurch wird sichergestellt, dass die Bilder ausgeblendet werden, bevor Besucher auf das Textmodul schweben (Desktop) oder klicken (Tablet/Mobil).

• Horizontaler Überlauf: Versteckt
• Vertikaler Überlauf: Versteckt

Übergänge

Wir ändern auch die Übergangsdauer in den Übergangseinstellungen.

• Übergangsdauer: 0ms

Säulen-Hover-Hauptelement

Um ein Raster beim Hover zu erstellen, öffnen wir die Spalteneinstellungen, gehen zur Registerkarte Erweitert und platzieren die folgenden CSS-Codezeilen im Hover-Hauptelement:

display: grid;
grid-template-columns: 20% 25% 25% 25%;
grid-gap: 10px;

Zeile zweimal klonen

Sobald Sie die erste Zeile fertiggestellt haben, können Sie sie beliebig oft klonen. Für dieses spezielle Designbeispiel klonen wir die Zeile zweimal.

Ändern Sie den Hintergrund der doppelten Zeile Nr. 1 mit Farbverlauf

Ändern Sie die erste Verlaufsfarbe des Verlaufshintergrunds der zweiten Zeile.

• Farbe 1: #ffdc96

Ändern Sie den Hintergrund der doppelten Zeile Nr. 2 mit Farbverlauf

Machen Sie dasselbe für die dritte Reihe.

• Farbe 1: #b7c7ff

Ändern Sie die Textmodulkopie- und Unterstreichungsfarbe beider Duplikate

Fahren Sie fort, indem Sie die Unterstreichungsfarbe beider Textmodul-Duplikate zusammen mit der Kopie ändern und fertig!

• Unterstreichungsfarbe #1: #ffaa00
• Unterstreichungsfarbe #2: #0037ff

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 Bilder in horizontalen Hover-Rastern mit den Überlaufoptionen von Divi anzeigen können. Die Bilder wurden enthüllt, sobald sie auf dem Desktop schweben und auf dem Tablet / Telefon geklickt haben. Obwohl wir Bilder enthüllt haben, können Sie jede Art von Inhalt anzeigen, den Sie möchten, indem Sie die Einstellungen im Builder optimieren. Wir hoffen, dass dieses Tutorial Sie dazu inspiriert, auch Ihre eigenen alternativen Hover-Grid-Designs zu erstellen! 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.