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

Das Hinzufügen eines modales WordPress-Login-Popups zu Ihrer Website kann die Anmeldung für Ihre Benutzer reibungsloser gestalten. Es ermöglicht Besuchern, sich anzumelden, ohne ihre aktuelle Seite zu verlassen, was ihre Gesamterfahrung verbessert.

Wir haben mehrere erfolgreiche Websites gesehen, die diese Funktion nutzen, um Benutzer zu binden und die Interaktion auf der Website zu verbessern. Es ist eine einfache, aber effektive Möglichkeit, den Anmeldevorgang zu optimieren.

In diesem Artikel führen wir Sie durch die Schritte zur Erstellung eines WordPress-Login-Popup-Modals.

Warum ein WordPress-Login-Popup-Modal erstellen?

Wenn Sie einen Online-Shop betreiben, Online-Kurse verkaufen oder eine Mitgliederseite haben, erlauben Sie wahrscheinlich Benutzern, sich auf Ihrer Website zu registrieren und anzumelden.

Normalerweise werden Benutzer, wenn sie auf den Login-Link klicken, zur Standard-WordPress-Login-Seite oder zu einer anderen benutzerdefinierten Login-Seite auf Ihrer Website weitergeleitet. Sobald sich Benutzer angemeldet haben, werden sie erneut auf eine andere Seite weitergeleitet.

Leider kann dies für Nutzer unbequem sein.

Ein modales Login-Popup ermöglicht es Ihnen, das Formular anzuzeigen, ohne Benutzer auf eine andere Seite zu senden. Nach dem Einloggen können Sie Benutzer weiterleiten zu jeder beliebigen Seite. Da der Prozess schneller und polierter ist, kann er dazu beitragen, die Benutzererfahrung zu verbessern und Ihre Konversionen zu steigern.

In diesem Sinne zeigen wir Ihnen, wie Sie mit einem kostenlosen Plugin und Premium-Plugins ganz einfach ein modales Anmelde-Popup in WordPress erstellen. Sie können einfach auf die unten stehenden Links klicken, um zu Ihrer bevorzugten Methode zu springen:

• Methode 1: Erstellen Sie ein modales Login-Popup mit Login/Signup Popup
• Methode 2: Erstellen eines Modal-Login-Popups mit WPForms & OptinMonster
• Bonus-Tipp: Benutzerpfade in WordPress-Lead-Formularen verfolgen

Bereit? Tauchen wir ein!

Methode 1: Erstellen Sie ein modales Login-Popup mit Login/Signup Popup

Für die erste Methode verwenden wir das kostenlose Plugin Login/Signup Popup, mit dem sich Ihre Benutzer einfach auf Ihrer Website anmelden oder registrieren können.

Zuerst müssen Sie das Login/Signup Popup-Plugin installieren und aktivieren. Wenn Sie Hilfe benötigen, lesen Sie bitte unsere Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung können Sie im WordPress-Admin-Panel zu Login/Signup Popup » Einstellungen navigieren.

Unter den 'Allgemeinen' Einstellungen können Sie die Registrierung, die automatische Anmeldung des Benutzers oder die Anmeldung aktivieren und Passwortzurücksetzungen verwalten.

Außerdem können Sie mit dem Plugin die WordPress-Benutzerrolle auswählen, die neu registrierten Benutzern zugewiesen wird. Standardmäßig wird die Rolle 'Abonnent' zugewiesen.

Wenn Sie nach unten scrollen, sehen Sie weitere Einstellungen. Sie können beispielsweise eine Weiterleitungs-URL hinzufügen, wenn sich ein Benutzer anmeldet oder registriert.

Vergessen Sie nicht, auf die Schaltfläche „Speichern“ zu klicken, wenn Sie Änderungen vorgenommen haben.

Als Nächstes können Sie zum Tab „Stil“ wechseln und Ihr Login-/Registrierungs-Popup-Modal bearbeiten. Das Plugin ermöglicht es Ihnen, die Position, Breite, Höhe, Hintergrundfarbe, Textfarbe und mehr des Popups zu ändern.

Danach können Sie auch die Formularfelder im Popup-Modal anpassen.

Gehen Sie einfach in Ihrem WordPress-Dashboard zu Login/Signup Popup » Felder. Hier können Sie verschiedene Formularfelder aktivieren, ihre Bezeichnungen bearbeiten, sie als Pflichtfelder festlegen und mehr.

Außerdem gibt es die Möglichkeit, weitere Felder zu Ihrem Login-/Signup-Popup hinzuzufügen.

Klicken Sie einfach oben auf die Schaltfläche „+ Feld hinzufügen“ und wählen Sie zusätzliche Formularfelder aus, die Sie Ihrem Anmelde-Modal-Popup hinzufügen möchten.

Nachdem Sie die Formularfelder angepasst haben, können Sie nun das modale Login-Popup zu Ihrer Website hinzufügen. Das Plugin bietet verschiedene Möglichkeiten, das Popup zu Ihrer Website hinzuzufügen.

1. Login-Popup-Modal zu Menüs hinzufügen

Zuerst können Sie in Ihrem WordPress-Dashboard zu Darstellung » Menüs gehen.

Danach sehen Sie die Menüpunkte 'Login/Signup Popup'. Wählen Sie einfach die Elemente aus, die Sie anzeigen möchten, und klicken Sie auf die Schaltfläche 'Zum Menü hinzufügen'.

Weitere Details finden Sie in unserem Leitfaden zum Hinzufügen eines Navigationsmenüs in WordPress.

2. Login-Popup-Modal als Ankerlinks hinzufügen

Als Nächstes können Sie #login oder #register am Ende Ihrer Website-URL hinzufügen und das Anmelde-Popup als internen Link platzieren.

Zum Beispiel könnte Ihre URL so aussehen:

<a href="https://www.myawesomesite.com/#login">Login</a>

Dazu können Sie einen Beitrag oder eine Seite bearbeiten.

Sobald Sie sich im Content-Editor befinden, klicken Sie auf die 3 Punkte und wählen Sie die Option 'Als HTML bearbeiten'.

Danach können Sie den internen Link zum Ankertext des Logins hinzufügen.

Sie können mehr erfahren, indem Sie unserem Leitfaden zum Thema Hinzufügen von Ankerlinks in WordPress folgen.

3. Kurzcodes zum Hinzufügen eines Anmelde-Popup-Modals verwenden

Eine weitere Möglichkeit, das Login-/Signup-Popup hinzuzufügen, ist die Verwendung von Shortcodes.

Sie können einfach den Kurzcode [xoo_el_action] irgendwo auf Ihrer Website eingeben, um einen Link/eine Schaltfläche zum Öffnen des Popups zu erstellen.

Sie können beispielsweise zu Darstellung » Widgets navigieren und einen Shortcode-Widget-Block hinzufügen, um das Anmelde-Popup in der Seitenleiste Ihrer Website anzuzeigen.

Wenn Sie fertig sind, klicken Sie einfach auf die Schaltfläche „Aktualisieren“.

Jetzt können Sie Ihre Website besuchen, um das Anmelde-Popup in Aktion zu sehen.

Methode 2: Erstellen eines Modal-Login-Popups mit WPForms & OptinMonster

Diese Methode ist großartig für diejenigen, die mehr Kontrolle über das Design und Verhalten ihres Login-Popups wünschen.

Die Verwendung von WPForms und OptinMonster zusammen bietet Ihnen leistungsstarke Designoptionen, erweiterte Anzeigeregeln (wie das Anzeigen des Popups, nachdem ein Benutzer auf einen bestimmten Link klickt) und eine bessere Integration mit E-Mail-Marketingdiensten.

WPForms ist das beste WordPress-Kontaktformular-Plugin, und Sie benötigen mindestens deren Pro-Plan, um auf das 'User Registration'-Addon zugreifen zu können.

OptinMonster ist das beste WordPress-Popup-Plugin auf dem Markt. Es hilft Ihnen, Website-Besucher in Abonnenten und Kunden zu verwandeln.

Bei WPBeginner haben wir es mehrmals verwendet, um interaktive Popups zu erstellen, und hatten eine ausgezeichnete Erfahrung. Weitere Details finden Sie in unserem vollständigen OptinMonster-Testbericht.

Beachten Sie, dass Sie mindestens den Pro-Plan benötigen, um auf die MonsterLinks-Funktion des Tools zugreifen zu können, die wir in diesem Artikel vorstellen.

Erstellen eines Benutzer-Login-Formulars mit WPForms

Installieren und aktivieren Sie zunächst das WPForms-Plugin. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung müssen Sie von Ihrem WordPress-Dashboard aus zu WPForms » Einstellungen navigieren und die Lizenz eingeben.

Den Schlüssel finden Sie in Ihrem WPForms-Konto.

Als Nächstes gehen wir zu WPForms » Addons, um das 'User Registration Addon' zu installieren und zu aktivieren.

Nach der Aktivierung des Add-ons gehen Sie zu WPForms » Neu erstellen und erstellen ein neues Formular.

Auf dem nächsten Bildschirm müssen Sie zuerst Ihrem Formular einen Namen geben.

Dann wählen Sie eine vordefinierte Formularvorlage aus der Vorlagengalerie aus. Sie können die Suchleiste verwenden, um die Vorlage „Benutzeranmeldeformular“ einfach zu finden.

Sobald Sie es gefunden haben, können Sie auf die Schaltfläche „Vorlage verwenden“ klicken.

Diese Anmeldeformularvorlage verfügt über E-Mail- und Passwortfelder, die ähnlich wie das Standard-WordPress-Anmeldeformular funktionieren.

Sie können bei Bedarf beliebige zusätzliche Felder von der linken Seite des Bildschirms per Drag & Drop ziehen.

Als Nächstes können Sie auf das Feld 'Passwort' klicken, und die Feldoptionen werden auf der linken Seite angezeigt.

Sie können den unten angegebenen Code in das Beschreibungsfeld des Feldes 'Passwort' einfügen, um Optionen wie 'Passwort vergessen' und 'Benutzerregistrierung' anzuzeigen.

Can't remember your password? <a href="{url_lost_password}">Click here</a>. Don't have an account? <a href="{url_register}">Register here</a>.

Danach müssen Sie auf die Schaltfläche „Speichern“ klicken, um Ihre Änderungen zu speichern, und Sie können das Formular veröffentlichen.

Um zu beginnen, können Sie einfach auf die Schaltfläche „Embed“ klicken.

Ein Popup-Fenster wird mit Optionen zum Hinzufügen Ihres Login-Formulars geöffnet.

Wählen Sie die Option 'Kurzcode verwenden'. Sie wird als Link im Fenster angezeigt, nicht als Schaltfläche.

Sie sollten nun einen Einbettungscode für Ihr Formular sehen.

Hier möchten Sie den Shortcode kopieren und für die spätere Verwendung speichern.

Erstellen eines Modal-Popups mit OptinMonster

An diesem Punkt ist Ihr Anmeldeformular fertig. Der nächste Schritt ist die Erstellung des Modal-Popups mit OptinMonster.

Besuchen Sie zunächst die OptinMonster-Website und melden Sie sich für ein Konto an.

Als Nächstes müssen Sie das OptinMonster Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zum Installieren eines WordPress-Plugins.

Das Plugin fungiert als Verbindung zwischen Ihrer WordPress-Site und OptinMonster.

Nach der Aktivierung sollten Sie den Willkommensbildschirm sehen. Klicken Sie auf die Schaltfläche „Bestehendes Konto verbinden“.

Ein neues Fenster wird nun geöffnet.

Klicken Sie einfach auf die Schaltfläche „Connect to WordPress“.

Sobald Sie verbunden sind, können Sie Ihr modales Popup erstellen.

Gehen Sie einfach im WordPress-Adminbereich zu OptinMonster und klicken Sie auf die Schaltfläche „Erstellen Sie Ihre erste Kampagne“.

Auf dem nächsten Bildschirm wählen Sie eine Kampagne und eine Vorlage aus.

Da wir ein Pop-up-Modal erstellen, wählen wir „Popup“ als Kampagnentyp aus.

Was die Vorlagen betrifft, bietet OptinMonster viele vordefinierte Vorlagen, sodass Sie eine bei Bedarf schnell anpassen können.

Sobald Sie eine Vorlage ausgewählt haben, öffnet sich ein Popup-Fenster. Sie werden aufgefordert, Ihrer Kampagne einen Namen zu geben.

Nach Eingabe eines Namens können Sie auf die Schaltfläche „Start Building“ klicken.

Danach werden Sie zum OptinMonster-Kampagnen-Builder weitergeleitet.

Sie können dem Template verschiedene Blöcke aus dem Menü auf der linken Seite hinzufügen. Fügen Sie also den WPForms-Block hinzu.

Danach sollten Sie die WPForms-Blockoptionen im Menü auf der linken Seite sehen.

Sie können das gerade erstellte Login-Formular aus dem Dropdown-Menü „Formularauswahl“ auswählen.

Wenn Sie Ihr Formular nicht sehen, wählen Sie einfach die Option „Shortcode manuell hinzufügen“ und geben Sie den Shortcode ein, den Sie zuvor beim Erstellen des Formulars in WPForms kopiert haben.

Machen Sie sich keine Sorgen, wenn Sie Ihre Formular im Kampagnen-Builder nicht in der Vorschau sehen können. Das Formular wird angezeigt, wenn Sie die Kampagne veröffentlichen.

Als Nächstes können Sie zum Tab 'Anzeigeregeln' wechseln. OptinMonster bietet leistungsstarke Targeting-Optionen.

Von hier aus möchten Sie die Anzeigeregel „MonsterLink™“ (Bei Klick) auswählen.

Nach der Auswahl der Option sollten Sie MonsterLink als Regel für die Anzeige sehen.

Klicken Sie auf die Schaltfläche 'MonsterLink-Code kopieren' und bewahren Sie den Link sicher auf. Sie werden ihn später benötigen.

Jetzt sind Sie bereit, die Kampagne live zu schalten.

Gehen Sie einfach zum Tab 'Veröffentlichen' oben im Kampagnen-Builder. Von hier aus können Sie den 'Veröffentlichungsstatus' auf 'Veröffentlichen' setzen.

Wenn Sie das getan haben, vergessen Sie nicht, oben rechts auf die Schaltfläche „Speichern“ zu klicken, um Ihre Änderungen zu speichern.

Hinzufügen eines Modal-Logins in WordPress

Jetzt können Sie eine neue WordPress-Seite erstellen oder eine vorhandene bearbeiten.

Sobald Sie sich im Content-Editor befinden, können Sie auf die Schaltfläche „+“ klicken und einen Block „Benutzerdefinierter HTML-Code“ hinzufügen.

Danach müssen Sie den MonsterLink in den benutzerdefinierten HTML-Block einfügen. Er sollte ungefähr so aussehen:

<a href="https://app.monstercampaigns.com/c/pimhy1fgvnqqqtormzmw/" target="_blank" rel="noopener noreferrer">log in or register</a>

Standardmäßig lautet der Linktext in Ihrem MonsterLink-Code 'Jetzt abonnieren', da er häufig für E-Mail-Opt-ins verwendet wird.

Hier ist ein Beispiel für den Standardcode:

<a href="https://app.monstercampaigns.com/c/pimhy1fgvnqqqtormzmw/" target="_blank" rel="noopener noreferrer">Subscribe Now</a>

Da dies ein Login-Formular ist, möchten Sie diesen Text ändern. Für dieses Tutorial haben wir ihn in 'anmelden oder registrieren' geändert, wie Sie im folgenden Code-Snippet sehen können.

<a href="https://app.monstercampaigns.com/c/pimhy1fgvnqqqtormzmw/" target="_blank" rel="noopener noreferrer">log in or register</a>

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

Stellen Sie einfach sicher, dass Sie die Änderungen an der WordPress-Seite speichern und Ihre Website besuchen, um das modale Login in Aktion zu sehen.

Bonus-Tipp: Benutzerpfade in WordPress-Lead-Formularen verfolgen

Jetzt, da Sie gelernt haben, wie man ein Anmelde-Popup-Modal in WordPress erstellt, schauen wir uns an, wie man Benutzerpfade für Ihre WordPress-Formulare verfolgt.

Dies kann besonders hilfreich für Ihr Anmeldeformular sein, da es aufzeigen kann, welche Inhalte Nutzer ansehen, kurz bevor sie sich entscheiden, sich anzumelden oder zu registrieren. Diese Informationen können Ihnen helfen, die Navigation und das Nutzererlebnis Ihrer Website zu verbessern.

Zu wissen, was Nutzer dazu motiviert, Formulare auszufüllen, ermöglicht es Ihnen, diesen Prozess zu wiederholen, um mehr Leads zu generieren und Ihr Geschäft auszubauen. Während Google Analytics einige Nutzeraktivitäten anzeigen kann, verknüpft es das Verhalten nicht direkt mit dem spezifischen Nutzer, der das Formular eingereicht hat.

Hier kommt WPForms ins Spiel. Es ist ein beliebtes Formular-Builder-Plugin, das ein „User Journey“-Addon enthält, mit dem Sie sehen können, woher Benutzer kamen, welchen Weg sie genommen haben und wie viel Zeit sie auf jeder Seite verbracht haben, bevor sie ein Formular eingereicht haben.

Wenn Sie mehr erfahren möchten, können Sie sich gerne auf unsere Anleitung zur Verfolgung der Benutzerreise auf WordPress-Lead-Formularen beziehen.

Häufig gestellte Fragen (FAQs)

Hier sind einige häufig gestellte Fragen unserer Leser zum Hinzufügen eines Login-Popup-Modals in WordPress:

Kann ich das Design meines WordPress-Login-Popups anpassen?

Ja, absolut. Beide von uns behandelten Methoden bieten Anpassungsoptionen, um sie an das Branding Ihrer Website anzupassen. Sie können normalerweise Farben, Schriftarten, Größen ändern und Ihr eigenes Logo hinzufügen, um ein nahtloses Erscheinungsbild zu erzielen.

Funktioniert ein Login-Popup-Modal auf Mobilgeräten?

Ja. Moderne Popup-Plugins wie OptinMonster sind vollständig responsiv. Das bedeutet, dass sich Ihr Anmelde-Modal automatisch anpasst, um auf Desktops, Tablets und Smartphones gut auszusehen.

Verlangsamen Login-Popups eine Website?

Wenn Sie gut codierte und optimierte Plugins wie WPForms und OptinMonster verwenden, sollte dies keine spürbaren Auswirkungen auf die Leistung Ihrer Website haben. Diese Tools sind darauf ausgelegt, leichtgewichtig zu sein und effizient zu laden.

Kann ich Social-Login-Buttons zu meinem Popup hinzufügen?

Einige Plugins bieten die Social-Login-Funktionalität als integrierte oder Premium-Funktion an. Zum Beispiel unterstützt die Pro-Version des Login/Signup Popup-Plugins Social Logins. Dies kann es Benutzern noch einfacher machen, sich anzumelden.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie ein Login-Popup-Modal in WordPress erstellen. Sie können auch unsere vollständige Liste der besten WordPress-Login-Seiten-Plugins und unseren Leitfaden zum Thema Weiterleitung von Benutzern nach erfolgreichem Login in WordPress. durchsehen.

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