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.
Beginnen 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.
Fügen Sie eine neue Zeile hinzu
Spaltenstruktur
Fügen Sie mit der folgenden Spaltenstruktur eine neue Zeile hinzu:
Standardfarbverlaufshintergrund
Ö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%
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%
Abstand
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
Standardrahmen
Fügen Sie oben rechts und unten rechts einen Randradius von 50-Pixeln hinzu.
Hover-Grenze
Bringe die Ecken auf "0px".
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)
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)
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.
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
Abstand
Fügen Sie dann benutzerdefinierte Füllwerte hinzu.
- Beste Polsterung: 6vw
- Polsterung unten: 7vw
- Linke Polsterung: 2vw
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.
Lichtkasten
Aktivieren Sie dann die Lightbox-Option in den Link-Einstellungen.
- Im Viewer öffnen: ja
Sizing
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
Klonen Sie das Image-Modul zweimal
Sobald Sie das erste Bildmodul fertiggestellt haben, können Sie es zweimal kopieren.
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.
Fü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
Schwebeflug
Reduzieren Sie die Breite beim Schweben auf "100%". Dadurch können die Bilder angezeigt werden, sobald die Linie bewegt wird.
- Breite: 100%
Sichtbarkeit
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
Übergänge
Wir ändern auch die Dauer des Übergangs in den Übergangsparametern.
- Dauer des Übergangs: 0ms
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;
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.
Ändern Sie den Verlaufshintergrund der Linie 1
Ändern Sie die Farbe des ersten Verlaufs im Verlaufshintergrund der zweiten Zeile.
- 1-Farbe: # ffdc96
Ä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!