Möchten Sie Ihrer Site ein WordPress-Login-Popup hinzufügen? Ein modales Anmelde-Popup ermöglicht es Ihren Benutzern, sich schnell bei Ihrer Website anzumelden, ohne die angezeigte Seite zu verlassen. Dies verbessert die Benutzererfahrung und das Engagement auf Ihrer Website. In diesem Artikel zeigen wir Ihnen Schritt für Schritt, wie Sie auf einfache Weise ein WordPress-Anmelde-Popup-Modal erstellen.
Warum einen WordPress-Anmelde-Popup-Modus erstellen?
Wenn Sie einen Online-Shop oder eine Mitgliedschaftswebsite betreiben oder Kurse online verkaufen, können sich Benutzer wahrscheinlich registrieren und auf Ihrer Website anmelden.
Wenn Benutzer auf den Anmeldelink klicken, werden sie normalerweise zur Standard-WordPress-Anmeldeseite oder zu einer anderen benutzerdefinierten Anmeldeseite auf ihrer Website weitergeleitet. Sobald sich Benutzer angemeldet haben, werden sie erneut auf eine andere Seite umgeleitet.
Über ein modales Anmelde-Popup können Sie das Anmeldeformular anzeigen, ohne Benutzer auf eine andere Seite zu senden. Sobald Sie angemeldet sind, können Sie Benutzer auf die gewünschte Seite umleiten.
Ein modales Anmelde-Popup ist schneller und verbessert die Benutzererfahrung auf Ihrer Website. Eine schnellere und reibungslosere Benutzererfahrung kann Ihre Verkäufe und Conversions steigern.
Lassen Sie uns einen Blick darauf werfen, wie Sie auf einfache Weise ein modales Anmelde-Popup in WordPress erstellen. Wir zeigen Ihnen zwei Möglichkeiten, und Sie können die auswählen, die Ihren Anforderungen am besten entspricht.
Methode 1. Erstellen Sie ein modales Anmelde-Popup mit der CSH-Anmeldung
Diese Methode ist einfacher und wird für die meisten Benutzer empfohlen.
Als erstes müssen Sie das CSH-Login-Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zum Installieren eines WordPress-Plugins.
Nach der Aktivierung müssen Sie zu gehen Modaler Login Seite in Ihrem WordPress-Administrationsbereich und wählen Sie einen Typ für das modale Anmeldeformular.
Nachdem Sie den modalen Anmeldefeldtyp ausgewählt haben, können Sie nach unten scrollen und Anmelde- / Abmeldeumleitungen für das Formular verwalten. Sie können Benutzern auch erlauben, ihre eigenen Passwörter zu generieren.
Dann müssen Sie nach unten scrollen Stile Abschnitt und wählen Sie Layout, Beschriftungen, Hintergrundfarbe, Schaltflächenfarbe, Linkfarbe und mehr.
Sie können auch Registrierungs-E-Mail, E-Mail-Betreff, Google reCaptcha und mehr hinzufügen. Mit diesem Plugin können Sie auch soziale Anmeldungen wie hinzufügen Facebook, Twitter und Google.
Speichern Sie unbedingt Ihre Ä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 Inhaltseditor hinzuzufügen.
Sie können auch eine modale Anmeldung in Ihrer WordPress-Seitenleiste hinzufügen. Geh einfach zu Aussehen »Widgets Ziehen Sie die CSH Login Widget in der Seitenleiste Ihrer Website.
Das modale CSH-Login kann auch in den Vorlagendateien Ihrer Website hinzugefügt werden. Sobald Sie es Ihrer Site hinzugefügt haben, besuchen Sie einfach Ihre WordPress-Site, um den modalen Login-Link in Aktion zu sehen.
Methode 2. Erstellen Sie mit WPForms und OptinMonster ein modales Anmelde-Popup
Für diese Methode benötigen Sie das WPForms-Plugin und OptinMontser. Wenn Sie diese beiden Plugins bereits haben, ist diese Methode die beste Lösung für Sie.
WPForms ist das beste Plugin für WordPress-Kontaktformulare. Sie benötigen mindestens Ihren Pro-Plan, um auf das Benutzerregistrierungs-Plugin zugreifen zu können.
OptinMonster ist die beste WordPress-Popup-Plugin- und Lead-Generierungssoftware auf dem Markt. Es hilft Ihnen, Website-Besucher in Abonnenten und Kunden umzuwandeln. Sie benötigen mindestens den Pro-Plan, um auf die in diesem Artikel verwendete MonsterLinks-Funktion zugreifen zu können.
Bereit? Lasst uns beginnen.
Verwenden von WPForms zum Erstellen eines Benutzeranmeldeformulars
Zuerst müssen Sie das WPForms-Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zum Installieren eines WordPress-Plugins.
Nach der Aktivierung müssen Sie zu gehen WPForms »Plugins Seite zum Installieren und Aktivieren der Plugin zur Benutzerregistrierung.
Nachdem Sie das Plugin aktiviert haben, müssen Sie zu gehen WPForms »Neu hinzufügen Seite, um das Benutzeranmeldeformular zu erstellen.
Sobald der WPForms-Generator gestartet ist, müssen Sie den vorgefertigten auswählen Benutzeranmeldeformular Modell.
Diese Anmeldeformularvorlage enthält die E-Mail- und Kennwortfelder, die ähnlich wie das Standard-Anmeldeformular für WordPress funktionieren. Sie können nach Bedarf weitere Felder von der linken Seite des Bildschirms ziehen und ablegen.
Dann klicken Sie auf Passwort Feld im Vorschaubereich, und es werden die Feldoptionen auf der linken Seite angezeigt. Sie können den folgenden Code in das Beschreibungsfeld von einfügen Passwort Feld, um Optionen wie Passwort vergessen und Benutzerregistrierung anzuzeigen.
Can't remember your password? Click here. Don't have an account? Register here.
Danach müssen Sie auf das klicken speichern Schaltfläche und klicken Sie dann auf die Einbetten Taste.
Ein Popup-Fenster mit dem Einbettungscode wird geöffnet. Sie sollten diesen Code kopieren und zur späteren Verwendung speichern.
Ihr Anmeldeformular ist fertig. Sie können jetzt das modale Popup erstellen.
Verwenden von OptinMonster zum Erstellen eines modalen Popups
Sie müssen zuerst das OptinMonster-Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zum Installieren eines WordPress-Plugins.
Nach der Aktivierung müssen Sie zu gehen OptinMonster im WordPress-Admin-Bereich und klicken Sie auf Neue Kampagne erstellen Taste.
Ihr OptinMonster-Dashboard wird auf einer neuen Webseite geöffnet.
Einmal drinnen, müssen Sie auswählen Lightbox-Popup-Fenster Als Kampagnentyp können Sie Ihr Anmeldeformular im Popup hinzufügen.
Dann müssen Sie die auswählen Segeltuch Kampagnenvorlage, bei der es sich um eine leere Vorlage handelt, mit der Sie benutzerdefinierte Codes und Shortcodes hinzufügen können.
Sie werden aufgefordert, Ihrem Leuchtkasten einen Namen hinzuzufügen und die Website auszuwählen, auf der Sie dieses Popup laden möchten.
Sobald Sie auf die klicken Baue mit dem Bauen Mit dieser Schaltfläche werden Sie zur Seite mit den OptinMonster-Kampagneneinstellungen weitergeleitet.
Von hier aus sollten Sie zu gehen Opt in Klicken Sie auf die Registerkarte und legen Sie die Breite und Höhe der Zeichenfläche fest. Fügen Sie den Einbettungscode aus dem Anmeldeformular hinzu Benutzerdefinierte Leinwand HTML Feld, Bildschirm- und Soundeffekte für modale Popups verwalten und vieles mehr.
Hinweis: Der Einbettungscode für das Anmeldeformular sollte der Code sein, den Sie nach dem Erstellen Ihres Anmeldeformulars im vorherigen Schritt kopiert haben.
Da Sie ein modales Anmelde-Popup erstellen, müssen Sie zur Registerkarte “Einstellungen” gehen und den Wert “0” auf “0” setzen Cookie-Dauer und Dauer des Erfolgs-Cookies. Das Formular wird allen Besuchern jedes Mal angezeigt, wenn sie auf Ihren Link klicken.
Dann sollten Sie die besuchen Regeln anzeigen Tab und erweitern MonsterLink um den Status auf aktiv zu ändern.
Stellen Sie sicher, dass Sie auf klicken speichern Schaltfläche in der oberen rechten Ecke und gehen Sie zu Zu posten Abschnitt, um den Status zu aktivieren.
Jetzt können Sie dieses modale Login-Popup zu Ihren WordPress-Seiten oder -Postings hinzufügen.
Modales Login in WordPress hinzufügen
Sie müssen zurück zu OptinMonster in Ihrem WordPress-Administrationsbereich, und es zeigt Ihnen die Liste der Kampagnen. Wenn Sie Ihre neu erstellte Kampagne für die modale Anmeldung nicht sehen, klicken Sie einfach auf Kampagnen aktualisieren Taste.
Als Nächstes müssen Sie die Einstellungen für die Kampagnenausgabe bearbeiten, um die Anmeldung auf Ihrer Website zu aktivieren und auszuwählen, wer das Popup für die modale Anmeldung sehen soll. Stellen Sie sicher, dass Sie auf klicken Einstellungen speichern Taste.
Danach müssen Sie zur Kampagnenübersichtsseite zurückkehren und den Slug kopieren, der unter der Kampagnen-Live-Option angezeigt wird. Dieser einzigartige Slug kann in Shortcodes und Code verwendet werden, um die modale Anmeldung in WordPress anzuzeigen.
Sie können dann eine neue WordPress-Seite erstellen oder eine vorhandene bearbeiten und diesen Code mit Ihrem einzigartigen Kampagnen-Slug hinzufügen.
Login / Register
Sie können den obigen Code auch in Ihre WordPress-Menüs, die Seitenleiste oder einen anderen Bereich Ihrer Website einfügen.
Stellen Sie sicher, dass Sie Ihre Änderungen auf der WordPress-Seite speichern und deren Website besuchen, um die modale Anmeldung in Aktion zu sehen.
Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie ein modales Login in WordPress erstellen. Sie können auch unsere vollständige Liste der besten Plugins für WordPress-Anmeldeseiten anzeigen und ganz einfach Ihre eigene Anmeldeseite erstellen.
Wenn dir dieser Artikel gefallen hat, abonniere unseren YouTube-Kanal, um WordPress-Tutorial-Videos anzusehen. Sie finden uns auch unter Twitter und Facebook.
