So erstellen Sie ein Pop-up in Elementor, das Besucher auf eine externe Seite weiterleitet

By Tim ChristophersenElementor, Anleitungen

So erstellen Sie ein Pop-up in Elementor, das Besucher auf eine externe Seite weiterleitet

Pop-ups können eine effektive Möglichkeit sein, um die Aufmerksamkeit der Besucher auf Ihrer Website zu erhöhen und um sie zu Aktionen zu bewegen, wie zum Beispiel auf einen Button zu klicken oder sich für Ihren Newsletter anzumelden. In diesem Blog-Beitrag werden wir uns darauf konzentrieren, wie Sie ein Pop-up in Elementor erstellen können, das Besucher auf eine externe Seite weiterleitet.

Schritt 1: Erstellen Sie das Pop-up

Um das Pop-up zu erstellen, öffnen Sie Elementor und wählen Sie die Seite aus, auf der Sie das Pop-up platzieren möchten. Fügen Sie einen neuen Abschnitt hinzu und ziehen Sie das „Popup“ Widget aus der Widget-Bibliothek in den Abschnitt. Klicken Sie auf das Popup-Widget und dann auf den Button „Popup bearbeiten“, um das Popup-Bearbeitungsfenster zu öffnen. Hier können Sie den Inhalt des Pop-ups hinzufügen, wie z.B. Text, Bilder oder Videos.

Schritt 2: Wählen Sie die Bedingungen aus

Wählen Sie die Bedingungen aus, unter denen das Pop-up angezeigt werden soll Wählen Sie die Bedingungen aus, unter denen das Pop-up angezeigt werden soll. In diesem Fall wählen wir „Beim Klick auf einen Button“. Wählen Sie den Kontakt-Button aus, indem Sie auf „Button hinzufügen“ klicken und dann den Button auswählen. Sie können auch andere Bedingungen auswählen, wie z.B. wenn der Benutzer eine bestimmte Zeit auf der Seite verbracht hat oder wenn er die Seite verlassen möchte.

Schritt 3: Fügen Sie den HTML-Code und den JavaScript-Code in das Pop-up ein

Klicken Sie auf das Popup-Widget und dann auf den Button „Popup bearbeiten“, um das Popup-Bearbeitungsfenster zu öffnen. Ziehen Sie ein HTML-Element wie z.B. ein Text- oder Bild-Widget in das Pop-up. Klicken Sie auf das HTML-Element, um es auszuwählen.

Klicken Sie nun auf das Symbol „</>“, um das Widget in den HTML-Code-Modus zu wechseln. Fügen Sie den folgenden HTML-Code in das HTML-Element ein:

<script type="text/javascript"> 
jQuery( document ).on( 'elementor/popup/show', () => {
  setTimeout(callBack_func, 4500);
  function callBack_func() {
    openInNewTab("https://deine-domain.de"); 
  }
});

function openInNewTab(url) {
  window.open(url, '_blank').focus();
}
</script>

Dieser Code leitet den Benutzer nach 4,5 Sekunden auf die externe Seite „https://deine-domain.de“ weiter. Beachten Sie, dass Sie die URL ändern können, um die gewünschte externe Seite anzugeben.

Speichern Sie nun das Pop-up und veröffentlichen Sie die Seite. Wenn der Benutzer auf den Kontakt-Button klickt, wird das Pop-up geöffnet und der JavaScript-Code wird automatisch ausgeführt, um den Benutzer auf die externe Seite weiterzuleiten.

Ändern der Verzögerungszeit

Die Zeitverzögerung, bevor der Benutzer auf die externe Seite weitergeleitet wird, kann in der Zeile „setTimeout(callBack_func, 4500);“ geändert werden. Die Zahl „4500“ entspricht der Zeit in Millisekunden, die das Pop-up angezeigt wird, bevor der Benutzer weitergeleitet wird. Sie können diese Zahl erhöhen oder verringern, um die Verzögerungszeit anzupassen.

Testen des Pop-ups

Bevor Sie das Pop-up auf Ihrer Website veröffentlichen, sollten Sie es unbedingt testen. Eine Möglichkeit, dies zu tun, besteht darin, einen anderen Browser zu verwenden, um sicherzustellen, dass das Pop-up wie erwartet funktioniert. Es ist auch eine gute Idee, sich abzumelden, um sicherzustellen, dass das Pop-up nicht zweimal geladen wird oder andere unerwartete Verhaltensweisen auftritt.

Fazit

Das Erstellen eines Pop-ups, das Besucher auf eine externe Seite weiterleitet, kann eine effektive Möglichkeit sein, um Ihre Website-Besucher zu motivieren, weitere Aktionen auszuführen. Durch das Hinzufügen des Codes können Sie sicherstellen, dass der Benutzer nicht überrascht wird, wenn er auf die externe Seite weitergeleitet wird. Vergessen Sie nicht, das Pop-up zu testen und anzupassen, bevor Sie es auf Ihrer Website veröffentlichen. Mit Elementor können Sie schnell und einfach Pop-ups erstellen und anpassen, um Ihre Marketingziele zu erreichen.