Das musst du über Popups in Elementor wissen.
in ,

Das musst du über Popups in Elementor wissen.

Werbung, dieser Werbebanner enthält einen Affiliate oder Google-Link. Vielen Dank für deine Unterstützung.

Alles zu Triggern, Bedingungen und Erweiterte Regeln für die Popup Funktion in Elementor. In diesem Beitrag möchte ich dir diese Funktion näher bringen und dir zeigen wozu du ein Popup nutzen kannst.

Was ist ein Popup überhaupt?

Popups sind die kleinen Fenster die eine aktuelle Seite überlagern, meist erscheinen diese dann sobald ein Nutzer die Absicht hat, die Webseite zu verlassen, der sogenannte “On-Exit-Page-Intent”. Für Seitenbetreiber ist ein Popup ein gängiges und beliebtes Mittel, Nutzer nach ihrer Mail-Adresse zufragen, oft auch in Verbindung mit einem sogenannten “Freebie”. Dein Webseitenbesucher kann das schon wieder ganz anders sehen, oft werden Popups zu häufig eingesetzt oder stören gar den Lesefluss. Achte also darauf, das du Popups gezielt einsetzt.

Popup Beispiel

Popup mit Elementor erstellen

Navigiere in deinem WordPress-Backend zu “Templates” > “Popups” > “Neu Hinzufügen”.

Elementor Popup hinzufügen

Vergebe einen Namen für dein Popup, der Name dient nur interne Zwecke. Klicke anschließend auf die Schaltfläche “Template erstellen”.

Popup Bedingungen

Die Popup Bedingungen verhalten sich genauso wie du es vom Theme Builder z. B. deinem Header gewohnt bist. In meinem Beitrag: Elementor Bedingungen – Conditions erfährst du mehr über Bedingungen.

Popup Bedingungen (Conditions) Anzeigen und hinzufügen.

Klicke auf die Schaltfläche “Bedingungen hinzufügen” um eine oder mehrere Bedingungen für dein Popup hinzuzufügen.

Elementor Popup Bedingungen

Popup Triggers

Mit Trigger oder Auslösern kannst du ein bestimmtes verhalten deines Popups steuern und beeinflussen. Ein Trigger kann beispielsweise der beliebte “On Page Exit Intent” sein.

Werbung, dieser Werbebanner enthält einen Affiliate oder Google-Link. Vielen Dank für deine Unterstützung.
Elementor Popup Trigger
Trigger – AuslöserBeschreibung
On Page LoadÖffnet den Popup, sobald die Seite (oder je nach Bedingung nur eine bestimmte) geladen ist. Du kannst eine Verzögerung des Auslösers in Sekunden einstellen.
On ScrollSobald dein Besucher anfängt zu scrollen, löst dieser Trigger aus. Du kannst dabei die Richtung (nach oben oder nach unten) bestimmen, in der dein Besucher scrollen muss. Zudem kannst du die ungefähre Seitenlänge in % angeben, die mindestens gescrollt werden muss.
On Scroll To ElementLässt das Popup erscheinen, sobald der Benutzer auf ein bestimmtes Element gescrollt hat. Das Element lässt sich mit einem einfachen Selektor ansprechen.
On ClickÖffnet das Popup nach einer bestimmten Anzahl an Mausklicks.
After InactivityÖffnet das Popup nach einer bestimmten Zeit in Sekunden ohne Benutzeraktivität.
On Page Exit IntentSobald der Benutzer versucht, die Seite zu verlassen, meist geschieht das, wenn der Mauszeiger Richtung der Browser-Tabs navigiert wird, öffnet sich das Popup. Diese Methode stellt die beliebteste dar, um ein Popup anzuzeigen.

Popup Erweitere Regeln

Mit den erweiterten Regeln hast du die Möglichkeit beispielsweise dein Popup für Angemeldete Benutzer nicht anzuzeigen oder für bestimmte Endgeräte auszublenden.

Erweiterte RegelBeschreibung
Show after X page viewsDer Benutzer muss erst eine gewisse Anzahl an Unterseiten besucht haben, bevor ihm der Popup angezeigt wird.
Show after X sessionsWird erst nach einer gewissen Anzahl an Sitzungen des Nutzers angezeigt. Eine Sitzung ist dann zu ende, sobald der Benutzer die Seite geschlossen hat.
Show up to X timesLässt das Popup nach einer gewissen Anzahl an Schaltungen nicht mehr anzeigen.
When arriving from specific URLMit dieser Funktion kannst du eine Quell-URL angeben von der ein Nutzer kommen muss um ein Popup angezeigt oder nicht angezeigt zu bekommen.
Show when arriving fromLässt das Popup anzeigen, sobald der Benutzer von einer bestimmten Quelle kommt, wie beispielsweise von einer Suchmaschine wie google.de
Hide for logged in usersZeigt das Popup angemeldeten Benutzer nicht an, dabei kannst du wählen ob für alle oder nur für bestimmte Nutzer.
Show on devicesMit dieser Funktion lässt sich sich das Popup auf bestimmte Endgeräte beschränken. Zum beispiel, das es nur auf Desktop-Geräten angezeigt wird.

Popup manuell öffnen

Für einige Anwendungssituationen ist es sinnvoll wenn ein Popup manuell nach einem “klick” auf ein Element öffnet. So kannst du den Fokus auf eine bestimmte Aktion lenken. Dynamische Links können die Popup-Aktion verwenden, um ein Popup zu öffnen oder zu schließen. Das Formular kann die Option Aktionen nach dem Senden verwenden, um ein Popup zu öffnen oder zu schließen. Jedes Element kann einen eindeutigen Selektor (Klasse, ID oder Datenelement) verwenden, um manuell ein Popup auszulösen, wenn auf dieses Element geklickt wird.

Popup über einen Dynamischen-Link öffnen

Jedes Widget das “Links” beinhaltet, kann über ein dynamischen Link auch ein Popup öffnen. Voraussetzung hierfür ist natürlich das du zuvor ein Popup erstellt hast.

Elementor Dynamischer Link BeispielJedes Widgets welches “Links” unterstützt kann auch Dynamische Inhalte beinhalten. Klicken Sie auf dieses Symbol in der “Link-leiste” um eine Auswahl an Inhalten zu erhalten. Wähle in der Liste unter “Actions” > “Popup” aus. Klicke anschließend auf dieses Symbol um dein zuvor erstelltes Popup auszuwählen.

Popup – Formular Aktion

Eine weitere Möglichkeit ein Popup zu öffnen ist es, eine Aktion nach dem Senden eines Formulars. Hierbei wird automatisch nach dem Senden ein Popup generiert. Wähle dazu in deinem Elementor-Formular “Aktion nach dem Versenden” > “Füge Aktionen hinzu” > “Popup” > “Popup öffnen” oder “Popup schließen”.

Popup über einen benutzerdefinierten Selektor

Nahe zu jedes Widget in Elementor kann ein individuellen Selektor erhalten. Bearbeite dein Element und klicke den Tab “Erweitert” an. Unter “CSS-Klassen” oder “CSS-ID” kannst du einen Selektor-Namen eintragen. Bitte beachte, dass du einen einzigartigen Namen vergeben musst, zum Beispiel “mein-popup-selektor”. Wechsle danach zu deinem Popup und füge die Seite mit deinem Selektor-Element unter Bedingungen deines Popups hinzu. Das Popup wird sich nun öffnen, sobald ein Nutzer auf das entsprechende Element klickt. Diese Funktion ist nützlich, um ein Popup über ein Menü-Element eines Themes, den Inhalt eines Texteditor-Widget, über ein Nicht-Elementor-Element oder -Skript zu öffnen.

Fazit

Es gibt verschiedene Wege ein Popup einzubinden. Wichtig ist dabei, dass du deinen Seitenbesucher nicht überforderst, den dann wird er wahrscheinlich deine Webseite verlassen und nicht wieder kommen. Du kannst mir ja gerne mal deine Meinung zu Popups in den Kommentaren schreiben.

Werbung, dieser Werbebanner enthält einen Affiliate oder Google-Link. Vielen Dank für deine Unterstützung.

Was denkst du über diesen Beitrag?

135 Points
Upvote Downvote

Written by wp-pagebuilder-info

Mit einem Faible für Grafikdesign und Webseiten begann ich meine Karriere in einer Werbeagentur für Großformatdrucke. Webgestaltung und Webseiten ließen mich aber nie ganz los, sodass ich nebenbei noch einige Webprojekte und Blogs betreibe. Vor einigen Jahren noch mit Joomla, bin ich nun gänzlich auf WordPress umgestiegen und bedaure diesen Schritt bis heute nicht. Mit dem Page-Builder Elementor habe ich dabei recht früh begonnen zuarbeiten und war von Anfang an begeistert wie dieser mit WordPress harmoniert. So war es nur eine Frage der Zeit bis ich ein Webprojekt, das sich auf diesen Page-Builder konzentriert gestartet habe. Mit diesem Blog möchte ich nun mein gesammeltes Wissen zu WordPress und Elementor weitergeben und hoffe, das du von dieser Erfahrung für deine Projekte profitieren kannst.

2 Kommentare

Antwort hinterlassen
  1. Hallo und vielen Dank für deinen top Beitrag. Ich habe mal eine Frage zur Popup-Funktion. Gibt es die Möglichkeit, ein Popup mit einem Button zu schließen und gleichzeitig eine externe URL aufzurufen? Bisher habe ich keine Lösung gefunden. Vielleicht hast du ja eine Idee. Danke und Grüße

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Elementor Handbuch Ebook Taschenbuch

Elementor Handbuch: E-Book Digistore24

Elementor Schritt für Schritt Anleitung

Elementor Schritt für Schritt: E-Book & Taschenbuch