Wie kann ich in Divi 5 ein Popup erstellen?
Du möchtest in Divi 5 ein Popup erstellen, ohne ein zusätzliches Plugin zu installieren? Gute Nachricht: Das geht – und zwar ganz einfach mit den Bordmitteln von Divi 5. Du kannst dein Popup direkt im Theme Builder gestalten. In diesem Beitrag zeige ich dir Schritt für Schritt, wie du das umsetzt und wie du zusätzlich verhindern kannst, dass das Popup bei jedem Seitenaufruf erneut erscheint. So bekommst du eine schlanke, benutzerfreundliche Lösung, die sich perfekt in dein Design einfügt – ganz ohne Plugin-Ballast.
Tutorial als Video anschauen
Du siehst gerade einen Platzhalterinhalt von Standard. Um auf den eigentlichen Inhalt zuzugreifen, klicke auf den Button unten. Bitte beachte, dass dabei Daten an Drittanbieter weitergegeben werden.
Weitere InformationenVorbereitung
Du erstellst das Popup direkt auf der Seite, wo es später erscheinen soll. Dabei kannst du wie gewohnt den Divi-Builder nutzen; du hast hier keinerlei Einschränkungen. Dein Popup wird in der Mitte des Bildschirms angezeigt werden, achte beim deinem Layout darauf. Für das Popup benötigst du eine eigene Sektion, am besten fügst du diese ganz am Ende deiner Seite ein und gestaltest dann dein Popup. Wo genau dein Popup auf der Seite hinzugefügt ist, wird später keine Rolle mehr spielen.
Damit es sich später gut vom Hintergrund abhebt, empfehle ich dir deinem Popup (also der Zeile) einen Schatten hinzuzufügen.
Wichtig: Du musst dieser Sektion einen Namen über das Admin-Label vergeben, damit es später der Interaktion richtig zugeordnet werden kann. Nutze hierfür einen eindeutigen Namen, z.B. „Popup“.
Schließen-Icon
Da wir ein Popup erstellen, braucht es auch eine Möglichkeit, es wieder zu schließen. Hier kommt unsere 1. Interaktion ins Spiel.
Zunächst fügst du ein Icon hinzu, z.B. ein Kreuz. Dies kannst du einfach unterhalb deines letzten Moduls hinzufügen und dann mit „Position“ in der oberen rechten Ecke ausrichten.



So kannst du das Schließen-Icon ausrichten
- gehe in den Einstellungen auf den Reiter „Erweitert“
- öffne die Einstellungen für „Position“ und wähle hier „Absolute“ und anschließend die Position, wo dein Icon sein soll. In unserem Beispiel oben rechts
- ggf. in den Einstellungen die Abstände noch anpassen.

Interaktion zum Schließen hinzufügen
Gehe in den Einstellungen auf den Reiter „Erweitert“ und öffne Interactions. Hier benötigen wir
- Admin Label: nur für dich
- Trigger: Click
- Effect: Hide Element
- Target Modul: die Sektion auswählen – dafür hatten wir das Admin-Label vergeben
Tipp: damit wir bei diesem Icon einen Mouse-Over-Effekt wie bei einem Link haben, kannst du diese Zeile in ->Erweitert ->Custom CSS -> Module Elements und hier unter „Main Element“ eintragen:
cursor: pointer;
Popup anzeigen lassen
Um das Popup erscheinen zu lassen, fügen wir nun eine Interaktion hinzu. Für unser Beispiel wählen wir „Load“ – also ist das Laden der Seite unser Trigger, der die Aktion Popup anzeigen auslöst.

Gehe in die Einstellungen der Sektion, Reiter Erweitert und öffne Interactions.
- Vergib einen Namen, z.B. „Popup anzeigen“
- Als Auslöser (Trigger) wählen wir hier Load; du kannst natürlich auch einen anderen für dich wählen
- Was der Trigger auslösen soll, bestimmen wir in „Effect Action“. Wir wollen das Element anzeigen lassen.
- Und als nächstes müssen wir noch sagen, was angezeigt werden soll. Hier wählen wir wieder unsere Sektion Popup.
- Damit das Popup nicht sofort nach dem Laden der Seite angezeigt wird, fügen wir hier noch eine Zeitverzögerung hinzu. Die Zeit kannst du wählen. Achte darauf, die richtige Zeiteinheit auszuwählen (voreingestellt sind ms, also Millisekunden), stelle das auf Sekunden um.
Popup in der Mitte des Bildschirms platzieren
Bisher wird unser Popup am Seitenende angezeigt; so soll es natürlich nicht bleiben. Wir müssen hier also noch Einstellungen in der Sektion vornehmen.
Gehe zum Reiter Advanced und nimm diese Einstellungen in „Position“ und „Visibility“ vor:


Anschließend sind es etwas wirr auf deinem Bildschirm aus. So ist es aber richtig eingestellt.

Das sind die Haken:
Es ist großartig, dass es mit Divi 5 nun eine Möglichkeit gibt, ohne weitere Plugins Popups zu erstellen. Ich will hier aber auch auch zwei Dinge eingehen, die nicht ganz optimal sind:
Chaos in der Bearbeitungsansicht
Wie du oben im letzten Screenshot siehst, wird sich dein Popup im Bearbeitungsmodus über deinen Content legen, was die Überarbeitung deiner Website erschwert. Du musst also bei Anpassungen vorübergehend die Einstellung Fixed in den Positions wieder auf Default stellen. Das ist kein großes Ding, soll aber dennoch erwähnt werden.
Popup erscheint immer wieder
Von anderen Plugins für Popups kennst du sicher die Einstellungsmöglichkeit, das Popup, nachdem es einmal angezeigt wurde, es z.B. für 7 Tage zu pausieren. Diese Einstellung hast du hier nicht. Das heißt, der Trigger wird immer wieder eine Aktion auslösen. Wenn also jemand auf deiner Seite in Ruhe stöbern möchte und dabei mehrfach die Triggerpunkte erreicht, wird er immer und immer wieder dein Popup sehen – und das nervt.
Und so kannst du es verhindern
Dafür setzt du selbst ein Cookie, sobald eine Interaktion ausgelöst wird. Dazu nimmst du noch zwei Einstellungen in der Sektion vor:
Einstellungen Erweitert „Conditions“:

und eine weitere Interaktion:

Weitere Tutorials zu Divi 5
Hier auf meinem Blog findest du weitere Tutorials zum Divi 5. Oder schau auch gerne auf meinem Youtube-Kanal vorbei.
- Zum Youtube-Kanal
- Meine Erfahrungen mit Divi 5 / Mit Bugs und Übersicht der neuen Features
0 Comments