Treten Sie unserer Liste bei und erhalten Sie die neuesten Neuigkeiten. Abonnieren Sie, um keine Updates zu verpassen.
Inhaltsverzeichnis
Schritt-für-Schritt-Video
Was ist ein Pop-up-Fenster?
Ein Pop-up-Fenster, eine Einblendung oder auf Englisch Popup ist ein Fenster, das („aufpoppt“) erscheint, während Sie auf einer Website navigieren. Es wird aus vielen Gründen eingesetzt: um Rabatte anzubieten, Benachrichtigungen anzuzeigen, zur Newsletter-Anmeldung zu motivieren, Inhalte zu bewerben und mehr.
Wir werden nicht weiter auf Pop-ups eingehen, denn in diesem Beitrag geht es nicht darum, wie man sie erstellt, sondern wie man sie über einen Link wie diesen öffnet:
Außerdem lernen wir in diesem Beitrag, wie wir unser Pop-up-Fenster so konfigurieren, dass es einen Link wie diesen hat: #enlace-popup
„enlace-popup“ ist ein von uns erfundener Name. Später sehen wir, wie wir die gewünschte ID festlegen können, um unser Popup zu öffnen.
Das Popup auf der gesamten Website aktivieren
Etwas sehr Wichtiges, das wir tun müssen, ist die Bedingung festzulegen, dass unser Pop-up-Fenster auf Gesamte Website aktiv ist. Stellen Sie sich vor, wir fügen den Link in einen Blogbeitrag oder in unser Hauptmenü ein: Wenn diese Anzeige-Bedingung fehlt, ist das Popup in bestimmten Bereichen Ihrer Website möglicherweise nicht aktiv und öffnet sich nicht. Sehen wir uns an, wie das geht.
Wir öffnen mit Elementor die Einblendung.
Klicken Sie auf den kleinen Pfeil rechts neben der Schaltfläche Aktualisieren > und klicken Sie im Dropdown-Menü auf Anzeige-Bedingungen.
Es öffnet sich ein Pop-up-Fenster mit mehreren Tabs auf der linken Seite. Lassen Sie den Tab Bedingungen ausgewählt > klicken Sie auf die Schaltfläche Bedingung hinzufügen und belassen Sie die Standardbedingung Gesamte Website.
Jetzt müssen Sie nur noch speichern, indem Sie auf den Link Speichern & schließen klicken, oder auf die Schaltfläche Weiter und anschließend auf Speichern & schließen.
Nun ist unser Pop-up-Fenster auf der gesamten Website aktiv. Trigger oder erweiterte Regeln müssen Sie nicht konfigurieren, wenn Sie sie nicht benötigen.
So erhalten Sie den Link, der unsere Einblendung öffnet
Wir sehen uns drei Möglichkeiten an, den Link zu erhalten, der unser Popup öffnet. Sie sollten wissen, dass jedes Popup seinen eigenen Link hat und dieser sich nicht ändert. Sobald Sie ihn haben, können Sie ihn überall auf Ihrer Website verwenden – so oft Sie möchten.
Die Aktion „Pop-up öffnen“ zu einem Widget hinzufügen
Für die ersten beiden Methoden müssen wir einem Elementor-Widget die Aktion zum Öffnen des Popups hinzufügen. Sie können jedes Widget verwenden, das ein Link-Feld hat; in diesem Beispiel machen wir es mit dem Widget Button.
Klicken Sie auf den Button, um ihn auszuwählen.
Klicken Sie im Tab Inhalt bei der Eigenschaft Link auf die Schaltfläche Dynamische Tags > und wählen Sie die Aktion Pop-up.
Klicken Sie auf Pop-up > klicken Sie auf Alle und geben Sie den Namen ein, den Sie dem Popup gegeben haben. Sobald Sie zu tippen beginnen, werden passende Ergebnisse angezeigt. Klicken Sie nun auf den Namen des Popups.
Klicken Sie abschließend auf die Schaltfläche Aktualisieren, um die Änderungen zu speichern.
Sobald dies erledigt ist, ist dem Button die Aktion zum Öffnen des Popups zugewiesen, und Sie können den Link darüber abrufen.
Den Link des Pop-ups über den Browser-Inspektor ermitteln
Sobald wir die Aktion zum Öffnen des Pop-ups einem Widget (in diesem Fall einem Button) hinzugefügt haben, müssen wir nur noch die Seite, auf der wir ihn eingefügt haben, im Browser öffnen und diese Schritte befolgen:
Öffnen Sie die Seite, auf der sich der Button befindet, im Browser (in diesem Fall Google Chrome).
Rechtsklick auf den Button > und im Kontextmenü auf Untersuchen klicken.
Im Inspektor klicken Sie mit der rechten Maustaste auf den Link, der die Öffnen-Aktion enthält. Sie erkennen ihn daran, dass er mit #elementor-action… beginnt > und klicken Sie im Kontextmenü auf Edit atribute.
Nun wird der Link hervorgehoben – das bedeutet, er ist ausgewählt – und Sie können ihn mit STRG+C kopieren oder per Rechtsklick darauf > im Kontextmenü auf Kopieren klicken.
Jetzt haben Sie die URL, die die Aktion zum Öffnen des Popups auslöst. Sie können sie in eine Textdatei einfügen, um sie später per Copy Paste überall zu verwenden.
Den internen Link des Pop-ups über ein Widget ermitteln
Eine weitere Möglichkeit, den internen Link des Pop-ups zu erhalten, ist, den Link direkt aus dem Widget zu kopieren – in diesem Fall aus dem Button. Sehen wir uns an, wie das geht:
Rechtsklick auf den Button > und auf Linkadresse kopieren klicken.
Wir verwenden den Editor, um den Link mit STRG+V einzufügen.
Wir markieren und löschen alles, was hinter #elementor-action… steht.
Und schon haben wir den Link, der das Popup öffnet. Der Button hat seinen Zweck erfüllt und kann gelöscht werden; das hat keinen Einfluss, da der Link für dieses Popup immer derselbe ist.
Den internen Link des Pop-ups mit einem Plugin ermitteln
Dieses Plugin hat nur eine Funktion: Es fügt rechts neben jeder Pop-up-Vorlage eine Schaltfläche hinzu, die Ihnen beim Anklicken den Link anzeigt, der das Popup öffnet, damit Sie ihn kopieren und überall verwenden können.
In der Vorlagenliste finden Sie rechts neben jeder Vorlage die Schaltfläche Show URLs. Klicken Sie darauf, und es wird ein Popup mit allen verfügbaren Links für diese Einblendung angezeigt.
Um das Popup anzuzeigen, benötigen wir nur den ersten (Open). Dieses Plugin stellt jedoch zusätzlich drei weitere bereit: Toggle, Close und Close (Don`t Show Again).
Einen eigenen Link zum Öffnen eines Pop-ups konfigurieren
Sie können den Link Ihrer Pop-ups auch anpassen und verkürzen. Gehen Sie dazu wie folgt vor:
Öffnen Sie das Popup im Elementor-Builder.
Gehen Sie zu den Einstellungen des Pop-ups, indem Sie auf das Symbol Einstellungen in der linken unteren Ecke klicken.
Erstellen Sie im Tab Erweitert > Öffnen per Selektor einen Kurzcode als Anker-Trigger-Link, z. B.: a[href="#enlace-popup"]
Verwenden Sie diesen Link überall auf Ihrer Website, indem Sie auf den Anker-Trigger-Link verlinken (Beispiel: #enlace-popup).
Der Text #enlace-popup ist frei wählbar. Sie können den gewünschten Namen festlegen, immer ohne Leerzeichen oder Sonderzeichen und vorzugsweise in Kleinbuchstaben. Denken Sie daran, die Anzeige-Bedingungen des Pop-ups auf Gesamte Website zu setzen.
So wenden Sie den erhaltenen Link an, um das Pop-up zu öffnen
Sobald wir den Link haben, können wir ihn auf jeden Link anwenden, der mit Elementor, Gutenberg oder sogar im Menü unserer Website erstellt wurde. Sehen wir uns einige Beispiele an.
Link im Widget „Texteditor“ anwenden
Im Texteditor markieren wir den Text, auf den wir den Link zum Öffnen des Pop-ups anwenden möchten.
Wir klicken auf das Werkzeug Link einfügen/bearbeiten (Strg+k).
Anschließend drücken wir Strg+V, um den Link einzufügen, wobei wir zuvor den Link mit Strg+C kopiert haben.
Jetzt müssen Sie nur noch auf die Schaltfläche Aktualisieren klicken und Ihren Link zum Öffnen des Pop-ups testen.
Link im Text eines Beitrags mit dem Gutenberg-Editor anwenden
Sie können ihn nicht nur auf Text anwenden, sondern auch auf einen Button oder jedes Element, das das Hinzufügen von Links unterstützt.
Wir öffnen einen Beitrag im Gutenberg-Editor und markieren den Text, auf den wir den Link zum Öffnen des Pop-ups anwenden möchten.
Wir klicken auf das Werkzeug Link Strg+K.
Anschließend drücken wir Strg+V, um den Link einzufügen, wobei wir zuvor den Link mit Strg+C kopiert haben.
Jetzt müssen Sie nur noch auf die Schaltfläche Aktualisieren klicken und Ihren Link zum Öffnen des Pop-ups testen.
Link im WordPress-Menü anwenden
Wir öffnen das Menü über Design > Menüs.
Wir klicken auf das Dropdown „Individuelle Links“, fügen mit Strg+V den internen Link des Pop-ups ein und geben unter Linktext einen Namen ein.
Abschließend klicken wir auf die Schaltfläche Menü speichern.
Jetzt wissen Sie, wie Sie den Link zum Öffnen eines Pop-ups überall auf Ihrer Website anwenden können.
Prüfen Sie, ob sich das Pop-up über den dynamischen Aktionslink von Elementor auslösen lässt. Wenn es sich nicht auslösen lässt, stimmt vermutlich etwas an der Konfiguration Ihres Pop-ups nicht – nicht an der Trigger-URL.
Stellen Sie sicher, dass Sie die „Anzeige-Bedingungen“ des Pop-ups korrekt konfiguriert haben. Andernfalls wird Ihr Pop-up nicht angezeigt.
Stellen Sie sicher, dass Sie die Trigger-URL korrekt in Ihren Link kopiert haben.
Prüfen Sie, ob ein JavaScript-Fehler vorliegt, der durch andere Plugins verursacht werden könnte (siehe Entwicklertools > Konsole Ihres Browsers).
Wenn Sie keinen eigenen Link konfiguriert haben, funktioniert die Trigger-URL nur mit dem Tag <a>. Um den Öffnungs-Trigger zu aktivieren, verwendet Elementor einen JavaScript-Code, der den Link nur im Tag <a> erkennt.
Einstellungen in der linken unteren Ecke klicken.
