Popup-Formulare können wichtige Marketinginstrumente sein, mit denen du E-Mail-Adressen erfassen, Verkäufe fördern und vieles mehr machen kannst. Allerdings ist es nicht immer ganz einfach, attraktive und individuelle Popups in WordPress zu erstellen.
Zum Glück kannst du mit dem Elementor Page Builder Plugin ganz einfach Popups für deine Webseite erstellen und anpassen. Du kannst sie an das Design deiner Webseite anpassen und Auslöser hinzufügen, die auf dem Nutzerverhalten oder dem Ursprung der Seite basieren.
In diesem Leitfaden geben wir dir einen Überblick über die verschiedenen Arten von Elementor-Popups und erklären, warum du sie verwenden solltest. Dann erklären wir dir, wie du diese Popups mit den kostenlosen und den Pro-Elementor-Tools erstellen kannst. Los geht’s!
Ein Überblick über Elementor Popups
Elementor ist eines der beliebtesten Seitenerstellungs-Plugins für WordPress-Webseiten. Es ermöglicht es dir, Elemente per Drag & Drop zu platzieren, um schöne und benutzerfreundliche Seiten zu gestalten:
Außerdem kannst du mit Elementor eine Vielzahl von Popups erstellen. Das sind benutzerdefinierte Formulare, die nach einer bestimmten Zeit oder nachdem ein Nutzer eine bestimmte Aktion ausgeführt hat, auf deiner Seite erscheinen.
Popups können aus verschiedenen Gründen ein wichtiges Instrument sein. Du kannst sie nutzen, um Leads zu sammeln und deine E-Mail-Marketingliste zu erweitern. Elementor-Popups lassen sich in E-Mail-Marketing-Software integrieren und senden Kundenadressen direkt an die Plattform deiner Wahl.
Du kannst sie sogar nutzen, um Verkäufe, Rabatte und Veranstaltungen in deinem E-Commerce-Shop zu bewerben. So können Popups ein wesentlicher Bestandteil deiner Marketingstrategie sein.
Außerdem können Popups dir helfen, mit deinen Kunden in Kontakt zu treten. Du kannst Umfragen einbinden, um Kundenfeedback einzuholen und deine Produkte und Dienstleistungen zu verbessern.
Popups können sich jedoch billig und aufdringlich anfühlen, wenn du sie nicht gut gestaltest und die richtigen Auslöser für dein Publikum wählst. Deshalb musst du sicherstellen, dass du sie effektiv einsetzt. Hier kommt Elementor ins Spiel.
Arten von Elementor Popups
Elementor kommt mit mehr als 100 Popup-Vorlagen, die du an deine Bedürfnisse anpassen kannst. Zu diesen Designs gehören:
- Lead Capture Formulare
- E-Mail-Anmelde-Popups
- Werbe-Popups
- Anmelde- und Willkommensformulare
- Popups mit eingeschränktem Inhalt
- Upsell- und Cross-Sell-Formulare
Diese Popup-Vorlagen sind in Elementor-Kits integriert, die verschiedene Designfunktionen für unterschiedliche Arten von Webseiten enthalten:
Außerdem kannst du aus verschiedenen Popup-Placements und visuellen Designs wählen, darunter:
- Modal
- Slide-in
- Fullscreen
- Obere oder untere Leiste
Schließlich kannst du den Elementor-Editor nutzen, um jede Popup-Vorlage schnell an deine Bedürfnisse anzupassen. Wir erklären dir jetzt, wie du das mit der kostenlosen Version und mit Elementor Pro machen kannst.
So erstellst du ein Popup mit Elementor (kostenlos)
Früher hatte das Essential Addons for Elementor Plugin eine Modal Popup-Funktion, mit der du ein kostenloses Popup-Formular erstellen konntest. Diese Funktion war eine der beliebtesten Möglichkeiten, um die Kosten für Elementor Pro zu umgehen. Du kannst viele Tutorial-Videos von vor ein paar Jahren finden, die dir zeigen, wie du diese Methode nutzen kannst.
Die kostenlose Modal Popup-Funktion hat sich jedoch in ein Premium Lightbox- und Modal-Element verwandelt. Es kann nicht mehr kostenlos genutzt werden. Deshalb musst du auf Elementor Pro upgraden oder für eines der Premium-Plugins von Elementor bezahlen, die wir später in diesem Beitrag vorstellen.
So erstellst du ein Popup mit Elementor Pro (in 5 einfachen Schritten)
Elementor Pro verfügt über eine eingebaute Popup-Funktion, die wir in diesem Tutorial verwenden werden. Zuerst musst du Elementor Pro kaufen und aktivieren. Dann kannst du in deinem WordPress-Dashboard mit der Erstellung von Popups beginnen.
Schritt 1: Erstelle dein Popup
Beginne damit, dass du in deinem WordPress-Dashboard zu Elementor > Templates > Popups navigierst. Klicke dann auf NEUES POPUP ERSTELLEN, um ein neues zu erstellen:
Du wirst dann aufgefordert, deine Vorlage zu benennen. Wenn du dich für einen Namen entschieden hast, wähle TEMPLATE ERSTELLEN:
Dadurch wird der Elementor Page Builder gestartet. Du kannst nun aus den vorhandenen Popup-Vorlagen wählen oder deine eigene Vorlage erstellen. In unserem Beispiel haben wir eine der vorhandenen Vorlagen zum Bearbeiten ausgewählt:
Du kannst jetzt mit den Designeinstellungen spielen, um dein Popup anzupassen. Du kannst zum Beispiel das Layout, die Ausrichtung, die Hintergrundbilder und die Farben ändern.
Schritt 2: Wähle deine Anzeigebedingungen
Wenn du mit deinem Design zufrieden bist, klicke auf den nach oben zeigenden Pfeil neben VERÖFFENTLICHEN. Wähle dann im erscheinenden Menü die Anzeigebedingungen aus:
Klicke als Nächstes auf BEDINGUNG HINZUFÜGEN , um auszuwählen, wo dein Elementor-Popup auf deiner Webseite angezeigt werden soll. Du kannst dann einen Ort aus den folgenden Optionen auswählen: Gesamte Webseite, Archiv, Einzelnes oder WooCommerce:
Wenn du mit deiner Wahl zufrieden bist, klicke auf WEITER. Du gelangst nun zu den Auslösern für dein Popup-Formular.
Schritt 3: Richte deine Popup-Auslöser ein
Auf der Seite Auslöser kannst du festlegen, was die Nutzer tun müssen, um dein Elementor-Popup zu sehen. Standardmäßig ist jede Option deaktiviert. Du kannst sie aktivieren, indem du auf den Schieberegler klickst. Dann musst du Werte für deinen Trigger festlegen.
Wenn du dich zum Beispiel für On Page Load (Beim Laden der Seite) entscheidest, musst du angeben, innerhalb wie vieler Sekunden dein Popup angezeigt werden soll:
Mit On Scroll kannst du wählen, in welche Richtung der Nutzer scrollen muss und wie viel der Seite er abdecken muss, bevor das Popup erscheint:
Für die Einstellung On Scroll To Element musst du eine CSS-ID eingeben. Wenn ein Nutzer dieses Element auf deiner Seite erreicht, wird das Popup angezeigt:
Bei On Click musst du festlegen, wie oft ein Nutzer auf deiner Webseite klicken muss, bevor das Popup angezeigt wird:
Die Einstellung Nach Inaktivität ermöglicht es dir, dein Popup auszulösen, nachdem der/die Nutzer/in eine bestimmte Zeit lang nicht auf deiner Seite war:
Schließlich kannst du noch die Option On Page Exit Intent aktivieren. Mit dieser Einstellung wird dein Popup ausgelöst, wenn ein/e Nutzer/in versucht, deine Seite zu verlassen:
Wenn du fertig bist, klicke auf SPEICHERN & SCHLIESSEN oder WEITER, um zu den erweiterten Regeln zu gelangen. Wir werden uns diese Regeln etwas später in diesem Tutorial ansehen.
Schritt 4: Füge einen Popup-Button zu deiner Seite hinzu (optional)
Vielleicht möchtest du dein Elementor-Popup auslösen, wenn ein Nutzer auf ein bestimmtes Element auf deiner Seite klickt. Du könntest zum Beispiel einen Button mit der Aufschrift „Jetzt anmelden“ entwerfen und ihn in deine Fußzeile einbetten. Wenn ein Nutzer auf die Schaltfläche klickt, wird er dein E-Mail-Anmeldeformular auf seinem Bildschirm sehen.
Zuerst musst du einen Elementor-Button auf deiner Webseite erstellen. Öffne den Beitrag oder die Seite im Elementor-Editor und wähle den Button aus dem Menü. Ziehe ihn per Drag & Drop auf deine Seite:
Wenn du den Text der Schaltfläche festgelegt und ihr Aussehen angepasst hast, klicke auf Link > Dynamische Tags. Wähle dann Aktionen > Popup aus dem Dropdown-Menü:
Klicke auf Popup und wähle Popup öffnen aus dem Dropdown-Menü Aktion . Du kannst auch dein Formular aus dem Popup-Menü auswählen:
Wähle schließlich UPDATE, um deinen Button zu veröffentlichen. Wenn ein Nutzer darauf klickt, wird er zu deinem Anmeldeformular weitergeleitet.
Schritt 5: Speichere deine Popup-Vorlagen für später
Du kannst deine Popups auch als Vorlagen speichern. Öffne dein Popup mit dem Elementor-Editor und klicke auf den Pfeil nach oben neben UPDATE. Wähle im Menü Als Vorlage speichern aus:
Du wirst dann aufgefordert, deine Vorlage zu benennen. Wenn du damit fertig bist, klicke auf SPEICHERN:
Die Popup-Vorlage wird in deiner Vorlagenbibliothek gespeichert. Du kannst es jetzt verwenden, wenn du eine Seite oder einen Beitrag mit Vorlagen erstellst.
So konfigurierst du erweiterte Elementor Popup-Einstellungen
Wir haben bereits beschrieben, wie du ein einfaches Elementor-Popup erstellst. Es gibt jedoch auch einige erweiterte Einstellungen, die du vielleicht verwenden möchtest.
Öffne dein Popup erneut mit dem Elementor-Editor und navigiere zu den Anzeigeregeln. Schauen wir uns die verschiedenen Einstellungen an.
Popup-Anzeigeeinstellungen
Mit einigen erweiterten Popup-Anzeigeeinstellungen kannst du steuern, wann die Nutzer dein Formular sehen. Diese Konfigurationen können nützlich sein, um wiederkehrende Besucher anzusprechen und nicht die, die zum ersten Mal kommen.
Du kannst zum Beispiel festlegen, dass dein Popup erst dann angezeigt wird, wenn dein Besucher deine Seite eine bestimmte Anzahl von Malen besucht hat:
Alternativ kannst du auch Nach X Sitzungen anzeigen wählen. Diese Einstellung zielt auf die Gesamtbesuche und nicht auf bestimmte Seiten ab:
Mit der Einstellung Bis zu X-mal anzeigen kannst du festlegen, wie oft die Nutzer dein Popup sehen. Du solltest diese Einstellung aktivieren, wenn du deine Besucher nicht ständig mit aufdringlichen Formularen überhäufen willst:
Du kannst auch die Einstellungen Auf Geräten anzeigen und Auf Browsern anzeigen verwenden, um einzuschränken, wo dein Popup erscheinen soll. Popups können auf mobilen Geräten besonders aufdringlich sein, deshalb solltest du sie dort deaktivieren:
Ein besseres mobiles Nutzererlebnis kann deine Besucher zufrieden stellen. Außerdem kann es deine Bemühungen zur Suchmaschinenoptimierung (SEO) unterstützen und dazu beitragen, dass deine Webseite in den Suchergebnissen besser platziert wird.
Einstellungen zur Benutzerherkunft
Schließlich kannst du mit Elementor die Einstellungen für die Anzeige von Popups konfigurieren, je nachdem, woher deine Nutzer kommen. Diese Einstellungen können nützlich sein, wenn du Besucher auf eine Aktionsseite leitest und dein Popup dann für die Werbung von Angeboten oder die Abfrage von Kontaktdaten nutzt.
Mit den folgenden Einstellungen kannst du URLs angeben und auswählen, welche Links die Popups auslösen sollen:
Schließlich kannst du festlegen, dass Popups vor angemeldeten Nutzern verborgen werden. Diese Einstellung kannst du nutzen, wenn du eine Webseite mit kostenpflichtiger Mitgliedschaft betreibst:
Wenn du mit all deinen Einstellungen zufrieden bist, klicke auf SPEICHERN & SCHLIESSEN. Du kannst hierher zurückkehren und die Einstellungen bei Bedarf ändern.
Die 3 besten Plugins für Elementor Popups
Wie wir gesehen haben, ist es mit Elementor Pro ganz einfach, Popups für deine Webseite zu erstellen. Vielleicht bist du aber noch nicht bereit für ein Upgrade auf den Premium Page Builder. Oder du bist auf der Suche nach zusätzlichen Designfunktionen.
Hier sind ein paar der besten Plugins für Elementor Popups, die diese Aspekte berücksichtigen.
1. JetPopUp (Crocoblock)
JetPopUp ist ein benutzerfreundliches Plugin mit einer Drag-and-Drop-Oberfläche, das sich perfekt in Elementor integriert. Es ermöglicht dir, dynamische und individuelle Popup-Formulare zu erstellen, z. B. E-Mail-Anmeldungen, Cookie-Zustimmungsformulare und Countdowns.
JetPopUp glänzt mit seinen interaktiven Funktionen. Du kannst zwischen verschiedenen Animationseinstellungen wählen, z. B. Schieben, Kippen und Drehen. Außerdem verfügt das Plugin über verschiedene Vorlagen, die du an deine Bedürfnisse anpassen kannst.
Mit diesem Plugin kannst du auch verschiedene Anzeigeeinstellungen auswählen und anpassen. Du kannst deine JetPopUp-Formulare zum Beispiel zu bestimmten Zeitpunkten anzeigen lassen, wenn sie versuchen, deine Webseite zu verlassen, oder nach einer bestimmten Anzahl von Scrollvorgängen.
Funktionen:
- Wähle aus voreingestellten Popup-Vorlagen
- Wähle verschiedene Popup-Anzeigebedingungen
- Bestimmte Bedingungen ein- und ausschließen
- Animationseffekte verwenden
Preise: JetPopUp kostet $22 pro Jahr. Dieses Paket beinhaltet die MailChimp-Integration, ein Popup-Widget und den Kundensupport. Du kannst auch auf ein All-inclusive-Abonnement für 130 $ pro Jahr upgraden. Es enthält 20 zusätzliche Plugins und 150 zusätzliche Widgets.
2. Popup Box Widget (PowerPack)
Wenn du auf der Suche nach fortgeschrittenen Popup-Einstellungen für Elementor bist, solltest du das Popup Box Widget von PowerPack verwenden. Damit kannst du benutzerdefinierte Popups erstellen, die dynamische Elemente wie Videos, Bilder und Google Maps enthalten.
Mit diesem Plugin kannst du Popups in Abhängigkeit von verschiedenen Nutzeraktionen auslösen, z. B. der Absicht, die Seite zu verlassen, und benutzerdefinierten Zeitverzögerungen. Du kannst auch interaktive zweistufige Popups mit Links und anderen Call-to-Action-Elementen (CTA) erstellen.
Außerdem verfügt das Popup Box Widget über erweiterte Animationseinstellungen. Du kannst deine Popups zoomen lassen, Zeitungsformatierungen verwenden oder 3D-Animationen einsetzen.
Funktionen:
- Wähle aus Animationseffekten
- Zweistufige Popups erstellen
- Verwende Zeitverzögerungen und Benutzerauslöser
- Zeige Bilder, Videos und andere interaktive Elemente an
Preise: Das Popup Box Widget ist in einem PowerPack-Abonnement enthalten. Die Abonnements beginnen bei 49 $ pro Jahr und beinhalten mehr als 70 verschiedene Elementor-Widgets.
3. Lightbox & Modal (Wesentliche Addons für Elementor)
Wir haben dieses Elementor Popup-Plugin bereits kurz erwähnt. Lightbox & Modal ist ein vielseitiges Widget mit dem Essential Addons for Elementor Tool. Es hilft dir, Popups mit interaktiven Funktionen wie Videos, Bildern und Animationen zu erstellen.
Lightbox & Modal ist so konzipiert, dass es mit Schaltflächen und Links auf deiner Elementor-Webseite funktioniert. Du kannst benutzerdefinierte Schaltflächen, Icons und Texte erstellen, die deine Popup-Formulare auslösen. Außerdem kann das Widget Zeitverzögerungen und andere Benutzeraktionen nutzen.
Insgesamt könnte Lightbox & Modal die beste Option sein, um mit deinen Nutzern zu interagieren, anstatt nur Informationen zu präsentieren.
Funktionen:
- Verwende Button-Trigger für Popups
- Zeige Bilder, Videos und benutzerdefinierte Inhalte an
- Popup-Layouts anpassen
- Wähle zwischen verschiedenen Animationstypen
Preise: Lightbox & Modal ist in den Essential Addons für Elementor Pro enthalten. Die Tarife beginnen bei 39,97 $ pro Jahr und beinhalten mehr als 70 Widgets und sieben Erweiterungen.
Zusammenfassung
Popup-Formulare können für deine Lead-Generierung und Marketing-Kampagnen unerlässlich sein. Sie können dir auch helfen, mit deinen Besuchern zu interagieren und sie auf deiner Seite zu halten. Zum Glück kannst du mit dem Elementor Page Builder eigene Popups erstellen.
Mit Elementor Pro ist es super einfach, Popups zu erstellen. Du kannst sie an dein Branding anpassen und entscheiden, wo sie auf deiner Seite angezeigt werden. Du kannst auch erweiterte Anzeigeeinstellungen vornehmen, um dein Popup je nach Benutzeraktion und Herkunft anzuzeigen.
Die Gestaltung einer schönen Website mit Elementor ist nur der erste Schritt. Du musst auch einen Anwendungs-Hosting-, Datenbank-Hosting– und Managed WordPress Hosting-Anbieter an deiner Seite haben.
Sieh dir noch heute unsere Pläne an und finde heraus, wie Kinsta deine Seite aufladen kann!
Schreibe einen Kommentar