3 nahtlose Transform-Hover-Effekte, die Sie mit Divi . auf Ihre Bilder anwenden können

Suchen Sie nach einer coolen Möglichkeit, Bilder auf Ihrer nächsten Divi-Website zu präsentieren? Lesen Sie weiter, denn in diesem Beitrag werden wir 3 Hover-Effekte zur Bildtransformation behandeln, die dazu beitragen, das allgemeine Erscheinungsbild Ihrer Seite zu verbessern. Sie können den Erstellungsprozess von drei verschiedenen Beispielen von A bis Z verfolgen und sie sogar zur sofortigen Verwendung herunterladen. Der Hauptzweck dieses Tutorials besteht darin, Sie zu inspirieren, die neuen Transformationsoptionen von Divi mit den bereits vorhandenen Optionen zu kombinieren, um ein schönes Webdesign zu erstellen.

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf die Ergebnisse aller drei Beispiele für verschiedene Bildschirmgrößen.

Desktop

Beispiel 1

Beispiel #2

Beispiel #3

Handy, Mobiltelefon

Beispiel 1

Beispiel #2

Beispiel #3

Laden Sie die Hover-Effekte zur Bildtransformation KOSTENLOS herunter

Abonnieren Sie unseren Youtube-Kanal

Um die kostenlosen Hover-Effekte zur Bildtransformation in die Hände zu bekommen, müssen Sie sie 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!

Allgemeine Schritte

Neuen Abschnitt hinzufügen

Abstand

Bevor wir jedes der Beispiele einzeln neu erstellen, gehen wir einige allgemeine Schritte durch. Fügen Sie Ihrer Seite einen neuen regulären Abschnitt mit den folgenden Rand- und Abstandswerten hinzu:

• Oberer Rand: 200px
• Unterer Rand: 200px
• Obere Polsterung: 0px
• Untere Polsterung: 0px

Neue Zeile hinzufügen

Spaltenstruktur

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

Spalte 2 Hintergrundfarbe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und fügen Sie der zweiten Spalte eine Hintergrundfarbe hinzu.

• Spalte 2 Hintergrundfarbe: #effef

Größe

Gehen Sie als nächstes zu den Größeneinstellungen und lassen Sie die Zeile die gesamte Breite des Bildschirms einnehmen.

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: Ja
• Breite: 100%
• Maximale Breite: 100%

Abstand

Fügen Sie als nächstes die folgenden benutzerdefinierten Abstandswerte hinzu:

• Obere Polsterung: 0px
• Untere Polsterung: 0px
• Spalte 2 obere Polsterung: 10vw
• Spalte 2 untere Polsterung: 10vw
• Spalte 2 linke Polsterung: 5vw
• Spalte 2 Rechte Polsterung: 5vw

Textmodul Nr. 1 zu Spalte 2 hinzufügen

H2-Inhalt hinzufügen

Es ist an der Zeit, die verschiedenen Module zu Spalte 2 hinzuzufügen, beginnend mit einem Textmodul. Geben Sie einen H2-Inhalt Ihrer Wahl ein.

H2-Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die H2-Texteinstellungen.

• Überschrift 2 Schriftart: Times New Roman
• Überschrift 2 Schriftstärke: Fett
• Überschrift 2 Textfarbe: #0f47ff
• Überschrift 2 Textgröße: 3.5vw

Trennmodul zu Spalte 2 hinzufügen

Sichtweite

Das nächste Modul, das wir in der zweiten Spalte benötigen, ist ein Divider-Modul. Stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

• Teiler anzeigen: Ja

Farbe

Gehen Sie dann zur Registerkarte Design und ändern Sie die Teilerfarbe.

• Farbe: #ff961e

Größe

Ändern Sie auch die Größenwerte.

• Teilergewicht: 1px
• Breite: 20%
• Modulausrichtung: Links
• Höhe: 0px

Abstand

Und schaffen Sie etwas Platz für das Modul, indem Sie die folgenden Werte für den oberen und unteren Rand verwenden:

• Oberer Rand: 1vw
• Unterer Rand: 1vw

Textmodul #2 zu Spalte 2 hinzufügen

Inhalt hinzufügen

Weiter zum nächsten Modul, das ein weiteres Textmodul ist. Geben Sie einen Absatzinhalt Ihrer Wahl ein.

Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Texteinstellungen.

• Textschriftart: Open Sans
• Textgröße: 0.7vw (Desktop), 1.7vw (Tablet), 2.5vw (Telefon)
• Textzeilenhöhe: 1,5 vw (Desktop), 2,5 vw (Tablet), 3,5 vw (Telefon)
• Textausrichtung: Begründen

Größe

Ändern Sie auch die Größeneinstellungen.

• Breite: 61 % (Desktop), 80 % (Tablet & Telefon)

Abstand

Und fügen Sie einen benutzerdefinierten oberen und unteren Rand hinzu.

• Oberer Rand: 2vw
• Unterer Rand: 2vw

Textmodul #3 zu Spalte 3 hinzufügen

Inhalt hinzufügen

Weiter zum nächsten und letzten Modul, das wir in der zweiten Spalte brauchen, das ist ein weiteres Textmodul. Wir verwenden dieses Modul als Schaltfläche, indem wir einige Absatzinhalte hinzufügen.

Link hinzufügen

Fahren Sie fort, indem Sie einen Link zum CTA hinzufügen.

Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Texteinstellungen entsprechend:

• Textschriftart: Times New Roman
• Textfarbe: #ff961e
• Textgröße: 1.5vw (Desktop), 2.5vw (Tablet), 3.5vw (Telefon)

Größe

Ändern Sie auch die Breite des Moduls in den Größeneinstellungen.

• Breite: 48%

Abstand

Gehen Sie dann zu den Abstandseinstellungen und fügen Sie benutzerdefinierte Polster hinzu.

• Obere Polsterung: 1vw
• Untere Polsterung: 1vw

Grenze

Beenden Sie das Textmodul, indem Sie einen unteren Rahmen mit den folgenden Einstellungen hinzufügen:

• Breite des unteren Rands: 1px
• Farbe des unteren Rands: #0f47ff

Abschnitt zweimal klonen

Sobald Sie den Abschnitt und alle darin enthaltenen Elemente angepasst haben, können Sie ihn zweimal klonen. Wir verwenden jeden der Abschnitte auf unserer Seite, um die drei Beispiele neu zu erstellen, die zu Beginn dieses Beitrags geteilt wurden.

Beispiel 1 neu erstellen

Bildmodul zu Spalte 1 hinzufügen

Bildbox leer lassen

Beginnen wir mit dem ersten Beispiel! Fügen Sie der ersten Spalte ein neues Bildmodul hinzu und lassen Sie das Bildfeld leer.

Standardhintergrundfarbe

Ändern Sie die Hintergrundfarbe des Bildmoduls:

• Hintergrundfarbe: #0f47ff

Hintergrundfarbe schweben

Ändern Sie die Hintergrundfarbe beim Bewegen des Mauszeigers.

• Hintergrundfarbe: rgba(255,150,30,0.65)

Hintergrundbild

Anstatt ein Bild hochzuladen, fügen wir stattdessen eines zum Hintergrund hinzu, begleitet von den folgenden Einstellungen:

• Hintergrundbildgröße: Cover
• Position des Hintergrundbilds: Mitte
• Hintergrundbild wiederholen: Keine Wiederholung
• Hintergrundbild-Mischung: Weiches Licht

Abstand

Gehen Sie zu den Abstandseinstellungen des Moduls und fügen Sie einige benutzerdefinierte Abstandswerte hinzu:

• Leerzeichen unter dem Bild anzeigen: Nein
• Obere Polsterung: 22vw
• Untere Polsterung: 22vw

Standard-Übersetzungsdrehung

Wir werden das Bild auch beim Hover drehen. Stellen Sie sicher, dass das Bild im Originalzustand angezeigt wird, bevor Sie den Mauszeiger bewegen, indem Sie '0deg' zur richtigen Option hinzufügen.

• Rechts: 0deg

Hover Übersetzen Drehen

Ändern Sie diesen Wert bei der Mausbewegung:

• Rechts: 180 Grad

Übergänge

Um einen sofortigen Effekt zu erzielen, entfernen wir die Übergangsdauer:

• Übergangsdauer: 0ms

Beispiel 2 neu erstellen

Bildmodul zu Spalte 1 hinzufügen

Bildbox leer lassen

Auf zum zweiten Beispiel! Stellen Sie auch hier sicher, dass Sie das Bildfeld leer lassen.

Standardhintergrundfarbe

Gehen Sie zu den Hintergrundeinstellungen und fügen Sie die folgende (völlig transparente) Hintergrundfarbe hinzu:

• Hintergrundfarbe: rgba(255,255,255,0)

Hintergrundfarbe schweben

Ändern Sie diese Farbe beim Hover:

• Hintergrundfarbe: rgba(0,0,0,0.65)

Hintergrundbild

Wir verwenden wieder ein Hintergrundbild, anstatt eines in das Modul selbst hochzuladen. Kombinieren Sie das Hintergrundbild mit den folgenden Einstellungen:

• Hintergrundbildgröße: Cover
• Position des Hintergrundbilds: Mitte
• Hintergrundbild wiederholen: Keine Wiederholung
• Hintergrundbild-Mischung: Weiches Licht

Abstand

Gehen Sie dann zu den Abstandseinstellungen und ändern Sie den oberen und unteren Abstand:

• Leerzeichen unter dem Bild anzeigen: Nein
• Obere Polsterung: 22vw
• Untere Polsterung: 22vw

Standard-Transformationsskala

Stellen Sie sicher, dass die Standardwerte für die Transformationsskalierung "100%" bleiben.

• Rechts: 100%
• Unten: 100%

Hover-Transformationsskala

Und ändern Sie diese Werte beim Bewegen des Mauszeigers, um einen Skalierungseffekt zu erzielen.

• Rechts: 120 %
• Unten: 120 %

Standard-Transformationsübersetzung

Standardmäßig behalten wir '0px' für die untere Option in den Transformationsübersetzungseinstellungen bei.

• Unten: 0px

Hover Transformieren Übersetzen

Ändern Sie diesen Wert beim Bewegen des Mauszeigers, um das Element neu zu positionieren.

• Unten: 9vw

Übergänge

Wir erstellen auch einen etwas schnelleren Übergang, indem wir die Übergangsdauer auf der Registerkarte „Erweitert“ ändern:

• Übergangsdauer: 200ms

Beispiel 3 neu erstellen

Spaltenstruktur ändern

Auf zum nächsten und letzten Beispiel! Beginnen Sie mit der Änderung der Spaltenstruktur der Zeile.

Bildmodul zu Spalte 1 hinzufügen

1:1 Bild hochladen

Fügen Sie dann der ersten Spalte ein Bildmodul hinzu. Im Gegensatz zu den ersten beiden Beispielen laden wir hier ein Bild im Verhältnis 1:1 (gleiche Breite und Höhe) hoch.

Größe

Wechseln Sie zur Registerkarte Design und erzwingen Sie, dass das Bild in den Größeneinstellungen die volle Breite hat.

• Volle Breite erzwingen: Ja

Abstand

Entfernen Sie als nächstes den Leerraum unter dem Bild in den Abstandseinstellungen.

• Leerzeichen unter dem Bild anzeigen: Nein

Standardrahmen

Gehen Sie dann zu den Randeinstellungen und fügen Sie '500vw' zu jeder der Ecken hinzu. Wir stellen sicher, dass dieser Wert hoch genug ist, um alle Bildschirmgrößen abzudecken.

Grenze schweben

Entfernen Sie die abgerundeten Ecken, die Sie beim Schweben hinzugefügt haben.

Standardfilter

Gehen Sie dann zu den Filtereinstellungen und stellen Sie sicher, dass diese Standardwerte hinzugefügt werden:

• Sättigung: 100%
• Helligkeit: 46%
• Deckkraft: 3%

Hover-Filter

Aktivieren Sie die Hover-Option für jede der geänderten Einstellungen und verwenden Sie die folgenden Werte:

• Sättigung: 300%
• Helligkeit: 46%
• Deckkraft: 100%

Standard-Transformationsskala

Gehen Sie dann zu den Transformationsoptionen und ändern Sie die Standardoptionen für die Transformationsskalierung:

• Rechts: 68 %
• Unten: 68 %

Hover-Transformationsskala

Ändern Sie diese Werte bei der Mausbewegung.

• Rechts: 130 %
• Unten: 130 %

Standard-Transformationsübersetzung

Fahren Sie mit den Transformationsübersetzungswerten fort und stellen Sie sicher, dass die Standardwerte für die Transformationsübersetzung gleich bleiben:

• Rechts: 0px
• Unten: 0px

Hover Transformieren Übersetzen

Ändern Sie die Werte beim Hover.

• Rechts: 1vw
• Unten: 8vw

Übergänge

Zu guter Letzt erhöhen Sie die Übergangsdauer auf der Registerkarte Erweitert, um einen reibungslosen Übergang zu erzielen, und Sie sind fertig!

• Übergangsdauer: 600ms

Vorschau

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

Desktop

Beispiel 1

Beispiel #2

Beispiel #3

Handy, Mobiltelefon

Beispiel 1

Beispiel #2

Beispiel #3

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie mit dem Bildmodul und den Hover- und Transformationsoptionen von Divi kreativ werden. Die Effekte, die wir nachgebaut haben, sind nur einige der vielen schönen Möglichkeiten, die es gibt. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.