So erstellen Sie ein Pop-up mit den Interaktionen von Divi 5 (kostenloser Download)

Pop-ups sind ein großartiges Werkzeug, um Aufmerksamkeit auf sich zu ziehen und das Engagement auf Ihrer Website voranzutreiben. Unabhängig davon, ob Sie Ihre E-Mail-Liste ausbauen, ein Sonderangebot bewerben oder die Besucher zu einer bestimmten Aktion führen möchten, kann ein gut gestaltetes Popup den Unterschied ausmachen. Mit der Veröffentlichung von Divi 5-Interaktionen war es nie einfacher, benutzerdefinierte dynamische Pop-ups zu erstellen.

In diesem Beitrag werden wir Sie durch das Erstellen eines Pop-ups mit der Interaktionen von Divi 5 führen. Lass uns eintauchen!

Was sind Divi 5 -Interaktionen?

DIVI 5 Interactions ist eine neue Funktion, die in den visuellen Bauunternehmer integriert ist und die Websites dynamischer und ansprechender gestaltet. Sie können benutzerdefinierte Animationen und Antworten basierend auf Benutzeraktionen oder Seitenereignissen erstellen, z. B. Klicks, Haufen oder Scrollen. Im Gegensatz zu statischen Designs ermöglichen es Ihnen Interaktionen, Pop-ups, Umschaltungen, Mausbewegungen und Scrolleneffekte zu erstellen, die alle mit Divis vertrauter Schnittstelle von Divi sind.

Abonnieren Sie unseren YouTube -Kanal

Schlüsselkomponenten von Divi -Interaktionen

Jede Wechselwirkung in Divi 5 besteht aus drei Kernkomponenten:

• Auslöser: Das Ereignis, das die Interaktion initiiert, z. B. einen Klick, einen Schwebedarsteller oder ein Element, das das Ansichtsfenster eingibt oder ausgeht.
• Effekt: Die Aktion, die auftritt, wenn der Auslöser aktiviert ist, z. B. die Sichtbarkeit des Umschalts, das Anwenden eines voreingestellten Stils oder das Ändern eines Attributs.
• Ziel: Das von der Interaktion betroffene spezifische Element, das das gleiche Element, ein weiterer Abschnitt, eine Zeile, die Spalte oder das gleiche Modul auf der von der Administratorbezeichnung identifizierten Seite sein kann.

Diese Komponenten funktionieren zusammen und ermöglichen es Ihnen, komplexe Interaktionen mit einer einfachen, ohne Code-Schnittstelle zu erstellen.

Warum sollten Sie Interaktionen zum Erstellen von Pop-ups verwenden

Divi 5 Interactions bietet mehrere Vorteile für den Bau von Pop-ups:

• Sie benötigen keine Plugins: Im Gegensatz zu herkömmlichen Pop-up-Bauherren werden Divi 5-Interaktionen direkt im visuellen Bauunternehmer erstellt, wodurch die Notwendigkeit von Drittanbieter-Plugins beseitigt wird.
• In dem visuellen Builder gelegen: Sie können Pop-ups mit der vertrauten Oberfläche, Modulen und Stylingoptionen von Divi erstellen, um den Benutzern jeder Fähigkeitsniveau einfach zu machen.
• Vielseitige Optionen und Effekte: Kombinieren Sie Pop-ups mit anderen Interaktionen wie scrollbasierten Animationen oder Mausbewegungseffekten, um einzigartige, ansprechende Erlebnisse zu schaffen.
• Vollständige Kontrolle: Passen Sie Trigger, Effekte und Ziele an, um Popups für Ihre spezifischen Ziele zu erstellen, ohne Code zu schreiben.

Schritt-für-Schritt-Anleitung zum Aufbau eines Pop-ups in Divi 5

Das Erstellen eines Pop-ups in Divi 5 ist unkompliziert, wodurch das bestehende Design Ihrer Website einfach ist. In diesem Abschnitt werden wir zeigen, wie einfach es ist, ein Pop-up zu erstellen, um einem unserer vorgefertigten Layouts zu entsprechen, Ihnen zu zeigen, wie Sie es stylen, und die Interaktionen festlegen, um das Popup mit einer zeitgesteuerten Verzögerung anzuzeigen.

1. Installieren Sie ein Layoutpaket

Für dieses Tutorial werden wir die Dinge vereinfachen, indem wir mit einem unserer Layout-Pack-Designs beginnen und dann ein Popup mit denselben Stilen erstellen. Klicken Sie dazu in der oberen linken Ecke des visuellen Builders auf das Symbol +.

Wenn das Dialogfeld angezeigt wird, wählen Sie ein vorgefertigtes Layout aus den verfügbaren Optionen.

Klicken Sie auf das Online -Layout -Paket -Miniaturbild, um die verfügbaren Seiten hervorzuheben.

Wählen Sie das Design der Zielseite und klicken Sie auf dieses Layout , um es in den visuellen Builder zu laden.

Der letzte Schritt beim Importieren des Layout -Pakets besteht darin, zu wählen, ob Voreinstellungen importiert werden sollen. Klicken Sie nach der Auswahl auf die Schaltfläche Import.

2. Erstellen Sie einen Abschnitt für das Popup

Nachdem das Layoutpaket importiert wird, müssen wir am Ende der Seite einen neuen Abschnitt für unser Popup erstellen. Scrollen Sie zum Ende der Seite und fügen Sie einen neuen Abschnitt hinzu.

Klicken Sie auf das Symbol, um eine neue Zeile einzufügen. Wählen Sie die zweite Option unter Offset -Spalten .

3.. Entwerfen Sie das Popup

Jetzt können wir unserem Popup Inhalte hinzufügen. Wenn das Dialogfeld " Modul oder Zeilen einfügen) angezeigt wird, klicken Sie auf, um ein Überschriftenmodul hinzuzufügen.

Geben Sie "15% Rabatt ein?" Im Feld der Überschrift unter der Registerkarte Inhalt.

Um die Designs auf der Seite konsistent zu halten, können Sie die Attribute-Funktionen von Divi 5 verwenden, um die Einstellungen eines anderen Überschriftenmoduls für unser Popup zu kopieren. Im Abschnitt direkt oben über das Überschriftenmodul, klicken Sie mit der rechten Maustaste und klicken Sie auf Attribute kopieren .

Als nächstes schweben Sie über das gerade erstellte Überschriftenmodul, klicken Sie mit der rechten Maustaste, wählen Sie Attribute ein und klicken Sie dann auf Textdesign-Attribute für das Einfügen von Text . Dadurch werden die Stile aus dem anderen Übergangsmodul eingefügt, wodurch Konsistenz gestaltet wird.

Fügen Sie unter dem Überschriftenmodul ein neues Textmodul hinzu.

Suchen Sie wie beim Überschriftenmodul das Textmodul im obigen Abschnitt, klicken Sie mit der rechten Maustaste und wählen Sie Attribute aus. Klicken Sie von dort aus auf das neue Textmodul, tippen Sie auf Attribute für Einfügen und fügen Sie dann Textdesign -Attribute ein .

Sie können Ihren Text entweder in das Textfeld hinzufügen oder Divi AI verwenden, um ihn für Sie zu generieren.

Als nächstes fügen wir ein E-Mail-Opt-In- Modul im Textmodul hinzu.

Der obige Abschnitt verfügt über ein E-Mail-Opt-In-Modul, sodass Sie seine Attribute kopieren und in die neue E-Mail-Opt-In einfügen können, die wir zu unserem Popup hinzugefügt haben.

Der letzte Schritt besteht darin, der rechten Spalte unseres Popups ein Bild hinzuzufügen. Suchen Sie das Bildmodul und fügen Sie es der 2. Spalte unseres Layouts hinzu.

Laden Sie ein Bild hoch und fügen Sie es dem Bildmodul hinzu. Zu diesem Zeitpunkt sollte Ihr Abschnitt folgendermaßen ähnlich aussehen:

4. Erstellen Sie eine Schließschaltfläche

Nachdem das Design unseres Popups vorhanden ist, müssen wir eine neue Zeile darüber hinzufügen, um ein Schließknopfsymbol hinzuzufügen. Auf diese Weise können Ihre Besucher das Pop-up nach Belieben schließen. Klicken Sie auf das Grün + -Symbol, um eine neue Zeile hinzuzufügen.

Wenn das Dialogfeld "Zeile einfügen" angezeigt wird, klicken Sie unter gleichen Spalten auf das einzelne Spaltenlayout, um es dem Abschnitt hinzuzufügen.

Klicken Sie hier, um der Zeile ein Symbolmodul hinzuzufügen.

Wählen Sie das Symbol Schließen aus den verfügbaren Optionen. Es kann einfach gelegen werden, indem „Schließen“ in das Suchfeld über der Symbolliste eingegeben wird.

Wechseln Sie zur Registerkarte Design und geben Sie die folgenden Entwurfseinstellungen ein:

• Symbolfarbe: #5344b9
• Symbolgröße: 36px
• Ausrichtung: richtig

Der letzte Schritt besteht darin, die Zeile über der zweispaltigen Zeile zu verschieben, die den Inhalt unseres Popups enthält. Verwenden Sie die Schichtenansicht, um die Zeilen in die richtige Reihenfolge neu zu ordnen. Benennen Sie den Abschnitt in Popup um .

5. Passen Sie die Einstellungen des Abschnitts an

Bevor wir unsere Interaktionen erstellen, müssen wir sicherstellen, dass das Popup für die Breite des Browsers angemessen dimensioniert ist. Wir möchten nicht, dass es ein Popup mit voller Breite ist. Navigieren Sie also zum Design, um einige Anpassungen vorzunehmen. Erweitern Sie das Dropdown-Menü der Größe, um die Einstellungen anzuzeigen.

Geben Sie im Bereich der Breite 80% für die Breite ein. Setzen Sie als Nächstes die Option Abschnitt Ausrichtung auf die Mitte .

Setzen Sie unter Grenze einen Randradius von 10px.

Wir werden auch einen Box-Schatten hinzufügen, damit unser Pop-up den Rest des Inhalts abhebt. Suchen Sie das Dropdown-Menü Box Shadow und erweitern Sie es. Wählen Sie unter Box Shadow Preset 1 .

Gehen Sie zuletzt zur Registerkarte Inhalt , um eine Farbe für den Hintergrund unseres Popup-Abschnitts hinzuzufügen.

6. Erstellen Sie die Interaktion, um das Popup anzuzeigen

Mit dem Design können wir unsere Interaktionen festlegen. Wir setzen unseren Pop-up-Abschnitt auf 5 Sekunden nach dem Grundstück eines Benutzers auf der Seite fest. Navigieren Sie zur Registerkarte Erweitert des Abschnitts und suchen Sie das Dropdown-Menü Interactions . Klicken Sie auf + Interaktion hinzufügen, um zu starten.

Wählen Sie aus den verfügbaren Optionen laden . Mit dieser Einstellung kann das Popup auf Seite geladen werden.

Wenn das Dialogfeld Interaktion bearbeiten, geben Sie die folgenden Einstellungen ein und klicken Sie auf Speichern :

• Administratorbezeichnung: Popup-Interaktion
• Auslöserereignis: Laden
• Effektaktion: Element anzeigen
• Zielmodul: Abschnitt (Popup)
• Zeitverzögerung: 5 Sekunden

Als nächstes müssen wir eine Interaktion für unsere Schließung hinzufügen. Wählen Sie das Symbolmodul in der ersten Zeile unseres Popup-Abschnitts aus. Navigieren Sie zur Registerkarte Erweitert, klicken Sie auf + Interaktion hinzufügen , geben Sie die folgenden Einstellungen ein und speichern Sie:

• Administratorbezeichnung: Popup schließen
• Ereignis auslösen: Klicken Sie auf
• Effektaktion: Sichtbarkeit umschalten
• Zielmodul: Abschnitt (Popup)
• Zeitverzögerung: 0

7. Testen und verfeinern Sie Ihr Pop-up mit den anpassbaren Responsive-Haltepunkten von Divi 5

Bevor Sie mit dem letzten Schritt fortfahren, ist es eine gute Idee, die anpassbaren Reaktionspunkte von Divi 5 zu verwenden, um sicherzustellen, dass Ihr Popup in allen Bildschirmgrößen gut aussieht. In Divi 5 stehen jetzt 7 Haltepunkte zur Auswahl.

Standardmäßig sind nur drei aktiviert. Mit 7 können Sie Ihr Popup auf mehr Haltepunkten testen und ein nahtloses Benutzererlebnis mit einer beliebigen Bildschirmgröße sicherstellen. Um alle 7 zuzulassen, klicken Sie auf das Ellipsis -Menü in der oberen Mitte der Administratorleiste. Aktivieren Sie von dort aus alle Haltepunkte, indem Sie sie einschalten.

Mit dem neuen Flexbox-Layout-System von Divi 5 können Sie leicht Änderungen vornehmen, um sicherzustellen, dass Ihr Popup auf jedem Gerät großartig aussieht. Sie können beispielsweise das Feld der Änderungsspaltenstruktur von Divi 5 verwenden, um die Anzahl der auf kleineren Geräten angezeigten Spalten zu ändern. Diese Option stapelt den Inhalt auf Mobilgeräten mit einem Klick.

8. Anzeigeoptionen festlegen

Damit Ihr Popup korrekt angezeigt werden kann, müssen wir die Sichtbarkeit, Positionierung und Z-Index des Popup-Abschnitts anpassen. Auf diese Weise kann Ihr Popup angezeigt werden, wo Sie möchten, halten Sie es versteckt, bis es Zeit zum Anzeigen ist, und stellen Sie sicher, dass es über dem Rest des Inhalts der Seite angezeigt wird.

Navigieren Sie zur Registerkarte Erweitert, um den Popup-Abschnitt zu erhalten. Suchen Sie das Dropdown-Menü der Sichtbarkeit . Klicken Sie, um den Abschnitt in allen Ansichten zu deaktivieren (Telefon, Tablet und Desktop).

Klicken Sie anschließend auf das Dropdown-Menü der Position. Stellen Sie die Position auf fest und wählen Sie einen Offset -Ursprung. Fügen Sie schließlich einen Z-Index von 99999 hinzu, um sicherzustellen, dass das Popup den Rest des Inhalts der Seite anzeigt.

Sobald alle Einstellungen vorhanden sind, speichern Sie die Seite und sehen Sie sie sich in einer anderen Registerkarte vor. Das Popup sollte in 5 Sekunden nach dem Laden der Seite angezeigt werden. Sie sollten auch in der Lage sein, das Popup mit der von uns erstellten engen Interaktion zu schließen.

Erweiterte Popup-Anpassungsoptionen

Mit DIVI 5-Interaktionen können Sie Ihr Pop-up mit erweiterten Funktionen wie Anzeigebedingungen, Kombination von Effekten oder sogar Divi-AI auf die nächste Ebene bringen, um Pop-ups zu erzeugen. Schauen wir uns einige Möglichkeiten an, wie Sie Ihre Popups weiter erweitert werden können, ohne benutzerdefinierte CSS oder JavaScript-Snippets zu benötigen.

Anzeigebedingungen

Sie können die Bedingungsoptionen von Divi verwenden, um das Popup basierend auf dem Benutzerverhalten wie Benutzerrollen anzuzeigen. Zum Beispiel können Sie das Popup nur an angemeldete Benutzer zeigen, um Anmeldungen zu ermutigen.

Sie können auch die Bedingungen ermöglichen, das Popup basierend auf Seitenbesuchen anzuzeigen. Sie sollten beispielsweise das Popup deaktivieren, wenn ein bestimmter Benutzer die Seite bereits besucht hat. Sie können es auch so einstellen, dass ein Benutzer die Seite nicht besucht hat. Dies kann für Besucher nützlich sein, die Ihre Website über eine andere Seite finden und als nächstes auf die Startseite klicken.

Effekte kombinieren

Sie können Ihr Pop-up mit scrollbasierten Animationen oder Mausbewegungseffekten verbessern. Diese können als zusätzliche Interaktionen hinzugefügt werden, indem zusätzliche Auslöser und Effekte ausgewählt werden. Interaktionen können kombiniert werden, und es gibt keine Begrenzung für die Zahl, die Sie erstellen können. Sie können beispielsweise eine Interaktion auf das Bild in unserem Popup mithilfe von Mausbewegungseffekten auf dem Bild anwenden.

Divi AI -Integration

Beschleunigen Sie den Entwurfsprozess, indem Sie Divi AI verwenden, um ein Layout zu erzeugen. Sie können Divi AI anweisen, bestimmte Abschnitte zu erstellen, einschließlich eines, das Sie in ein Pop-up umwandeln können. Im folgenden Beispiel haben wir Divi AI gebeten, ein Layout für einen Business-Coach zu erstellen, der mit einem CTA-Abschnitt in ein Popup verwandeln können.

Best Practices für effektive Pop-ups

Um sicherzustellen, dass Ihr Pop-up die Benutzererfahrung verbessert und Ergebnisse fördert, berücksichtigen Sie diese Best Practices:

1. Halten Sie es benutzerfreundlich

Vermeiden Sie aufdringliche Pop-ups mit zeitgesteuerten Verzögerungen zwischen 5 und 10 Sekunden anstelle von sofortigen Auslösern. Dies gibt den Benutzern Zeit, sich mit Ihren Inhalten zu beschäftigen, bevor sie aufgefordert werden. Das Starten eines Pop-ups zu früh kann ablenkend sein. Die Benutzer schließen das Pop-up und können möglicherweise eine Aktion, eine Newsletter-Anmeldung oder andere wichtige Maßnahmen verpassen, die sie ergreifen möchten.

Legen Sie Ihr Pop-up eine zeitgesteuerte Verzögerung ein, um zu vermeiden, dass das Engagement der Benutzer verloren geht.

Fügen Sie außerdem immer eine klare, leicht identifizierbare Taste für die Schließung hinzu, damit Benutzer das Popup abtun und ein positives Browsererlebnis aufrechterhalten können.

2. Optimieren Sie die Leistung

Die Leistungsoptimierung ist für effektive Pop-ups von entscheidender Bedeutung. Um die Ladezeiten schnell zu halten, minimieren Sie schwere Animationen oder große, nicht optimierte Bilder. Entscheiden Sie sich für komprimierte Bilder und begrenzen Sie komplexe Effekte, um ein bissiges, nahtloses Erlebnis zu gewährleisten, insbesondere für Benutzer auf langsameren Verbindungen oder mobilen Geräten. Dieser Ansatz verbessert die Benutzerzufriedenheit und unterstützt bessere Engagement- und Conversion -Raten.

3.. Entwerfen Sie Pop-ups mit Berücksichtigung von Zugangsstandards

Barrierefreiheit ist eine weitere wichtige Überlegung, um Ihr Pop-up für alle Benutzer integrativ zu gestalten. Fügen Sie den Bildern immer deskriptiver Alt -Text hinzu, um die Leser von Bildschirm zu unterstützen, einen hohen Kontrast zwischen Text und Hintergrund für die Lesbarkeit zu gewährleisten und verwenden Sie Schriftgrößen von 16px oder größer, um Benutzer mit Sehbehinderungen aufzunehmen.

Diese Praktiken tragen dazu bei, dass Ihr Pop-up für ein vielfältiges Publikum zugänglich ist und sich an Standards der Web-Barrierefreiheit ausspricht.

4. Testen Sie auf allen Bildschirmgrößen

Testen Sie schließlich Ihr Popup in allen Bildschirmgrößen gründlich, um ein einheitliches Erlebnis auf allen Geräten zu gewährleisten. Nutzen Sie die anpassbaren Reaktionspunkte von Divi 5, um sicherzustellen, dass Ihr Pop-up gut aussieht und wie auf Desktops, Tablets und Smartphones beabsichtigt wird.

Achten Sie genau auf die Schaltfläche Schließen, um sicherzustellen, dass es so wie er sollte, und dieser Text ist auf kleineren Bildschirmen lesbar. Überprüfen Sie außerdem den Abstand, die Größe und das Layout nach Bedarf, um einen polierten, professionellen Look zu erzielen.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Treten Sie dem Divi -Newsletter bei und wir senden Ihnen eine Kopie des ultimativen Divi -Landing -Layout -Pakets sowie Tonnen anderer erstaunlicher und kostenloser Divi -Ressourcen, Tipps und Tricks per E -Mail. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi -Meister sein. Wenn Sie bereits abonniert sind, geben Sie einfach Ihre E -Mail -Adresse unten ein und klicken Sie auf Download, um auf das Layoutpaket zuzugreifen.

HERUNTERLADEN

Sie haben erfolgreich abonniert. Bitte überprüfen Sie Ihre E -Mail -Adresse, um Ihr Abonnement zu bestätigen und Zugriff auf kostenlose wöchentliche Divi -Layout -Packs zu erhalten!

Erstellen Sie Pop-ups mit Divi 5-Interaktionen

Die Interaktionen von Divi 5 können das Erstellen eines Popups erleichtern, indem Sie benutzerdefinierte, ansprechende Designs direkt im visuellen Bauunternehmer erstellen. Durch das Kombinieren von Triggern, Effekten und Zielen können Sie Popups erstellen, die Aufmerksamkeit erregen und Conversions vorantreiben und gleichzeitig das Design Ihrer Website entsprechen. Erkunden Sie andere Funktionen wie Modulgruppen und verschachtelte Zeilen, um noch dynamischere Popup-Layouts zu erstellen.

Bist du bereit, Divi 5 auszuprobieren? Laden Sie das neueste Divi 5 Public Alpha herunter, experimentieren Sie mit Interaktionen und teilen Sie Ihre Gedanken im Kommentarbereich unten mit. Bitte teilen Sie Ihre Kreationen mit uns auf unseren Social -Media -Kanälen und besuchen Sie unseren Blog, um weitere Tutorials mit den innovativen Funktionen von Divi 5 zu erhalten. Wir freuen uns darauf zu sehen, was Sie erstellen!