Alles, was Sie über Divi 5 -Interaktionen wissen müssen

Wenn Sie Besucher mit dynamischen Pop-ups, Umschaltungen und Scroll-Effekten ohne Plugin oder benutzerdefiniertes CSS anziehen möchten, werden Sie eine der neuesten öffentlichen Alpha-Features-Versionen Divi 5 lieben. Mit den Interaktionen in Divi 5 können Divi -Benutzer ansprechende, interaktive Elemente innerhalb des visuellen Bauers erstellen. In diesem Beitrag werden wir in alles eintauchen, was Sie über Divi 5-Interaktionen wissen müssen, um seine Funktionen, ein paar Tipps und Anwendungen in der Praxis zu untersuchen, um die Funktion zu vertraut zu machen.

Wichtiger Hinweis: Divi 5 ist derzeit im öffentlichen Alpha und optimiert für neue Websites. Wir empfehlen nicht, bestehende Divi 4 -Standorte zu migrieren, aufgrund der laufenden Entwicklung und potenziellen Kompatibilitätsprobleme mit Legacy -Modulen. Seien Sie gespannt auf Updates, da Divi 5 seine volle Veröffentlichung nähert!

Kommen wir dazu.

Was sind Divi 5 -Interaktionen?

Divi 5 Interactions ist ein irgendetwas Builder, mit dem Sie interaktive Elemente für Ihre Website direkt im visuellen Builder erstellen können. Mit dieser Funktion ist diese Funktion weit mehr als nur ein Pop-up-Builder und erstellt eine Reihe benutzerdefinierter Interaktionen, von Pop-ups bis hin zu scrollengesteuerten Animationen, ohne eine Codezeile zu berühren.

Abonnieren Sie unseren YouTube -Kanal

Nahtlos in die erweiterte Registerkarte eines Moduls, Spalten, Zeilen oder Abschnitts integriert, bieten unbegrenzte Flexibilität, um ansprechende, benutzerorientierte Erlebnisse zu erstellen.

Die Kernkomponenten von Divi 5 -Interaktionen

Im Zentrum von Divi 5 -Interaktionen stehen drei Schlüsselkomponenten, die zusammenarbeiten, um Ihre Designs zum Leben zu erwecken:

Ereignisse auslösen

Auslöser sind die Ereignisse, die eine Interaktion initiieren. Beispiele gehören Benutzeraktionen wie das Klicken auf eine Schaltfläche oder das Überziehen über ein Bild, scrollbasierte Ereignisse wie das Erreichen eines bestimmten Punktes auf einer Seite oder zeitbasierte Auslöser wie eine Verzögerung nach einer Seite.

Zu den verfügbaren Triggern gehören:

• Klicken Sie : Ein Benutzer klickt auf eine Schaltfläche, ein Bild oder ein anderes Element, um eine Interaktion zu starten.
• Maus eingeben/beenden: Ein Benutzer schwebt oder hinterlässt ein Element.
• Ansichtsfenster/Beenden: Ein Element tritt in den sichtbaren Bereich des Bildschirms ein oder beendet, während der Benutzer scrolls.
• Laden: Eine Interaktion beginnt, wenn die Seite geladen wird, mit einer optionalen Zeitverzögerung.

Sie können beispielsweise 5 Sekunden lang ein Popup auslösen, nachdem eine Seite ein Element geladen oder ein Element animiert, wenn ein Benutzer scrollt.

Wirkung Aktionen

Sobald ein Trigger aktiviert ist, bestimmen Effekte, was passiert. Zu den Optionen gehören das Zeigen oder Versteckelemente, Animieren mit Verblassen, Skalen, Rotation oder Anwendung voreingestellter Übergänge für ein konsistentes Styling.

• Sichtbarkeit umschalten: Schaltet ein Element zwischen sichtbar und versteckt.
• Element anzeigen/ausblenden: macht ein Element sichtbar oder versteckt.
• Voreinstellung umschalten: Schalten Sie ein Voreinsatz ein oder aus für ein Designelement, um ein vorhandenes Voreinstellung zu ersetzen.
• Voreinstellung hinzufügen: Wird verwendet, um einem Element eine voreingestellte Klasse zu fügen. Sie können auch vorhandene Voreinstellungen ersetzen.
• Voreinstellung entfernen: Entfernen Sie einen voreingestellten Stil aus einem Element.
• Toggle -Attribut: Fügt das HTML -Attribut eines Elements wie eine CSS -Klasse oder eine CSS -ID hinzu oder beseitigt sie.
• Attribut hinzufügen: Dies fügt einen bestimmten HTML -Attributwert hinzu, bei dem es derzeit nicht existiert.
• Attribut entfernen: Entfernt jedes auf ein Element angewendete Attribut.
• Cookie umschalten: Fügt einen Cookie -Wert hinzu oder entfernt. Sie können beispielsweise ein Cookie festlegen, wenn ein Pop-up angezeigt wird, und festlegen, dass es nur einmal mit den Bedingungseinstellungen von Divi 5 angezeigt wird.
• Fügen Sie Cookie hinzu: Fügt dem Browser des Benutzers einen Cookie -Wert hinzu, den Sie definieren können.
• Cookie entfernen: Entfernt einen zuvor angegebenen Cookie.
• Scrollen Sie zu Element: Ermöglicht der Seite, reibungslos zu scrollen und das Zielelement in die Ansicht zu bringen.
• Mirror Mouse Movement: Ermöglicht Ihnen die Bewegung fest, die den Mausbewegungen des Benutzers folgt. Zu den Optionen gehören Übersetzung, Skalierung, Deckkraft, Neigung oder Drehen. Sie können auch die Empfindlichkeit der Bewegung einstellen.

Zielen auf ein Modul

Das Ziel ist das Element, das die Interaktion beeinflusst, wie z. B. ein Modul, eine Zeile, eine Spalte oder einen gesamten Abschnitt. Sie können das Element selbst oder ein anderes Element auf der Seite ansprechen und Flexibilität bieten, um komplexe Interaktionen zu erstellen.

Schlüsselmerkmale von Divi 5 -Interaktionen

Divi 5-Interaktionen zeichnen sich für den benutzerfreundlichen und vielseitigen Feature-Set auf:

• Keine Codeschnittstelle: Konfigurieren von Triggern, Effekten und Zielen über eine intuitive Schnittstelle innerhalb der Registerkarte Erweiterter Element, ohne CSS oder JavaScript zu verwenden.
• Verschiedene Interaktionstypen: Erstellen Sie Pop-ups für Lead-Capture, Umschaltungen für FAQs, scrollengesteuerte Verblassen für Heldenabschnitte oder parallaxe Mauseffekte für Portfolios.
• Leichte Leistung: Die Interaktionen müssen direkt in Divi 5 eingebaut werden, um Plugins von Drittanbietern zu erfordern, die Standort aufzublähen und die Ladezeiten zu verbessern.
• Dynamische Triggerkombinationen: Kombinieren Sie mehrere Auslöser wie ein Bildlaufereignis mit einer Zeitverzögerung für ausgefeilte Interaktionen wie ein Popup, das nach einem Benutzer angezeigt wird.
• Responsive Design: Passen Sie den Desktop-, Tablet- und Mobile -Interaktionen mithilfe der anpassbaren Reaktionspunkte von Divi 5 an.

So greifen Sie zu und verwenden Divi 5 -Interaktionen

Das Erstellen einer Interaktion in Divi 5 ist dank der Integration in den visuellen Bauunternehmer unkompliziert. Befolgen Sie diese einfachen Schritte, um loszulegen:

Öffnen Sie zunächst eine Seite in Divi 5. Wählen Sie ein Modul, eine Zeile, eine Spalte oder einen Abschnitt, zu dem Sie eine Interaktion hinzufügen möchten. Wählen Sie beispielsweise ein Bildmodul auf Ihrer Seite aus.

Navigieren Sie zur Registerkarte Erweitert und klicken Sie auf die Dropdown -In -Interaktionen . Klicken Sie von dort auf die Taste + Interaktion hinzufügen .

Wir möchten einen Neigungs-/Transformations-Maus-Over-Effekt für unser Bild erstellen. Dazu müssen wir zwei Interaktionen erstellen - eines für das Bild und eine für die Spalte, die das Bild enthält. Geben Sie Ihre Interaktion mit einem Namen in der Administratorbezeichnung an und geben Sie dann die folgenden Einstellungen ein:

• Auslöserereignis: Mauseingabe
• Effektwirkung: Spiegelmausbewegung
• Zielmodul: Bild
• Zeitverzögerung: 0
• Bewegungstyp: Übersetzen
• Empfindlichkeit: 10

Sobald alle Einstellungen vorhanden sind, klicken Sie auf die Schaltfläche Interaktion Speichern , um fortzufahren.

Als nächstes erstellen wir die Transformationsinteraktion in der Spalte. Klicken Sie noch einmal auf die Interaktion + hinzufügen. Geben Sie die folgenden Einstellungen ein, um die Interaktion zu erstellen:

• Administratorbezeichnung: Neigungsspalte
• Auslöserereignis: Mauseingabe
• Effektwirkung: Spiegelmausbewegung
• Zielmodul: Spalte
• Zeitverzögerung: 0
• Bewegungstyp: Neigung
• Empfindlichkeit: 30

Sobald die Einstellungen eingegeben wurden, sollte Ihre Interaktion wie folgt aussehen:

Verwenden Sie die Vorschau -Schaltfläche, um Ihre Interaktion anzuzeigen.

Ihre Seite wird in einer neuen Registerkarte angezeigt, sodass Sie Ihre Interaktion vorschau und testen können.

Arten von Interaktionen, die Sie erstellen können

Hier sind einige praktische Beispiele, um die Vielseitigkeit von Divi 5-Interaktionen mit Auslöser, Effekten und realen Anwendungen zu präsentieren.

Willkommen Popup für neue Besucher

Pop-ups eignen sich hervorragend, um die Besucher aufzufordern, sich für Newsletter, Werbeaktionen oder Veranstaltungen anzumelden. Mit Divi 5-Interaktionen können Sie ein willkommenes Popup erstellen, das nach dem Laden einer Seite angezeigt wird.

Um diese Interaktion zu erstellen, müssen Sie einen Abschnitt für Ihr Popup erstellen und die folgenden Einstellungen zuweisen:

• Administratorbezeichnung: Popup
• Auslöserereignis: Laden
• Effektaktion: Element anzeigen
• Zielmodul: Abschnitt (Popup)-Nennen Sie Ihren Abschnitt vor dem Erstellen der Interaktion unbedingt
• Zeitverzögerung: 5 Sekunden

Wir müssen auch eine Interaktion erstellen, um das Popup zu schließen. Am einfachsten ist es, die obere rechte Ecke des Popup-Abschnitts ein Symbolmodul hinzuzufügen und die folgenden Einstellungen zuzuweisen:

• Administratorbezeichnung: Schaltfläche Schließen
• Ereignis auslösen: Klicken Sie auf
• Effektaktion: Element ausblenden
• Zielmodul: Abschnitt (Popup)
• Zeitverzögerung: 0

Verwenden Sie die Positionseinstellungen von Divi 5, um die Platzierung Ihres Popups zu steuern. Suchen Sie in der Registerkarte Erweitert das Dropdown-Menü der Position und setzen Sie die Position auf fest . Wählen Sie von dort aus den Ort aus, an dem das Popup auf der Seite angezeigt wird. In diesem Beispiel haben wir es in die Mitte eingestellt. Es ist auch eine gute Idee, den Z-Index so festzulegen, dass das Popup über alles andere auf der Seite angezeigt wird, z. B. 99999 .

Der letzte Schritt besteht darin, die Sichtbarkeit des Pop-ups auf allen Geräten auf Versteck zu setzen. Navigieren Sie dazu zur Registerkarte Erweitert , scrollen Sie zum Dropdown-Menü Sichtbarkeit und wechseln Sie alle Optionen, um den Popup-Abschnitt auf allen Geräten auszublenden.

Schalten Sie die Sichtbarkeit eines Elements um

Toggles eignen sich perfekt zum Erstellen von zusammenklappbaren Inhaltsabschnitten wie FAQs, Akkordeonmenüs, Preistabellen oder Diensten. Sie ermöglichen es Benutzern, Inhalte mit einem Klick zu erweitern oder zu kollabieren und Ihre Seite sauber und interaktiv zu halten. Sie können beispielsweise eine vollständige Liste von Diensten angeben, die nur sichtbar sind, sobald eine Schaltfläche klickt.

Um diesen Effekt zu erstellen, stellen Sie eine Interaktion auf der Schaltfläche fest, die Sie als Auslöser für Ihren Abschnitt festlegen möchten. Geben Sie die folgenden Einstellungen für die Interaktion ein:

• Administratorbezeichnung: Dienste anzeigen
• Ereignis auslösen: Klicken Sie auf
• Effektaktion: Element anzeigen
• Zielmodul: Abschnitt (Dienste enthüllen)
• Zeitverzögerung: 0

Stellen Sie als Nächstes den Ankerlink fest, um den Abschnitt zu öffnen. Öffnen Sie die Einstellungen der Schaltfläche und geben Sie #Services in das Feld der Schaltfläche Link URL der Registerkarte Inhalt ein.

Klicken Sie auf den Abschnitt "Funktionen" unter der Schaltfläche und navigieren Sie zur Registerkarte Erweitert. Legen Sie den Anker fest, indem Sie Dienste zum CSS -ID -Feld im CSS -ID & Class -Menü hinzufügen.

Auf der Registerkarte Erweitert müssen Sie auch die Sichtbarkeit des Abschnitts auf Hidden festlegen, wie wir es bei unserem Pop-up getan haben.

Mausbewegungseffekte

Mit Divi 5 -Interaktionen können Sie dynamische Mausbewegungseffekte erstellen, wenn ein Benutzer über ein Designelement schwebt. Sie können beispielsweise Interaktionen kombinieren, um einen Neigungseffekt auf eine Überschrift und die übergeordnete Spalte zu erzeugen.

Sie müssen zuerst eine Interaktion für die Überschrift erstellen, um diese Interaktion zu erreichen. Geben Sie die folgenden Einstellungen auf der Registerkarte Erweitert: Bild des Bildes ein:

• Administratorbezeichnung: Animierte Überschrift
• Auslöserereignis: Mauseingabe
• Effektwirkung: Spiegelmausbewegung
• Zielmodul: Text
• Zeitverzögerung: 0
• Bewegungstyp: Neigung
• Empfindlichkeit: 30

Wenn die Einstellungen eingegeben werden, sollten sie wie der Screenshot unten aussehen.

Stellen Sie als Nächstes eine Interaktion in der Spalte ein, die die Überschrift mit den folgenden Einstellungen enthält:

• Administratorbezeichnung: Spaltenkippen
• Auslöserereignis: Mauseingabe
• Effektwirkung: Spiegelmausbewegung
• Zielmodul: Spalte
• Zeitverzögerung: 0
• Bewegungstyp: Neigung
• Empfindlichkeit: 50

Sobald Sie abgeschlossen sind, sollten Ihre Einstellungen dem folgenden Screenshot ähnlich aussehen.

Voreingestellte Interaktionen

Sie können Divi 5 -Interaktionen neben Voreinstellungen verwenden, um Effekte entweder mit Mausover- oder Ansichtsfenster -Eingabetastern/Ausstiegsauslöschern zu erzeugen. Wenn Sie beispielsweise einen Abschnitt auf Ihrer Seite präsentieren möchten, indem Sie die Hintergrundfarbe ändern oder einen Grenzschattenstil hinzufügen, können Sie Interaktionen dazu verwenden. Im folgenden Beispiel ändern sich die Hintergrundfarbe, die Breite und die Grenze, wenn ein Benutzer über den Abschnitt schwebt.

Um diesen Effekt zu erstellen, müssen Sie zunächst ein Voreinstellung erstellen, um den Abschnitt vor und nach dem Mausover anzuzeigen. In diesem Beispiel haben wir zwei erstellt - einen mit einem soliden gelben Hintergrund und einen mit verschiedenen Effekten und einem grünen Hintergrund.

Sobald Ihre Voreinstellungen erstellt wurden, können Sie Interaktionen verwenden, um die Änderungen auf Schwebeplätzen umzuschalten. Erstellen Sie zunächst die erste Interaktion mit den folgenden Einstellungen:

• Administratorbezeichnung: gelber Hintergrund
• Auslöserereignis: Mauseingabe
• Effektaktion: Voreinstellung umschalten
• Zielmodul: Abschnitt (Preisgestaltung)
• Zeitverzögerung: 1 Sekunde
• Voreinstellung: gelber Hintergrund

Erstellen Sie als Nächstes eine zweite Interaktion für die Maus-Over, indem Sie die folgenden Einstellungen eingeben:

• Administratorbezeichnung: grüner Hintergrund
• Auslöserereignis: Mausausgang
• Effektaktion: Voreinstellung umschalten
• Zielmodul: Abschnitt (Preisgestaltung)
• Zeitverzögerung: 0
• Voreinstellung: Grüne Voreinstellung

Vorteile der Verwendung von Divi 5 -Interaktionen

Divi 5 Interactions bietet einen leistungsstarken, optimierten Ansatz zum Erstellen von Websites und bietet eine Reihe von Vorteilen, die es zu einer herausragenden Funktion für Divi -Benutzer machen. Hier ist ein tieferer Blick darauf, warum diese Funktion eine hilfreiche Ergänzung zu Divi 5 ist:

1. Keine Plugins erforderlich

Da Divi 5-Interaktionen in den Divi-Kern integriert sind, wird die Notwendigkeit von Plugins von Drittanbietern beseitigt, um Pop-ups und andere Interaktionen zu erstellen. Dieser native Ansatz reduziert die Anzahl der auf Ihrer Website ausgeführten Skripte und führt zu schnelleren Ladezeiten und verbesserten Leistungsmetriken.

Anstatt sich auf ein Pop-up-Plugin zu verlassen, werden Divi 5-Interaktionen beispielsweise alles innerhalb des visuellen Builders verarbeitet, um eine schlanke Codebasis und eine glattere Benutzererfahrung zu gewährleisten. Dies bedeutet auch weniger Aktualisierungen, um Plugin -Konflikte zu verwalten und zu senken, was Ihre Website zuverlässiger macht.

2. Es ist benutzerfreundlich

Divi 5 -Interaktionen sind intuitiv entwickelt, wobei nur wenige Klicks zum Erstellen von Interaktionen erforderlich sind. Anfänger können die Grundlagen schnell erfassen, und Pro -Entwickler können in komplexe Kombinationen eintauchen, ohne eine einzige Codezeile zu schreiben.

Die Interaktioneneinstellungen sind in der erweiterten Registerkarte eines beliebigen Elements ordentlich organisiert, wobei klare Etiketten und Tooltips Sie durch den gesamten Prozess führen. Das Einrichten eines Pop-ups erfordert beispielsweise einige Klicks, um einen Auslöser und eine Auswirkung auszuwählen, sodass es jedem die Verwendung von jedem einfach macht.

3. Freiheit zum Anpassen

Die Flexibilität der Divi 5 -Interaktionen und deren umfangreichen Einstellungen - Auslöser, Effekte und Ziele - ermöglicht es Ihnen, einzigartige Erlebnisse für die Besucher Ihrer Website zu schaffen. Sie können mehrere Trigger mischen, z. B. das Kombinieren eines scrollbasierten Ansichtsfensters mit einer Zeitverzögerung, um anspruchsvolle Interaktionen zu erstellen, wie ein Werbebanner, das nach einem Benutzer auf halber Strecke auf der Hälfte auf der Seite nachgibt.

Durch die Möglichkeit, Modul, Zeile, Spalte oder Abschnitt zu zielen, können Sie bei Bedarf Effekte genau anwenden, unabhängig davon, ob es sich um eine einzige Taste animiert oder einen gesamten Heldenabschnitt transformiert.

4.. Verbessertes Benutzer Engagement

Interaktive Elemente steigern das Engagement der Benutzer, indem sie Websites immer mehr eindringlicher und reaktionsschneller machen. Divi 5-Interaktionen hilft dabei, Besucher auf Ihrer Website zu halten, indem sie die Interaktion fördert, z. B. Klicken auf Umschaltungen, um alternative Preisgestaltung oder Auslösen von Pop-ups für die Lead-Capture anzuzeigen. Beispielsweise könnte eine Restaurant-Website mit einer von Scroll ausgelösten Animation einen Menüabschnitt angeben.

Praktische Tipps für den Einstieg

Um das Beste aus Divi 5 -Interaktionen zu nutzen, nähern Sie sich strategisch, um optimale Ergebnisse zu gewährleisten. Hier sind einige Tipps, die Sie durch den Prozess führen:

• Beginnen Sie einfach: Beginnen Sie mit einfachen Interaktionen wie Pop-ups oder Umschaltungen, um sich mit der Funktion vertraut zu machen, bevor Sie fortschrittliche Effekte wie Mausbewegung oder Multi-Trigger-Animationen in Angriff nehmen.
• Verwenden Sie das Feld "Admin -Etikett": Das Beschriften Ihrer Interaktionen und Elemente ist entscheidend, insbesondere auf komplexen Seiten mit mehreren Abschnitten. Durch das Hinzufügen eines Namens zum Admin -Etikettfeld auf der Registerkarte Inhalt jedes Moduls können Sie die Dinge organisiert und das richtige Zielelement leicht erkennen.
• Verwenden Sie Voreinstellungen: Das voreingestellte System von Divi 5 eignet sich hervorragend zum Speichern von Zeit und die Aufrechterhaltung der Konsistenz über die Interaktionen hinweg. Mit Voreinstellungen können Sie wiederverwendbare Stile wie eine Fade-In-Animation oder einen Farbübergang definieren und auf mehrere Elemente anwenden.
• Gründlich testen: Immer eine Vorschau Ihrer Interaktionen mithilfe der Vorschau -Funktion von Divi 5, um Probleme vor der Veröffentlichung zu fangen. Sie können auch die anpassbaren Responsive -Haltepunkte von Divi 5 verwenden, um zu testen, wie sich Interaktionen auf allen Geräten verhalten.

Erhöhen Sie Ihre Website mit Divi 5 -Interaktionen

Divi 5-Interaktionen sind die perfekte Funktion zum Erstellen von interaktiven Elementen ohne Code, um die Benutzererfahrung Ihrer Website zu steigern. Aus Pop-ups, die von Scroll-ausgelösten Animationen erfassen, die Ihre Designs zum Leben erwecken, ermöglicht diese Funktion jedem, dynamische, professionelle Websites zu erstellen, ohne eine Codezeile zu berühren. Die leichten Integration und die vielfältigen Triggeroptionen machen es zu einem wesentlichen Tool für modernes Webdesign.

Bereit, loszulegen? Laden Sie das neueste Divi 5 Alpha herunter und tauchen Sie in Interaktionen ein, um Pop-ups, Umschalten von Inhalten, Scroll-Effekten und vieles mehr zu erstellen. Ein kurzer Hinweis: Divi 5 ist bereit für neue Websites, empfehlen es jedoch noch nicht, sie auf vorhandenen Websites zu verwenden.

Kommentieren Sie unten oder erreichen Sie unsere Social -Media -Kanäle, um Ihre Kreationen mit uns zu teilen. Wir würden sie gerne sehen!