So transformieren Sie mehrere Elemente für abstrakte Hover-Effekte in Divi

Wie Sie bereits wissen, verfügt Divi über eine Vielzahl von Designeinstellungen, mit denen Sie einzigartige Hover-Effekte für jedes Divi-Element (Abschnitte, Zeilen oder Module) erstellen können. Normalerweise ist ein Hover-Effekt auf nur ein Element isoliert. Wenn Sie beispielsweise beim Bewegen des Mauszeigers einem Modul eine Rotationseigenschaft für die Transformation hinzufügen, wird diese Drehung aktiviert, wenn Sie mit der Maus über das Modul fahren. Wenn Sie jedoch der Zeile, die das Modul enthält, einen zusätzlichen Hover-Effekt hinzufügen, fügt dies eine weitere Ebene von Hover-Effekten hinzu, wenn Sie mit der Maus über das Modul fahren. Dies öffnet die Tür für einige einzigartig abstrakte Schwebeeffekte.

In diesem Tutorial erfahren Sie, wie Sie mithilfe der integrierten Einstellungen von Divi mehrere Elemente für abstrakte Hover-Effekte umwandeln. Und da wir Zeilen für dieses Design etwas anders verwenden werden, zeige ich Ihnen, wie Sie ein Rasterlayout für Ihre Zeilen erstellen, damit Sie diese Hover-Effekte in einer Galerie präsentieren können (wenn Sie möchten).

Lass uns anfangen.

Vorgeschmack

Laden Sie das Transformieren mehrerer Elemente im Hover-Layout KOSTENLOS herunter

Um die Designs aus diesem Tutorial 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!

Um das Layout auf Ihre Seite zu importieren, entpacken Sie einfach die ZIP-Datei und ziehen Sie die JSON-Datei in den Divi Builder.

Kommen wir zum Tutorial, sollen wir?

Einstieg

Abonnieren Sie unseren Youtube-Kanal

Für dieses Tutorial benötigen Sie Folgendes:

1. Das Divi Theme installiert und aktiv
2. Ein paar Bilder. Ich verwende Bilder aus unseren vorgefertigten Layouts, auf die über den Divi Builder zugegriffen werden kann

Sobald Sie bereit sind, gehen Sie zu Ihrem WordPress-Dashboard. Erstellen Sie dann eine neue Seite (Seiten > Neu hinzufügen), geben Sie Ihrer Seite einen Titel und stellen Sie den Divi Builder bereit. Wählen Sie die Option „Von Grund auf neu erstellen“.

Jetzt wartet Ihre leere Leinwand!

Abstrakte Hover-Effekte für ein Bild

Dieses erste Design kombiniert die Schwebeeffekte der Schrägtransformation in der Reihe und das Bildmodul, um einen Auffächerungseffekt für unser Bild beim Schweben zu erzeugen. Abgesehen davon, dass dieser Effekt cool aussieht, kann dieser Effekt auch als hilfreiche UI-Interaktion dienen, die den Benutzer darüber informiert, dass Sie durch Klicken auf das Bild mehr Bilder sehen. Sie können das Bild also als Link zu Ihrer Galerieseite verwenden, wenn Sie möchten.

So geht's.

Erstellen Sie zunächst einen neuen regulären Abschnitt mit einer einspaltigen Zeile.

Fügen Sie dann der Zeile ein Bildmodul hinzu.

Als nächstes fügen Sie ein Bild zum Modul hoch.

Hover-Effekte des Bildmoduls hinzufügen

Jetzt können wir dem Bild einige Transformations-Hover-Effekte hinzufügen, die das Bild skalieren, drehen und neigen. Gehen Sie dazu zu den Transformationsoptionen und aktualisieren Sie Folgendes:

Transformationsskalierung X- und Y-Achse: 110 %

Transformieren Z-Achse drehen: 9deg

Transformieren Skew X- und Y-Achse: 3deg

Das ist es! Ziemlich einfach. Jetzt müssen wir die Zeile anpassen, um einen weiteren Hover-Effekt hinzuzufügen, der aktiviert wird, wenn der Mauszeiger über die Elemente bewegt wird.

Zeileneinstellungen

Damit dieses Design funktioniert, muss die Zeile die gleiche Größe wie das Bild darin haben, damit der Hover-Bereich für beide gleich ist. Auf diese Weise können wir verschiedene Hover-Effekte sowohl für das Modul als auch für die Zeile hinzufügen, die aktiviert werden, wenn der Mauszeiger über das Modul (oder in diesem Fall das Bild) bewegt wird. Dies funktioniert, da der Mauszeiger über ein Modul innerhalb einer Reihe die Hover-Effekte aktiviert, genauso wie wenn Sie mit der Maus über die Reihe fahren. Und da wir einen anderen Hover-Effekt für das Modul haben, werden beide Hover-Effekte aktiviert, wenn Sie über das Modul schweben. Dies ermöglicht es uns, eine Kombination aus abstrakten Hover-Effekten mit Boxschatten, Transformationsneigung und Transformationsdrehung sowohl auf die Zeile als auch auf das Modul zu verwenden.

Wir haben bereits unsere Hover-Effekte für unser Bild installiert, jetzt müssen wir die Größe unserer Zeile anpassen. Abhängig von der Größe des Bildes sollte das Modul bereits die volle Breite der Zeile umfassen, sodass technisch gesehen keine Anpassung der Zeilenbreite erforderlich ist. Aber in diesem Beispiel verkleinere ich die Zeile, um Platz für unsere Hover-Effekte zu schaffen.

Aktualisieren Sie die Zeileneinstellungen wie folgt:

Max-Breite: 400px

Da wir möchten, dass die Höhe unserer Zeile mit dem Bild darin übereinstimmt, müssen wir die standardmäßige obere und untere Auffüllung entfernen:

Benutzerdefiniertes Padding: 0px oben, 0px unten

Jetzt müssen wir der Zeilenspalte ein Hintergrundbild hinzufügen. Dieses Hintergrundbild wird immer dann angezeigt, wenn der Hover-Effekt der Bildmodul-Transformation verzerrt und gedreht wird.

Spalte 1 Hintergrundbild: [Bild eingeben]

Aktualisieren Sie die Zeile mit einem Kastenschatten bei der Maus wie folgt weiter:

Box Shadow: siehe Screenshot
Horizontale Position des Boxschattens: 0px (Standard), -30px (Hover)
Vertikale Position des Boxschattens: 0px (Standard), -15px (Hover)
Schattenfarbe: #002f66

Dieser Box-Schatten fügt den Effekt eines anderen Bildes hinzu, das hinter dem Zeilen-Hintergrundbild erscheint, das erscheint, sobald wir unsere Transformations-Hover-Effekte hinzufügen, die das Hintergrundbild drehen und neigen.

Schließlich können wir eine schiefe Transformationseigenschaft hinzufügen, um einen zusätzlichen Hover-Effekt für die Zeile hinzuzufügen.

Transformieren Skew X- und Y-Achse: -3deg

Endergebnis

Hier ist das Endergebnis.

Und es wird auch auf Mobilgeräten gut skaliert.

Abstrakte Hover-Effekte für einen Call-to-Action (Beispiel 1)

Zeileneinstellungen

Erstellen Sie einen neuen regulären Abschnitt mit einer einspaltigen Zeile.

Aktualisieren Sie dann die Zeileneinstellungen wie folgt:

Spalte 1 Hintergrundfarbe links: rgba(34,43,58,0.71)
Spalte 1 Hintergrundfarbe rechts: #222b3a
Hintergrundbild: [Bild einfügen]
Maximale Breite: 400px
Benutzerdefiniertes Padding: 0px oben, 0px unten

Wir werden zu den Zeileneinstellungen zurückkehren, um unsere abstrakten Hover-Effekte in Kürze zu vervollständigen, aber für den Moment fügen wir unseren Aufruf an das Aktionsmodul der Zeile hinzu.

Einstellungen des Call-to-Action-Moduls

Öffnen Sie die Einstellungen des Call-to-Action-Moduls und aktualisieren Sie den Inhalt wie folgt:

Titel: Reisen mit Punkten
Schaltflächentext: Klicken Sie hier
Inhalt: Nur für kurze Zeit
Button Link URL: # (nur um den Button vorerst zu aktivieren)
Hintergrundfarbe verwenden: NEIN

Aktualisieren Sie dann die Designeinstellung für den Text und den Abstand des Moduls.

Titelschriftart: Gilda Display
Schaltflächentextgröße: 16px
Schaltflächentextfarbe: #ffb238
Hintergrundfarbe der Schaltfläche: rgba(0,0,0,0)
Breite des Tastenrahmens: 0px

Benutzerdefinierte Polsterung: 20 % oben, 20 % unten

Fügen Sie nun dem Modul einen Rahmen hinzu.

Randbreite: 2px
Randfarbe: #222b3a

Das kümmert sich um unser Standarddesign. Jetzt ist es Zeit für den lustigen Teil. Denken Sie daran, da unsere Zeile und unser Modul im Wesentlichen die gleiche Größe (Höhe und Breite) haben, ist der Hover-Bereich für beide gleich. Mit anderen Worten, die Hover-Effekte, die wir der Zeile und dem Modul hinzufügen, werden beide aktiviert, wenn Sie mit der Maus über die Elemente fahren. Dies ermöglicht es uns, eine Kombination aus abstrakten Hover-Effekten mit Boxschatten, Transformationsneigung und Transformationsdrehung sowohl auf die Zeile als auch auf das Modul zu verwenden.

Beginnen wir mit den Zeilen-Hover-Effekten.

Row Hover-Effekte

Zuerst können wir unserer Zeile einen Box-Schatten hinzufügen, wenn wir den Mauszeiger darüber bewegen. Öffnen Sie die Zeileneinstellungen und aktualisieren Sie Folgendes:

Box Shadow: siehe Screenshot
Horizontale Position des Boxschattens: 0px (Standard), 90px (Hover)
Vertikale Position des Boxschattens: 0px (Standard), 80px (Hover)
Stärke der Box-Schattenausbreitung: 0px (Standard), -40px (Hover)

Schattenfarbe: #ffb238

Beachten Sie, dass der Boxschatten auch die Transformationsoptionen erbt, die wir als nächstes hinzufügen werden.

Jetzt fügen wir eine Drehungs- und Neigungstransformationseigenschaft beim Hover hinzu.

Transformieren X-Achse drehen (Hover): 10deg
Transformieren Skew X-Achse (Hover): -4deg
Transformieren Skew Y-Achse (Hover): -4deg

Das kümmert sich um die Zeilen-Hover-Effekte. Jetzt müssen wir dem Call-to-Action-Modul den Hover-Effekt hinzufügen, der das Design vervollständigt.

Hover-Effekte des Call-to-Action-Moduls

Öffnen Sie die Einstellungen des Call-to-Action-Moduls und weisen Sie ihm wie folgt einen Box-Schatten-Hover-Effekt zu:

Box Shadow: siehe Screenshot
Horizontale Position des Boxschattens: 0px
Vertikale Position des Boxschattens: 0px (Standard), 30px (Hover)
Schattenfarbe: #ffffff

Schließlich fügen Sie die Transformationseigenschaft Skalieren, Drehen und Neigen wie folgt beim Schweben hinzu:
Transformationsskala X- und Y-Achse (Hover): 115 %
Transformieren Z-Achse drehen (Hover): 9deg
Transformieren Skew X-Achse (Hover): 3deg
Transformieren Skew Y-Achse (Hover): 3deg

Wenn Sie die Größe des Moduls mithilfe von Scale on Hover erhöhen, wird die Wahrscheinlichkeit minimiert, dass der Benutzer nur über das Zeilenelement statt über das Modul schwebt.

Endergebnis

Hier ist das Endergebnis des abstrakten Hover-Effekts. Beachten Sie, wie sowohl die Zeilen-Hover-Effekte als auch die Modul-Hover-Effekte beim Hover aktiviert werden, um die Elemente für ein abstraktes Design zu verzerren.

So sieht der Hover-Effekt auf dem Handy aus. Da die meisten mobilen Browser jedoch ein Tippen erfordern, um den Hover-Effekt zu aktivieren, sollten Sie den Hover-Effekt auf Mobilgeräten deaktivieren, um zu vermeiden, dass der Benutzer doppelt tippen muss, wenn Sie das Modul als Link verwenden.

Abstrakte Hover-Effekte für einen Call-to-Action (Beispiel 2)

Um das Design dieses nächsten abstrakten Hover-Effekts zu beschleunigen, duplizieren wir den Abschnitt, der unser erstes Beispiel enthält. Jetzt müssen wir nur noch ein paar kleine Anpassungen am Design und den Hover-Effekten für ein einzigartiges Design vornehmen.

Zeileneinstellungen aktualisieren

Aktualisieren Sie zunächst die Zeileneinstellungen wie folgt:

Transformieren Z-Achse drehen: -5deg
Transformieren Skew X- und Y-Achse: -4deg

Einstellungen des Call-to-Action-Moduls aktualisieren

Lassen Sie uns nun die Moduleinstellungen wie folgt optimieren:

Nehmen Sie zuerst die Grenze…

Rahmenbreite: 0px

Aktualisieren Sie dann den Boxschatten wie folgt:

Horizontale Position des Boxschattens: 0px
Vertikale Position des Kastenschattens: 110px
(Stellen Sie sicher und deaktivieren Sie den Hover-Effekt, der vom vorherigen duplizierten Design übernommen wurde)
Schattenfarbe: #ffb238

Jetzt können wir unsere Hover-Effekte für die Transformationseigenschaften aktualisieren. Hier verringern wir im Grunde die Skalierung ein wenig und fügen unseren vorherigen Rotations- und Neigungstransformationseigenschaften negative Werte hinzu, um das Element beim Schweben in die entgegengesetzte Richtung zu bewegen.

Aktualisieren Sie die folgenden Transformationsoptionen:

Transformationsskala X- und Y-Achse (Hover): 110%
Transformieren Z-Achse drehen (Hover): -9deg
Transformieren Skew X-Achse (Hover): -3deg
Transformieren Skew Y-Achse (Hover): -3deg

Erstellen eines Rasterlayouts für Ihre Zeilen

Da dieses Design erfordert, dass die übergeordnete Zeile um das Modul gewickelt wird und dieselbe Höhe und Breite hat, können Sie nicht wirklich ein Spaltenlayout erstellen, wie Sie es normalerweise tun würden. Sie können jedoch die flex-Eigenschaft verwenden, um Ihre Zeilen auszurichten horizontal in einem Rasterlayout.

Dazu duplizieren Sie zunächst die Zeile mit Ihrem Modul ein paar Mal, sodass Sie drei Zeilen in einem Abschnitt haben.

Fügen Sie dann jeder der Zeilen einen benutzerdefinierten Rand hinzu:

Benutzerdefinierter Rand: 50 Pixel oben, 50 Pixel unten

Öffnen Sie dann die Abschnittseinstellungen und fügen Sie einfach das folgende benutzerdefinierte CSS zum Hauptelement hinzu.

display: flex;
flex-wrap: wrap;

Jetzt haben Sie drei Spalten mit Zeilen, die mit Ihrer Browsergröße reagieren.

Abschließende Gedanken

Das Transformieren mehrerer Elemente beim Schweben bietet eine weitere Ebene der Kreativität, die Sie erkunden können. Die Beispiele in diesem Tutorial sollten Ihnen zeigen, was möglich ist, aber Sie können die Designs für Ihr eigenes Projekt optimieren. Wie Sie vielleicht erwarten, können Sie ziemlich verrückt werden, wenn Sie möchten. Sie können jedoch auch etwas konservativer sein, um ein subtiles Interaktionsdesignelement wie das Bildmodulbeispiel in diesem Tutorial zu erstellen.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!