Kreativ werden mit Divis neuen Hover-Optionen zum Ersetzen von Bildern

Die neuen Hover-Optionen von Divi zum Ersetzen von Bildern verleihen Ihren Projekten ein ganz neues Maß an Kreativität. In diesem Beitrag zeigen wir Ihnen, wie Sie einen schönen Abschnitt mit Bildern erstellen, die sich beim Schweben ändern. Wir hoffen, dass dieses Design Sie dazu inspiriert, Ihre eigenen kreativen Bereiche mit Divis Bild-Ersetzungs-Hover-Optionen zu erstellen. Sie können die JSON-Datei auch kostenlos herunterladen!

Lasst uns anfangen.

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Laden Sie das Bildersatz-Layout KOSTENLOS herunter

Um das kostenlose Bildersatz-Layout in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Abonnieren Sie unseren Youtube-Kanal

Beginnen wir mit der Neuerstellung

Neuen Abschnitt hinzufügen

Abstand

Erstellen Sie zunächst eine neue Seite oder fügen Sie einer vorhandenen Seite einen neuen Abschnitt hinzu. Passen Sie vor dem Hinzufügen einer Zeile die Abstandseinstellungen des Abschnitts an.

• Oberer und unterer Rand: 2vw
• Linker und rechter Rand: 2vw

Grenze

Fügen Sie dann einen Randradius hinzu.

• Abgerundete Ecken: 10px

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie dem Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Hintergrund

Bevor Sie Module hinzufügen, fügen Sie einen blasslachsfarbenen Hintergrund mit Farbverlauf hinzu.

• Hintergrund: Farbverlauf
• Verlaufsfarbe 1: Blasser Lachs #f4e9de
• Farbverlauf 2: Noch blasserer Lachs #fff0e8

Größe

Fahren Sie fort, indem Sie die Breite der Reihe anpassen.

• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%

Abstand

Passen Sie abschließend den Abstand an.

• Obere Polsterung:
  • Desktop + Tablet: 5vw
• Linke Polsterung:
  • Tablet + Telefon: 5vw
• Rechte Polsterung:
  • Desktop: 7vw
  • Tablet + Telefon: 5vw

Textmodul zu Spalte 1 hinzufügen

H2-Inhalt hinzufügen

Zeit, Module hinzuzufügen! Fügen Sie in Spalte 1 einen Textbaustein hinzu und fügen Sie H2-Inhalte Ihrer Wahl ein.

Überschriftstext

Wechseln Sie zur Registerkarte Design und gestalten Sie die H2-Texteinstellungen entsprechend:

• Überschriftstextebene: H2
• H2-Schrift: Annie Use Your Telescope
• H2 Schriftstärke: Fett
• H2-Textausrichtung: Mitte
• H2 Textfarbe: Braun #793715
• H2 Textfarbe:
  • Desktop: 7.2vw
  • Tablet: 12vw
  • Telefon: 11vw

Größe

Ändern Sie als nächstes die Breite auf dem Desktop.

• Breite:
  • Desktop: 45vw
  • Tablet + Telefon: 100%

Verwandeln

Zu guter Letzt drehen Sie den Text und ändern seine Position mit den Transformationseinstellungen.

• Transformieren Drehen:
  • Desktop: 270 Grad
• Transformieren Übersetzen:
  • x-Achse: -10vw
  • y-Achse: 19vw

1. Bildmodul zu Spalte 1 hinzufügen

Fügen Sie eine transparente Illustration hinzu

Fügen Sie direkt unter dem Textmodul ein neues Bildmodul hinzu und laden Sie eine Illustration Ihrer Wahl hoch. Sie können die Bilder, die wir in diesem Tutorial verwenden, finden, indem Sie den gezippten Ordner am Anfang dieses Beitrags herunterladen.

Größe

Erzwingen Sie nun die Bildgröße auf volle Breite.

• Volle Breite: Ja

Abstand

Passen Sie dann die Abstandseinstellungen an.

• Oberer Rand:
  • Desktop + Tablet: -11vw
• Linker Rand:
  • Desktop: -2vw
  • Tablet + Telefon: -36vw
• Linke und rechte Polsterung:
  • Desktop: 10vw
  • Tablet + Telefon: 34vw

2. Bildmodul zu Spalte 1 hinzufügen

Fügen Sie eine transparente Illustration hinzu

Fügen Sie direkt unter dem ersten Bildmodul ein weiteres hinzu. Fügen Sie eine Illustration Ihrer Wahl ein.

Größe

Erzwingen Sie das Modul auf volle Breite.

• Volle Breite: Ja

Abstand

Passen Sie dann die Abstandseinstellungen an.

• Oberer Rand:
  • Desktop: -2vw
  • Tablet + Telefon: -10vw
• Linker Rand:
  • Desktop + Tablet: -14vw
• Linke und rechte Polsterung:
  • Desktop: 7vw
  • Tablet + Telefon: 35vw

3. Bildmodul zu Spalte 1 hinzufügen

Bild hinzufügen

Fügen Sie der Spalte ein weiteres Bildmodul hinzu und fügen Sie eine Illustration ein.

Größe

Erzwingen Sie dann das Modul auf volle Breite.

• Volle Breite: Ja

Abstand

Passen Sie abschließend den Abstand an.

• Oberer Rand:
  • Tablet + Telefon: -18vw
• Linker Rand:
  • Desktop: -13vw
  • Tablet + Telefon: 10vw
• Linke und rechte Polsterung:
  • Desktop: 7vw
  • Tablet + Telefon: 35vw

4. Bildmodul zu Spalte 1 hinzufügen

Bild hinzufügen

Das letzte Modul in Spalte 1 ist ein weiteres Bildmodul. Fügen Sie eine Abbildung ein.

Größe

Erzwingen Sie das Modul auf volle Breite.

• Volle Breite: Ja

Abstand

Passen Sie dann den Abstand an.

• Oberer Rand:
  • Desktop: 3vw
  • Tablet + Telefon: -15vw
• Linker Rand:
  • Desktop: -3vw
  • Tablet + Telefon: 30vw
• Linke und rechte Polsterung:
  • Desktop: 10vw
  • Tablet + Telefon: 35vw

Verwandeln

Zu guter Letzt drehen Sie die Illustration.

• Transformieren Drehen: 84deg

1. Textmodul zu Spalte 2 hinzufügen

Inhalt hinzufügen

Auf zur nächsten Spalte! Fügen Sie ein Textmodul mit H3-Inhalten Ihrer Wahl hinzu.

Link hinzufügen

Fügen Sie dann einen Link zum Modul hinzu.

Hintergrund

Gehen Sie zu den Hintergrundeinstellungen und fügen Sie als nächstes eine Hintergrundfarbe hinzu.

• Hintergrundfarbe
• Hintergrundfarbe: Braun #793715

Überschriftstext

Stylen Sie dann den H3-Text auf der Registerkarte Design.

• Überschriftstextebene: H3
• H3-Schrift: Annie Use Your Telescope
• H3 Farbe: Weiß #ffffff
• H3-Schriftgröße:
  • Desktop: 2vw
  • Tablet: 5vw
  • Telefon: 6vw

Größe

Passen Sie nun die Größeneinstellungen an.

• Breite: 33%
• Modulausrichtung: Mitte

Abstand

Fügen Sie dann einige Abstandswerte für verschiedene Bildschirmgrößen hinzu.

• Unterer Rand: 1vw
• Obere Polsterung:
  • Desktop: 0.5vw
  • Tablet + Telefon: 2.3vw
• Untere Polsterung:
  • Desktop + Tablet: 1.1vw

Grenze

Fahren Sie fort, indem Sie einen Randradius hinzufügen.

• Abgerundete Ecken: 1vw alle Ecken

Box Schatten

Fügen Sie schließlich einen Boxschatten hinzu.

• Kastenschatten: Erste Option
• Horizontale Position: 7px
• Unschärfestärke: 25px

1. Bildmodul zu Spalte 2 hinzufügen

Bild hinzufügen

Das nächste Modul, das wir in Spalte 2 benötigen, ist ein Bildmodul. Laden Sie zwei verschiedene Bilder hoch: eines für den statischen Zustand und eines für den Hover.

• Statisch: Erstes Bild
• Schweben: Zweites Bild

Größe

Erzwinge das Bild auf volle Breite.

• Volle Breite: Ja

Abstand

Passen Sie dann die Abstandswerte an.

• Oberer Rand:
  • Desktop: -2vw
  • Tablet + Telefon: 20vw
• Unterer Rand:
  • Desktop + Tablet: 4vw
• Linker Rand:
  • Desktop: -5vw

Grenze

Fügen Sie als nächstes abgerundete Ecken hinzu.

• Abgerundete Ecken: 10 px alle Ecken

Box Schatten

Geben Sie dem Bild auch einen subtilen Kastenschatten.

• Boxschatten: Zweite Option
• Vertikale Position: 20px
• Unschärfestärke: 80px

Verwandeln

Passen Sie schließlich die Transformationsskalierungswerte beim Hover an.

• Skalierung beim Hover transformieren: 110%

Doppelte Text- und Bildmodule in Spalte 2

Klonen Sie beide Module und bringen Sie die Duplikate in die richtige Reihenfolge.

2. Textmodul in Spalte 2 anpassen

Inhalt und Link ändern

Ändern Sie den Inhalt im doppelten Textbaustein.

2. Bildmodul in Spalte 2 anpassen

Bilder ändern

Ändern Sie die Bilder sowohl in den statischen als auch in den Hover-Einstellungen.

Spalte 2 klonen

Spalte 3 löschen und Spalte 2 duplizieren

Gehen Sie zurück zu den Zeileneinstellungen und löschen Sie die 3. Spalte. Dann duplizieren Sie die 2. Spalte.

1. Textmodul in Spalte 3 anpassen

Inhalt und Link ändern

Passen Sie nach dem Duplizieren der 2. Spalte den Text und den Link im 1. Textbaustein von Spalte 3 an.

1. Bildmodul in Spalte 3 anpassen

Bilder ändern

Ändern Sie auch die Bilder im Bildmodul.

Abstand

Passen Sie dann den Abstand an.

• Oberer Rand:
  • Desktop: -2vw
  • Tablet + Telefon: 11vw
• Unterer Rand
  • Desktop + Tablet: 5vw

2. Textmodul in Spalte 3 anpassen

Inhalt und Link ändern

Ändern Sie Text und Link des letzten Textbausteins in Spalte 3.

2. Bildmodul in Spalte 3 anpassen

Bilder ändern

Ändern Sie auch die statischen und schwebenden Bilder des letzten Bildmoduls.

Abstand

Zum Schluss noch den Abstand des Bildmoduls anpassen und fertig!

• Oberer Rand:
  • Desktop: -3vw
  • Tablet + Telefon: 7vw

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Abschluss

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie mit Divis neuen Hover-Optionen zum Ersetzen von Bildern ein Design erstellen. Diese Funktionalität kann zu vielen kreativen Möglichkeiten führen. Wir hoffen, dass Sie sie in Ihren eigenen Projekten verwenden werden. Denken Sie daran, die gleichen Bildgrößen sowohl für das statische als auch für das Hover-Image zu verwenden. Wenn Sie Fragen oder Anregungen haben, können Sie diese gerne im Kommentarbereich unten hinterlassen!