Verständnis des Unterschieds zwischen Triggern, Effekten und Zielen in Divi 5

Die neuen Interaktionen von Divi 5 verwenden ein einfaches Modell - Trigger, Effekt, Ziel. Trennen Sie das, was damit beginnt, was passiert und was sich ändert, und Sie können eine klare, koordinierte Bewegung in Ihrem Layout erstellen. In diesem Beitrag werden wir jeden Teil erklären, zeigen, wie sie zusammenpassen, und durch ein kurzes Beispiel gehen, das Sie wiederverwenden können. Kommen wir dazu!

Was sind Auslöser, Effekte und Ziele?

Interaktionen in Divi 5 sind aus drei beweglichen Teilen gebaut, die zusammenarbeiten. Ein Trigger setzt die Dinge in Bewegung, ein Effekt entscheidet, wie die Antwort aussieht, und ein Ziel definiert, welche Elemente ändert.

Abonnieren Sie unseren YouTube -Kanal

Wenn Sie eine Interaktion einrichten, wird Divi Sie auffordert, alle drei Teile auszufüllen:

Wenn Sie jede Rolle separat verstehen, erleichtert es, zu sehen, wie sie sich zu einem vollständigen System verbinden.

Auslöser ist das, was beginnt

Jede Interaktion beginnt mit einer Startaktion, die als Trigger bezeichnet wird. Dies ist der erste Schritt, den der Benutzer unternimmt, z. B. ein Mausklick, die Überladung oder das Laden von Seiten, die die Aktion initiiert. Wenn Sie beispielsweise Ihre Maus über eine Preiskarte bewegen, ist die Kette in Bewegung.

Einer Auslöser tut nichts. Es braucht eine Antwort.

Effekt ist, was passiert

Sobald der Auslöser feuert, folgt der Effekt. Hier entscheiden Sie über die Reaktion, wie z. B. Neigung, Verblassen, Maßstab, Unschärfe oder eine Mischung von Bewegungen. Stellen Sie sich die gleiche Preiskarten leicht vor und fügen Sie einen tieferen Schatten hinzu, wie Ihr Cursor darüber schwebt - das ist der Effekt.

Schließlich müssen Sie entscheiden, wo Sie den Effekt anwenden sollen.

Ziel ist das, was ändert

Das Ziel ist einfach das Element, das sich ändert, wenn der Trigger abbricht. Schwebeverkehr ist eine häufig verwendete Wechselwirkung, beeinflusst jedoch nur das Element selbst. Mit anderen Worten, das Element, das die Interaktion (der Auslöser) begann, ist auch das Element, das sich ändert (das Ziel).

Beispielsweise kann das Überziehen über eine Spalte dieselbe Spaltenskala erstellen, da es auch das Ziel ist.

Dies hielt alles auf ein einzelnes Element. Sie können die Dinge in Divi 5 immer noch so einrichten, aber Sie sind nicht mehr darauf beschränkt.

Jetzt können der Abzug und das Ziel unterschiedlich sein, was Ihnen viel mehr Kontrolle gibt. Wenn der Cursor beispielsweise in einen Abschnitt eintritt, skisst der Knopf, obwohl er nicht berührt wurde. In diesem Fall ist die Taste das Ziel.

Wie sie zusammenarbeiten

Nachdem wir jeden Teil selbst gesehen haben, kommt die wahre Kraft, wenn Sie sie zu einer Kette verbinden:

• Trigger -Feuer: Der Besucher macht so etwas wie Klicken, Verschiebung der Maus, Eingabein-, Verlassen oder Laden der Seite.
• Effekt Definiert : Sie entscheiden, welche Art von visueller oder bewegungsem Anweisungen zu zeigen sind.
• Ziel gilt: Diese Änderung landet das Element, das Sie ausgewählt haben.

Stellen Sie sich vor, eine Kreislaufverkabelung. Der Schalter flippt, der Strom fließt, die Glühbirne leuchtet auf.

In Divi 5 können Sie diese Schaltung so wie Sie möchten. Ein Schweber auf einer Spalte kann den Knopf neigen. Eine Seitenlade kann in einem Heldenbild verblassen. Ein einzelner Klick kann mehrere Module gleichzeitig animieren, wodurch sich der Abschnitt koordiniert anfühlt.

Dies ist der Zeitpunkt, an dem sich die Interaktionen nicht wie ein schönerer Schweber fühlen und wie eine Designsprache arbeiten. Sie bleiben nicht mehr mit einem Element, das auf sich selbst reagiert. Sie können die Antworten ketten, stolpern und verteilen, um das gesamte Layout zu verbinden.

Erfahren Sie alles über die Interaktionen von Divi 5

Die Formel in Divi 5

Die Schönheit der Interaktionen von Divi 5 ist, dass sie keine zufälligen Add-Ons sind. Sie folgen einer klaren Formel: Trigger → Effekt → Ziel. Das Aufbau sogar komplexer Interaktionen wird einfach und konsistent, sobald Sie es als wiederholbares Muster ansehen.

Lassen Sie uns diese Formel in die Praxis umsetzen, um Ihnen zu zeigen, wie sie zusammenarbeiten. Lassen Sie uns bei diesem Beispiel ein Kontaktformular erstellen, das auf dem Bildschirm auftaucht, wenn der Benutzer auf die Schaltfläche klickt.

Um diesen Effekt zu erstellen, setzen Sie eine Interaktion auf der Schaltfläche, die Sie als Trigger verwenden möchten. Wählen Sie diese Einstellungen aus:

• Auslöserereignis: Klicken Sie auf (wir haben beschlossen, dass das Ereignis ausgelöst wird, wenn der Benutzer auf die Schaltfläche klickt).
• Effektaktion: Element anzeigen (das versteckte Kontaktformular)
• Zielmodul: Abschnitt (Kontakt) ist die Beschriftung, die dem Kontaktabschnitt zugeordnet ist.

Stellen Sie als Nächstes den Ankerlink fest, um den Kontaktabschnitt zu öffnen. Öffnen Sie zunächst die Einstellungen des Kontaktformulars und wechseln Sie zur Registerkarte Erweitert . Unter CSS -ID & Klassen setzen Sie die CSS -ID : Kontakt.

Gehen Sie dann zu den Einstellungen der Schaltfläche und geben Sie #Contact in das Feld der Schaltfläche Link -URL ein.

Stellen Sie schließlich den Ausgangszustand des Formulars auf versteckt, so dass es nur dann erscheint, wenn es ausgelöst wird. Öffnen Sie die Einstellungen des Kontaktformulars, gehen Sie zur Registerkarte Erweitert und wählen Sie unter Visibility die Haltepunkte aus , in denen Sie sie ausblenden möchten.

Testen Sie es jetzt. Klicken Sie auf die Schaltfläche, und der Abschnitt mit versteckter Kontakt wird angezeigt.

Dieser einfache Fluss (klicken → SHOW → Kontaktformular) ist das gleiche Muster, das Sie für Pop-ups, Umschaltungen, sanfte Enthüllung auf Ladung oder verkettete Animationen in einem Abschnitt wiederverwenden werden. Sobald Sie in Bezug auf Trigger, Effekt und Ziel denken, öffnen sich die Möglichkeiten schnell.

Versuchen Sie noch heute Interaktionen in Divi 5

Du hast das Muster. Nehmen Sie es jetzt auf eine echte Seite. Öffnen Sie ein Testlayout und erstellen Sie einen kleinen Interaktionseffekt, den Sie in zehn Minuten beenden können. Wählen Sie etwas aus, das Sie tatsächlich auf einer Client -Site verwenden würden.

Hier sind einige Mini -Aufforderungen, um ins Rollen zu kommen:

• Die Maus tritt in einen Abschnitt ein und macht die Taste skaliert subtil
• Wenn Sie auf eine Schaltfläche „Kontakt“ klicken, wird ein verstecktes Formular angezeigt
• Mausurlaub auf einem Karten zurückgesetzt
• Page Load verblasst in einem Heldenbild, dann einen Moment später die Überschrift

Lassen Sie uns in den Kommentaren wissen, ob Sie die Interaktionen von Divi 5 noch verwendet haben und was Sie davon halten!