Die ersten Popups wurden aus dem Szenario erstellt, das sich Ethan Zukerman für das vorgestellt hatteUnterkunft seiner Webseite auf Tripod in den frühen 90er Jahren. Seine Nutzer beschwerten sich über die Anzahl der Anzeigen, die er auf der Website platzierte, und so beschloss er, die Banner auf einer separaten Seite zu platzieren, die geöffnet wurde, wenn ein Nutzer auf die Seite zugriff.

Dieses kleine Stück Code war noch kein richtiges Popup, wie Sie es derzeit auf jeder Website sehen, aber hier fing alles an. Auf modernen Webseiten werden Popups für verschiedene Zwecke verwendet, nicht nur für Werbung. Kontaktformulare, Warnungen zu Datenschutzrichtlinien und Abonnementvorschläge werden häufig auch als Popups angezeigt.

Es gibt zwei Dinge, die Benutzer in Bezug auf Popups ärgern: Wenn sie auf Sie springen, wenn Sie sie nicht wollen; und wenn sich sein Aussehen vollständig vom Stil der Website unterscheidet. Diese beiden Probleme treten auf, wenn Sie Plugins verwenden, die anscheinend nicht von höchster Qualität sind.

Das größte Problem der meisten Plugins, für die unerfahrene Entwickler verwenden Pop-ups erstellen ist der Mangel an Kontrolle über die resultierende Nachricht. Sie könnten jedoch all diese Probleme vermeiden, wenn Sie Elementor dazu verwenden Erstelle eine Website.

Zwei großartige Plugins, die speziell für Elementor erstellt wurden Page Builder, helfen Ihnen, Popups jeder Art, Form und Stil zu erstellen, die Sie benötigen – Elementor Popup Builder et JetPopup. Da beide aus demselben Fleisch wie Elementor bestehen, ist die einzige Frage, die gestellt werden muss, welches dieser Plugins zu wählen ist. Um Ihnen bei dieser Entscheidung zu helfen, werde ich beide gründlich prüfen und Sie können ihre Vor- und Nachteile vergleichen. So lass uns gehen !

Download und Installation

Dies ist nicht das wichtigste Kriterium bei der Auswahl des zu verwendenden Plugins. Um es jedoch auszuprobieren, müssen Sie es zuerst herunterladen. Aus diesem Grund werde ich von vorne beginnen und den Prozess skizzieren, um ihn zu erhalten - die Preisgestaltung, den Aufwand und die Einfachheit des Einrichtungsprozesses.

Popup Builder

Elementor

Dieses Plugin wurde vom Elementor-Team erstellt. Wir könnten ihn daher sein echtes "Kind" nennen. Dies ist das letzte Update für Elementor, das im Januar 2019 veröffentlicht wurde, um die Kundenanforderungen zu erfüllen. Es ist jedoch nicht für Benutzer der kostenlosen Version von Elementor verfügbar.

Popup Builder ist im professionellen Abonnement enthalten. Um Popups erstellen zu können, müssen Sie zunächst über Elementor Pro verfügen. Der einfachste Preisplan, mit dem Sie alle Funktionen von Elementor für eine einzelne Website nutzen können, kostet 49 US-Dollar pro Jahr. Ab den ersten Schritten (Kauf von Elementor Pro) ist hier der Algorithmus, um Popup Builder zu erhalten:

  • Kaufen Sie Pro Elementor Page Builder.
  • Gehen Sie zu Ihrem persönlichen Konto und laden Sie das Plugin herunter.
  • Gehen Sie zu Ihrem Website-Dashboard, Plugins> Neu hinzufügen, klicken Sie auf die Schaltfläche "Plugin hochladen" und wählen Sie die entsprechende ZIP-Datei aus.
  • Wenn die Installation abgeschlossen ist, aktivieren Sie das Plugin mit Ihrem Lizenzschlüssel.
  • Hier ist der Popup-Generator auf der Registerkarte Vorlagen> Popups.

Es ist ein langer Weg, aber mit Popup Builder erhalten Sie auch eine riesige Sammlung verschiedener Elemente von Elementor, wie Widgets, Vorlagen und andere zusätzliche Tools.

Popup Builder

JetPopup

Die "Familie" der Jet-Plugins hat bereits mehr als 10-Artikel und JetPopup ist einer davon. Es wurde speziell für Elementor entwickelt und erweitert die Anzahl der verfügbaren Werkzeuge. Dieses Plugin ist tJetPopupsVoll kompatibel mit kostenlosen und kostenpflichtigen Versionen. Sie müssen also keine zusätzlichen Einkäufe tätigen. JetPopup kostet 15 US-Dollar und sobald Sie es erhalten haben, können Sie es für nur eine Website verwenden. Wenn Sie es für mehr als ein Projekt benötigen, können Sie das Plugin unter der Entwicklerlizenz erwerben (es kostet Sie 45 US-Dollar) und es für fünf Websites verwenden. Der Algorithmus zum Abrufen des Plugins ist etwas einfacher:

  • Kaufen Sie das Plugin auf dem TemplateMonster Marketplace. Es wird auf Ihren Computer heruntergeladen.
  • Gehen Sie zu Ihrem Website-Dashboard, Plugins> Neu hinzufügen, klicken Sie auf die Schaltfläche "Plugin hochladen" und wählen Sie die entsprechende ZIP-Datei aus.
  • Wenn die Installation abgeschlossen ist, aktivieren Sie das Plugin.
  • Voila! Wenn Sie das Elementor-Anpassungsmenü öffnen (durch Klicken auf die Schaltfläche "Mit Elementor bearbeiten"), finden Sie den Abschnitt JetPopup im linken Menü des Widgets.

JetPopup

Popup-Erstellung

Wenn die Tools verfügbar und bereit sind, kann ich versuchen, ein Popup mit beiden Plugins zu erstellen und zu sehen, wie einfach und verständlich die Funktion ist. Als Nächstes erstelle ich ein grundlegendes Popup und schaue mir die Anpassungsoptionen für Popup Builder und JetPopup an.

Popup Builder

In Pro Elementor werden Popups getrennt von den Websiteseiten erstellt. Um das Erscheinungsbild der Website zu ändern, öffnen Sie die Seite, die Sie anpassen möchten, klicken Sie auf die Schaltfläche „Mit Elementor bearbeiten“ und nehmen Sie Änderungen vor. Um Popups zu erstellen (und dann zu bearbeiten), müssen Sie zu Vorlagen> Popups gehen und auf die Schaltfläche „Neues Popup hinzufügen“ klicken.

Popup Builder
Probieren Sie Popup Builder jetzt aus

Im geöffneten Fenster müssen Sie die zu erstellende Vorlage auswählen (ja, Sie können Vorlagen nicht nur für Popups, sondern auch für Seiten und andere Elemente erstellen) und dieser einen Namen geben.

Popup-Erstellung

Nachdem Sie auf die Schaltfläche "Vorlage erstellen" geklickt haben, werden Sie zum Elementor-Personalisierungsmenü weitergeleitet. Es ist einfacher, ein vorhandenes Element anzupassen, indem es von Grund auf neu erstellt wird. Sie werden daher zunächst aufgefordert, ein geeignetes Modell auszuwählen.

Popups Bibliothek

Ich habe eines der Modelle ausgewählt, die oben in der Bibliotheksliste angezeigt werden. Gleich nach der Auswahl landen Sie auf dem Elementor-Arbeitsbereich, an den Sie wahrscheinlich gewöhnt sind. Personalisierungsoptionen werden in der Seitenleiste auf der linken Seite des Bildschirms platziert. Sie haben hier drei Registerkarten.

Auf der Registerkarte "Einstellungen" können Sie das Layout des Popups, den Namen des Modells und die Vorschau ändern. Auf der Registerkarte "Stil" können Sie das Design anpassen - Farben, Schriftarten, Bilder und Rahmen ändern. Die Registerkarte "Erweitert" enthält außerdem eine Reihe zusätzlicher Schieberegler. Sie verhindern beispielsweise, dass das Popup mit der ESC-Taste geschlossen wird.

Popup-Einstellungen

Wie Sie sehen können - nichts Unerwartetes, wenn Sie Elementor zuvor verwendet haben, werden Sie keine Probleme mit diesem Plugin haben. In diesem detaillierten Video wird erläutert, wie Sie mit Popup Builder ein Popup erstellen:

JetPopup

Dieses Plugin fügt Ihrem Dashboard von auch eine neue Registerkarte hinzu Wordpress-Theme und mit seiner Hilfe werden Popups auch getrennt von Seiten erstellt. Out-of-the-Box-Popups werden auch in einer Registerkarte namens „Popup-Bibliothek“ gespeichert. Um ein neues Popup zu erstellen, können Sie entweder auf der vorgefertigten Vorlage auf die Schaltfläche „Hinzufügen“ klicken oder zu JetPopup > Neues Popup hinzufügen gehen, der Vorlage einen Namen geben und auf „Mit Elementor bearbeiten“ klicken.

neues Popup hinzufügen

Das Arbeitsfeld weicht geringfügig von der Norm ab, da Sie jetzt ein kleineres Fenster erstellen. Im linken Menü können Sie einen beliebigen Elementtyp zu Ihrem Popup hinzufügen.

Popup-Elemente

Das JetPopup-Plugin fügt dem Widget-Menü ein einzelnes Element hinzu - die kontextbezogene Aktionsschaltfläche. Auf diese Weise können Sie die Art der Aktion definieren, die ausgeführt wird, wenn der Benutzer die Taste drückt.

Popup-Aktionsschaltfläche

Popup-Aktionsschaltfläche bearbeiten

Es ist nicht wirklich offensichtlich, die Einstellungen über das Popup-Fenster zu öffnen. Sie müssen auf die Wartungsschaltfläche unten im Menü klicken. Das Einstellungsmenü ist dem in Popup Builder ziemlich ähnlich, es gibt jedoch nur zwei Anpassungsregisterkarten. Mit „Allgemeine Einstellungen“ können Sie einen Animationseffekt definieren, das Modell umbenennen oder die Bedingungen definieren. Auf der Registerkarte „Stil“ können Sie Layouts, Farben, Bilder, Schriftarten und Rahmen ändern.

Popup allgemeine Einstellungen

JetPopup bietet eine etwas weniger offensichtliche Funktionalität, die jedoch durch detaillierte und nützliche Videoanleitungen kompensiert wird.

Auslöser

Um nützlich zu sein und Besucher nicht zu stören, müssen Popups zum richtigen Zeitpunkt angezeigt werden. Die Bedingungen, unter denen das Popup angezeigt wird, werden als "Trigger" bezeichnet. Je detaillierter die verfügbaren Bedingungen sind, desto flexibler ist das Popup-Plugin. Präzision ist sehr wichtig, wenn Sie nicht möchten, dass Ihr Benutzer die Site verlässt, nachdem das Popup-Fenster für das Abonnementformular angezeigt wird.

Popup Builder

Popup Builder bearbeiten

Popup veröffentlichen

Mit diesem Plugin können Sie die erforderlichen Bedingungen direkt nach dem Anpassen des Popup-Fensters definieren. Wenn Sie auf die Schaltfläche "Veröffentlichen" klicken, wird das Fenster angezeigt, in dem Sie Bedingungen (auf welchen Seiten dieses Popup angezeigt wird), Trigger (wenn das Popup-Fenster angezeigt wird) und erweiterte Regeln definieren können.

Popup Builder verfügt über sechs Auslöser, z. B. Anzeige bei einem Bildlauf und Klick, und sieben erweiterte Regeln, z. B. Anzeige nach einer festgelegten Anzahl von Sitzungen oder Anzeige auf bestimmten Geräten. Trigger und erweiterte Regeln verfügen über einfache Schieberegler, mit denen Sie schnell alle gewünschten Parameter einstellen können.

JetPopup

Popup-Einstellungen

Titelseite eines Popups

Alle Auslöser, Bedingungen und Eröffnungsereignisse sind in den Parametern zusammengefasst. Nachdem Sie auf die Schaltfläche Wartung geklickt haben, öffnen Sie die Einstellungsregisterkarten und können sofort Trigger festlegen. Sie können den Prozentsatz der Seite nach dem Scrollen, das anzuzeigende Kontextmenü oder die Anzahl der Sekunden festlegen, nach denen der Benutzer die Nachricht sehen wird.

Das Fenster kann nur einmal oder jedes Mal angezeigt werden, wenn der Benutzer bestimmte Aktionen ausführt (ich empfehle es nicht sehr - es macht Benutzer nicht glücklich). Sie können auch sehr genau auswählen, welche Beiträge oder Seiten dieses konkrete Popup angezeigt werden soll. Im Allgemeinen ist dieses Plugin sehr flexibel und ermöglicht es Ihnen, Popups mit großer Präzision anzuzeigen.

Positionierung

Benutzer werden Fenster, die direkt aus der Mitte des Bildschirms herausspringen, sicherlich nicht vermeiden können, aber sie lenken Besucher von der Website ab und können sehr ärgerlich sein. Nicht alle Popups sollten in der Mitte platziert werden. Ein schmales Band oben ist weniger auffällig, kann aber viel effektiver sein. Dies bedeutet, dass Sie die Position des Fensters steuern und sich auf dem Bildschirm bewegen können müssen.

Positionierung

Popup Builder et JetPopup Teilen Sie den Bildschirm in neun Sektoren ein und ermöglichen Sie es Ihnen, Ihr Popup in einem von ihnen zu platzieren. Die Positionierung wird entlang der Skalen von links nach rechts und von oben nach unten definiert. Es ist nicht sehr flexibel, aber es reicht für ein Popup.

Animationseffekte

Die Art und Weise, wie das Fenster auf der Seite verschoben (oder gerollt oder gesprungen) wird, ist sehr wichtig. Wenn sich das Fenster zu schnell oder zu langsam bewegt, ist es nicht wirksam. Bounces, Kitzeln und Zittern sollten ebenfalls mit großer Präzision verwendet werden. Animationseffekte machen die Site dynamischer, können aber auch den gesamten Eindruck beeinträchtigen.

Animationseffekte

Popup Builder Es gibt 36 Arten von Eingabeanimationen, darunter verschiedene Arten des Schiebens, Entfaltens, Zooms, Springens und Drehens in verschiedene Richtungen. All dies sowie die Dauer der Animation finden Sie im Abschnitt "Layout" der Registerkarte "Einstellungen".

Jet Popup-Einstellungen

Es gibt 13 Arten von Animationen im Plugin JetPopup, einschließlich Überblendungen, vertikales Spiegeln, verschiedene Folien, Prellen und Zoomen. Sie finden sie im Bereich "Einstellungen" der Registerkarte "Einstellungen".

Modelle

In einigen Fällen möchten Sie ein Popup mit einer bestimmten Struktur erstellen und wissen genau, wie es aussehen soll. Aber dies ist eine eher seltene Gelegenheit; Viel häufiger haben Sie keine Ahnung, welche Elemente Ihr Popup enthalten sollte. Hier kommen Vorlagen ins Spiel. Auch wenn Sie keines der vorkonfigurierten Beispiele verwenden, kann Ihnen deren Bearbeitung einen guten Überblick verschaffen. Und natürlich ist das Anpassen eines sofort einsatzbereiten Artikels viel schneller und einfacher als das Erstellen von Grund auf neu.

Elementor-Modellbibliothek

Popup Builder hat der Vorlagenbibliothek von Elementor eine Kategorie hinzugefügt. Wie ich Ihnen bereits sagte, können Sie es gleich zu Beginn des neuen Prozesses zum Erstellen eines Popups sehen. Das Sortiment an Popup-Vorlagen ist groß genug. Es gibt mehr als 100 Artikel. In der oberen linken Ecke können Sie mit einem Sortierwerkzeug nach Dropdown-Kategorien Ihre Suche beschleunigen. Die Kategorien sind verständlich und es dauert nicht lange, bis Sie das gewünschte Popup gefunden haben.

Jet Popups Presets-Bibliothek

JetPopup hat auch eine riesige Bibliothek von Vorlagen. Alle von ihnen werden auf der Registerkarte Kontextbibliothek gespeichert und verfügen über praktische Funktionen wie die Vorschau-Schaltfläche und den Nutzungszähler. Es gibt mehr Sortieroptionen. Die Liste kann so konfiguriert werden, dass ein bestimmter Modelltyp angezeigt wird, und dann in beliebiger Reihenfolge angeordnet werden. Zum Beispiel abhängig vom Erstellungsdatum. Ich kann Ihnen nicht genau sagen, wie viele Modelle verfügbar sind, aber es gibt definitiv über 100.

Vergleichstabelle

Elementor Popup Builder JetPopup
Preis 45 $ 15 $
Modelle 100+ 100+
Auslöser 6-Trigger, erweiterte 7-Regeln 5-Open-Events mit zusätzlichen Parametern
animatio 36 Typen 13 Typen
Tutorials Dokumentation Dokumentation, 9-Video-Tutorials

JetPopup vs Popup Builder

Zusammenfassung

Ich kann nicht sagen, welches dieser beiden Plugins das bessere ist. Es ist zu kompliziert, sie zu beurteilen. Jeder Fall und jede Person hat ihre eigenen Anforderungen an die Auswahl der Plugins. Ich denke, Sie sollten es selbst definieren - welches dieser beiden ist das Beste für Sie? Ich wünsche Ihnen viel Glück beim Hinzufügen eines fantastischen Popups zu Ihrer Website!