Wie kann man mit Elementor ein Popup öffnen, wenn man auf eine Schaltfläche klickt? [2022]

Fragen Sie sich, wie ansprechend Ihre Website für Besucher erscheinen wird, wenn beim Klicken auf die Schaltfläche ein Popup geöffnet wird ? Wenn Sie eine solche interaktive Schaltfläche wünschen, die ein Popup öffnet, gibt es im beliebtesten Website-Builder, Elementor , zahlreiche Möglichkeiten. Heute zeigen wir Ihnen, wie Sie ganz einfach ein beeindruckendes Popup mit einem Klick auf eine Schaltfläche ohne Codierung erstellen können.

Die 5 besten Anwendungsfälle für Schaltflächen mit modalem Elementor-Popup

Lassen Sie uns einen Blick darauf werfen, welche Vorteile Sie genießen werden, wenn Sie ein modales Elementor-Popup auf Knopfdruck öffnen, bevor wir mit dem Tutorial beginnen. Grundsätzlich wird diese Art von interaktivem modalem Popup für Website-Marketingkampagnen verwendet. Abgesehen davon gibt es auch so viele vielseitige Anwendungsfälle, um ein Popup auf Knopfdruck zu öffnen. Hier sind die Top 5 Anwendungsfälle von modalem Popup.

1. Für die Erfassung von Leads für Unternehmen

Um Ihr Geschäft reibungslos zu führen und das Unternehmenswachstum zu steigern, benötigen Sie Leads. Indem Sie Leads pflegen, können Sie diese zu Ihren Stammkunden machen. Und eine Website ist das beste Medium, um Leads zu erfassen. Wenn sich auf Knopfdruck ein Popup-Fenster öffnet, können Sie ganz einfach die Namen, Telefonnummern, E-Mails und andere Details von Leads erfassen .

2. E-Mail-Abonnement sammeln

Wenn Sie eine einfache Schaltfläche zum Sammeln von E-Mail-Abonnements hinzufügen, werden Ihre Benutzer normalerweise auf eine neue Webseite weitergeleitet. Anstatt dies zu tun, können Sie ein Popup öffnen, wenn Sie auf eine Schaltfläche klicken, dann müssen Ihre Benutzer die aktuelle Webseite nicht verlassen. Diese Praxis erhöht überraschenderweise Ihr E-Mail-Abonnement glatt zählen.

3. Marketingaktionen und Verkäufe

Wenn Sie Marketingaktionen über Ihre Website durchführen, kann ein Popup, das auf Knopfdruck geöffnet wird, Ihrer Website ein interaktives Aussehen verleihen und den Umsatz steigern . Sie können Bilder, Formulare, spezielle Rabattgutscheine usw. in einem einzigen Popup von Elementor hinzufügen. Ohne Ihre Website zusammen mit Werbeabschnitten unerwünscht zu machen, können Sie diese durch ein Popup ersetzen, das auf Knopfdruck geöffnet wird.

4. Spannende Ankündigungen teilen

Wenn Sie planen, eine große Veröffentlichung oder andere aufregende Ankündigungen und Werbeaktionen anzukündigen, kann das Öffnen eines Popups auf Knopfdruck der beste Weg sein. Es verleiht Ihrer Website ein atemberaubendes Aussehen und Sie können die Website mit virtuellem Konfetti und anderen festlichen Dekorationen dekorieren. Wenn Sie außerdem vorhaben, große Neuigkeiten anzukündigen, die bald erscheinen, kann das Popup-Fenster, das sich auf Knopfdruck öffnet , Ihnen helfen, Begeisterung zu erzeugen .

5. Als Inhaltssperre verwenden

Wenn Sie eine Mehrzweck-Website haben, kann es erforderlich sein, Inhaltsbeschränkungen basierend auf Alter, Mitgliedschaft, Abonnement und vielem mehr bereitzustellen. Wenn Sie eingeschränkte Inhalte direkt auf einem Website-Bereich bereitstellen, wird die Anzahl der Klicks pro Aktion definitiv verringert. Stattdessen können Sie ein attraktives Popup erstellen, das sich per Knopfdruck sofort öffnet.

Warum ist Elementor die beste Plattform, um Popups auf einer Schaltfläche zu erstellen?

Auf Websites gibt es mehrere Möglichkeiten, ein Popup zu erstellen, das auf Knopfdruck in WordPress geöffnet wird. Eine Möglichkeit, dies zu tun, besteht darin, benutzerdefinierte Codierungen vorzunehmen oder Experten einzustellen. Wenn Sie nicht technisch versiert sind, kann es Sie ein Vermögen kosten, Codes zu erstellen oder Experten einzustellen. Aber wenn Sie Elementor verwenden – den beliebtesten WordPress-Website-Builder, dann können Sie dies ohne Codierung tun.

Um ein Popup zu erstellen, das sich auf Knopfdruck öffnet, können Sie dies einfach per Drag & Drop tun, es ist keine Programmierung erforderlich. Darüber hinaus ist das Erstellen eines Popups, das auf Knopfdruck geöffnet wird, mit Hilfe des Elementor Popup Builder so einfach, dass Sie es ganz selbst erstellen können. Elementor bietet unbegrenzte Anpassungs- und Personalisierungsoptionen. Wenn Sie das also mit dem Markenwert Ihrer Website in Einklang bringen, können Sie jede Art von Popup erstellen, das sich auf Knopfdruck sofort öffnet.

No-Code-Tutorial: Wie lässt sich ein modales Elementor-Popup beim Klicken auf eine Schaltfläche öffnen?

Lassen Sie uns nun in das Tutorial einsteigen und ein Popup öffnen, wenn Sie auf die Schaltfläche klicken. Bevor Sie mit der Erstellung eines Elementor-Popups beginnen, brauchen Sie sich nur 5 Minuten zu konzentrieren und diesem einfachen Tutorial Schritt für Schritt zu folgen.

Schritt 1: Beginnen Sie mit Elementor PRO

Wenn Sie vorhaben, ein modales Popup zu erstellen, das auf Knopfdruck mit Elementor geöffnet wird, müssen Sie Elementor PRO herunterladen . Mit der exklusiven Funktion von Elementor PRO, Elementor Popup Builder , können Sie sofort Popups erstellen, die sich auf Knopfdruck öffnen. Elementor bietet vielseitige Preispläne ab 49 $ . Nachdem Sie das Elementor PRO-Plugin erhalten haben, installieren und aktivieren Sie es auf Ihrer WordPress-Website.

Schritt 2: Erstellen Sie eine Vorlage mit Elementor Popup Builder

Jetzt ist es an der Zeit, eine Vorlage für Popups zu erstellen, die auf Knopfdruck geöffnet werden. Gehen Sie dazu zu Ihrem WordPress-Dashboard, gehen Sie zu Vorlagen → Popup . Wenn Sie auf die Registerkarte klicken, gelangen Sie sofort zum Elementor-Popup-Builder. Klicken Sie dann auf die Schaltfläche „Neues Popup hinzufügen“ . Ein Popup-Fenster wird angezeigt. Dort wird der Vorlagentyp automatisch als Popup ausgewählt. Wenn Sie möchten, können Sie der Vorlage einen Namen geben und dann auf die Schaltfläche „Vorlage erstellen“ klicken.

Dann werden Sie zur Elementor-Vorlagenbibliothek weitergeleitet. Es gibt mehr als 100 Popup-Sammlungen in vielseitigen Kategorien. Wählen Sie basierend auf den Anforderungen Ihrer WordPress-Website eine geeignete Elementor-Popup-Vorlage aus. Klicken Sie auf die Vorlage, um eine kurze Vorschau zu erhalten. Klicken Sie dann auf die Schaltfläche „Einfügen“ , um das modale Popup-Fenster mit einem Klick auf die Schaltfläche zu öffnen.

Schritt 3: Konfigurieren und personalisieren Sie die Popup-Vorlage

Danach öffnet sich das Elementor-Editor-Panel mit allen Konfigurationsoptionen auf der linken Seite. Von dort aus können Sie das Popup-Fenster, das auf Knopfdruck geöffnet wird, ganz einfach anpassen. Sie können das modale Popup mit Boxed oder Full Width beibehalten . Ebenso können Sie die modale Popup-Höhe, den Spaltenabstand, die Spaltenposition, die vertikale Ausrichtung, den Überlauf, HTML-Tags und vieles mehr konfigurieren. Verschiedene Arten von Breiten bieten verschiedene Arten von Konfigurationen.

Um den modalen Popup-Inhalt anzupassen, klicken Sie einfach auf den Text, das Bild oder die Schaltflächen. Sofort wird das Bearbeitungsfeld auf der linken Seite geöffnet. Sie können den Popup-Inhalt, die Schriftfamilie usw. einfach ändern. Fügen Sie außerdem mehrere E-Mail-Ausgabeabschnitte, Schaltflächenhöhe, -breite, -farbe, -text und vieles mehr hinzu. Es gibt eine Option zum Festlegen von Aktionen nach dem Senden, Verwalten von Senden, Hinzufügen von benutzerdefinierten E-Mail-Inhalten, Empfänger-E-Mail, Absender-E-Mail-ID usw. Nachdem Sie alle Änderungen vorgenommen haben, klicken Sie auf die Schaltfläche „Veröffentlichen“ .

Schritt 4: Bedingungen und Trigger einrichten

Sie können das Popup nutzen, das auf Knopfdruck für die gesamte WordPress-Website oder ausgewählte Seiten geöffnet wird. Sie können Elementor-Popups auch auf ausgewählten Seiten einschließen oder ausschließen. Alle diese Konfigurationen sind auf der Registerkarte „Bedingung“ verfügbar.

Auf der Registerkarte „Auslöser“ müssen Sie festlegen, wann das Popup bei einem Klick auf die Schaltfläche geöffnet werden soll. Da wir das Popup mit einem Klick auf die Schaltfläche in der Vorschau anzeigen möchten, schalten Sie um, um „On Click“ zu aktivieren. Unter „Erweiterte Regeln“ können Sie Bedingungen konfigurieren, z. B. wem das Popup angezeigt werden soll, beim Eintreffen des Formulars angezeigt werden soll und vieles mehr. Klicken Sie dann auf die Schaltfläche „Speichern & Schließen“ . So einfach können Sie eine Elementor-Popup-Vorlage erstellen. Gehen Sie dann zurück zum WordPress-Dashboard.

Schritt 4: Fügen Sie eine Elementor-Schaltfläche hinzu, wo Sie sie benötigen

Öffnen Sie nun eine Seite, auf der Sie ein Popup einrichten möchten, das auf Knopfdruck geöffnet wird. Wenn Sie eine neue Seite erstellen möchten, gehen Sie zu Seiten → Neu hinzufügen . Für dieses Tutorial werden wir das Popup-Modal mit der Elementor-Schaltfläche verbinden. Ziehen Sie die Elementor-Schaltfläche per Drag & Drop auf Ihre Seite.

Personalisieren Sie das Erscheinungsbild, den Text usw. der Schaltfläche, um sie an die Farbe Ihrer Website-Marke anzupassen. Der nächste Schritt besteht darin, die Schaltfläche mit dem Popup-Modal zu verknüpfen. Klicken Sie dazu im Feld „Link“ auf „Dynamic Type“ und wählen Sie „ Popup “ aus „ Actions “ aus. Klicken Sie dann neben dem Popup auf das Symbol „Einstellungen“ und wählen Sie die zuvor erstellte Popup-Vorlage aus. Das ist es!

Der letzte Blick auf das Popup öffnet sich beim Klicken auf die Elementor-Schaltfläche

So einfach können Sie ein Popup erstellen, das sich auf Knopfdruck öffnet. Veröffentlichen Sie die Seite, nachdem Sie andere Anpassungen vorgenommen haben. Nun zur Vorschau, um zu sehen, wie sich ein Popup auf Knopfdruck öffnet.

Wenn Sie dieselbe Schaltfläche für verschiedene Seiten verwenden möchten, kopieren Sie die Schaltfläche und fügen Sie sie auf einer neuen Webseite ein. Außerdem können Sie den Shortcode der Elementor-Popup-Vorlage kopieren und überall dort verwenden, wo Sie ein Popup hinzufügen möchten, das auf Knopfdruck geöffnet wird.

Bonus für wesentliche Addons für Elementor-Benutzer

Essential Addons For Elementor ist die leistungsstärkste Elementor-Bibliothek mit über 1 Million aktiven Benutzern und über 85 einzigartigen Widgets. Und sein Creative Button -Widget bietet seinen Kunden ein vielseitigeres Design und eine vielseitigere Verwendbarkeit. Wenn Sie das Schaltflächen-Widget „Essential Addons“ verwenden, können Sie auf ähnliche Weise wie bei der Elementor-Schaltfläche ein Popup öffnen, wenn Sie einfach auf eine Schaltfläche klicken.

Elementor hat die Website-Entwicklung vereinfacht. So wie das Popup auf Knopfdruck geöffnet wird, können Sie Ihrer WordPress-Website beeindruckendere und vielseitigere Funktionen hinzufügen. Hier ist das Ende dieses Tutorials. Wenn Sie dieses Tutorial hilfreich fanden, vergessen Sie nicht, es mit anderen zu teilen.

Teilen Sie uns in unserer Facebook-Community mit, wie Sie mithilfe von Elementor ein Popup erstellen, das auf Knopfdruck geöffnet wird. Auch abonnieren unseren Blog , um über diese Art von Tutorials, Tipps und Tricks auf dem Laufenden zu bleiben.