So erstellst du ein Popup mit Elementor Pro: Der ultimative Guide für mehr Interaktionen auf deiner Website

Warum ein Popup mit Elementor? Die Vorteile auf einen Blick

• E-Mail-Abonnenten zu gewinnen
• Angebote oder Rabatte hervorzuheben
• Exit-Intent-Popups zu erstellen, die Besuchern angezeigt werden, bevor sie die Seite verlassen
• Produkte oder Dienstleistungen gezielt zu bewerben

Voraussetzungen für die Erstellung eines Popups mit Elementor

Um ein Popup in Elementor zu erstellen, benötigst du die Pro-Version des Plugins. Leider sind Popups in der kostenlosen Version nicht enthalten. Hast du Elementor Pro installiert? Dann kannst du sofort loslegen!

Schritt 1: Ein neues Popup erstellen

1. Elementor öffnen: Gehe ins WordPress-Dashboard und klicke auf „Templates“ > „Popups“.
2. Neues Popup erstellen: Klicke auf „Neu hinzufügen“ und gib deinem Popup einen Namen. Diese Benennung hilft dir später, das Popup leichter zu finden und zu organisieren.

Schritt 2: Design und Layout des Popups festlegen

Nach dem Erstellen eines neuen Popups gelangst du in den Elementor-Editor. Hier kannst du das Popup-Layout und Design anpassen.

• Vorlage auswählen: Elementor bietet eine Auswahl an vorgefertigten Popup-Designs, die du als Ausgangspunkt nutzen kannst.
• Größe und Position festlegen: Im linken Menü unter „Einstellungen“ findest du Optionen für die Größe und Position.
• Hintergrund und Farben: Passe das Design an deine Markenfarben an. Hier kannst du den Hintergrund, Ränder und Schriften deines Popups individuell gestalten.

Schritt 3: Inhalte hinzufügen

Ein Popup mit Elementor ohne relevanten Inhalt ist wertlos. Überlege dir genau, welche Nachricht du vermitteln möchtest und welche Handlungen du von deinem Besucher erwartest.

• Text und Bilder einfügen: Nutze die Text- und Bild-Widgets, um wichtige Informationen oder Call-to-Actions (CTAs) hervorzuheben.
• Buttons und Links: Füge einen Button hinzu, der den Benutzer zu einem Angebot weiterleitet oder eine Anmeldung für deinen Newsletter ermöglicht.
• Formulare hinzufügen: Wenn du E-Mail-Adressen sammeln möchtest, kannst du mit dem „Formular“-Widget direkt ein Anmeldeformular in das Popup integrieren.

„Ein gutes Popup unterbricht nicht, es bietet etwas an. Wer es zum richtigen Zeitpunkt zeigt, zum Beispiel beim Verlassen der Seite, nervt nicht, sondern gewinnt Kontakte.“

Thomas Gress, WordPress- und Elementor-Experte

Schritt 4: Popup-Bedingungen festlegen

Ein Popup sollte nicht ständig und überall erscheinen. Unter den Bedingungen kannst du genau festlegen, wann und wo das Popup gezeigt wird.

• Seiten auswählen: Wähle die spezifischen Seiten aus, auf denen das Popup erscheinen soll.
• Geräte: Wähle aus, auf welchen Geräten das Popup angezeigt wird – Desktop, Tablet oder Smartphone.
• Bedingungen für den Standort: Du kannst standortbasierte Bedingungen einstellen.

Schritt 5: Trigger und erweiterte Optionen

• Beim Seitenladen: Das Popup wird angezeigt, sobald die Seite geladen ist.
• Scroll-Tiefe: Zeigt das Popup an, nachdem der Besucher einen bestimmten Prozentsatz der Seite gescrollt hat.
• Exit-Intent: Zeigt das Popup an, wenn der Benutzer versucht, die Seite zu verlassen.

Schritt 6: Animationen und Effekte hinzufügen

Mit Animationen kannst du das Popup lebendiger und ansprechender gestalten.

• Erscheinen und Ausblenden: Lege fest, wie das Popup erscheinen und wieder verschwinden soll.
• Hover-Effekte: Du kannst Buttons oder Bilder mit Hover-Effekten versehen.

Schritt 7: Testen und Optimieren

• Auf verschiedenen Geräten testen: Stelle sicher, dass das Popup auf Mobilgeräten gut aussieht und funktioniert.
• Benutzerfreundlichkeit: Teste, ob das Popup benutzerfreundlich und nicht störend ist.
• Performance: Achte darauf, dass das Popup die Ladezeit deiner Website nicht negativ beeinflusst.

Praktische Tipps für ein effektives Popup

• Weniger ist mehr: Überlade das Popup nicht mit zu viel Text oder auffälligen Designelementen.
• Ein klares Angebot: Popups sollten immer eine klare Nachricht oder ein Angebot enthalten.
• Die Häufigkeit regulieren: Achte darauf, dass du sie nicht auf jeder Seite und bei jedem Besuch wiederholt anzeigst.
• Analysen verwenden: Nutze Analysetools, um zu sehen, wie gut das Popup funktioniert.

Alternative: Ein Popup mit dem Off-Canvas-Widget bauen

Seit einiger Zeit gibt es in Elementor Pro das Off-Canvas-Widget. Damit baust du ein Overlay direkt auf der Seite, ohne ein separates Popup-Template mit Bedingungen anzulegen. Das ist ideal für einfache Fälle, zum Beispiel ein Kontaktformular oder eine Info-Box, die per Button aufgeht.

1. Widget einfügen: Ziehe das Off-Canvas-Widget an eine beliebige Stelle der Seite.
2. Inhalt bearbeiten: Im Bearbeitungsmodus fügst du Überschrift, Text, Formular oder eigenen HTML-Code ein.
3. Styling: Lege Breite, Position (links, rechts oder mittig), Hintergrund und Overlay-Farbe fest.
4. Schließen-Button und Animation einstellen.
5. Mit einem Button verknüpfen: Beim Button wählst du als Link die dynamische Aktion „Off-Canvas“ und dein Widget aus.

Der Unterschied: Das klassische Popup kann seitenübergreifend mit Triggern wie Scrolltiefe oder Exit-Intent arbeiten. Das Off-Canvas-Widget lebt auf einer Seite und öffnet sich per Klick. Für Lead-Magneten nimmst du das Popup, für Menüs und Info-Boxen das Off-Canvas-Widget.

Fazit

Mit Elementor Pro ist es kinderleicht, ein ansprechendes und funktionales Popup zu erstellen, das die Interaktionen auf deiner Website erhöht und Leads generiert. Ein gut gestaltetes Popup kann den Unterschied zwischen einem einfachen Besuch und einer wertvollen Konversion ausmachen.