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

Free Elementor enthält keinen Popup-Builder. Der Popup Builder ist eine Elementor Pro-Funktion Um Popups zu erhalten, ohne für Pro zu bezahlen, installieren Sie das kostenlose Master Addons Popup Builder, entwerfen Sie das Popup im normalen Elementor-Editor, stellen Sie es so ein, dass es beim Laden der Seite geöffnet wird, und veröffentlichen. Dieser Pfad ist kostenlos, er funktioniert auf der kostenlosen Version von Elementor und dauert etwa fünf Minuten.

Dieser Leitfaden behandelt das Ganze, mit Screenshots, die auf Elementor 4.2.4 und Master Addons 3.2 aufgenommen wurden. Es deckt auch die Teile ab, die die meisten Tutorials überspringen: Welche Trigger sind tatsächlich kostenlos, wie man ein Popup von jeder Seite fernhält, wenn das Seiten-Targeting eine Pro-Funktion ist, und die JavaScript-API, die ersetzt elementorProFrontend.modules.popup.showPopup Wenn Sie kein Pro haben.

Verfügt Elementor free über einen Popup-Builder?

Nr. Elementors eigener Popup-Builder wird nur mit Elementor Pro ausgeliefert Installieren Sie kostenlosen Elementor und es gibt nirgendwo im Menü einen Popups-Element, und die elementor/popup/show Ereignis auf der Seite nicht vorhanden ist.

Sie haben drei Auswege:

Master Addons ist die hier behandelte Option, da das Popup in derselben Elementor-Leinwand erstellt ist, die Sie bereits verwenden, sodass es keinen zweiten Editor zum Lernen gibt. Es handelt sich um ein kostenloses Plugin auf WordPress.org, das auf ausgeführt wird 30.000+ Websites, und der Popup Builder kommt mit dem kostenlosen Download.

Wenn Sie lieber zuerst mehrere Tools vergleichen möchten, führen wir eine separate Zusammenfassung des Tools Beste Popup-Builder-Plugins für WordPress.

Was der kostenlose Popup-Builder Ihnen tatsächlich gibt

Die Aufteilung unten wurde im Plugin steuerlich überprüft, sodass Sie sehen können, wo die kostenlose Version stoppt, bevor Sie mit dem Erstellen beginnen.

Die kostenlose Version gibt Ihnen also ein echtes Popup mit echter Designkontrolle. Was es Ihnen nicht bietet, ist Trigger-Vielfalt und Targeting auf Seitenebene. Beide haben Workarounds und beide werden unten behandelt.

So fügen Sie Schritt für Schritt kostenlos ein Popup in Elementor hinzu

Schritt 1: Installieren Sie Elementor - und Master-Addons

Vom WordPress-Dashboard gehen Sie zu Plugins → Plugin hinzufügenSuchen nach ElementorInstallieren und aktivieren Dann suchen Sie nach Master-Addons für Elementor Und mach das auch Elementor Pro wird an keiner Stelle benötigt.

Der Get Elementor Pro Link in diesem Screenshot ist das Giveaway, dass dies der kostenlose Build ist Alles unten wurde auf genau diesem Setup gemacht Vollständige Installationsnotizen live in der Installationsdokumente.

Schritt 2: Master-Addons öffnen → Popup Builder

Durch die Aktivierung des Plugins wird ein Master Addons Element in die WordPress-Seitenleiste Öffnen und klicken Popup-builder.

Diese Liste ist nützlicher, als sie aussieht Jede Zeile zeigt den Anzeigezustand des Popups, egal ob aktiv oder inaktiv, und den Shortcode, mit dem Sie es auf einer einzigen Seite ablegen können Behalten Sie diese Shortcode-Spalte im Hinterkopf, sie löst das Problem des kostenlosen Page-Targetings später.

Schritt 3: Benennen Sie das Popup und schalten Sie die Aktivierung ein

Klicken Sie auf Neues Popup hinzufügen. Es öffnet sich ein kleiner Dialog mit zwei Feldern.

Geben Sie ihm einen Namen, den Sie in sechs Monaten wiedererkennen werden, und wenden Sie sich dann um Aktivierung Auf. Ein Popup, das inaktiv bleibt, rendert nie auf dem Frontend, selbst wenn Sie es veröffentlichen und selbst wenn Sie es per Shortcode platzieren Dies ist der häufigste Grund, warum ein fertiges Popup nichts anzeigt.

Schritt 4: Stellen Sie ein, wo das Popup angezeigt wird

Wechseln Sie zu den Bedingungen Tab im selben Dialog.

Auf der kostenlosen Version bekommt man eine Regel: Einschließen → Gesamte Seite. Die anderen Regeln (Vorderseite, Singular, Archiv, Suche, 404), der Typ Ausschließen und die Schaltfläche Bedingung hinzufügen sind Pro. Wenn Sie das Popup nur auf einer Seite wünschen und frei bleiben, springen Sie weiter zum Shortcode-methode.

Jetzt klicken Mit Elementor bearbeiten.

Schritt 5: Beginnen Sie mit einer Vorlage oder einer leeren Leinwand

Der Editor öffnet sich mit einem leeren Popup-Frame Im Drop-Bereich befindet sich neben Elementors eigenen Add-Buttons ein lila Master Addons Button, Klicken Sie darauf, um die Popup-Vorlagenbibliothek zu öffnen.

Da sind 25 Popup-Designs drin, alle auf dem kostenlosen Plugin verfügbar, die den Verkauf, Produkteinführungen, saisonale Angebote, demnächst und über Seiten abdecken Bewegen Sie eine Karte und klicken Sie Einfügen Um es zu importieren Alles importiert als normale Elementorelemente, sodass Sie den Text umschreiben und die Farben sofort austauschen können.

Über das Plugin läuft die gleiche Bibliotheksidee, wenn man fertige Seiten und Abschnitte auch haben möchte, ist das die Master Addons Vorlagenbibliothek.

Schritt 6: Entwerfen Sie das Popup

Bauen Sie lieber Ihr eigenes? ziehen Sie Widgets auf die Leinwand, so wie Sie es auf jeder Seite tun würden Überschrift, Texteditor und Schaltfläche decken ein typisches Opt-in ab.

Ein paar Dinge, die es sich hier zu tun lohnt:

• Halten Sie die Kopie auf einem Versprechen Eine Überschrift, eine Zeile Support-Text, eine Schaltfläche.
• Überprüfen Sie die Tablet - und Mobilansichten mit den Gerätesymbolen oben Ein 640 px Popup ist auf einem Laptop in Ordnung und auf einem Telefon eng.
• Fallen Sie zur E-Mail-Erfassung ein Formular-Widget von dem Formular-Plugin ein, das Sie bereits ausgeführt haben. Kontaktformular 7 und MC4WP funktionieren beide im Popup.
• Alle 80+ Master Addons Widgets Sind auch im Popup verfügbar, sodass Countdown-Timer und Preistabellen genauso funktionieren wie auf einer Seite.

Schritt 7: Wählen Sie den Auslöser

Klicken Sie auf MA Popup-Einstellungen In der oberen Werkzeugleiste Es ist das vierte Icon von links, das wie ein Dokument mit Zahnrad aussieht Ältere Tutorials zeigen auf ein Zahnrad in der unteren linken Ecke, wo es vor Elementor 4 gelebt hat.

Sieben Auslöser sind aufgeführt. Auf Seite laden Frei ist, und Verzögerung nach dem Laden der Seite (Sek.) Akzeptiert alles von 0 bis 60 in Schritten von 0,1. Zwei bis drei Sekunden sind ein sinnvoller Ausgangspunkt, das Abfeuern nervt sofort Menschen bei langsamen Verbindungen, und alles, was nach zehn Sekunden liegt, verfehlt den Besucher normalerweise völlig.

Darunter, die Wieder zeigen Verzögerung Steuert, wie lange man wartet, bevor man das Popup jemandem wieder zeigt, der es geschlossen hat Free gibt dir No Delay, 1, 3 und 5 Minuten Pro verlängert das auf Stunden, Tage, einen Monat, und Do Not Show Again.

Seitenbildlauf deaktivieren Frei ist und standardmäßig auf Ja steht, wodurch die Seite hinter dem Popup gesperrt wird.

Schritt 8: Legen Sie Layout, Position und Animation fest

Öffnen Sie die Layout Abschnitt im selben Panel Alles kostenlos.

Anzeige als Schaltet das Popup zwischen drei Formen:

• Popup Modal: die zentrierte Box, die die meisten Leute mit Popup meinen.
• Benachrichtigungsleiste: ein Streifen, der oben auf der Seite befestigt ist und gut für Ankündigungen und Versandangebote geeignet ist.
• Vollbild: übernimmt den Viewport, am besten für ein einziges starkes Angebot.

Modale Layouts erhalten dann neun Positionen, von Mitte Mitte nach unten rechts, und ungefähr 70 Eingangsanimationen Fade In bei 400 ms ist die sichere Voreinstellung Die Popup-Einstellungsreferenz Listet jedes Steuerelement auf, wenn Sie die vollständige Karte wünschen.

Schritt 9: Veröffentlichen und testen Sie es am Frontend

Treffer VeröffentlichenÖffnen Sie dann Ihre Website in einem privaten Fenster. Hier ist das Popup, das zwei Sekunden nach dem Laden der Seite auf dem kostenlosen Elementor ausgelöst wird, wobei nur das kostenlose Master Addons-Plugin aktiv ist.

Testen Sie in einem privaten Fenster und nicht in der Editorvorschau. Der Editor unterdrückt absichtlich Popups, und ein normaler Browser-Tab bedient Sie möglicherweise auf einer zwischengespeicherten Seite.

Zeigen Sie kostenlos ein Popup nur auf einer Seite an

Die Anzeigebedingungen auf Seitenebene sind Pro. Der Shortcode ist kostenlos und erreicht das gleiche Ergebnis aus der anderen Richtung.

Jedes Popup in der Popup Builder-Liste trägt einen Shortcode wie . Fügen Sie es in eine Seite, einen Beitrag, einen Widget-Bereich oder ein Shortcode-Widget in Elementor ein, und dieses Popup lädt allein auf diese Seite. Wenn Sie es auf diese Weise platzieren, werden die Anzeigebedingungen vollständig übersprungen.

Zwei Regeln, die man kennen sollte:

• Das Popup muss veröffentlicht werden und seine Aktivierung Toggle muss eingeschaltet sein Ein inaktives Popup rendert nichts, Shortcode hin oder her.
• Der Shortcode gibt kein sichtbares Markup aus, wo Sie ihn einfügen Das Popup wird in der Fußzeile gedruckt und öffnet sich entsprechend seinem Auslöser.

Ein kostenloses, seitenspezifisches Popup sieht also so aus: Lassen Sie die Bedingung auf der gesamten Website und legen Sie den Shortcode auf die eine Seite, die ihn haben sollte.

Die sieben Popup-Trigger, und welche Sie kostenlos erhalten

Exit Intent ist von Natur aus nur für den Desktop verfügbar Telefone haben keinen Cursor, um das Fenster zu verlassen, sodass der Auslöser nichts zu erkennen hat Testen Sie ihn in einem Desktop-Browser, bevor Sie einen Fehler ablegen.

Der kostenlose On Page Load-Trigger hat seine eigenen Setup-doc Wenn Sie die Kurzfassung wollen.

So lösen Sie ein Elementor-Popup auf einer Schaltfläche aus. Klicken Sie

Dies ist der am häufigsten angeforderte Auslöser nach dem Laden der Seite, und es ist der, der am häufigsten versucht, mit JavaScript zu fälschen Mit Master Addons Pro ist es ein Textfeld.

1. Entwerfen und speichern Sie das Popup wie gewohnt.
2. In MA Popup-Einstellungen(einstellen Popup öffnen zu Auf Klicken.
3. In Nach Auswahl öffnenGeben Sie beispielsweise den Selektor einschließlich des Punktes ein .open-newsletter-popup.
4. Bearbeiten Sie die Schaltfläche, die sie öffnen soll Gehen Sie zu Fortgeschrittene → CSS-Kurse und Typ open-newsletter-popupDiesmal Ohne Der Punkt.
5. Aktualisieren Sie beide und testen Sie dann am Frontend.

Die Punktfehlanpassung in Schritt 3 und 4 bewirkt die meisten der “mein Klick-Trigger macht nichts” - Berichte, die wir sehen Das Triggerfeld nimmt einen CSS-Selektor, das Elementorfeld einen Klassennamen.

Der Selektor ist nicht auf Schaltflächen beschränkt Jedes Element, dem Sie eine Klasse geben können, funktioniert: ein Container, eine Überschrift, ein Symbol, ein Bild Sie können auch einen vorhandenen Link mit einem Attributselektor wie z.B. anvisieren a[href="#pricing-popup"]. Es gibt eine verwandte Popup-Trigger-Widget Zum Platzieren von Nah- und Weiterleitungsaktionen im Popup selbst.

Ohne Pro machen vier Zeilen JavaScript die gleiche Arbeit Dieser Code befindet sich im nächsten Abschnitt.

Das Elementor-/Popup-/Show-Event und was es ohne Pro ersetzt

elementorProFrontend.modules.popup.showPopup und die elementor/popup/show Ereignis beide zu Elementor Pro gehören Das Popup-Modul registriert sich auf der elementorProFrontend Objekt, also auf einer freien Installation ist dieses Objekt undefiniert und das Ereignis feuert nie ab Kein Snippet bringt es zurück, denn der Code, der es aussenden würde, befindet sich im Pro-Plugin.

Das kostenlose Master Addons Plugin liefert eine eigene API, die den gleichen Bereich abdeckt.

Master Addons legt ein globales namens frei JltmaPopups Auf jeder Seite, auf der ein Popup vorhanden ist Hier ist das Mapping:

Jedes Popup wird mit der DOM-ID gedruckt jltma-popup-id-<post ID>. Die Post-ID ist die Nummer im Shortcode auf dem Popup Builder Listenbildschirm Um Popup 441 aus dem eigenen Code zu öffnen:

jQuery(function ($) {
  var $popup   = $('#jltma-popup-id-441');
  var settings = JltmaPopups.getLocalStorage(441);

  JltmaPopups.openPopup($popup, settings);
});

Um dies mit einem Klick zu verbinden, ist dies der kostenlose Einstand für den On Click-Trigger:

jQuery(function ($) {
  $(document).on('click', '.open-newsletter-popup', function (e) {
    e.preventDefault();

    var $popup   = $('#jltma-popup-id-441');
    var settings = JltmaPopups.getLocalStorage(441);

    JltmaPopups.openPopup($popup, settings);
  });
});

Und um es wieder zu schließen:

JltmaPopups.closePopup(jQuery('#jltma-popup-id-441'));

Drei Dinge, die man sich ansehen sollte:

• getLocalStorage() Retouren false Bis das Popup auf der Seite initialisiert wurde, was bei DOM-ready geschieht Führen Sie Ihren Code darin aus jQuery(function ($) { ... }) Und es geht dir gut.
• Das Popup muss auf der Seite sein, damit all dies funktioniert Entweder sein Zustand beinhaltet die Seite, oder du hast sie mit dem Shortcode platziert.
• Das Skript wird absichtlich im Elementor-Editor übersprungen, also testen Sie es am Frontend.

Warum elementor/popup/show-Feuer zweimal

Auf Elementor Pro bedeutet der zweimal laufende Handler fast immer, dass er zweimal gefesselt wurde: einmal elementor/frontend/init Und wieder in einem Snippet oder einer Theme-Datei, oder einmal pro Popup-Instanz, wenn mehrere vorhanden sind Bewahre es mit einem Flag, oder verbinde mit .off('elementor/popup/show').on(...) Vor dem Rebinding. Elementor's own Dokumentation von Popup-Events Listet die vollständige Veranstaltungssignatur auf.

Das Äquivalent Master Addons hat kein Dokumentereignis zum Doppelbinden, daher wird das Problem nicht übertragen Sie rufen an openPopup() Direkt im Moment willst du das Popup offen haben.

Warum Ihr Elementor-Popup nicht angezeigt wird

In grober Reihenfolge, wie oft sich herausstellt, dass jeder einzelne die Ursache ist:

1. Aktivierung ist aus. Master Addons → Popup Builder öffnen und die Spalte Status überprüfen Inaktiv bedeutet, dass nirgendwo etwas rendert, Shortcode enthalten.
2. Das Popup ist noch ein Entwurf. Das Speichern des Designs in Elementor ist nicht dasselbe wie das Veröffentlichen des Popups.
3. Sie testen in der Editorvorschau. Popups werden dort von der Konstruktion her unterdrückt Benutzen Sie ein privates Fenster.
4. Zwischenspeicher. Das Caching-Plugin und das CDN aufräumen, dann in einem privaten Fenster neu laden Eine zwischengespeicherte HTML-Seite enthält kein neu veröffentlichtes Popup.
5. Wieder zeigen Verzögerung bereits gefeuert. Sobald Sie das Popup schließen, speichert das Plugin einen Zeitstempel im Browserspeicher. Löschen Sie Site-Daten oder wechseln Sie den Browser, wenn Sie wiederholt testen.
6. Punktfehlanpassung an einem Klickwähler. Das Triggerfeld will .my-classDas Elementor-CSS-Klassenfeld möchte my-class.
7. Beenden Sie die Absicht, ein Telefon zu verlassen. Es gibt keinen Cursor, also feuert nichts. Desktop only.

Master Addons vs Elementor Pro Popups

Wenn Popups das einzige gewünschte Pro-Feature sind, deckt der kostenlose Master Addons Builder plus ein Shortcode ab, wenn Sie Exit Intent oder Click Trigger ohne JavaScript schreiben wollen, vergleichen Sie die Master Addons Preisgestaltung Gegen eine Elementor Pro-Verlängerung, da die Master Addons-Lizenz auch die bringt Themenbauer und Widget-builder Mit ihm.

Häufig gestellte Fragen

Verwandte Lektüre

• Master Addons Popup Builder, die Feature-Seite mit jeder aufgeführten Einstellung
• Beste Popup-Builder-Plugins für WordPress, wenn Sie Werkzeuge vergleichen möchten
• Popup-Einstellungen und OptionenDie vollständige Kontrollreferenz
• Master-Addons auf WordPress.orgForum herunterladen und unterstützen