So meistern Sie Hover-Effekte in Divi 5 (Public Alpha)

Divi 5 macht das Hinzufügen und Bearbeiten von Hover-Effekten einfacher als je zuvor. In diesem Leitfaden führen wir Sie durch alle wichtigen Verbesserungen an Hover-Effekten und wie Sie diese in Divi 5 verwenden, um Ihren Workflow wie nie zuvor zu optimieren.

Erfahren Sie mehr über die öffentliche Alpha von Divi 5 und wie Sie sie herunterladen können.

Laden Sie die öffentliche Alpha von Divi 5 herunter

Hover-Effekte in Divi 5 (Public Alpha) verstehen

Eine der wesentlichen Änderungen in Bezug auf Hover-Effekte in Divi 5 besteht darin, dass sie jetzt einfacher zu implementieren und zugänglicher sind. In Divi 4 mussten Sie Hover-Effekte für jedes Element innerhalb der Einstellungen manuell aktivieren. Dieser Vorgang könnte umständlich sein, da Sie die spezifische Option finden und Hover-Zustände aktivieren mussten, bevor Sie Änderungen übernehmen konnten.

Mit der neuen Benutzeroberfläche von Divi 5 sind Hover-Effekte sowie reaktionsfähige und Sticky-Bearbeitungsmodi vollständig integriert, sodass sie sofort zugänglich sind. Sie müssen sie nicht mehr einzeln aktivieren!

Diese Verbesserung rationalisiert den Designprozess, indem sie die Schritte reduziert, die zum Anwenden erweiterter Hover-State-Designs erforderlich sind, Arbeitsabläufe beschleunigt und die Erstellung dynamischer Interaktionen intuitiver macht.

Wichtige Verbesserungen bei den Hover-Effekten von Divi 5

Hier sind einige der wichtigsten Verbesserungen von Divi 5, die das Anwenden und Bearbeiten von Hover-Effekten schneller und einfacher machen:

• Schnellere Navigation zwischen Normal- und Hover-Modus: Mit einem Klick ist es einfacher, zwischen den Zuständen zu wechseln und Anpassungen vorzunehmen.
• Alle Hover-Einstellungen in einem Panel: Keine verstreuten Einstellungen mehr. Alle Hover-Einstellungen für ein Element können einfach im Einstellungsfeld aktualisiert werden.
• Sofortiges visuelles Feedback: Echtzeitvorschauen zeigen Änderungen an Hover-Effekten an, während Sie sie vornehmen, und beschleunigen so Ihren Arbeitsablauf.
• Bessere Organisation und Sichtbarkeit der Einstellungen: Inaktive Einstellungen werden ausgegraut, sodass Sie sich auf die verfügbaren Optionen konzentrieren können.

Diese Verbesserungen optimieren den Prozess der Erstellung dynamischer, interaktiver Designs mit Hover-Effekten.

Möchten Sie tiefer in die neuen Einstellungen eintauchen? Sehen Sie sich „Kennenlernen der Divi 5-Benutzeroberfläche“ an, um zu erfahren, wie sie Ihren Design-Workflow vereinfachen kann.

Holen Sie sich die öffentliche Alpha von Divi 5

So meistern Sie Hover-Effekte in Divi 5 (Public Alpha)

1. Greifen Sie an einem Ort auf alle Hover-Statuseinstellungen zu und bearbeiten Sie sie

Die Hover-Einstellungen von Divi 5 werden bequem im Einstellungsfeld angezeigt, sodass Sie an einem Ort schnell auf alles zugreifen können. Dieses optimierte Bedienfeld reduziert die Notwendigkeit, für jede Option separate Hover-Effekte umzuschalten. Mit anderen Worten: Sobald der Hover-Effektstatus im Einstellungsfeld ausgewählt ist, gelten alle Optionen unter jeder Registerkarte (Inhalt, Design und Erweitert) nur noch für den Hover-Status des Elements.

Dadurch lässt sich das Hinzufügen benutzerdefinierter oder komplexer Hover-Effekte schneller implementieren.

2. Verwalten Sie nicht unterstützte Hover-Einstellungen ganz einfach

In Divi 5 werden nicht unterstützte Hover-Einstellungen automatisch ausgegraut (nicht zugänglich), sodass Sie schnell erkennen können, welche Funktionen für das Element, an dem Sie arbeiten, nicht verfügbar sind. Diese Sichtbarkeit verhindert, dass Zeit damit verschwendet wird, die Optionen, die im Hover-Status anpassbar sind, von denen zu unterscheiden, die nicht anpassbar sind , und verbessert so Ihren gesamten Arbeitsablauf.

3. Genießen Sie sofortiges visuelles Echtzeit-Feedback

Das visuelle Echtzeit-Feedback von Divi 5 erfolgt sofort. Sie sehen die Änderungen sofort, wenn Sie die Einstellungen anpassen. Das reduziert das Rätselraten und ermöglicht Ihnen die Feinabstimmung der Hover-Effekte unterwegs.

4. Bearbeiten Sie Hover-Effekte schnell auf Ihrer gesamten Seite

In Divi 5 bleibt das Einstellungsfeld im Schwebezustand, wenn auf andere Elemente geklickt wird. Dadurch können Sie Ihre Hover-Effekte auf Elementen auf Ihrer Seite schnell aktualisieren, indem Sie einfach auf ein Element klicken und eine Änderung vornehmen.

5. Vorschau von Hover-Effekten mit Zuversicht im Frontend

Wenn der Hover-Status im Einstellungsfeld aktiv ist, können Sie mit einem einzigen Klick eine Vorschau des Hover-Status-Designs jedes Elements anzeigen. Der Hover-Status bleibt aktiv. Wenn Ihr Element also einen Hover-Effekt hat, wird durch Klicken auf dieses Element sofort das Hover-Status-Design angezeigt und gleichzeitig die Hover-Statuseinstellungen für dieses Element geöffnet.

Wie Sie im folgenden Videoausschnitt sehen können, können Sie im Frontend eine Vorschau des Hover-Status-Designs jedes Klappentexts anzeigen. Es wird derselbe Hover-Effekt angezeigt wie bei der Vorschau der Live-Seite.

Wenn Sie also die Hover-Status-Designs auf Ihrer Seite überprüfen möchten, klicken Sie einfach auf ein Element auf Ihrer Seite, um das Hover-Status-Design dieses Elements sofort anzuzeigen. Auf diese Weise können Sie ganz einfach sicherstellen, dass Ihre Hover-Effekte korrekt sind, ohne zwischen Ihrer Live-Seite hin und her wechseln zu müssen.

Laden Sie die öffentliche Alpha von Divi 5 herunter

So erstellen Sie einen Hover-Effekt in Divi 5: Kurzes Beispiel

Nachdem wir nun die wichtigsten Funktionen der Hover-Effekte von Divi 5 behandelt haben, gehen wir ein kurzes Beispiel durch, um Ihnen zu zeigen, wie einfach es ist, einen Hover-Effekt in Divi 5 zu erstellen:

1. Fügen Sie ein Modul hinzu

Fügen Sie im Divi Visual Builder das Modul hinzu, das Sie anpassen möchten. Für dieses Beispiel fügen wir eine Schaltfläche hinzu.

2. Greifen Sie auf die Hover-Einstellungen zu

Klicken Sie auf das Modul, um das Einstellungsfenster aufzurufen. Klicken Sie in der rechten Seitenleiste auf das Hover-Symbol, um in den Hover-Modus zu wechseln.

3. Hover-Effekte anpassen

Im Hover-Modus können Sie verschiedene Stileigenschaften ändern, z. B. Hintergrundfarbe, Rahmen, Skalierung oder Animationen. Fügen wir unserer Schaltfläche einen Transformationseffekt hinzu, damit sie beim Schweben vergrößert wird.

Vergiss es nicht. Das vereinfachte Einstellungsfeld von Divi 5 verfügt über alle Steuerelemente in einem Bedienfeld. Nehmen Sie also die gewünschten Änderungen vor und klicken Sie dann auf „Speichern“ , wenn Sie fertig sind.

Probieren Sie gerne verschiedene Hover-Effekteinstellungen aus, darunter Farb- und Hintergrundübergänge, Bild- und Textanimationen, Schatteneffekte und Transformationssteuerelemente zum Skalieren, Drehen oder Verschieben von Elementen. Sie können auch Rahmenstile und Filter wie Unschärfe oder Helligkeit anpassen und erweiterte CSS-Animationen anwenden, um ein ansprechenderes Benutzererlebnis zu erzielen.

Divi 5 ist ein Game-Changer für Hover-Effekt-Designs

Die Hover-Effekte von Divi 5 bieten unübertroffene Benutzerfreundlichkeit, Geschwindigkeit und Flexibilität und rationalisieren Ihren Designprozess im Vergleich zu Divi 4. Egal, ob Sie ein erfahrener Webdesigner oder ein Neuling sind, diese intuitiven Funktionen machen das Hinzufügen interaktiver Elemente zu Ihrer Website einfacher als je zuvor.

Sind Sie bereit, das Benutzererlebnis Ihrer Website zu verbessern? Laden Sie noch heute die öffentliche Alpha von Divi 5 herunter und experimentieren Sie mit neuen Hover-Effekten, um zu sehen, wie Ihre Designs zum Leben erweckt werden!

Laden Sie die öffentliche Alpha von Divi 5 herunter