So erstellen Sie ein WordPress-Anmeldungs-Popup-Modal (Schritt für Schritt)

Möchten Sie ein WordPress-Login-Popup-Modal auf Ihrer Website hinzufügen? Mit einem modalen Login-Popup können sich Ihre Benutzer schnell bei Ihrer Website anmelden, ohne die von ihnen angezeigte Seite zu verlassen. Dies verbessert die Benutzererfahrung und das Engagement auf Ihrer Website. In diesem Artikel zeigen wir Ihnen, wie Sie auf einfache Weise ein WordPress-Login-Popup-Modul erstellen - Schritt für Schritt.

Warum ein WordPress Login-Popup-Modal erstellen??

Wenn Sie einen Online-Shop, eine Mitgliedschaftswebsite betreiben oder Online-Kurse verkaufen, gestatten Sie möglicherweise Benutzern, sich zu registrieren und sich bei Ihrer Website anzumelden.

Wenn Benutzer auf den Anmelde-Link klicken, werden sie normalerweise zur Standard-WordPress-Anmeldeseite oder einer anderen benutzerdefinierten Anmeldeseite Ihrer Website geleitet. Sobald Benutzer angemeldet sind, werden sie erneut auf eine andere Seite umgeleitet.

Mit einem modalen Login-Popup können Sie das Login-Formular anzeigen, ohne Benutzer auf eine andere Seite zu schicken. Sobald Sie angemeldet sind, können Sie Benutzer auf jede gewünschte Seite umleiten.

Ein modales Login-Popup ist schneller und verbessert die Benutzererfahrung auf Ihrer Website. Eine schnellere und ausgefeiltere Benutzererfahrung kann Ihre Umsätze und Konversionen steigern.

Lassen Sie uns einen Blick darauf werfen, wie Sie auf einfache Weise ein modales Login-Popup in WordPress erstellen. Wir zeigen Ihnen zwei Methoden und Sie können die für Sie am besten geeignete auswählen.

Methode 1. Erstellen Sie ein modales Login-Popup mit CSH-Login

Diese Methode ist einfacher und wird für die meisten Benutzer empfohlen.

Zuerst müssen Sie das CSH Login-Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserer schrittweisen Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung müssen Sie zu gehen Modal Login Seite in Ihrem WordPress-Adminbereich und wählen Sie einen Typ für das modale Anmeldeformular.

Nach Auswahl des modalen Anmeldefeldtyps können Sie nach unten scrollen und Anmelde- / Abmelde-Weiterleitungen für das Formular verwalten. Sie können Benutzern auch erlauben, eigene Passwörter zu generieren.

Als Nächstes müssen Sie zum Bildlauf nach unten scrollen Styles Abschnitt und wählen Sie Layout, Anzeigelabels, Hintergrundfarbe, Schaltflächenfarbe, Verknüpfungsfarbe und mehr.

Darüber hinaus können Sie Registrierungs-E-Mail, Betreff der E-Mail hinzufügen, Google reCaptcha verwenden und vieles mehr. Mit diesem Plugin können Sie auch soziale Anmeldungen wie Facebook, Twitter und Google hinzufügen.

Speichern Sie die Änderungen und kopieren Sie den Shortcode oben auf dieser Seite. Sie müssen eine neue Seite in WordPress erstellen oder eine vorhandene bearbeiten, um den Shortcode im Inhalts-Editor hinzuzufügen.

Sie können das modale Login auch in Ihre WordPress-Seitenleiste einfügen. Einfach auf gehen Aussehen »Widgets per Drag & Drop ziehen CSH-Login Widget in der Seitenleiste Ihrer Site.

Die modulare CSH-Anmeldung kann auch in Ihren Websitevorlagendateien hinzugefügt werden. Wenn Sie es auf Ihrer Site hinzugefügt haben, besuchen Sie einfach Ihre WordPress-Site, um den modalen Login-Link in Aktion zu sehen.

Methode 2. Erstellen Sie ein modales Login-Popup mit WPForms und OptinMonster

Für diese Methode benötigen Sie das WPForms-Plugin und OptinMontser. Wenn Sie bereits über diese beiden Plugins verfügen, ist diese Methode die bessere Lösung für Sie.

WPForms ist das beste WordPress-Kontaktformular-Plugin. Sie benötigen mindestens ihren Pro-Plan, um auf das Addon für die Benutzerregistrierung zuzugreifen.

OptinMonster ist die beste Software zur Leadgenerierung auf dem Markt. Es hilft Ihnen, Website-Besucher in Abonnenten und Kunden zu konvertieren. Sie benötigen mindestens den Pro-Plan, um auf die in diesem Artikel verwendete MonsterLinks-Funktion zuzugreifen.

Bereit? Lass uns anfangen.

Verwenden von WPForms zum Erstellen eines Benutzeranmeldeformulars

Zunächst müssen Sie das WPForms-Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserer schrittweisen Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung müssen Sie zu gehen WPForms »Addons zu installieren und zu aktivieren Benutzerregistrierungs-Addon.

Nachdem Sie das Addon aktiviert haben, müssen Sie zu gehen WPForms »Neues hinzufügen Seite, um das Benutzeranmeldeformular zu erstellen.

Nachdem der WPForms-Builder gestartet wurde, müssen Sie den vorgefertigten auswählen Formular für die Benutzeranmeldung Vorlage.

Diese Anmeldeformularvorlage enthält die E-Mail- und Kennwortfelder, die ähnlich wie das standardmäßige WordPress-Anmeldeformular funktionieren. Sie können bei Bedarf zusätzliche Felder per Drag & Drop von der linken Seite des Bildschirms ziehen.

Klicken Sie anschließend auf Passwort Feld im Vorschaubereich, und die Feldoptionen werden auf der linken Seite angezeigt. Sie können den unten angegebenen Code in das Beschreibungsfeld von einfügen Passwort Feld, um Optionen anzuzeigen, wie Passwort vergessen und Benutzerregistrierung.

 Kann mich nicht an dein Passwort erinnern? Klick hier. Ich habe noch kein Konto Hier registrieren. 

Danach müssen Sie auf die Schaltfläche klicken sparen und dann auf die Einbetten Taste.

Ein Popup-Fenster mit dem Einbettungscode wird geöffnet. Sie müssen diesen Code kopieren und speichern, um ihn später verwenden zu können.

Ihr Anmeldeformular ist fertig. Jetzt können Sie das modale Popup-Fenster erstellen.

Verwenden von OptinMonster zum Erstellen eines modalen Popup

Zuerst müssen Sie das OptinMonster-Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserer schrittweisen Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung müssen Sie zu gehen OptinMonster im WordPress-Adminbereich und klicken Sie auf Neue Kampagne erstellen Taste.

Ihr OptinMonster-Dashboard wird auf einer neuen Webseite geöffnet.

Sobald Sie sich im Inneren befinden, müssen Sie auswählen Lightbox-Popup Als Kampagnentyp können Sie Ihr Anmeldeformular im Popup-Fenster hinzufügen.

Als nächstes müssen Sie das auswählen Segeltuch Kampagnenvorlage, eine leere Vorlage, mit der Sie benutzerdefinierten Code und Shortcodes hinzufügen können.

Sie werden aufgefordert, der Lightbox einen Namen hinzuzufügen und die Website auszuwählen, auf die Sie dieses Popup laden möchten.

Sobald Sie auf die Schaltfläche klicken Beginnen Sie mit dem Aufbau Wenn Sie auf die Schaltfläche klicken, werden Sie zur Seite für die Einrichtung der OptinMonster-Kampagne weitergeleitet.

Von hier müssen Sie zu gehen Optin Tab und legen Sie Breite und Höhe der Leinwand fest, fügen Sie Code zum Einbetten von Anmeldeformularen hinzu Benutzerdefiniertes Canvas-HTML Verwalten Sie Anzeige- und Soundeffekte für das modale Popup und vieles mehr.

Hinweis: Der Code zum Einbetten des Anmeldeformulars sollte der Code sein, den Sie nach dem Erstellen des Anmeldeformulars im vorherigen Schritt kopiert haben.

Da Sie ein modales Login-Popup erstellen, müssen Sie zur Registerkarte "Setup" gehen und den Wert "0" für festlegen Cookie-Dauer und Dauer des Cookie-Erfolgs. Das Formular wird allen Besuchern angezeigt, wenn sie auf Ihren Link klicken.

Als nächstes müssen Sie die besuchen Regeln anzeigen Tab und erweitern MonsterLink um den Status in aktiv zu ändern.

Stellen Sie sicher, dass Sie auf klicken sparen Schaltfläche in der oberen rechten Ecke und gehen Sie zu Veröffentlichen Abschnitt, um den Status zu aktivieren.

Jetzt können Sie dieses modale Login-Popup in Ihre WordPress-Seiten oder -Postings einfügen.

Modales Login in WordPress hinzufügen

Sie müssen zurück zu OptinMonster in Ihrem WordPress-Adminbereich, und es wird Ihnen die Liste der Kampagnen angezeigt. Wenn Ihre kürzlich erstellte Kampagne nicht für die modale Anmeldung angezeigt wird, klicken Sie einfach auf Kampagnen aktualisieren Taste.

Als Nächstes müssen Sie die Kampagnenausgabeeinstellungen bearbeiten, um die Option für Ihre Website zu aktivieren und auszuwählen, wer das modale Login-Popup sehen soll. Stellen Sie sicher, dass Sie auf klicken Einstellungen speichern Taste.

Danach müssen Sie zur Übersichtsseite der Kampagnen zurückkehren und den Slug kopieren, der unter der Live-Option der Kampagne sichtbar ist. Dieser einzigartige Slug kann in Shortcodes und Code verwendet werden, um die modale Anmeldung in WordPress anzuzeigen.

Als Nächstes können Sie eine neue WordPress-Seite erstellen oder eine vorhandene bearbeiten und diesen Code mit Ihrem eindeutigen Kampagnen-Slug hinzufügen.

 Anmeldung Registrieren 

Sie können den obigen Code auch in Ihren WordPress-Menüs, in der Seitenleiste oder in einem anderen Bereich Ihrer Website hinzufügen.

Speichern Sie die Änderungen auf der WordPress-Seite und besuchen Sie Ihre Website, um die modale Anmeldung in Aktion zu sehen.

Wir hoffen, dass Sie mit diesem Artikel erfahren haben, wie Sie ein modales Login in WordPress erstellen. Möglicherweise möchten Sie auch unsere vollständige Liste der besten Plugins für die WordPress-Anmeldeseite anzeigen und ganz einfach Ihre eigene Anmeldeseite erstellen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unsere Video-Tutorials für unseren YouTube-Kanal für WordPress. Sie finden uns auch auf Twitter und Facebook.