Da die neuen Größenoptionen von Divi veröffentlicht wurden, gibt es einige Tutorials, die Ihnen zeigen, wie Sie Hover-Enthüllungen erstellen. In diesen Tutorials wird die Inhalt maskiert wurde vertikal platziert. In manchen Fällen möchten Sie jedoch möglicherweise eine horizontale Laibung erstellen. In diesem Tutorial zeigen wir Ihnen, wie Sie Bilder mithilfe der Hover-Raster und Überlaufoptionen anzeigen. Divi. Diese Arbeit erfordert eine etwas andere Herangehensweise. Wir werden eine Reihe einer Spalte verwenden und alle Module untereinander platzieren. Beim Schweben verwandeln wir die Spalte in ein horizontales Raster. Sie können die JSON-Datei auch kostenlos herunterladen!

Gehen wir.

Übersicht

Bevor wir uns mit dem Tutorial befassen, werfen wir einen kurzen Blick darauf, wie es auf verschiedenen Bildschirmgrößen aussieht.

Divi Bild Flyby VorschauBeginnen wir mit der Neuerstellung!

Einen neuen Abschnitt hinzufügen

Fügen Sie der Seite, an der Sie arbeiten, zunächst einen neuen regulären Abschnitt hinzu.

Auswahl eines Divi-AbschnittsFügen Sie eine neue Zeile hinzu

Spaltenstruktur

Fügen Sie mit der folgenden Spaltenstruktur eine neue Zeile hinzu:

Fügen Sie einen Divi-Abschnitt einStandardfarbverlaufshintergrund

Öffnen Sie die Linienparameter, ohne weitere Module hinzuzufügen, und fügen Sie den folgenden Verlaufshintergrund hinzu:

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

Divi Line Hintergrundkonfiguration

Fliegen über den Hintergrund mit Farbverlauf

Ändern Sie den Verlaufshintergrund, indem Sie mit der Maus darüber fahren.

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

Divi-Linie radiale EinstellungAbstand

Gehen Sie zu den Abstandseinstellungen und ändern Sie dann die Füll- und Randwerte.

  • Top Polsterung: 0px
  • Polsterung unten: 0px
  • Oberer Rand: 50px
  • Unterer Rand: 50px

Einstellung des Abstands der Divi-Linienparameter

Standardrahmen

Fügen Sie oben rechts und unten rechts einen Randradius von 50-Pixeln hinzu.

Einstellung des Linienrand-Deezers

Hover-Grenze

Bringe die Ecken auf "0px".

Überfluggitter

Standardschatten

Fügen Sie dann mit den folgenden Parametern einen subtilen Box-Schatten hinzu:

  • Box Shadow Blur Force: 50px
  • Schattenfarbe: rgba (0,0,0,0.09)

Divi Line Schatteneinstellungen

Schwebekasten Schatten

Entfernen Sie beim Überfliegen den Schatten aus der Schachtel und ersetzen Sie die Farbe des Schattens durch eine vollständig transparente Farbe.

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

Float Shadow Line Divi

Fügen Sie einer Spalte einen Textbaustein hinzu

Fügen Sie H2-Inhalte hinzu

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

Titel des Divi-Textmoduls

H2-Texteinstellungen

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

  • Titel 2 Schriftart: Acme
  • Titel 2-Schriftschnitt: Unterstreichen
  • Titel 2 Unterstreichungsfarbe: #00ff3f
  • Titel 2 Textfarbe: #000000
  • Titel 2 Textgröße: 3vw

Divi für die Konfiguration von Header-Schriftarten

Abstand

Fügen Sie dann benutzerdefinierte Füllwerte hinzu.

  • Beste Polsterung: 6vw
  • Polsterung unten: 7vw
  • Linke Polsterung: 2vw

Divi-Margin-Konfiguration

Bildmodul zur Spalte hinzufügen

Bild hochladen

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

Laden Sie ein Divi-BildLichtkasten

Aktivieren Sie dann die Lightbox-Option in den Link-Einstellungen.

  • Im Viewer öffnen: ja

In einem Divi Viewer öffnenSizing

Und erzwingen Sie in den Größeneinstellungen die volle Breite des Bildes. Dadurch wird sichergestellt, dass das Bild bei allen Bildschirmgrößen empfindlich bleibt.

  • Volle Breite erzwingen: Ja

Änderung der Divi-BildgrößeKlonen Sie das Image-Modul zweimal

Sobald Sie das erste Bildmodul fertiggestellt haben, können Sie es zweimal kopieren.

Klonen Sie das Bildmodul zweimal

Bilder ändern

Ändern Sie die Bilder in den beiden Duplikaten. Stellen Sie sicher, dass die von Ihnen hochgeladenen Bilder dieselbe Größe wie das erste Bild haben.

Divi-Bild bearbeitenFügen Sie der Zeile den Rollover-Effekt hinzu

Sizing

Nachdem wir die grundlegenden Zeilen- und Pod-Einstellungen abgeschlossen haben, ist es Zeit, den Hover-Effekt zu erstellen! Wir beginnen mit der Änderung der Höhe und Breite der Linie und verbergen die Überläufe. Öffnen Sie die Einstellungen für die Zeilengröße und nehmen Sie die folgenden Änderungen vor:

  • Verwenden Sie eine benutzerdefinierte Rinnenbreite: Ja
  • Dachrinnenbreite: 1
  • Breite: 20%
  • Maximale Breite: 100%
  • Höhe: 15.9vw

Divi Line ModuleinstellungenSchwebeflug

Reduzieren Sie die Breite beim Schweben auf "100%". Dadurch können die Bilder angezeigt werden, sobald die Linie bewegt wird.

  • Breite: 100%

Ändern Sie die Breite, während Sie den Mauszeiger bewegenSichtbarkeit

Wechseln Sie zum nächsten erweiterten Tab und blenden Sie die Überläufe aus. Dadurch wird sichergestellt, dass die Bilder vor dem maskiert werden Besucher Hover (Desktop) oder Klick (Tablet/Mobile) auf den Textbaustein.

  • Horizontaler Überlauf: versteckt
  • Vertikaler Überlauf: versteckt

Divi-ÜberlaufkonfigurationÜbergänge

Wir ändern auch die Dauer des Übergangs in den Übergangsparametern.

  • Dauer des Übergangs: 0ms

Übergang zwischen Divi-Animationen

Rollover-Element der Hauptspalte

Um ein Hover-Raster zu erstellen, öffnen wir die Spalteneinstellungen, wechseln zur Registerkarte Erweiterte Optionen und platzieren die folgenden Zeilen CSS-Code im Haupt-Hover-Element:

Anzeige: Gitter; Grid-Template-Spalten: 20% 25% 25% 25%; Gitterlücke: 10px;

Divi SäuleneinstellungÜberfluggitter

Klonen Sie die Zeile zweimal

Sobald Sie die erste Zeile fertiggestellt haben, können Sie sie so oft klonen, wie Sie möchten. Für dieses spezielle Entwurfsbeispiel klonen wir die Zeile zweimal.

Zeilenmodul mehrmals klonen

Ändern Sie den Verlaufshintergrund der Linie 1

Ändern Sie die Farbe des ersten Verlaufs im Verlaufshintergrund der zweiten Zeile.

  • 1-Farbe: # ffdc96

Änderung der Divi-Line-DuplizierungÄndern Sie den Verlaufshintergrund der Linie 2

Machen Sie dasselbe für die dritte Reihe.

  • 1-Farbe: # b7c7ff

Ändern Sie die Kopie des Textbausteins und die Unterstreichungsfarbe der beiden Duplikate

Fahren Sie fort, indem Sie die Unterstreichungsfarbe der Duplikate des Textbausteins mit der Kopie ändern, und Sie sind fertig!

  • Unterstrichene Farbe # 1: # ffaa00
  • Unterstrichene Farbe # 2: # 0037ff

Abschließende Gedanken

In diesem Tutorial haben wir Ihnen gezeigt, wie Sie Bilder mithilfe der Überlaufoptionen in horizontalen Schwebegittern anzeigen. Divi. Bilder wurden angezeigt, wenn man mit der Maus über den Desktop fuhr und auf dem Tablet/Telefon darauf klickte. Obwohl wir Bilder veröffentlicht haben, können Sie diese enthüllen Inhalt Ihrer Wahl, indem Sie die Parameter im Generator ändern. Wir hoffen, dass dieses Tutorial Sie dazu inspiriert, Ihre eigenen alternativen Hover-Grid-Designs zu erstellen! Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie unbedingt einen Kommentar im Kommentarbereich unten!