So fügen Sie kostenlos ein Popup in Elementor hinzu (kein Elementor Pro erforderlich)

Popups kann man in Elementor hinzufügen, ohne für Elementor Pro zu bezahlen Free Elementor wird nicht mit einem Popup-Builder ausgeliefert, aber Pro ist nicht die einzige Möglichkeit, einen zu bekommen Die kostenlose Master-Addons für Elementor Plugin enthält eine vollständige Popup-builder100+ fertige Vorlagen und fünf Triggertypen. Alles davon befindet sich im kostenlosen Plugin, ohne Testzeitgeber und ohne Wasserzeichen.

Sie benötigen zwei Dinge: kostenlosen Elementor, und das kostenlose Master Addons Plugin aus dem WordPress Verzeichnis Das Einrichten eines ersten Popups dauert etwa zehn Minuten Diese Anleitung behandelt das Erstellen eines, das Auswählen, wenn es feuert, und das Auswählen, welche Seiten es zeigen, zusammen mit den Fragen, die am häufigsten auftauchen: hat Elementor free einen Popup Builder, was die elementor/popup/show Ereignis tatsächlich tut, und wie man ein Popup von einem Button-Klick öffnet, ohne JavaScript zu schreiben.

Benötigen Sie Elementor Pro, um Popups zu erstellen?

Kurze Antwort: nein. Der Popup Builder von Elementor Pro ist eine kostenpflichtige Funktion, aber nicht die einzige Möglichkeit, Popups innerhalb von Elementor hinzuzufügen.

Folgendes gibt Ihnen eigentlich jede Option:

Wenn Popups also der einzige Grund waren, warum Sie sich Elementor Pro angesehen haben, können Sie auf dem kostenlosen Elementor bleiben, Master-Addons installieren und sie mit demselben Drag-and-Drop-Editor erstellen. Wenn Sie Pro bereits besitzen, laufen die beiden nebeneinander, ohne dass es zu Konflikten kommt.

Hier ist es wert, dass man das Wort “kostenlos” konkret nennt Der Popup Builder ist keine Testversion und keine abgespeckte Version eines kostenpflichtigen Moduls Master Addons verkauft zwar eine Pro-Version, aber Pro deckt andere Dinge ab: Extra-Widgets und den vollen Widget Builder Popups sitzen außerhalb davon.

Was ist Master Addons Popup Builder?

Master Addons ist ein All-in-One Elementor Plugin, das von 30.000+ aktiven Seiten verwendet wird Es wird mit 80+ Widgets ausgeliefert, einem ThemenbauerEine Vorlagenbibliothek, a Widget-builderund ein kostenloses Popup-builder. Der Popup Builder ist kein separater Kauf Installieren Sie das Plugin und es ist da.

Sie entwerfen Popups visuell im Elementor-Editor, steuern dann, wann sie erscheinen (Trigger) und wo sie erscheinen (Anzeigebedingungen) Kein Code, kein zusätzliches Plugin, keine Pro-Lizenz.

Warum Menschen den kostenlosen Master Addons Popup Builder auswählen

• Kostenloser Popup Builder im Plugin gebündelt Kein Upgrade erforderlich.
• Das gleiche Drag-and-Drop-Designerlebnis, das Sie bereits von Elementor kennen.
• 100+ vorgefertigte Popup-Vorlagen, die mit einem Klick importiert werden können.
• Fünf Triggertypen: Auf Klicken, Seitenladen, Beenden Absicht, Auf Scrollen, Nach Inaktivität.
• Anzeigebedingungen für jeden Beitrag, jede Seite, jede Kategorie oder jeden benutzerdefinierten Beitragstyp.
• Funktioniert auf kostenlosem Elementor, kostenlosem WordPress-Hosting und den neuesten Elementor-Versionen.

Welche Arten von Popups können Sie erstellen?

• Lead-Generierung und E-Mail-Opt-In-Popups
• WooCommerce-Werbeaktionen, Verkaufsbanner und Angebote zum Verlassen des Warenkorbs
• Video-Lightbox-Popups (YouTube, Vimeo, selbst gehostet)
• Bildergalerie Leuchtkästen
• Ankündigungsbalken und Top-Banner
• Anmelden und Anmeldeformular Popups
• Cookie-Einwilligung und DSGVO-Hinweise
• Feedback, NPS und Umfrage-Popups
• Modale Popups für Bedingungen, Preisdetails oder Produktinformationen

Die 5 Popup-Auslöser in Master-Addons

1. Auf Scroll Trigger

Das Popup feuert nach dem Besucher Scrollt einen festgelegten Prozentsatz der Seite. Gut, wenn ein Content Upgrade oder E-Mail Opt-In erscheinen soll, nachdem der Leser tatsächlich etwas gelesen hat, nicht beim Seitenladen, wenn er sich nicht entschieden hat, ob er bleibt.

2. Seitenladeauslöser

Das Popup Nach einer von Ihnen eingestellten Verzögerung erscheint, gemessen in Sekunden. Passt zu Willkommensnachrichten, zeitlich begrenzten Angeboten und allem, was jeder sehen sollte Beobachten Sie den Verzögerungswert Alles unter 2 Sekunden neigt dazu, Menschen auf langsamen Verbindungen zu ärgern.

3. Beenden Sie den Intent-Trigger

Das Popup erkennt, wenn sich der Cursor in Richtung Browser-Tab oder Schließen-Taste bewegt und feuert eine letzte Nachricht ab, Das ist es, was die Leute als “suchenElementor-Exit-Intent-Popup„und es ist im kostenlosen Master Addons-Plugin enthalten. Eine Einschränkung, bevor Sie eine Kampagne darum herum erstellen: „Exit-Intent ist ein Desktop-Verhalten. Ein Telefon hat keinen Cursor zum Verfolgen, also geben Sie mobilen Besuchern stattdessen einen Scroll- oder Inaktivitätsauslöser.“.

4. Auf Klicken Sie auf Auslösen

Das Popup öffnet sich nur, wenn ein Besucher auf eine bestimmte Schaltfläche, ein bestimmtes Bild oder einen bestimmten Link klickt. Es ist der einfachste Weg, eine zu erstellen Click-to-open-modal Ohne Code zu berühren, und es ist der kostenlose Ersatz für die elementor/popup/show JavaScript-Ereignis, das im nächsten Abschnitt behandelt wird.

5. Nach Inaktivitätsauslöser

Das Popup Ruft einen Besucher erneut ein, der für eine festgelegte Dauer aufgehört hat, zu scrollen oder den Cursor zu bewegen. Gut, um Aufmerksamkeit zu gewinnen, ohne auf die erste Ansicht zu schießen, was der schnellste Weg ist, einen Leser zu verlieren.

So verwenden Sie das Elementor-/Popup-/Show-Event (und die kostenlose Alternative)

Elementor Pro legt ein JavaScript-Ereignis namens offen elementor/popup/show. Entwickler verwenden es, um ein Popup aus Code auszulösen: Feuern Sie ein Popup nach einer benutzerdefinierten Formularübermittlung, einer AJAX-Antwort oder einer Schaltfläche, die außerhalb des Elementor-Editors liegt.

Das Grundmuster in Elementor Pro sieht folgendermaßen aus:

jQuery( document ).on( 'elementor/popup/show', ( event, id, instance ) => {
    // your code runs when popup with this ID is shown
    console.log( 'Popup opened:', id );
} );

// To open a popup programmatically in Elementor Pro:
elementorProFrontend.modules.popup.showPopup( { id: 1234 } );

Wenn Sie auf kostenlosem Elementor sind, haben Sie keinen Zugriff auf elementorProFrontend.modules.popup.showPopup. Auch für die meisten Anwendungsfälle braucht man es nicht Die Master Addons Auf Klicken Trigger greift die gängigen nativ:

• Klicken Sie auf eine Schaltfläche an einer beliebigen Stelle der Seite, Popup öffnet sich Stellen Sie den Trigger-Selektor auf eine CSS-Klasse oder ID und jedes passende Element öffnet das Popup.
• Klicken Sie auf ein Bild, Symbol oder Textlink, Popup öffnet sich Die gleiche Auswahllogik gilt für jedes Element.
• Öffnen Sie ein Popup nach einer Formularübermittlung Kombinieren Sie die Weiterleitungs - oder Dankesaktion des Formulars mit einem versteckten Button, der über den Popup-Selektor verfügt.

Der Selektoransatz geht aus der Straße, wenn die Entscheidung zur Laufzeit passiert, wie das Öffnen eines Popups nur, wenn ein AJAX-Aufruf mit einem bestimmten Wert zurückkommt. Lassen Sie Ihr Skript dazu auf ein verstecktes Element klicken, das die Triggerklasse trägt, und lassen Sie den Selektor den Rest erledigen.

Wenn Sie Popup-Show-Ereignisse aus Ihrem eigenen Code (Analyse, benutzerdefinierte Logik) anhören möchten, binden Sie sich an das globale Ereignis, das das Popup beim Öffnen auslöst Der genaue Ereignisname steht in der Master Addons Dokumentation Für die Version, die Sie ausführen.

So lösen Sie ein Elementorpopup auf einer Schaltfläche aus. Klicken Sie auf (kostenlos)

Eine der häufigsten Anfragen, daher hier die genaue Einrichtung:

1. Erstellen Sie das Popup in Master Addons, Popup Builder und entwerfen Sie es.
2. Schalten Sie in den Einstellungen des Popups den Trigger auf Auf Klicken.
3. Geben Sie einen CSS-Auswahler beispielsweise in das Triggerfeld ein .open-signup-popup.
4. Mit dem Button auf die Seite oder Vorlage gehen Bearbeiten Sie die Button-Widgets Fortgeschrittene, CSS-Kurse Feld und hinzufügen open-signup-popup (kein Punkt, nur der Klassenname).
5. Speichern Sie beide Jeder Button mit dieser Klasse öffnet jetzt das Popup, überall auf der Seite.

Derselbe Selektor funktioniert auf einer Zeile, einer Spalte, einer Überschrift, einem Symbol oder einem beliebigen Element, dem Sie eine Klasse geben können. So erhalten Sie ein Verhalten, das mit identisch ist elementor/popup/show Ohne eine Zeile JavaScript zu schreiben Eines zu beobachten: wenn Sie einen ID-Selektor wie #open-popupStellen Sie sicher, dass kein anderes Element auf der Seite die ID teilt, andernfalls wird vom falschen Element auf Feuer geklickt.

Kostenlose Elementor-Popup-Vorlagen: 100+ Designs, die bereit zum Import sind

Das Plugin wird mit einer Popup-Vorlagenbibliothek ausgeliefert, die Newsletter-Opt-Ins, Sale-Banner, WooCommerce-Promos, Exit-Intent-Angebote, Video-Lightboxen, Cookie-Hinweise und Anmeldeformulare abdeckt. Jede Vorlage importiert mit einem Klick und ist im Elementor vollständig bearbeitbar Wenn Sie lieber von einem Design ausgehen möchten, das Ihrem endgültigen Ziel nahe kommt, ist dies schneller, als von Grund auf neu zu bauen.

Die gesamte Bibliothek befindet sich im Herausgeber und ist Teil des breiteren Bereichs Master Addons Template Library Neben Seiten- und Abschnittsvorlagen.

Schritt für Schritt: So fügen Sie mithilfe von Master-Add-ons ein Popup in Elementor hinzu

Schritt 1: Master-Addons installieren und aktivieren

1. Öffnen Sie das WordPress-Dashboard, Plugins und Neues hinzufügen.
2. Suche nach “Master Addons for Elementor”.
3. Klicken Sie auf Jetzt installierenDann Aktivieren.
4. Ein neues Master Addons Element erscheint in der WordPress-Seitenleiste.

Wenn der Seitenleistenpunkt nicht gleich angezeigt wird, den Admin fest auffrischen (Strg+Umschalt+R / Cmd+Umschalt+R).Einige Caching-Plugins hängen eine Minute am alten Admin-Menü.

Schritt 2: Öffnen Sie den Popup Builder

1. Gehe zu Master Addons, Popup Builder.
2. Klicken Sie auf Neues Popup hinzufügen.
3. Geben Sie dem Popup einen beschreibenden Namen (z. B Newsletter, Blogbeiträge).
4. Klicken Sie auf Mit Elementor bearbeiten.

Schritt 3: Wählen Sie eine Vorlage aus oder beginnen Sie mit dem Scratch

1. Klicken Sie im Elementor-Editor auf das Symbol der Master-Addons-Vorlagenbibliothek.
2. Durchsuchen Sie die Popup-Kategorie und Vorschau-Designs.
3. Klicken Sie auf Einfügen Auf einer beliebigen Vorlage, um sie in die Leinwand zu importieren.
4. Oder überspringen Sie die Bibliothek und ziehen Sie Widgets auf eine leere Leinwand.

Schritt 4: Entwerfen Sie den Popup-Content

1. Ziehen Sie Elementor-Widgets ein: Überschrift, Texteditor, Schaltfläche, Bild, Formular.
2. Verwenden Sie zur E-Mail-Erfassung ein Formular-Widget und verbinden Sie es mit Ihrem E-Mail-Dienst.
3. Fügen Sie einen Countdown-Timer, ein Symbol oder ein Video mit den Kern-Elementor- oder Master-Addons-Widgets hinzu.
4. Passen Sie Schriftarten, Farben, Polsterungen und Abstände in den Registerkarten Stil und Erweitert an.
5. Vorschau auf Mobiltelefon und Tablet-Ansicht, um zu bestätigen, dass das Layout noch funktioniert.

Schritt 5: Konfigurieren Sie den Popup-Trigger

1. Klicken Sie auf das Zahnradsymbol unten links im Editor, um es zu öffnen Einstellungen.
2. Öffnen Sie die Auslösen Tab.
3. Wählen Sie einen der fünf Auslöser aus: Auf Klicken, Seitenladen, Beenden Sie die Absicht, Auf Scrollen, Nach Inaktivität.
4. Füllen Sie die auslösespezifischen Einstellungen aus: Scrollprozentsatz, Verzögerungssekunden, Klickselektor oder Inaktivitätsdauer.

Schritt 6: Anzeigebedingungen festlegen (wo das Popup angezeigt wird)

Anzeigebedingungen entscheiden, welche Seiten das Popup tatsächlich anzeigen Die meisten Popup-Probleme starten hier Ein Popup ohne Darstellungsregel erscheint überhaupt nicht, das ist also das erste, was überprüft, wann es im Editor gut aussieht, aber auf dem Frontend nichts angezeigt wird.

1. Öffnen Sie die Anzeigebedingungen Tab in Popup-Einstellungen.
2. Wählen Sie ein Einschließen Regel: Gesamte Website, bestimmte Seiten, bestimmte Beiträge, Kategorien, Tags oder ein benutzerdefinierter Beitragstyp.
3. Fügen Sie ein hinzu Ausschließen Regel für alles, was Sie überspringen möchten (z. B. die Checkout-Seite aus einem Sitewide-Popup ausschließen, sonst macht es Leute fertig, die bereits konvertiert sind).
4. Speichern Sie die Bedingungen vor der Veröffentlichung.

Um die Anzeigebedingungen später zu bearbeiten, öffnen Sie das Popup erneut, klicken Sie auf das Zahnradsymbol, gehen Sie zu Anzeigebedingungen, ändern Sie die Regeln und aktualisieren Sie Das Design und der Auslöser bleiben gleich. Nur das Targeting ändert sich.

Schritt 7: Veröffentlichen und Testen

1. Klicken Sie auf Veröffentlichen oder Aktualisieren Unten links im Editor.
2. Öffnen Sie die Seite, die das Popup in einem normalen Browserfenster anzeigen soll (nicht die Editorvorschau).
3. Lösen Sie das Popup so aus, wie Sie es konfiguriert haben: Klicken Sie auf die Schaltfläche, scrollen Sie, warten Sie oder bewegen Sie sich in Richtung der Registerkarte Schließen.
4. Überprüfen Sie das Reaktionsverhalten auf einem echten Telefon. Die Editorvorschau ist nah, aber nicht genau.
5. Überwachen Sie Formulareinreichungen und Konversionsraten für die erste Woche.

Warum ein Popup nicht auftaucht

Wenn das Popup im Editor funktioniert, aber nie auf der Seite erscheint, ist es fast immer eines dieser fünf, in grober Reihenfolge, wie oft es sich als Ursache herausstellt:

1. Es ist keine Anzeigebedingung eingestellt Ein Popup ohne Include-Regel stimmt mit keinen Seiten überein, sodass es niemals irgendwo rendert. Anzeigebedingungen öffnen und eine hinzufügen.
2. Das Popup ist immer noch ein Entwurf Das Speichern des Designs ist nicht dasselbe wie das Veröffentlichen Überprüfen Sie den Status unten links im Editor.
3. Ein Cache bedient die alte Seite Säubern Sie das Caching-Plugin und das CDN, dann testen Sie es erneut in einem privaten Fenster.
4. Der Klick-Auswahler stimmt nicht überein Bei Auf Klicken nimmt das Triggerfeld .my-class Mit dem Punkt, während das Feld CSS-Klassen der Schaltfläche nimmt my-class Ohne es. Die meisten Berichte, die wir sehen, werden durch die Vermischung dieser beiden ersetzt.
5. Sie testen Exit Intent auf einem Telefon Es gibt keinen Cursor, um den Viewport zu verlassen, also feuert nichts. Testen Sie diesen auf einem Desktop-Browser.

Master Addons vs. Elementor Pro Popup Builder

Master Addons ist nicht die einzige kostenlose Möglichkeit, dies zu tun Standalone Popup Plugins wie Popup Maker haben auch kostenlose Ebenen, und wenn Popups das einzige sind, was Sie brauchen, sind sie einen Blick wert Sie berichten ausführlicher über Conversions als jedes Elementor Addon Der Handel ist, dass Sie in ihrer Oberfläche statt in der von Elementor entwerfen, und Sie betreiben ein Plugin, das einen Job macht Master Addons macht mehr Sinn, wenn Sie das Popup mit dem gleichen Editor, Widgets und Stilen wie der Rest der Seite erstellen möchten.

Wiegen Sie auch andere Optionen? Vergleichen Sie die Top-Werkzeuge nebeneinander in unserer Zusammenfassung der Beste Popup-Builder-Plugins für WordPress.

Für wen dieses Setup am besten funktioniert

• Freelancer und Webentwickler, die Pro nicht nur für Popups kaufen wollen.
• Besitzer von WooCommerce-Filialen bieten Verkaufsbanner und Angebote zur Warenkorbwiederherstellung an.
• Blogger und Content-Ersteller erfassen E-Mail-Abonnenten.
• Agenturen, die viele Kundenstandorte mit knappen Budgets verwalten.
• Startups und kleine Unternehmen validieren Angebote, bevor sie Premium-Tools bezahlen.

Häufig gestellte Fragen