Sie benötigen eine Schaltfläche irgendwo auf Ihrer Website, um ein Elementor-Popup zu öffnen, aber der standardmäßige „On Click"-Trigger funktioniert nur innerhalb einer einzelnen Seite? Diese Aufgabe lässt sich in fünf Minuten lösen, ohne Drittanbieter-Plugins und ohne Code-Änderungen.

Der eingebaute Mechanismus von Elementor Pro: ein Anker-Link kombiniert mit dem CSS-Selektor Open By Selector. Nach der Konfiguration erhalten Sie ein Popup, das sich von jeder Seite Ihrer Website aus öffnet: über einen Menüpunkt, einen Textlink oder eine Schaltfläche im Footer. Nachfolgend eine Schritt-für-Schritt-Anleitung, von der Erstellung des Popups bis zum Test auf der Live-Website. Jeder Schritt ist mit einem Screenshot aus einem realen Setup illustriert.

💡 Kurzüberblick:

• Erstellen Sie ein Popup unter Elementor Templates → Popups und veröffentlichen Sie es
• Wählen Sie in den Anzeigebedingungen „Gesamte Website", das ist der entscheidende Punkt dieser Methode
• Aktivieren Sie in den globalen Einstellungen des Popups „Seiten-Scrollen deaktivieren" und „Mehrere Popups verhindern"
• Tragen Sie im Tab „Erweitert" den Selektor a[href="#your-anchor"] in das Feld „Open By Selector" ein
• Platzieren Sie Links mit dem Anker #your-anchor auf Ihrer gesamten Website, das Popup öffnet sich von überall

Schritt 1: Ein Popup in Elementor erstellen

Öffnen Sie Templates → Popups im Seitenmenü von WordPress und klicken Sie auf „Neu hinzufügen". Wählen Sie eine fertige Vorlage aus der Elementor-Bibliothek oder beginnen Sie mit einer leeren Arbeitsfläche. Benennen Sie das Popup aussagekräftig, zum Beispiel „Kontakt-Popup" oder „Anfrageformular", damit Sie es später in der Liste leicht wiederfinden. Das Design kann beliebig sein: ein Kontaktformular, eine Newsletter-Anmeldung, ein Feedback-Formular oder ein Werbebanner.

Bauen Sie den Inhalt im Elementor-Editor wie eine normale Seite zusammen: Fügen Sie eine Überschrift, ein Formular, Text und einen Schließen-Button hinzu. Wenn alles fertig ist, klicken Sie auf Veröffentlichen.

Nach dem Veröffentlichen öffnet Elementor den Bildschirm mit Bedingungen, Triggern und erweiterten Regeln. Hier nehmen wir die einzige kritische Einstellung vor.

Schritt 2: Bedingung „Gesamte Website"

Wählen Sie auf dem Bedingungs-Bildschirm in der Dropdown-Liste Gesamte Website aus. Dies ist die einzige Bedingung, die Sie setzen müssen.

Hinweis: Selbst wenn Sie das Popup nur auf bestimmten Seiten anzeigen möchten, ist die Wahl von „Gesamte Website" der einfachste Weg. Die Anzeige selbst wird nicht durch die Seitenbedingung gesteuert, sondern durch das Vorhandensein des Anker-Links #contact in der URL. Kein Anker in der Adressleiste, kein Popup.

Den Trigger-Bildschirm und die erweiterten Regeln können Sie überspringen: Klicken Sie auf Weiter, dann auf Speichern & Schließen. Die Anker-Link-Methode funktioniert unabhängig von diesen Einstellungen.

Schritt 3: Globale Popup-Einstellungen

Klicken Sie auf das Zahnrad-Symbol in der unteren linken Ecke des Popup-Bearbeitungsbildschirms, das Panel Popup-Einstellungen öffnet sich. Wechseln Sie zum Tab Erweitert.

Konfigurieren Sie hier das Verhalten für Ihre Aufgabe. Wir empfehlen, folgende Optionen zu aktivieren:

• Seiten-Scrollen deaktivieren, damit die Hintergrundseite nicht scrollt, während das Popup geöffnet ist;
• Mehrere Popups verhindern, um zu vermeiden, dass sich mehrere Popups überlagern.

Belassen Sie die übrigen Parameter auf ihren Standardwerten. Das Wichtigste ist das Feld ganz unten im Tab, für das dieser ganze Aufwand betrieben wurde.

Schritt 4: Open By Selector, die Anker-Magie

Tragen Sie im Feld Open By Selector einen CSS-Selektor ein, der auf den Anker-Link „horcht". Das Format ist strikt:

1
a[href="#contact"]

Ersetzen Sie #contact durch Ihren eigenen Anker: #popup / #callback / #sale oder eine andere eindeutige Kennung. Der Selektor reagiert auf einen Klick auf jedes <a>-Element, dessen href-Attribut Ihrem Anker entspricht.

Speichern Sie das Popup. Es wartet nun darauf, dass ein Besucher einem Link mit dem geforderten Anker folgt.

Schritt 5: Anker-Links auf Ihrer Website platzieren

Jetzt müssen nur noch Links dort platziert werden, von wo aus der Besucher das Popup öffnen soll. Jedes Elementor-Widget mit einem Link-Feld funktioniert: Button, Text-Editor, Bild, Icon-Box.

Geben Sie im Link-Feld anstelle einer normalen URL #contact (oder Ihren Anker) ein. Im Frontend funktioniert das so: Beim Klick hängt der Browser #contact an die Adressleiste an, der Selektor a[href="#contact"] wird ausgelöst und das Popup öffnet sich.

In der Praxis nutzen wir drei typische Szenarien:

• Button im Hero-Bereich, „Rückruf anfordern" mit href #callback;
• Menüpunkt, unter Design → Menüs einen benutzerdefinierten Link mit dem Anker #contact hinzufügen;
• Textlink im Beitragstext, Text auswählen und den Anker im Link-Panel eintragen.

Testen Sie es: Öffnen Sie eine beliebige Seite Ihrer Website, hängen Sie #contact an die Adressleiste an und drücken Sie Enter, das Popup sollte erscheinen. Falls nicht, gehen Sie zurück zu Schritt 4 und überprüfen Sie den Selektor.

Video: Einrichtung in 3 Minuten

Das offizielle Elementor-Video zeigt den gesamten Prozess von Anfang bis Ende, von der Erstellung des Popups bis zum Test auf der Live-Website.

⁉️🤔 Häufig gestellte Fragen

Funktioniert die Methode ohne Elementor Pro?

Nein. Das Modul Popup Builder ist ausschließlich in Elementor Pro enthalten. In der kostenlosen Version des Builders sind Popups nicht verfügbar. Wenn Sie die Free-Version nutzen, prüfen Sie die Kombination von Elementor mit einem separaten Popup-Plugin (zum Beispiel Popup Maker), aber das Setup ist dort anders, über jQuery-Selektoren statt über den standardmäßigen Open By Selector.

Ist die Bedingung „Gesamte Website" zwingend erforderlich?

Ja, das ist eine zentrale Voraussetzung der Methode. Wenn Sie die Bedingung auf „Auf bestimmten Seiten" belassen, wird das Popup nur auf ausgewählten Seiten angezeigt, und zwar nur beim Laden der Seite, nicht bei einem Klick auf den Anker. Der Modus „Gesamte Website" übergibt die Kontrolle an den Open By Selector-Selektor.

Kann man mehrere verschiedene Popups mit unterschiedlichen Ankern erstellen?

Ja. Erstellen Sie für jeden Anker ein separates Popup. Zum Beispiel ein „Kontakte"-Popup mit dem Selektor a[href="#contact"] und ein „Sale"-Popup mit a[href="#sale"]. Beide hängen auf „Gesamte Website" und werden unabhängig voneinander durch ihren eigenen Anker ausgelöst.

Warum öffnet sich das Popup nicht per Anker?

Prüfen Sie drei Dinge. Erstens: #your-anchor muss in der Adressleiste erscheinen, der Browser hängt ihn nur an, wenn auf ein <a>-Element mit dem entsprechenden href geklickt wird, eine direkte Tastatureingabe funktioniert möglicherweise nicht. Zweitens: Das Feld Open By Selector muss exakt a[href="#contact"] enthalten, ohne zusätzliche Leerzeichen und mit dem korrekten Anführungszeichen-Typ. Drittens: Öffnen Sie die Browser-Konsole (F12) und suchen Sie nach JavaScript-Fehlern, ein Konflikt mit einem anderen Plugin blockiert möglicherweise den Trigger.

Beeinflusst das die Suchmaschinenoptimierung?

Nein. Anker-Links mit einem Hash werden von Suchmaschinen nicht als separate Seiten indexiert. Für Google ist dies ein technisches Navigationselement, kein doppelter Inhalt.

Was tun, wenn die Standard-Trigger nicht ausreichen

Der Anker-Link über Open By Selector ist der universellste Weg, ein Elementor-Popup von überall auf Ihrer Website zu öffnen. Er hängt nicht davon ab, auf welcher Seite sich der Besucher befindet, und erfordert keine Bearbeitung der functions.php.

Wird die Aufgabe komplexer, zum Beispiel, das Popup soll beim Scrollen zu einem bestimmten Block oder 10 Sekunden nach Betreten der Website erscheinen,, nutzen Sie die Standard-Trigger von Elementor: On Scroll, On Page Load, On Exit Intent. Diese werden auf demselben Bildschirm konfiguriert, auf dem wir „Gesamte Website" ausgewählt haben, und lassen sich perfekt mit der Anker-Methode kombinieren.

Probieren Sie es auf einer Test-Website aus: Erstellen Sie ein Popup, tragen Sie a[href="#test"] ein und platzieren Sie einen Button mit diesem Anker auf der Startseite. Der gesamte Vorgang dauert weniger als fünf Minuten.