Springe zum Hauptinhalt

So ändern Sie ein Rollover-Bild auf Divi

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Zu wissen, wie man ein Bild beim Schweben ändert, kann für jede Art von Website nützlich sein, an der Sie arbeiten. Außerdem können Sie den Seiten eine subtile Interaktion hinzufü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 Hover-Image nur mit den integrierten Optionen ändern. Durch die Kombination von Spaltenhintergründen und dem Deckkraftfilter ist dies in kürzester Zeit erledigt.

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.

schwebendes Bild

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.

Auswahl eines Abschnitts divi.jpg

Fügen Sie eine neue Zeile hinzu

Spaltenstruktur

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

Wähle ein Layout divi.jpg

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

hinteres Bild divi.jpg

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.

Bild hinzufügen divi.jpg

Fügen Sie der 2-Spalte einen Titeltextbaustein hinzu

Inhalt hinzufügen

In der zweiten Spalte benötigen wir zunächst einen Textmodul-Titel. Fügen Sie H3-Inhalte hinzu.

Bild und Text divi.jpg

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

jaden elian bild divi.jpg

  • 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)

Anpassungsschriftart divi image.jpg

Abstand

Fügen Sie abschließend in den Abstandseinstellungen einen oberen Rand hinzu.

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

Randbild divi.jpg

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

Trennzeichen divi imge module.jpg

Farbe des Trennzeichens

Ändern Sie dann die Farbe des Teilers.

  • Farbe des Trennzeichens: # e25300

Bild divi separateur color.jpg

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Modi

Wählen Sie in den Stileinstellungen einen anderen Stil für die Trennung aus.

  • Art der Trennung: gepunktet

split separator divi.jpg

Sizing

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

  • Separatorgewicht: 3px

taile separator divi image.jpg

Fügen Sie der 2-Spalte einen Textkörper hinzu

Inhalt hinzufügen

Fahren wir mit dem letzten Modul fort! Fügen Sie der zweiten Spalte einen Textmodulkörper mit Auswahlinhalt hinzu.

Neuer Textabschnitt divi.jpg

Texteinstellungen

Ändern Sie die Texteinstellungen später.

  • Textgröße: 16px
  • Höhe der Textzeile: 2.3em
  • Textausrichtung: Begründen Sie

Ändern Sie die Größe und Höhe der divi.jpg-Linie

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.

duplizieren Sie einen Abschnitt divi.jpg

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%

image.jpg Flyover-Konfiguration

Bewegen Sie den Mauszeiger über die Deckkraft

Ändern Sie die Deckkraft beim Schweben.

  • Deckkraft: 0%

Ändere die Deckkraft auf flyover.jpg

Übergänge

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

  • Dauer des Übergangs: 1200ms

Animationsdauer divi-Modul image.jpg

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.

Überprüfen Sie die Standarddatei fill.jpg

Stationärer Abstand

Fahren Sie fort, indem Sie etwas unteren Schwebebandrand hinzufügen, damit das Schwebebild größer wird.

  • Polsterung unten: 100px

definieren Sie unteres margin.jpg

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

Definieren Sie eine Schatten divi.jpg

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Standarddeckkraft

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

  • Deckkraft: 100%

schwebendes Bild

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%

Überflug Deckkraft divi.jpg

Übergänge

Erhöhen Sie abschließend die Dauer des Übergangs in den Übergangsparametern des Image-Moduls.

  • Dauer des Übergangs: 1200ms

Dauer der Animation divi.jpg

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%

divi.jpg Linieneinstellungen

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%

Konfiguration der Deckkraft beim Überflugbild auf divi.jpg

Bewegen Sie den Mauszeiger über die Deckkraft

Entfernen Sie die Deckkraft einer Überführung, um den Hintergrund der Spalte anzuzeigen.

  • Deckkraft: 0%

Lopacity definieren divi.jpg

Erstellen Sie Beispiel 4

Fügen Sie eine neue Zeile hinzu

Spaltenstruktur

Am letzten Beispiel! Hier brauchen wir eine neue Zeile mit 6 Spalten.

Beispiel 4-Layout divi.jpg

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

Bild ohne repetition.jpg

Wiederholen Sie dies für alle Spalten online

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

reproduzieren Sie die Bilder auf den anderen Spalten

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

dimensionierung divi.jpg

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.

Nun das Image-Modul in der Spalte 1 divi.jpg

Standarddeckkraft

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

  • Deckkraft: 100%

Konfigurieren Sie die Deckkraft auf divi.jpg

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Bewegen Sie den Mauszeiger über die Deckkraft

Entfernen Sie die Deckkraft beim Hover, damit stattdessen der Spaltenhintergrund angezeigt wird.

  • Deckkraft: 0%

Überflug Deckkraft Modul Bild divi.jpg

Übergänge

Erhöhen Sie die Dauer des Übergangs für einen reibungslosen Übergang.

  • Dauer des Übergangs: 800ms

Dauer eines Übergangs divi.jpg

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.

um die modules.jpg zu klonen

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 Schwebebildern nur mit den integrierten Optionen von Divi zu erhalten! Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie bitte einen Kommentar im Kommentarbereich unten!

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
4 Aktien
Aktie4
tweet
Registrieren