Möchten Sie wissen, wie Sie mit DIVI ein Bild beim Hover ändern können?
Hover-Effekte sind einige der einfachsten Mikrointeraktionen, die ein Benutzer mit einem haben kann Webseite. Das Divi-Theme-Builder bietet eine Reihe unglaublich einfacher Hover-Effekte, die Sie verwenden können, um eine ansprechende Interaktion für alle Besucher zu erstellen Webseite.
Einer der auffälligsten und nützlichsten Effekte von Divi ist die Möglichkeit, ein Bild zu ändern, wenn ein Benutzer mit dem Mauszeiger darüber fährt.
Wir zeigen Ihnen in diesem Tutorial, wie Sie einen schönen Bildwechsel erzielen, wenn Sie den Mauszeiger darüber bewegen.
Übersicht
Bevor wir beginnen, werfen wir einen Blick auf das Ergebnis, das wir erreichen wollen.
Erstellen Sie eine Seite mit Divi Theme Builder
Beginnen Sie, indem Sie eine neue Seite zu hinzufügen Website aus dem WordPress-Dashboard.
Siehe auch: Wie erstelle ich ein Schiebe- und Push-Menü in DIVI?
Geben Sie Ihrer Seite dann einen Titel und klicken Sie dann auf " Verwenden Sie Divi Builder ".
Klicken Sie dann auf " Layout wählen«
Suchen und wählen Sie " Homepage der Hundepflege »
Wählen Sie ein Layout und klicken Sie auf " Layout wählen »
Finden Sie Ihre Bilder
Suchen Sie in Divi Builder einfach die Bilder, denen Sie den Effekt hinzufügen möchten.
Beachten Sie, dass Sie es verwenden können jedes Element, das ein Bild enthält
Moduleinstellungen öffnen
Wenn Sie Ihre Entscheidung getroffen haben, klicken Sie auf das Zahnradsymbol und geben Sie die ein Modulparameter das Bild enthält.
Lesen Sie auch: Wie veröffentliche ich Blog-Beiträge in DIVI?
Im Fall dieses Layoutpakets ist das Bild, auf das wir den Hover-Effekt anwenden, der Hintergrund der Spalte ganz rechts in der ersten Zeile.
Geben Sie die Spalteneinstellungen ein.
Finden Sie das Bild in den Einstellungen
Sobald Sie in den Einstellungen von sind Spalte richtig, stellen Sie sicher, dass Sie die Registerkarte auswählen Inhalt. Scrollen Sie nach unten, bis Sie die Option finden Unterseite.
Sous Hintergrund, Divi bietet Ihnen die Möglichkeit, entweder eine Volltonfarbe oder einen Farbverlauf oder ein Bild oder ein Video im .mp4-Format zu verwenden.
Und obwohl die Hover-Effekte auf jeden von ihnen angewendet werden können, arbeiten wir auf der Registerkarte Bild, drittes von links.
Aktivieren Sie Hover-Effekte
Fahren Sie mit der Maus über das Wort Hintergrund (der kleinste Untertitel) und suchen Sie nach demPfeilsymbol in den angezeigten Optionen. Dies ist der Schalter für Divi-Hover-Effekte.
Wenn diese Option aktiviert ist, erscheinen zwei neue Registerkarten. Die linke Registerkarte ist das Basisbild, das ohne Interaktion angezeigt wird.
Wählen Sie Ihr neues Bild
Wenn Sie den Mauszeiger nach unten über das Bild bewegen, haben Sie die normalen Optionen: um das Bild zu ersetzen ou um das Bild zu löschen.
Wenn Sie das Mülleimer-Symbol auswählen, wird der Hover-Effekt aktiviert, aber das Bild verschwindet.
Da wollen wir Veränderung das Bild auf Hover, wir werden entweder klicken Sie auf das Bild selbst, entweder auf derZahnrad-Symbol .
Wählen Sie das Hover-Bild (Ersatz)
Dies öffnet deine Medienbibliothek. Sie können dann das neue Bild auswählen, das Ihre Benutzer sehen sollen, wenn sie mit der Maus über das Original fahren. Klicke auf 'Laden Sie ein Bild hoch'
Überprüfen Sie das Originalbild auf Fehler
Wir empfehlen Ihnen immer darauf zu achten, dass auch das Originalbild gleich bleibt. Um dies zu überprüfen, klicken Sie auf die linke Registerkarte und stellen Sie sicher, dass das Originalbild noch vorhanden ist.
Wenn alles in Ordnung ist, können Sie Ihre Einstellungen speichern.
- Spalteneinstellungen speichern
- Drücken Sie erneut die grünes Häkchen um die Leitungseinstellungen zu speichern.
Allgemeine allgemeine Einstellungen speichern und Seite veröffentlichen.
Ergebnis
Wenn Sie alle Schritte in diesem Tutorial befolgt haben, sollten Sie dies erhalten.
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
Der Theme Builder von Divi ist voll von leistungsstarken Tools, die jeder nutzen kann Erstelle eine Website interessant und interaktiv. Die Änderung des Hover-Bildes, die wir Ihnen in diesem Handbuch gezeigt haben, ist nur ein Tool unter vielen.
Wenn Sie weitere Elemente benötigen, um Ihre Projekte zur Erstellung von Websites abzuschließen, lesen Sie auch unseren Leitfaden zum Thema WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Wenn Sie Bedenken oder Vorschläge haben, finden Sie uns unter der Kommentarbereich darüber reden. Aber inzwischen, Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
