Wpmet Turns 8! Up to
Wussten Sie, dass eine aktuelle Studie zu 2 billion modal popups had a 9.28% conversion rate among the 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.
Do you also want to add WP modal popups to your website and leverage the benefits it has to offer?
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
What are modal popup plugins for WordPress?
Modal popup plugins for WordPress are tools that let you display interactive popups that appear over your website content and require user action before continuing. Popular solutions include ElementsKit and Elementor, which allow you to create customizable, conversion-focused popups without coding.
How to add a modal popup in WordPress website
Step 1: Install and activate Elementor and ElementsKit on your website
Step 2: Activate the Popup Modal feature from the Widgets under ElementsKit
Step 3: Drag and drop the Popup Modal widget inside the Elementor editor
Step 4: Edit text, layout, triggers, animation, and styling
Step 5: Set triggers like click, delay, or scroll and adjust positioning
Step 6: Test responsiveness and publish the popup live
Beispiel
An eCommerce store can use ElementsKit to trigger a discount popup after 5 seconds, encouraging visitors to subscribe and increasing conversions.
Zusammenfassung
Modal popups are powerful conversion tools that capture user attention and drive actions like signups and purchases. With the right setup and timing, they improve engagement while maintaining a smooth user experience.
Was ist ein modales Popup?
A modal popup is a window with additional content that appears at the top of your website without user redirection to another page.
Modal popups are very common and it’s highly unlikely that you haven’t come across one. Let’s have a look at the definition of the modal popup according to HubSpot:
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.
But being a business owner, you need to look at a popup differently. Because, believe it or not these annoying popups work like wonder. Popup modals are proven to be extremely successful especially in the lead collection.
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
Modals are highly effective whenever you need website visitors to take some action or notice an important message. Some of the common uses of a modal window in web design include:
- 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
- Display media like image gallery (product) or video etc.
- Für mehrstufige Formulare for a better user experience.
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:
- Elementor (Freie Version)
- 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.
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
Sie können ein modales WordPress-Popup ohne Plugin erstellen, indem Sie benutzerdefinierten Code oder Themes verwenden, die modale Funktionalität unterstützen. Allerdings vereinfacht die Verwendung eines modalen Popup-WordPress-Plugins, z. B. ElementsKit, den Prozess und bietet zusätzliche Funktionen.
Sie sollten die Verwendung modaler Popups in Situationen vermeiden, in denen sie das Benutzererlebnis stören könnten, z. B. auf Mobilgeräten mit kleinen Bildschirmen oder bei kritischen Benutzerinteraktionen wie Checkout-Vorgängen.
Modal popups themselves don’t directly impact SEO, but their implementation can affect user experience and search rankings. So, you should ensure that popups are not intrusiveand designed following Google’s guidelines for interstitials to avoid negative SEO implications.
ElementsKit wird als leistungsstarkes und funktionsreiches modales WordPress-Popup-Plugin empfohlen. Es bietet eine Reihe von Anpassungsoptionen, Vorlagen und Kompatibilität mit verschiedenen Seitenerstellern, was es zu einer beliebten Wahl unter WordPress-Benutzern macht.
Yes, it is possible. And, the easiest way to create a popup modal window in WordPress is using a plugin like ElementsKit. It comes with a Popup Modal widget that lets you add custom modals in a drag-and-drop interface.
Yes, you can add a modal popup to header by using a Popup Modal widget of ElementsKit. Simply, drag-and-drop the widget to header section in Elementor, no coding skills required.
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.
Schreibe einen Kommentar