So ändern Sie ein Bild beim Hover mit Divi

Zu wissen, wie man ein Bild beim Schweben ändert, kann für jede Art von Website nützlich sein, an der Sie arbeiten. Darüber hinaus können Sie Seiten subtile Interaktionen hinzufügen. Sie können es beispielsweise verwenden, um Testimonials, über Seiten und Teamseiten eine zusätzliche Perspektive zu geben. Mit den neuen Hover-Optionen von Divi können Sie ein Bild beim Hover nur mit den integrierten Optionen ändern. Durch die Kombination von Spaltenhintergründen und dem Deckkraftfilter gelangen Sie in kürzester Zeit dorthin.

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen Blick auf die vier Beispiele, die wir von Grund auf neu erstellen werden

Allgemeine Schritte

Neuen Abschnitt hinzufügen

Im ersten Teil dieses Tutorials gehen wir einige allgemeine Schritte durch. 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.

Neue Zeile hinzufügen

Spaltenstruktur

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

Spalte 1 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, das beim Hover angezeigt werden soll.

• Spalte 1 Hintergrundbild wiederholen: Keine Wiederholung

Bild zu Spalte 1 hinzufügen

Bild hochladen

Fahren Sie fort, indem Sie ein Bildmodul zur ersten Spalte hinzufügen und das Bild hochladen, das vor dem Hover angezeigt werden soll.

Titeltextmodul zu Spalte 2 hinzufügen

Inhalt hinzufügen

In der zweiten Spalte benötigen wir zunächst ein Titel-Textmodul. Fahren Sie fort und fügen Sie einige H3-Inhalte hinzu.

Überschriftstexteinstellungen

Gehen Sie dann zu den Überschriftentexteinstellungen und nehmen Sie einige Änderungen vor.

• Überschrift 3 Schriftart: Baloo Tamma
• Überschrift 3 Textfarbe: #eda96a
• Überschrift 3 Textgröße: 100px (Desktop), 70px (Tablet), 50px (Telefon)
• Überschrift 3 Buchstabenabstand: -4px

• Überschrift 3 Textschatten Horizontale Länge: 0.04em
• Überschrift 3 Textschatten Vertikale Länge: 0.04em
• Überschrift 3 Textschattenfarbe: rgba(0,0,0,0.6)

Abstand

Schließlich fügen Sie in den Abstandseinstellungen etwas oberen Rand hinzu.

• Oberer Rand: 100 Pixel (Desktop), 50 Pixel (Tablet und Telefon)

Trennmodul zu Spalte 2 hinzufügen

Teiler anzeigen

Fügen Sie ein Trennmodul direkt unter dem Titel Textmodul in Spalte 2 hinzu.

• Teiler anzeigen: Ja

Teilerfarbe

Ändern Sie als nächstes die Teilerfarbe.

• Teilerfarbe: #e25300

Stile

Und wählen Sie in den Stileinstellungen einen anderen Trennstil aus.

• Teilerstil: Gepunktet

Größe

Erhöhen Sie auch das Teilergewicht in den Größeneinstellungen.

• Teilergewicht: 3px

Fließtextmodul zu Spalte 2 hinzufügen

Inhalt hinzufügen

Auf zum letzten Modul! Fügen Sie der zweiten Spalte ein Textmodul mit einem Inhalt Ihrer Wahl hinzu.

Texteinstellungen

Ändern Sie als nächstes die Texteinstellungen.

• Textgröße: 16px
• Textzeilenhöhe: 2.3em
• Textausrichtung: Begründen

Abschnitt zweimal klonen

Wenn Sie alle allgemeinen Schritte abgeschlossen haben, klonen Sie den Abschnitt, den Sie zweimal erstellt haben. Jetzt haben wir für jedes der ersten drei Beispiele einen eigenen Abschnitt.

Beispiel 1 erstellen

Anwenden zusätzlicher Einstellungen auf das Bildmodul

Standarddeckkraft

Beginnen wir mit der Erstellung des ersten Beispiels! Das einzige, was wir hier tun werden, ist den Hover-Übergang ohne zusätzliche Effekte zu erstellen. Öffnen Sie dazu das Image Module und gehen Sie zu den Filtereinstellungen. Stellen Sie sicher, dass der Standardwert für die Deckkraft 100 % beträgt.

• Deckkraft: 100%

Hover-Deckkraft

Ändern Sie die Deckkraft beim Schweben.

• Deckkraft: 0%

Übergänge

Erstellen Sie schließlich einen reibungslosen Übergang, indem Sie die Übergangsdauer erhöhen.

• Übergangsdauer: 1200ms

Beispiel 2 erstellen

Anwenden zusätzlicher Einstellungen auf das Bildmodul

Standardabstand

Auf zum zweiten Beispiel! Öffnen Sie das Bildmodul in Spalte 1 und stellen Sie sicher, dass dort keine benutzerdefinierten Standardauffüllungen vorhanden sind.

Hover-Abstand

Fahren Sie fort, indem Sie beim Schweben etwas Bodenpolsterung hinzufügen, damit das Bild beim Schweben größer wird.

• Untere Polsterung: 100px

Box Schatten

Wir fügen auch einen Standard-Box-Schatten hinzu, der beim Schweben verschwindet.

• Horizontale Position des Boxschattens: -55px
• Vertikale Position des Boxschattens: -50px
• Stärke der Box-Schattenausbreitung: -10px
• Schattenfarbe: #eda96a

Standarddeckkraft

Gehen Sie als Nächstes zu den Filtereinstellungen und stellen Sie sicher, dass die Standardopazität 100% beträgt.

• Deckkraft: 100%

Hover-Deckkraft

Entfernen Sie die Deckkraft des Moduls beim Schweben. Dadurch wird der Spaltenhintergrund angezeigt und der Effekt "Bild beim Schweben" erstellt.

• Deckkraft: 0%

Übergänge

Erhöhen Sie schließlich die Übergangsdauer in den Übergangseinstellungen des Bildmoduls.

• Übergangsdauer: 1200ms

Beispiel 3 erstellen

Hintergrund mit Farbverlauf zu Spalte 1 hinzufügen

Für das dritte Beispiel öffnen wir zunächst die Zeileneinstellungen und fügen der ersten Spalte einen radial verlaufenden Hintergrund hinzu. Dadurch erhält das Bild beim Schweben eine kreisförmige Form.

• Farbe 1: rgba(43,135,218,0)
• Farbe 2: #ffffff
• Spalte 1 Verlaufstyp: Radial
• Spalte 1 Radiale Richtung: Mitte
• Spalte 1 Startposition: 60%
• Spalte 1 Endposition: 60%

Anwenden zusätzlicher Einstellungen auf das Bildmodul

Standarddeckkraft

Fahren Sie fort, indem Sie das Bildmodul in Spalte 1 öffnen und sicherstellen, dass die Standardopazität 100% beträgt.

• Deckkraft: 100%

Hover-Deckkraft

Entfernen Sie die Deckkraft beim Bewegen des Mauszeigers, damit der Spaltenhintergrund durchscheinen kann.

• Deckkraft: 0%

Beispiel 4 erstellen

Neue Zeile hinzufügen

Spaltenstruktur

Auf zum letzten Beispiel! Hier benötigen wir eine neue Zeile mit 6 Spalten.

Spalte 1 Hintergrundbild

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und fügen Sie das Hintergrundbild hinzu, das beim Hover als Hintergrundbild für Spalte 1 angezeigt werden soll.

• Spalte 1 Hintergrundbild wiederholen: Keine Wiederholung

Wiederholen Sie dies für alle Spalten in Zeile

Wiederholen Sie den vorherigen Schritt für jede der Spalten in Ihrer Zeile.

Größe

Gehen Sie dann zu den Größeneinstellungen der Zeile und entfernen Sie den gesamten Abstand zwischen den Spalten.

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: 1

Bildmodul zu Spalte 1 hinzufügen

Bild hochladen

Fahren Sie fort, indem Sie ein Bildmodul zur ersten Spalte hinzufügen und das Bild hochladen, das standardmäßig angezeigt werden soll.

Standarddeckkraft

Stellen Sie sicher, dass die Standardopazität dieses Moduls 100 % beträgt.

• Deckkraft: 100%

Hover-Deckkraft

Und entfernen Sie die Deckkraft beim Bewegen des Mauszeigers, damit stattdessen der Spaltenhintergrund angezeigt wird.

• Deckkraft: 0%

Übergänge

Erhöhen Sie die Übergangsdauer für einen reibungslosen Übergang.

• Übergangsdauer: 800ms

Bildmodul dreimal klonen und Duplikate in verbleibende Spalten platzieren

Nachdem Sie das Bildmodul in Spalte 1 geändert haben, können Sie es klonen und die Duplikate in die verbleibenden Spalten einfügen. Stellen Sie sicher, dass Sie auch die Bilder ändern.

Vorschau

Nachdem wir nun alle Schritte und alle vier Beispiele durchgegangen sind, werfen wir einen letzten Blick auf alle drei Beispiele, die wir erstellt haben.

Abschließende Gedanken

Das Ändern eines Bildes beim Hovern kann helfen, diese zusätzliche Interaktion in Testimonial-Abschnitte, zu Seiten und Teamseiten zu bringen. In diesem Tutorial haben wir Ihnen eine einfache Möglichkeit gezeigt, um verschiedene Arten von Bildern beim Schweben nur mit den integrierten Optionen von Divi zu erstellen! Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!

Ausgewähltes Bild von LovArt / shutterstock.com