Zu wissen, wie man ein Bild beim Hover ändert, kann für jede Art von nützlich sein Website Sie arbeiten an. Außerdem hilft es Ihnen, den Seiten subtile Interaktionen hinzuzufügen. Sie können es beispielsweise verwenden, um Testimonials, Seiten und Teamseiten eine zusätzliche Perspektive zu geben.
Mit den neuen Hover-Optionen von Divi, können Sie ein Bild beim Hovern nur mit den integrierten Optionen bearbeiten. Durch die Kombination der Spaltenhintergründe und des Deckkraftfilters gelangen Sie im Handumdrehen dorthin.
Lassen Sie uns gehen!
Übersicht
Bevor wir uns mit dem Tutorial befassen, werfen wir einen Blick auf die vier Beispiele, die wir von Grund auf neu erstellen werden.
Allgemeine Schritte
Einen neuen Abschnitt hinzufügen
Im ersten Teil dieses Tutorials werden wir einige allgemeine Schritte ausführen. Diese allgemeinen Schritte helfen uns, Zeit zu sparen, wenn wir uns auf die ersten drei Beispiele konzentrieren. Öffnen Sie eine neue oder vorhandene Seite und fügen Sie einen regulären Abschnitt hinzu.
Fügen Sie eine neue Zeile hinzu
Spaltenstruktur
Fügen Sie dann eine neue Zeile mit der folgenden Spaltenstruktur hinzu:
1-Spalte Hintergrundbild
Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und fügen Sie der ersten Spalte ein Hintergrundbild hinzu. Wählen Sie das Bild aus, über das Sie fliegen möchten.
- Spalte 1 Hintergrundbild Wiederholung: Keine Wiederholung
Fügen Sie der 1-Spalte ein Bild hinzu
Laden Sie ein Bild hoch
Fügen Sie der ersten Spalte ein Bildmodul hinzu und laden Sie das Bild, das angezeigt werden soll, bevor Sie den Mauszeiger bewegen.
Fügen Sie der 2-Spalte einen Titeltextbaustein hinzu
Inhalt hinzufügen
In der zweiten Spalte benötigen wir zunächst einen Textmodultitel. Machen Sie weiter und fügen Sie etwas hinzu Inhalt H3.
Header-Texteinstellungen
Gehen Sie dann zu den Einstellungen für den Titeltext und nehmen Sie einige Änderungen vor.
- Titel 3-Schrift: Baloo Tamma
- Titel 3 Textfarbe: # eda96a
- Titel 3-Textgröße: 100-Pixel (Desktop), 70-Pixel (Tablet), 50-Pixel (Telefon)
- Titelabstand der 3-Buchstaben: -4px
- Titel 3 Horizontale Länge des Textschattens: 0.04em
- Titel 3 Text Shadow Vertical Length: 0.04em
- Titel 3 Farbschatten des Textes: rgba (0,0,0,0,6)
Abstand
Fügen Sie abschließend in den Abstandseinstellungen einen oberen Rand hinzu.
- Oberer Rand: 50 (Desktop), 50px (Tablet und Telefon)
Fügen Sie der 2-Spalte ein Divisionsmodul hinzu
Trenner anzeigen
Fügen Sie ein Trennungsmodul direkt unter dem Titel des Textmoduls in der 2-Spalte hinzu.
- Teiler anzeigen: Ja
Farbe des Trennzeichens
Ändern Sie dann die Farbe des Teilers.
- Farbe des Trennzeichens: # e25300
Modi
Wählen Sie in den Stileinstellungen einen anderen Stil für die Trennung aus.
- Art der Trennung: gepunktet
Sizing
Erhöhen Sie auch das Teilergewicht in den Größenparametern.
- Separatorgewicht: 3px
Fügen Sie der 2-Spalte einen Textkörper hinzu
Inhalt hinzufügen
Kommen wir zum letzten Modul! Fügen Sie der zweiten Spalte mit a einen Textmodulkörper hinzu Inhalt nach Wahl.
Texteinstellungen
Ändern Sie die Texteinstellungen später.
- Textgröße: 16px
- Höhe der Textzeile: 2.3em
- Textausrichtung: Begründen Sie
Klonen Sie den Abschnitt zweimal
Wenn Sie alle allgemeinen Schritte ausgeführt haben, klonen Sie den von Ihnen erstellten Abschnitt doppelt. Jetzt haben wir für jedes der ersten drei Beispiele einen eigenen Abschnitt.
Erstellen Sie Beispiel 1
Wenden Sie zusätzliche Einstellungen auf das Bildmodul an
Standarddeckkraft
Beginnen wir mit dem ersten Beispiel! Das einzige, was wir hier tun werden, ist den Schwebeübergang ohne zusätzliche Effekte zu erstellen. Öffnen Sie dazu das Image-Modul und gehen Sie zu den Filtereinstellungen. Stellen Sie sicher, dass der Standardwert für die Deckkraft 100% ist.
- Deckkraft: 100%
Bewegen Sie den Mauszeiger über die Deckkraft
Ändern Sie die Deckkraft beim Schweben.
- Deckkraft: 0%
Übergänge
Erstellen Sie schließlich einen reibungslosen Übergang, indem Sie die Dauer des Übergangs erhöhen.
- Dauer des Übergangs: 1200ms
Erstellen Sie Beispiel 2
Wenden Sie zusätzliche Einstellungen auf das Bildmodul an
Standardabstand
Fahren wir mit dem zweiten Beispiel fort! Öffnen Sie das Bildmodul in Spalte 1 und stellen Sie sicher, dass keine benutzerdefinierte Standardfüllung vorhanden ist.
Stationärer Abstand
Fahren Sie fort, indem Sie etwas unteren Schwebebandrand hinzufügen, damit das Schwebebild größer wird.
- Polsterung unten: 100px
Schattenkiste
Wir fügen auch einen Standard-Box-Schatten hinzu, der beim Überschlagen verschwindet.
- Schatten der Box, horizontale Position: -55px
- Vertikale Position des Boxschattens: -50px
- Box Schattenausbreitungskraft: -10px
- Schattenfarbe: # eda96a
Standarddeckkraft
Wechseln Sie als Nächstes zu den Filtereinstellungen und stellen Sie sicher, dass die Standardopazität 100% beträgt.
- Deckkraft: 100%
Bewegen Sie den Mauszeiger über die Deckkraft
Entferne die Deckkraft des Hover-Mods. Auf diese Weise kann der Hintergrund der Spalte angezeigt und der Schwebebild-Effekt erstellt werden.
- Deckkraft: 0%
Übergänge
Erhöhen Sie abschließend die Dauer des Übergangs in den Übergangsparametern des Image-Moduls.
- Dauer des Übergangs: 1200ms
Erstellen Sie ein Beispiel 3
Fügen Sie der 1-Spalte einen Verlaufshintergrund hinzu
Im dritten Beispiel öffnen wir zunächst die Zeileneinstellungen und fügen der ersten Spalte einen radialen Verlaufshintergrund hinzu. Dadurch erhält das schwebende Bild eine Kreisform.
- 1-Farbe: rgba (43,135,218,0)
- 2-Farbe: #ffffff
- 1-Spalte Verlaufstyp: Radial
- Spalte 1-Radialrichtung: Mitte
- Spalte 1 Startposition: 60%
- Spalte 1 Endgültige Position: 60%
Wenden Sie zusätzliche Einstellungen auf das Bildmodul an
Standarddeckkraft
Fahren Sie fort, indem Sie das Bildmodul der 1-Spalte öffnen und sicherstellen, dass die Standarddeckkraft 100% ist.
- Deckkraft: 100%
Bewegen Sie den Mauszeiger über die Deckkraft
Entfernen Sie die Deckkraft einer Überführung, um den Hintergrund der Spalte anzuzeigen.
- Deckkraft: 0%
Erstellen Sie Beispiel 4
Fügen Sie eine neue Zeile hinzu
Spaltenstruktur
Am letzten Beispiel! Hier brauchen wir eine neue Zeile mit 6 Spalten.
1-Spalte Hintergrundbild
Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und fügen Sie das Hintergrundbild hinzu, über das Sie den Mauszeiger als Hintergrundbild für Spalte 1 bewegen möchten.
- Spalte 1 Hintergrundbild Wiederholung: Keine Wiederholung
Wiederholen Sie dies für alle Spalten online
Wiederholen Sie den vorherigen Schritt für jede der Spalten in Ihrer Zeile.
Sizing
Greifen Sie dann auf die Größenparameter für die Zeile zu und entfernen Sie alle Lücken zwischen den Spalten.
- Machen Sie diese Linie in voller Breite: Ja
- Verwenden Sie eine benutzerdefinierte Rinnenbreite: 1
Fügen Sie Spalte 1 ein Bildmodul hinzu
Laden Sie ein Bild hoch
Fügen Sie der ersten Spalte ein Bildmodul hinzu und laden Sie das Bild hoch, das standardmäßig angezeigt werden soll.
Standarddeckkraft
Stellen Sie sicher, dass die Standardopazität dieses Moduls 100% beträgt.
- Deckkraft: 100%
Bewegen Sie den Mauszeiger über die Deckkraft
Entfernen Sie die Deckkraft beim Hover, damit stattdessen der Spaltenhintergrund angezeigt wird.
- Deckkraft: 0%
Übergänge
Erhöhen Sie die Dauer des Übergangs für einen reibungslosen Übergang.
- Dauer des Übergangs: 800ms
Klonen Sie das Image 3-Modul einmal und platzieren Sie die Duplikate in den verbleibenden Spalten
Nachdem Sie das Bildmodul in Spalte 1 bearbeitet haben, können Sie es klonen und die Duplikate in den verbleibenden Spalten platzieren. Stellen Sie sicher, dass Sie auch die Bilder ändern.
Abschließende Gedanken
Das Ändern eines Hover-Bilds kann dazu beitragen, diese zusätzliche Interaktion in Testimonial-Abschnitten, über Seiten und Teamseiten zu bringen.
In diesem Tutorial haben wir Ihnen eine einfache Möglichkeit gezeigt, verschiedene Arten von Bildern beim Hovern zu erhalten, indem Sie nur die integrierten Optionen von verwenden Divi ! Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie bitte einen Kommentar im Kommentarbereich unten!
