So fügen Sie ganz einfach ein modales Popup zu einer WordPress-Website hinzu: 3-Schritte-Tutorial

Wussten Sie, dass eine aktuelle Studie zu 2 Milliarden modale Popups hatten eine 9,28%-Konvertierungsrate unter den Top 10%?(1)

Ja. Popups machen Website-Besuche benutzerfreundlich und helfen Ihnen, schnell mehr Newsletter-Anmeldungen zu gewinnen. Popups haben sich in ihrem Aussehen und ihrer Funktionsweise drastisch verändert. Daher erfreuen sie sich auf modernen Websites zunehmender Beliebtheit denn je.

Möchten Sie Ihrer Website auch WP-Modals hinzufügen und die damit verbundenen Vorteile nutzen?

Dann ist dieser Blog genau das Richtige für Sie. Dies ist die einzige Anleitung, die Sie benötigen, um etwas über Popup-Modalitäten zu erfahren wie Sie sie ganz einfach zu Ihrer WordPress-Website hinzufügen können. 

Quelle: (1) Pop-up-Statistiken: Erkenntnisse aus der Analyse von 2 Milliarden Pop-up-Beispielen

Was ist ein modales Popup?

Modale Popups kommen sehr häufig vor und es ist höchst unwahrscheinlich, dass Sie noch nie auf eines gestoßen sind. Aber kennen Sie die Definitionen des modalen Popups? Werfen wir einen Blick.

Ein Modal (auch Modalfenster oder Lightbox genannt) ist ein Webseitenelement, das vor allen anderen Seiteninhalten angezeigt wird und diese deaktiviert. Um zum Hauptinhalt zurückzukehren, muss der Benutzer mit dem Modal interagieren, indem er eine Aktion ausführt oder es schließt.

– Hubspot

Modale Fenster unterscheiden sich von Dialogfeldern des alten Modells. Bei modalen Popups haben Benutzer Zugriff auf das gesamte Fenster, auch wenn das Popup aktiviert ist. Sie können das Popup also ignorieren und mit ihrer Arbeit fortfahren.

Andererseits erstellt das neue modale Popup einen neuen „Modus“ in Form eines untergeordneten Fensters und deaktiviert das übergeordnete Fenster. Daher kann der Benutzer nicht am ursprünglichen Fenster arbeiten, bis er eine Aktion ausführt oder das modale Popup schließt. 

Was ist der Vorteil? Der Vorteil besteht darin, dass Sie die Aufmerksamkeit der Besucher Ihrer Website auf sich ziehen, selbst wenn es nur für ein oder zwei Sekunden ist. Und Sie müssen den Fokus des Benutzers auf Ihre Botschaft lenken, oder? 

Denn wenn sie sehen, was Sie zu bieten haben, bleiben sie länger als eine Sekunde bei Ihnen und sichern sich so einen Vorsprung.

Warum Popup-Modal in Ihrer WordPress-Website verwenden?

Die meisten Leute finden Popups nervig. Natürlich mache ich ihnen das nicht zum Vorwurf. Sie besuchen eine Website, um zu arbeiten, und plötzlich erscheint ein Popup und unterbricht Sie. Das ist sicherlich nervig. 

Aber als Geschäftsinhaber müssen Sie ein Popup anders betrachten. Denn ob Sie es glauben oder nicht, diese lästigen Popups funktionieren wie ein Wunder. Popup-Modalitäten haben sich insbesondere in der Lead-Sammlung als äußerst erfolgreich erwiesen.

Laut Sumo, sammelten sie mithilfe eines Popup-Modals in weniger als zwei Jahren etwa 23.645.948 E-Mail-Adressen. In vielen Fällen stieg die Conversion-Rate auf bis zu 50,21 TP3T! 

Wenn Sie also Ihre E-Mail-Liste erweitern und Ihre Conversion-Rate beschleunigen möchten, ist Modal Pop Ihr Ding, da es sich dabei um bewährte Lead-Magnete handelt.

Darüber hinaus sind Modalitäten einfach und flexibel und Sie müssen Benutzer nicht auf eine andere Seite verweisen, um eine Aktion abzuschließen. Mehr Leads mit besserer Benutzererfahrung. Denken Sie also nie, dass Modalitäten nutzlos oder tot sind, und beginnen Sie noch heute damit, sie zu nutzen.

Häufige Verwendungen eines modalen Fensters im modernen Webdesign

Modalitäten sind immer dann äußerst effektiv, wenn Sie möchten, dass Website-Besucher etwas unternehmen oder eine wichtige Botschaft wahrnehmen. Zu den häufigsten Verwendungszwecken eines modalen Fensters im Webdesign gehören:

• Willkommensnachricht anzeigen
• Sammeln Sie E-Mails und Leads für das Newsletter-Abonnement
• Login Formular
• Zeigen Sie eine Warnmeldung an, bevor Sie Maßnahmen ergreifen
• Cookie-Richtlinie anzeigen
• Anzeigemedien wie Bildergalerie (Produkt) oder Video usw.  
• Für mehrstufige Formulare für ein besseres Benutzererlebnis.

Ich habe nur einige der vielen Möglichkeiten aufgelistet, Modal im Webdesign zu verwenden. Sobald Sie wissen, wie Sie benutzerdefinierte Popups in WordPress erstellen, werden Sie verschiedene Möglichkeiten finden, diese auf Ihrer Website zu verwenden, um optimale Ergebnisse zu erzielen. 

Also lasst uns anfangen.

Einrichtung, die Sie benötigen, um loszulegen

Ich gehe davon aus, dass Sie WordPress auf Ihrer Website installiert haben. Darüber hinaus benötigen Sie einen Seitenersteller und ein WordPress-Popup-Plugin, um Ihre Website modal zu gestalten:

1. Elementor (Freie Version)
2. ElementsKit (sowohl kostenlose als auch Pro-Version)

Elementor ist ein kostenloser Seitenersteller und ElementsKit ist eines der besten modalen Popup-Plugins für WordPress.

Fertig mit der Installation? Jetzt sind Sie bereit, per Klick ein benutzerdefiniertes WordPress-Popup in WordPress zu erstellen! Beginnen wir jetzt mit dem Hauptprozess.

So fügen Sie in Elementor mithilfe von ElementsKit in 3 Schritten ein modales Popup in WordPress hinzu

Wenn Sie der Meinung sind, dass das Hinzufügen eines Popups zu Ihrer WordPress-Site schwierig ist, lassen Sie sich überraschen. Befolgen Sie die folgenden Schritte und erstellen Sie ganz einfach ein modales Elementor-Popup in wp. Dies ist das einfachste Tutorial zum Hinzufügen von Popups in WordPress.

Schritt 1: Modales Popup-Widget aktivieren

Sobald Sie ElementsKit-Plugins installiert haben, können Sie die Elementor Modal Popup-Widget vom WordPress-Dashboard

• Gehe zu  ElementsKit  > Widgets > Einschalten Popup-Modal > Klicken Änderungen speichern

Schritt 2: WP Modal Popup Widget hinzufügen 

• Suchen Sie nach einem Popup-Modal, Drag & Drop das Widget in dem Abschnitt, in dem Ihr Modal angezeigt werden soll.

Schritt 3: Konfigurieren Sie die abzuschließenden Einstellungen

Klicken Sie im Popup-Bereich auf das Symbol „Bearbeiten“, um zu den Bearbeitungsoptionen zu gelangen.

• Um den Schaltflächentext zu ändern, gehen Sie zu Inhalt > Umschaltknopf > Etikett Und bearbeiten

• Um es zu ändern Titel Und Untertitel gehe zu Inhalt > Header und ändern Sie die Optionen mit Ihrem benutzerdefinierten Text.

• Um es zu ändern Inhalt des Körpers, erweitern Sie den Inhaltsbereich und bearbeiten der Text zum Erstellen einer WordPress-Popup-Nachricht.

• Gehe zu Inhalt > Fußzeile > Schaltfläche > CTA und ändern Sie die CTA-Beschriftung und URL mit ElementsKit, einem benutzerdefinierten Popup-Builder.

• Klicken Sie abschließend auf Aktualisieren speichern.

Fertig. Klicken Sie nun auf die Vorschau-Schaltfläche, um die Ergebnisse anzuzeigen und zu prüfen, wie Ihr WordPress-Popup-Fenster aussieht:

Gut gemacht! Sie haben Ihr modales Elementor-Popup erstellt.

Zusätzliche Einstellungen für Modal

Schauen wir uns nun die zusätzlichen modalen Einstellungen an, die Sie anpassen können:

Layout:

Erweitern Sie die Layoutoption, um den Toggler-Typ, die Popup-Position und die Popup-Anzeigeoption zu ändern.

Toggler-Typ:

Sie müssen nicht unbedingt über ein Modal verfügen, das ausgelöst wird, wenn jemand auf eine Schaltfläche klickt. ElementsKit bietet Ihnen neben der Schaltfläche zwei weitere Optionen zur Auswahl

Bild: Sie können anstelle einer Schaltfläche ein beliebiges benutzerdefiniertes Bild in beliebiger Größe als Umschalter für Ihr Modal auswählen. Um ein benutzerdefiniertes Bild auszuwählen 

• Gehen Sie zu Inhalt > Toggler-Typ > Wählen Sie Bild
• Gehen Sie zu Toggler-Bild > Wählen Sie ein Bild, Bildgröße und Ausrichtung

Zeit: Sie können das Modal auch so einstellen, dass es nach einer bestimmten Zeit ohne Aktion des Benutzers ausgelöst wird. Zum Beispiel, um Ihr Modal so einzustellen, dass es nach 3 Sekunden erscheint

• Gehen Sie zu Inhalt > Toggler-Typ > Zeit
• Fügen Sie Zeit hinzu Nachher umschalten (in Sekunden)

Popup-Showtyp:

Sie haben zwei Optionen für den Popup-Showtyp: Modal und Slide.

Popup-Position: 

Sie können Ihr Popup an einer beliebigen Stelle im Fenster platzieren. Folgende Positionsoptionen stehen zur Auswahl:

• Oben links
• Oben in der Mitte
• Oben rechts
• Mitte links
• Center
• Mitte rechts
• Unten links
• Unten in der Mitte
• Unten rechts

Aufpoppen: 

Erweitern Sie die Popup-Option, um Folgendes auszuwählen Breite und Mindesthöhe. Hier haben Sie auch die Möglichkeit dazu anzeigen oder verbergen Die Schließen-Symbol, Kopf- und Fußzeile. Du kannst auch Passen Sie die horizontale und vertikale Position an und hinzufügen Animation ganz nach Ihrem Wunsch.

Überlagerung: 

Wenn Sie den Benutzer nicht zwingen möchten, auf Ihr Modal zu klicken, um es zu schließen, aktivieren Sie die Option Popup-OnClick-Overlay schließen Möglichkeit. Auf diese Weise kann der Benutzer auf eine beliebige Stelle im Fenster klicken, um das Modal zu schließen.

Schließen-Symbol: 

Hier können Sie die Position des Schließen-Symbols ändern. Sie können Popup oben rechts, Popup oben links, Fenster oben rechts und Fenster oben links einstellen. Sie können auch die vertikale und horizontale Position ändern. Darüber hinaus können Sie ein beliebiges Symbol aus der Bibliothek auswählen oder ein SVG-Bild als Symbol verwenden.

Header:

Neben der Änderung von Titel und Untertitel können Sie hier auch die Trennlinie ein- oder ausblenden.

Fusszeile:

Erweitern Sie die Fußzeilenoption, um die Beschriftung, Variante und Ausrichtung der Fußzeilenschaltflächen zu ändern. Sie können sie hier auch ausblenden, wenn Sie möchten. 

Das war’s! Sie können jetzt die modernen und ansprechenden Popups auf Ihrer Website verwenden.

Weitere Einzelheiten finden Sie in der Dokumentation von ElementsKit Popup-Modal-Widget für Elementor.

So fügen Sie benutzerdefiniertes Design in Elementor Modal mit dem ElementsKit-Popup-Builder hinzu

Jetzt wissen Sie, wie Sie Text, Position, Animation und vieles mehr ändern können, um Ihr modales Fenster in WordPress anzupassen. Aber es sieht immer noch ein bisschen langweilig aus, oder? Genau wie jedes andere modale Popup von WordPress Elementor.

Wenn Sie ein benutzerdefiniertes Bild, ein Video oder ein anderes Widget wie eine Seite in Ihr modales Fenster einfügen könnten, wäre das großartig. Mit ElementsKit können Sie Ihrem Modell jedes benutzerdefinierte Design hinzufügen.

Befolgen Sie die Schritte, um ganz einfach Ihr gewünschtes individuelles Design auf Modal zu erstellen:

• Gehen Sie zu Inhalt > Inhalt > Anmachen Vorlage aktivieren
• Klicken Sie auf die Modal-Schaltfläche und sobald das Modal geöffnet ist, klicken Sie auf Bearbeitungsoption um das zu öffnen Widget-Bereich

• Sobald der Widget-Bereich geöffnet ist, können Sie dies tun suchen für jedes Widget > Drag & Drop > aktualisieren Zu speichern.

Wenn Sie beispielsweise ein Video hinzufügen möchten, suchen Sie im Widget-Bereich nach dem Video und ziehen Sie es per Drag-and-Drop in Ihr Modell und aktualisieren Sie es. Jetzt sollte das Video im modalen Fenster erscheinen.

Verwenden Sie vorgefertigte ElementsKit-Abschnitte für schöne Modale

Sie haben keine Zeit, ein modales Popup-Design von Grund auf neu zu erstellen? Kein Problem. Der Popup-Builder von ElementsKit bietet viele integrierte Abschnitte, aus denen Sie ansprechende Modale erstellen können, um dem Betrachter Ihre Nachricht hervorzuheben.

Um integrierte Widgets von ElementsKit zu verwenden, führen Sie die folgenden Schritte aus:

• Klick auf das Bearbeitungsoption auf dem Modal  um das zu öffnen Widget-Bereich
• Klicken Sie auf die EK-Schaltfläche, um ein weiteres Widget-Fenster mit den vorgefertigten Abschnitten zu öffnen.

• Gehen Sie zu > Abschnitte > Wählen den Abschnitt, der Ihnen gefällt > Einfügen

• Nach dem Einfügen können Sie ändern das Bild, den Text oder die Hintergrundfarbe nach Ihren Wünschen und aktualisieren.

Und hier ist das Endergebnis!

ElementsKit bietet über 60 Widgets und über 500 fertige Abschnitte. Erfahren Sie mehr über ElementsKit und wie Sie sie nutzen können, um Ihre Website zu verbessern.

Fügen Sie Kontaktformular 7 in Modal mit ElementsKit hinzu

Wie ich bereits sagte, sind Modalitäten effektiv, um mehr Newsletter-Abonnements zu erhalten und Benutzerdaten zu sammeln. Aber dafür müssen Sie Ihrem Modal ein Kontaktformular hinzufügen, oder? 

Keine Panik, Sie benötigen kein weiteres WordPress-Popup-Plugin, um ein Kontaktformular in Ihr Popup-Fenster einzufügen. Das ElementsKit WordPress-Plugin ist ein All-in-One-Popup-Maker-Plugin.

Befolgen Sie die nachstehenden Anweisungen, um mit dem ElementsKit-Popup-Maker-Plugin das beliebte Kontaktformular 7 zu Ihrem Modal hinzuzufügen.

Bevor Sie diese Schritte ausführen, stellen Sie sicher, dass Sie erstellt haben Ein Kontaktformular auf Ihrer Website mit Kontaktformular 7, Elementor Page Builder und ElementsKit.

Sie können sich auch das Video-Tutorial unten ansehen, um ein Kontaktformular zu erstellen.

Lass uns anfangen.

• Gehe zu Inhalt > Inhalt > Anmachen Vorlage aktivieren
• Klick auf das Bearbeitungsoption um das zu öffnen Widget-Bereich
• Suchen Kontakt Formular, Drag & Drop Klicken Sie auf den Abschnitt, den Sie hinzufügen möchten.
• Expandieren die Style-Option unter Kontaktformular 7
• Wählen Sie aus vorgefertigt Form und aktualisieren.

Hier haben Sie ein modales Popup mit einem Kontaktformular, um Ihre E-Mail-Liste zu erweitern.

Wussten Sie, dass Sie ein benutzerdefiniertes Widget erstellen können, ohne über tiefgreifende Programmierkenntnisse zu verfügen? Sehen Sie sich an, wie man ein baut Mit ElementsKit können Sie ganz einfach ein benutzerdefiniertes Widget ohne Code erstellen.

Effektive Tipps zum Hinzufügen eines modalen WordPress-Elementor-Popups

Modale WordPress-Popups können die Benutzereinbindung erheblich verbessern, wichtige Nachrichten übermitteln und bestimmte Aktionen Ihrer Besucher auslösen. Hier sind die 7 effektive Tipps zur Implementierung wirkungsvoller modaler Popups auf Ihrer WordPress-Site.

1️⃣ Wählen Sie ein zuverlässiges Plugin

Wählen Sie ein gut gepflegtes modales WordPress-Plugin wie „Elementor“ oder „ElementsKit“, um das modale Fenster auf Ihrer Website zu erstellen.

2️⃣ Definieren Sie klare Ziele

Beschreiben Sie klar den Zweck Ihres modalen WordPress-Popups, sei es das Sammeln von E-Mails, die Bewerbung von Angeboten oder die Übermittlung wichtiger Informationen.

3️⃣ Das Timing ist der Schlüssel

Verwenden Sie Auslöser wie Zeitverzögerung, Scrolltiefe oder Exit-Absicht, um das Popup im richtigen Moment anzuzeigen. Dies trägt dazu bei, sofortige Unterbrechungen beim Laden der Seite zu vermeiden.

4️⃣ Mobile Reaktionsfähigkeit

Stellen Sie sicher, dass Ihr modales WordPress-Popup für Mobilgeräte geeignet ist, um auf verschiedenen Geräten ein positives Erlebnis zu bieten.

5️⃣Design für Benutzererfahrung

Entwerfen Sie prägnante, optisch ansprechende modale WordPress-Popups mit hochwertigen Inhalten. Fügen Sie eine leicht zugängliche Option zum Schließen des Popups für Benutzer hinzu, die sich nicht für den Inhalt interessieren.

6️⃣ A/B-Tests zur Optimierung

Implementieren Sie A/B-Tests, um Ihr Modal in WordPress zu verfeinern, indem Sie Variationen erstellen und die effektivsten Elemente für Ihr Publikum identifizieren.

7️⃣ Einhaltung der Datenschutzbestimmungen

Stellen Sie sicher, dass Ihr modales WordPress-Popup den Datenschutzbestimmungen entspricht, einschließlich der transparenten Kommunikation Ihrer Datenschutzrichtlinien und der Einholung einer ausdrücklichen Zustimmung zur Datenerfassung.

FAQs

Einpacken

Herzlichen Glückwunsch! Jetzt wissen Sie, wie Sie Elementor-Popup-Modals in WordPress erstellen können, indem Sie Elementor-Addon. Erstellen Sie Popups für Kontaktformulare und nehmen Sie mühelos beliebige Anpassungen an der WordPress-Site vor, indem Sie das einfache Popup-Maker-Plugin, ElementsKit Pro und den Elementor Page Builder verwenden.

Hören Sie hier nicht einfach auf. Experimentieren Sie weiter, auf wie viele Arten Sie das WordPress-Popup-Modal auf Ihrer Website verwenden können. Und wenn Sie Hilfe beim Erstellen von WordPress-Popups mit ElementsKit benötigen, hinterlassen Sie unten einen Kommentar.