So lösen Sie Hover-Effekte für ein Modul, eine Spalte und eine Zeile gleichzeitig aus

Eines der besten Dinge beim Erstellen einer Site mit Divi ist, dass jeder Baustein voller Designoptionen ist. Jedes Modul, jede Spalte, jede Zeile und jeder Abschnitt enthält Entwurfseinstellungen für den Standard- und den Hover-Zustand. Dies öffnet die Tür zum Auslösen mehrerer Hover-Effekte, wenn diese Elemente miteinander kombiniert werden.

In diesem Tutorial zeige ich Ihnen, wie Sie gleichzeitig Hover-Effekte für ein Modul, eine Spalte und eine Zeile auslösen. Der Trick besteht darin, sicherzustellen, dass alle Elemente die gleiche Größe und den gleichen Schweberaum haben. Aber sobald Sie die Elemente an Ort und Stelle haben, können Sie mit Ihren Hover-Effekten und Designs äußerst kreativ werden.

Lass uns anfangen.

Vorgeschmack

Hier ist ein kurzes Beispiel, wie das gleichzeitige Auslösen von Hover-Effekten verschiedener Divi-Elemente aussieht.

Laden Sie das Designbeispiel KOSTENLOS herunter

Um das Design 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.

Abonnieren Sie unseren Youtube-Kanal

Kommen wir zum Tutorial, ja?

Verstehen, wie Sie Hover-Zustände auf mehreren Divi-Elementen gleichzeitig auslösen.

Jedes Element in Divi (Abschnitt, Zeile oder Modul) hat seinen eigenen Hover-Bereich, der im Grunde die Größe des Elements selbst hat.

Jedes dieser Elemente verfügt über integrierte Hover-Optionen, die aktiviert werden, wenn der Mauszeiger über dieses Element oder eines der darin enthaltenen untergeordneten Elemente bewegt wird.

Wenn Sie beispielsweise Hover-Optionen zu einem Abschnitt hinzugefügt haben, werden diese Hover-Optionen aktiv, wenn Sie mit der Maus über den Abschnitt fahren.

Wenn Sie dann den Mauszeiger über den Zeilen-Hover-Raum innerhalb des Abschnitts bewegen, aktivieren Sie die Hover-Optionen sowohl der Zeile als auch des Abschnitts. Dies liegt daran, dass die Zeile ein untergeordnetes Element des Abschnitts ist.

Immer wenn Sie den Mauszeiger über eine Spalte bewegen, aktivieren Sie den Mauszeigerstatus der Spalte, der Zeile und des Abschnitts.

Und schließlich lösen Sie immer dann, wenn Sie den Mauszeiger über ein Modul bewegen, den Hover-Status für das Modul und alle seine übergeordneten Elemente (Spalte, Zeile und Abschnitt) aus.

Standardmäßig hat jedes dieser Elemente einen Abstand (Padding), der Lücken im Hover-Raum erzeugt, der es dem Benutzer ermöglicht, jedes Element selektiv zu schweben. Wenn Sie jedoch den Abstand zwischen den einzelnen Elementen entfernen, können Sie die Schwebezustände für alle Elemente gleichzeitig auslösen.

Dies öffnet die Tür für viele Hover-Effekt-Kombinationen, die gleichzeitig auftreten können, wenn Sie die Hover-Optionen für jedes Element kombinieren und sie auf einem gemeinsamen Hover-Bereich aktivieren.

Ein Beispiel für das Kombinieren von Hover-Effekten

Hier ist ein Beispiel dafür, wie dies mit Divi funktioniert.

Im folgenden Beispiel haben wir eine Zeile mit einem Hintergrundbild. Beim Schweben haben wir einen verzögerten Boxschatten, der als eine Art Rahmendesignelement angezeigt wird.

Innerhalb der Zeile haben wir eine Spalte, die mit einem Blackbox-Schatten gefüllt wurde. Beim Bewegen des Mauszeigers wird der Kastenschatten der Spalte allmählich verringert, um das Hintergrundbild der Zeile anzuzeigen.

In der Spalte haben wir ein Klappenmodul mit blauem Hintergrund. Beim Schweben wird der blaue Hintergrund in eine halbtransparente blaue Farbe geändert, damit Sie das Hintergrundbild sehen können.

Da zwischen den einzelnen Elementen ein Abstand vorhanden ist, können wir den spezifischen Schwebeeffekt jedes Elements sehen, wenn wir über jeden einzelnen Schweberaum schweben.

Wenn wir jedoch den Abstand herausnehmen und der Zeile eine benutzerdefinierte Breite zuweisen, teilen sich alle Elemente den gleichen Hover-Raum. Oder anders gesagt, das Modul nimmt den gesamten Platz der Spalte und Zeile ein. Wenn wir also über das Modul schweben, werden die Hover-Effekte für das Modul, die Spalte und die Zeile gleichzeitig aktiviert.

Übergangsverzögerungen funktionieren mit diesem Setup hervorragend

Denken Sie daran, dass es im obigen Beispiel Übergangsverzögerungen bei den Zeilen- und Spalten-Hover-Effekten gibt, die die Funktionalität dieses Konzepts wirklich gut hervorheben. Wenn wir versuchen würden, nur dem Modul eine ähnliche Kombination von Schwebeeffekten hinzuzufügen, könnten wir nicht die Vorteile der Anwendung unterschiedlicher Übergangsverzögerungen und -dauern auf jeden Schwebeeffekt einzeln nutzen.

Das Designbeispiel in Divi . neu erstellen

Um Ihnen eine Anleitung zu geben, wie sich dies in der realen Welt von Divi abspielt, lassen Sie uns das oben beschriebene Beispiel nachbilden.

Was Sie brauchen, um loszulegen

Um zu beginnen, benötigen Sie Folgendes:

1. Das Divi Theme installiert und aktiv
2. Eine neue Seite, die erstellt wurde, um das Frontend von Grund auf neu zu erstellen (visueller Builder)
3. Bilder, die für simulierte Inhalte verwendet werden sollen

Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.

Abschnitt und Zeile hinzufügen

Als erstes müssen Sie einen regulären Abschnitt mit einer einspaltigen Zeile erstellen.

Zeilen- und Spalteneinstellungen aktualisieren

Öffnen Sie als Nächstes die Zeileneinstellungen und geben Sie der Zeile ein Hintergrundbild.

Dann müssen wir das Standard-Padding entfernen, damit es keine Lücke im Schweberaum zwischen der Zeile und der Spalte gibt.

• Padding: 0px oben, 0px unten

Fügen Sie dann beim Hovern den folgenden Boxschatten zur Zeile hinzu.

• Box Shadow: siehe Screenshot
• Stärke der Box-Schattenunschärfe: 0px
• Box-Schatten-Verteilungsstärke: 0px (Desktop), 10px (Hover)
• Schattenfarbe: #063c68

Als nächstes aktualisieren Sie die Übergangsoptionen mit einer Dauer und einer Verzögerung wie folgt:

• Übergangsdauer: 500ms
• Übergangsverzögerung: 700ms

Öffnen Sie nun die Spalteneinstellungen und aktualisieren Sie Folgendes:

• Box Shadow: siehe Screenshot
• Stärke der Box-Schattenunschärfe: 0px
• Box-Schatten-Verteilungsstärke: 200px (Desktop), 0px (Hover)
• Schattenfarbe: #000000
• Übergangsdauer: 500ms
• Übergangsverzögerung: 200ms

Fügen Sie das Blurb-Modul hinzu

Fügen Sie nun der Zeile ein Klappenmodul hinzu.

Aktualisieren Sie dann den Klappentext wie folgt:

• Bild: [Klappbild einfügen]
• Hintergrundfarbe: #0c71c3
• Hintergrundfarbe (Hover): rgba(12,113,195,0.35)

• Textausrichtung: Mitte
• Textfarbe: Hell
• Padding: 20px oben, 20px unten, 20px links, 20px rechts

Endergebnis

Sehen Sie sich das Endergebnis an.

Abschließende Gedanken und Tipps

Zu verstehen, wie man Hover-Zustände für mehrere Divi-Elemente gleichzeitig auslöst, eröffnet einige aufregende Designmöglichkeiten. Das Beispiel in diesem Beitrag hebt nur einige von vielen Hover-Effektkombinationen hervor, die möglich sind, wenn Sie die Hover-Zustände eines Moduls, einer Spalte und einer Zeile kombinieren. Außerdem haben wir nicht einmal die Möglichkeiten untersucht, die sich aus der Kombination der Hover-Optionen für den Abschnitt ergeben, die Ihnen noch mehr Hover-Optionen bieten würden. Wenn Sie diese Hover-Effekte selbst erkunden, finden Sie hier ein paar Tipps und Ideen, die Ihnen dabei helfen.

• Verwenden Sie Box-Schatten anstelle von Rahmen – Rahmen fügen einem Element tatsächlich zusätzlichen Platz hinzu, sodass dies zu unerwünschten Hover-Lücken führen kann. Box Shadows fügt ein Designelement hinzu, das keinen tatsächlichen Platz hinzufügt.
• Erkunden Sie die Hover-Effekte für den Hintergrundübergang – Jedes Divi-Element verfügt über Hover-Optionen für den Hintergrund, die für Ebenen kreativer Hover-Effekte kombiniert werden können.
• Verwenden Sie Transform-Hover-Optionen – Transform-Hover-Optionen können ein kreatives Element hinzufügen, z. B. Skalieren und Drehen von Elementen beim Hover. Es kann jedoch schwierig sein, mehrere Elemente beim Schweben zu drehen, da dies zu Sprüngen führt.
• Nutzen Sie die Übergangsoptionen – Durch das Hinzufügen unterschiedlicher Übergangsdauern und -verzögerungen für den Hover-Zustand jedes Elements können einzigartige Hover-Animationen erstellt werden.

Ich hoffe, dieses Tutorial wird Sie dazu inspirieren, einige erstaunliche Hover-Effekt-Kombinationen in Divi zu erkunden.

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

Danke schön!