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?

Sie sollten ein Login-Popup-Modal erstellen, da es das Einloggen für Ihre Benutzer schneller und reibungsloser macht, ohne sie auf eine separate Seite zu leiten.

Auf den meisten Websites werden Benutzer, wenn sie auf den Anmelde-Link klicken, zur Standard-WordPress-Anmeldeseite oder zu einer benutzerdefinierten Anmeldeseite weitergeleitet. Nach der Anmeldung werden sie erneut weitergeleitet.

Dieses Hin und Her kann sich langsam anfühlen und die Benutzererfahrung unterbrechen. Ein modales Login-Popup löst dieses Problem. Es öffnet das Login-Formular in einem kleinen Fenster auf derselben Seite.

Benutzer können sich sofort anmelden, und Sie können sie nach der Anmeldung überallhin weiterleiten. Der Prozess wirkt schneller und professioneller, was die Benutzererfahrung verbessern und sogar die Konversionsraten erhöhen kann.

In diesem Sinne zeigen wir Ihnen, wie Sie ganz einfach ein modales Login-Popup in WordPress mit einem kostenlosen Plugin und Premium-Tools erstellen können. Sie können zu der Methode springen, die für Sie am besten funktioniert:

Bereit? Tauchen wir ein!

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

Für die erste Methode verwenden wir das Plugin Login/Signup Popup, ein kostenloses Plugin, 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 aktivieren, Benutzer nach der Anmeldung automatisch einloggen und Passwort-Resets verwalten.

Darüber hinaus können Sie mit dem Plugin auch 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 Anmelde-/Registrierungs-Popup-Modal bearbeiten. Das Plugin ermöglicht es Ihnen, die Popup-Position, Breite, Höhe, Hintergrundfarbe, Textfarbe und mehr 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.

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 unserer Anleitung zum Hinzufügen eines Navigationsmenüs in WordPress.

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.

Um beispielsweise einen Anmelde-Link zu erstellen, würden Sie HTML wie diesen verwenden:

<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 unserer Anleitung zum Hinzufügen von Ankerlinks in WordPress folgen.

Shortcodes zur Einbindung des Login-Popup-Modals verwenden

Eine weitere Möglichkeit, das Anmelde-/Registrierungs-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 zum Beispiel zu Design » Widgets gehen und einen 'Shortcode'-Block hinzufügen, um das Login-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 gemeinsame Verwendung von WPForms und OptinMonster 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 Add-on 'User Registration' 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 Plus-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

Zuerst installieren und aktivieren wir 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.

Zuerst müssen Sie die OptinMonster-Website besuchen und sich für ein Konto anmelden.

Als Nächstes müssen Sie das OptinMonster-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation 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 „Benutzerdefinierten HTML“-Block 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 Benutzer dazu ermutigt, 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 Benutzeraktivitäten anzeigen kann, verknüpft es das Verhalten nicht direkt mit dem spezifischen Benutzer, der das Formular übermittelt hat.

Hier kommt WPForms ins Spiel. Es ist ein beliebtes Formularersteller-Plugin, das ein Add-on „User Journey“ (verfügbar im Elite-Plan) 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 übermittelt haben.

Wenn Sie mehr erfahren möchten, können Sie sich gerne auf unseren Leitfaden beziehen, wie Sie die Benutzerreise bei WordPress-Lead-Formularen verfolgen.

Häufig gestellte Fragen zur Erstellung eines WordPress-Login-Popup-Modals

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 so konzipiert, dass sie leichtgewichtig sind und effizient geladen werden.

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 sich auch unsere vollständige Liste der besten WordPress-Login-Seiten-Plugins und unseren Leitfaden ansehen, wie Sie Benutzer nach erfolgreichem Login in WordPress weiterleiten.

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.