Interaktionen für Divi 5 (Pop-ups, Umschaltungen, Mauseffekte und mehr)

Heute freuen wir uns, Interaktionen für Divi 5 zu veröffentlichen, ein robustes System zum Erstellen interaktiver Elemente wie Popups und Umschaltungen sowie kreatives Bildlauf- und Mausbewegungs-basierter Effekte.

Es ist kein Pop-up-Baumeister; Es ist ein irgendetwas Baumeister . Erstellen Sie einen Auslöser, weisen Sie einen Effekt zu, wählen Sie ein Ziel und erwecken Ihre benutzerdefinierten Interaktionen zum Leben. Sie können so viele erstaunliche Dinge mit diesem System machen, und ich kann es kaum erwarten, Ihnen zu zeigen, wie es funktioniert.

Schauen Sie sich das folgende Video an, um die neue Funktion in Aktion anzuzeigen.

Bauen Sie Ihre eigenen interaktiven Elemente auf

Sie werden eine neue Interactions -Gruppe auf der Registerkarte Erweitert aller Elemente bemerken. Durch Klicken auf die Taste Interaktion hinzufügen wird der Interaktionsditor geöffnet, in dem Sie den Auslöser, den Effekt und das Ziel jeder Interaktion konfigurieren können.

Der Trigger initiiert die Interaktion, z. B. beim Klicken oder Schwebe. Der Effekt erfolgt, wenn die Interaktion ausgelöst wird, z. B. die Sichtbarkeit, das Voreingang oder das Attribut umschalten, und das Ziel ist das betroffene Element auf der Seite.

Interaktionsbeispiele

Bevor ich tiefer in diese Einstellungen gehe, lassen Sie mich Ihnen einige Beispiele dafür zeigen, welche Interaktionen erreichen können.

Beispiel 1: Erstellen eines Popups

Im folgenden Video-Beispiel habe ich Interaktionen verwendet, um ein Pop-up zu erstellen.

Ich habe einem Abschnitt einen Auslöser für den Ansichtsfenster hinzugefügt, der den Sichtbarkeitseffekt des Umschalts auf mein Popup anwendet. Der Abschnitt tritt in mein Ansichtsfenster ein und löst die Sichtbarkeit des Popups aus und gleitet die Verwendung der Animationseinstellungen von Divi.

Darüber hinaus verfügt ein Symbolmodul im Popup über eine klickbasierte Interaktion, die die Sichtbarkeit im Popup umschaltet, um sie zu schließen. Sie können jede Art von Pop-up- oder schwimmendes Banner erstellen!

Beispiel 2: Erstellen eines Umschaltens

Im folgenden Video -Beispiel habe ich Interaktionen verwendet, um monatliche und jährliche Preistabellen zu umschalten.

Ich habe einer Zeile zwei Interaktionen hinzugefügt, um die Sichtbarkeit der jährlichen und monatlichen Preisabschnitte zu wechseln. Als nächstes habe ich zwei weitere Interaktionen hinzugefügt, um die Sichtbarkeit von zwei Symbolmodulen umzuschalten, wodurch dem Benutzer zusätzliche Feedback zum Klick gegeben wurde.

Beispiel 3: Übergang zwischen den Voreinstellungen

Einer der leistungsstärksten Effekte ist der Toggle Preset Effect. Da Voreinstellungen die Einstellungen eines Elements ändern können, gibt es keine Begrenzung für das, was Sie tun können. Wenn ein Trigger das Voreinstellung eines Zielelements ändert, kann er es in vielerlei Hinsicht verändern.

Im folgenden Video -Beispiel habe ich zwei Interaktionen eingerichtet, um ein Voreinstellung in einer Zeile hinzuzufügen und zu entfernen, wenn es eintritt und das Ansichtsfenster verlässt. Das Highlight -Voreingang verändert die Hintergrundfarbe und -skala der Zeile und fügt einen Box -Schatten hinzu, wodurch die Aufmerksamkeit der Benutzer auf sich gezogen wird, während sie die Seite nach unten scrollen!

Beispiel F: Mausbewegungseffekte

Die Mausbewegungsauswirkungen der Interaktionssysteme machen viel Spaß.

Im Video -Beispiel unten. Ich habe einem Heldenabschnitt mehrere Interaktionen hinzugefügt, die verschiedene Elemente mit Mausbewegungsauswirkungen unterschiedlicher Empfindlichkeiten abzielten.

Die Interaktionen auslösen auf der Maus, die Opazität, Bewegung und Neigungseffekte auf Elemente anwenden, die sich im Zusammenhang mit meiner Maus ändern. Ich habe dem Knopfmodul auch eine Interaktion hinzugefügt, die eine voreingestellte Umstellung umschaltet, um den Stil des quadratischen Umrisss zu ändern.

Die Möglichkeiten sind endlos!

Ich könnte mit verschiedenen Beispielen weiter und weiter gehen, und ich freue mich zu sehen, was Sie sich einfallen lassen.

Wenn Sie den Interaktionsditor genauer betrachten, können Sie einige zusätzliche Effekte sehen, die ich noch nicht erwähnt habe, z. B. Attribute, Cookies und Scrollen zu den Elementen.

Beispielsweise können Sie Attributeffekte verwenden, um die CSS -Klassen, die ID oder irgendetwas anderes eines Elements zu ändern.

Version eins der Interaktionen unterstützt die folgenden Effekte:

• Sichtbarkeit umschalten - Schaltet ein Element zwischen sichtbaren und versteckten Zuständen automatisch.
• Showelement - macht ein verstecktes Element sichtbar.
• Element ausblenden - macht ein sichtbares Element versteckt.
• Voreinstellung umschalten - Schaltet eine voreingestellte Ein/Aus -für ein Element mit optionalem Austausch vorhandener Voreinstellungen ein.
• Voreinstellung hinzufügen - wendet eine voreingestellte Klasse in einem Element mit optionalem Austausch vorhandener Voreinstellungen an.
• Entfernen Sie die Voreinstellung - entfernt eine voreingestellte Klasse aus einem Element.
• Toggle -Attribut - fügt den spezifischen HTML -Attributwert eines Elements hinzu oder beseitigt sie, z. B. eine CSS -Klasse und ID.
• Attribut hinzufügen - fügt einem Element einen bestimmten HTML -Attributwert hinzu, wenn es noch nicht vorhanden ist.
• Attribut entfernen - entfernt einen bestimmten HTML -Attributwert aus einem Element.
• Keks umschalten - Fügen Sie einen Kekswert von einem Cookie hinzu oder entfernen Sie sie. Setzen Sie beispielsweise ein Cookie ein, wenn ein Popup erscheint, wenn ein Benutzer ein Popup gesehen hat. Verwenden Sie dann die Bedingungsoptionen von Divi, um das Popup auf zukünftigen Seitenbesuchen für diesen Benutzer zu verbergen.
• Fügen Sie Cookie hinzu - fügt dem Browser des Besuchers einen Cookie- und Cookie -Wert hinzu, den Sie definieren.
  Cookie entfernen - einen angegebenen Keks entfernen.
• Scrollen Sie zu Element - scrollen Sie die Seite sanft, um das Zielelement in die Anzeige zu bringen.
• Spiegelmausbewegung - Erhält das Zielelement Mausbewegung innerhalb des Triggerelements unter Verwendung verschiedener Bewegungstypen (übertragen, skalieren, Deckkraft, Neigung oder Drehen) mit einstellbarer Empfindlichkeit.

Versuchen Sie es noch heute Divi 5

Interaktionen für Divi 5 sind heute verfügbar und eine von vielen Funktionen, die dieses Jahr zu Divi kommen.

Sie können mit dem Fortschritt der endgültigen Veröffentlichung von Divi 5 und darüber hinaus mit Updates alle zwei Wochen fortfahren. Abhängig von Ihren Prioritäten können Sie Divi 5 jetzt verwenden, um neue Websites zu erstellen oder zu warten, bis wir weitere Funktionen hinzufügen, was auch immer für Sie funktioniert.

Wie in Divi 5s ursprünglicher Multi-Phasen-Veröffentlichungsplan von Divi 5 dargestellt, ist das Divi 5 Public Alpha wie „Divi 5 Lite“. Es fehlen einige Funktionen und eignet sich möglicherweise nicht für vorhandene Websites. Es ist jedoch bereit, auf neuen Websites verwendet zu werden, wenn Sie die Erfahrung Divi 4 vorziehen.

Wir möchten, dass Sie es versuchen, und wenn Sie es lieben, benutzen Sie es. Wenn jeder es liebt, werden wir es offiziell machen.

Haben Sie relative Farben ausprobiert?

Für den Fall, dass Sie es verpasst haben, haben wir kürzlich relative Farben für Divi 5 veröffentlicht, was Divi zum klaren Führer im Farbmanagement und des fortgeschrittenen Farbsystems macht. Sie können mathematisch schöne variable Farbsysteme mit verschachtelten Farbbeziehungen unter Verwendung von HSL erstellen. Sie möchten in dieser Funktion nicht schlafen.

Sehen Sie sich dieses Video für alle Details an.

Weitere Divi 5 -Updates sind unterwegs

2025 ist das Jahr von Divi 5 . Die mühsame Arbeit liegt hinter uns. Wir haben die superschnelle Stiftung gebaut, und jetzt ist es Zeit für Divi, ihr Comeback zu feiern.

Wenn Sie für das Divi -Comeback hier sind, tun Sie uns einen großen Gefallen und lassen Sie es uns wissen, indem Sie dieses Video mögen und einen Kommentar hinterlassen. Es bedeutet uns sehr viel, Sie zu sehen, wie Sie Divi anfeuern, und es ist wichtig, den Algorithmus zu füttern und das Wort zu verbreiten.

Vergessen Sie nicht, uns auf YouTube zu folgen und den Divi -Newsletter abonnieren, damit Sie nie ein Update verpassen. Wir sehen uns bald für eine weitere Ankündigung von Divi 5 -Feature, von der ich verspreche, dass sie gleich um die Ecke sein wird.