So erstellen Sie eine benutzerdefinierte WordPress-Benutzerregistrierungsseite

Suchen Sie nach einer Möglichkeit, die WordPress-Benutzerregistrierungsseite Ihrer Website anzupassen? Sie sind auf der richtigen Seite gelandet. In diesem Artikel werde ich Sie durch den Prozess der Erstellung einer benutzerdefinierten WordPress-Benutzerregistrierungsseite mit dem Elementor Page Builder führen.

Es gibt mehrere Gründe, Benutzern die Registrierung auf Ihrer Website über das Benutzerregistrierungsformular zu ermöglichen. Das Aktivieren der Registrierungen ist einfach, aber das Erstellen einer optisch ansprechenden Benutzerregistrierungsseite erfordert ein wenig Arbeit.

In diesem Tutorial führe ich Sie Schritt für Schritt durch die Aktivierung von Benutzerregistrierungen auf Ihrer Website und die Erstellung einer benutzerdefinierten Benutzerregistrierungsseite.

Lassen Sie uns vorher diese Frage beantworten.

Warum eine benutzerdefinierte Benutzerregistrierungsseite in WordPress erstellen?

Wenn Sie die Benutzerregistrierung für Ihr Forum, Ihre Website oder Ihre Produktwebsite aktivieren, kann eine benutzerdefinierte Registrierungsseite das Gesamtdesign Ihrer Website erheblich verbessern.

Das Standarddesign der WP-Anmeldeseite hat das WordPress-Branding und -Logo, das nicht mit dem Markendesign einer Website übereinstimmt.

Das Erstellen eines benutzerdefinierten Designs ermöglicht es Ihnen, eine konsistentere Benutzererfahrung für den Registrierungsprozess bereitzustellen.

Außerdem erhalten Sie viel mehr Optionen , um die Funktionalität des Formulars zu optimieren. Sie können beispielsweise:

• Fügen Sie weitere Formularfelder hinzu, um mehr Informationen über den sich registrierenden Benutzer zu erhalten.
• Ändern Sie das Design und die visuellen Aspekte des Formulars.
• Aktivieren Sie die ReCAPTCHA-Authentifizierung.
• Definieren Sie Aktionen nach einer erfolgreichen Registrierung
• Erstellen Sie benutzerdefinierte E-Mail-Benachrichtigungen.
• Zeigen Sie nach erfolgreichem Abschluss Ihre benutzerdefinierte Erfolgsmeldung an.
• Blenden Sie das Formular vor angemeldeten Benutzern aus und zeigen Sie stattdessen eine benutzerdefinierte Nachricht an.

Jetzt wissen wir, warum das Erstellen einer benutzerdefinierten Benutzerregistrierungsseite von Vorteil ist. Lassen Sie uns sehen, wie Sie eine auf Ihrer Website erstellen können.

So erstellen Sie eine benutzerdefinierte WordPress-Benutzerregistrierungsseite

In diesem Abschnitt werden wir einen Schritt-für-Schritt-Prozess zum Erstellen einer benutzerdefinierten Benutzerregistrierungsseite mit dem Elementor-Seitenersteller durchlaufen.

Benötigte Werkzeuge

In diesem Tutorial benötigen wir Plugins, die auf Ihrer Website installiert und aktiviert sind.

Elementor-Plugin

Da wir eine Seite mit dem Elementor-Seitenersteller erstellen werden, stellen Sie sicher, dass er auf Ihrer Website installiert und aktiviert ist. Sie können auch die Elementor Pro-Version verwenden, aber die kostenlose Version funktioniert auch.

PowerPack-Addon für Elementor

WordPress-Benutzerregistrierung zulassen

Als erstes müssen Sie Mitgliedschaften auf Ihrer Website aktivieren. Gehen Sie dazu in Ihrem WordPress-Admin-Dashboard zu Einstellungen > Allgemein . Hier sehen Sie die Mitgliedschaftsoptionen.

Klicken Sie auf das Kontrollkästchen, um Registrierungen zu aktivieren. Wählen Sie nun die Rolle aus, für die sich der Benutzer registrieren soll.

Sie wählen aus einer dieser Benutzerrollen aus:

• Teilnehmer
• Autor
• Editor
• Mitwirkender
• Administrator

Jede Benutzerrolle hat unterschiedliche Berechtigungen, und Sie können sie mit einem Plugin eines Drittanbieters weiter optimieren.

Wenn Sie sich nicht sicher sind, welche Benutzerrolle Sie verwenden sollen, würde ich die Abonnentenrolle empfehlen. Dies liegt daran, dass sie eingeschränkten Zugriff haben und keine Beiträge erstellen können.

Wählen Sie die Benutzerrolle aus, die Sie für jede Registrierung festlegen möchten, und klicken Sie auf die Schaltfläche Speichern .

Jetzt können wir fortfahren und mit der Erstellung unserer Benutzerregistrierungsseite beginnen.

Erstellen einer Registrierungsseite für neue Benutzer

Schritt 1: Fügen Sie zunächst eine neue Seite hinzu. Gehen Sie dazu zum WP-Admin-Dashboard und gehen Sie zu Seiten > Neu hinzufügen. Geben Sie nun Ihrer Registrierungsseite einen richtigen Namen und klicken Sie auf die Schaltfläche Mit Elementor bearbeiten .

Schritt 2: Wenn Sie sich nun im Editor befinden, ändern Sie zunächst das Layout der Seite auf Volle Breite oder Leinwand . Klicken Sie dazu auf das Rad-Symbol ⚙ unten links auf der Seite und wählen Sie das Seitenlayout als volle Breite aus.

Schritt 3: Fügen Sie nun ein Spaltenlayout auf Ihrer Seite hinzu. Ich füge ein 3-Spalten-Layout für meine Seite hinzu.

Schritt 4: Lassen Sie uns den wichtigsten Aspekt der Seite hinzufügen: das Benutzerregistrierungs-Widget. Suchen Sie in der Widget-Liste nach dem Widget „ Benutzerregistrierung “. Stellen Sie sicher, dass Sie das PP -Symbol in der oberen linken Ecke des Widgets sehen.

Sobald Sie das Widget hinzugefügt haben, sehen Sie Optionen zum Anpassen des Formulars.

Schritt 5: Registerkarte Inhalt

Auf der Registerkarte Inhalt können Sie Änderungen an der Funktionalität des Formulars vornehmen. Werfen wir einen Blick auf die Unterabschnitte:

Formularfelder: Hier können Sie Felder zu Ihrem Registrierungsformular hinzufügen oder daraus entfernen. Wenn Sie neue Felder hinzufügen möchten, können Sie auf die Schaltfläche „+ Neu hinzufügen“ klicken. Sie können den Feldtyp aus der Liste auswählen und ihm ganz einfach einen Namen, einen Platzhalter, einen Standardwert usw. zuweisen. Außerdem können Sie die Größe der Eingabefelder, die Beschriftung aktivieren/deaktivieren und die erforderliche Markierung ändern.

Schaltfläche „ Registrieren“: Sie können den Schaltflächentext, die Größe, Breite, Ausrichtung und das Symbol für die Schaltfläche „Registrieren“ ändern.

reCAPTCHA: Wenn Sie den reCAPTCHA-API-Schlüssel in den PowerPack-Einstellungen eingerichtet haben, können Sie Google reCAPTCHA in Ihrem Formular aktivieren.

Aktion nach der Registrierung: Sobald das Formular erfolgreich gesendet wurde, können Sie den Benutzer umleiten, sich automatisch anmelden und eine erfolgreiche Registrierungs-E-Mail senden.

E- Mail-Benachrichtigung: Im Unterabschnitt E-Mail-Benachrichtigungen können Sie die E-Mail individuell gestalten, die versendet wird, wenn sich ein Benutzer für eine Benutzerrolle registriert. Sie können auch „Von E-Mail“ und „Von Name“ festlegen.

Erfolgsmeldung: Sie können wählen, ob die Fehlermeldung an der Position des Formulars angezeigt werden soll. Wenn sich ein Benutzer erfolgreich registriert, wird ihm eine Nachricht angezeigt. Sie können auch den Text der Nachricht anpassen.

Zusätzliche Optionen: Hier können Sie das Formular für eingeloggte Benutzer ausblenden. Sie können die Benutzerrolle auswählen, für die sich der Benutzer registriert, und Optionen wie Anmeldung, verlorenes Passwort und Passwortstärkeanzeige aktivieren/deaktivieren.

Fahren Sie fort und nehmen Sie die gewünschten Änderungen vor. Die meisten Optionen sind selbsterklärend, und Sie können fortfahren und die gewünschten Änderungen vornehmen.

Hier sind die Änderungen, die ich am Formular vorgenommen habe:

• Kontrollkästchen „ Nutzungsbedingungen “ im Formular hinzugefügt, indem die Schaltfläche „+ Element hinzufügen“ verwendet und der Typ als Zustimmung ausgewählt wurde.
• Der Schaltflächentext wurde geändert und ein Symbol auf der Schaltfläche „Registrieren“ hinzugefügt.
• Die Erfolgsmeldung für registrierte Benutzer wurde geändert.
• Legen Sie die neue Benutzerrolle als Abonnent fest .

Wenn Sie die Änderungen sehen möchten, die ich auf der Registerkarte Inhalt vorgenommen habe, können Sie sie in diesem Video sehen:

Gehen Sie nun für die Styling-Änderungen zur Registerkarte Style . Hier können Sie Änderungen am Designaspekt des Formulars vornehmen.

Schritt 6: Registerkarte „Stil“.

Sie können Typografieänderungen, Randänderungen, Designänderungen wie Polsterung, Abstände, Farben usw. für jeden Aspekt des Formulars vornehmen.

Machen Sie weiter und nehmen Sie die gewünschten Styling-Änderungen vor. Wenn Sie die Änderungen sehen möchten, die ich auf meiner Benutzerregistrierungsseite vorgenommen habe, können Sie sich das Video ansehen, das ich zuvor geteilt habe.

Nachdem ich die oben erwähnten Änderungen vorgenommen habe, sieht mein Registrierungsformular folgendermaßen aus:

Jetzt müssen Sie die Seite an das allgemeine Thema Ihrer Website anpassen. Beginnen Sie dazu mit der Gestaltung des Rests der Seite.

Dieser Bereich liegt ganz bei Ihnen, und Sie können ihn nach Ihren Wünschen gestalten, da er von Person zu Person variieren kann. Für meinen Abschnitt ist hier das Design, das ich erstellt habe.

Um ein ähnliches Design zu erstellen, nehmen Sie diese Änderungen vor:

• Fügen Sie dem Abschnitt des Formulars ein Hintergrundbild hinzu und richten Sie es anhand der Abschnittseinstellungen korrekt aus.
• Fügen Sie dem Abschnitt eine Hintergrundüberlagerung hinzu , um das Formular hervorzuheben.
• Ändern Sie den Hintergrund des Formulars und ändern Sie die Randecken in abgerundet.
• Fügen Sie einen Titel und einen Untertitel für das Formular hinzu, um die Seite zu vervollständigen.

Stellen Sie sicher, dass Design und Stil für alle Elemente auf der Seite konsistent sind.

Sobald Sie fertig sind, können Sie die Seite veröffentlichen.

Testen der Seite

Um die Seite auszuprobieren, melden Sie sich entweder von Ihrem WordPress-Konto ab oder öffnen Sie die Seite inkognito. Versuchen Sie nun, ein neues Benutzerkonto zu erstellen, indem Sie alle Felder ausfüllen und auf die Schaltfläche Registrieren klicken.

Nach der Registrierung sollten Sie in der Lage sein, ein neues Benutzerkonto zu erstellen.

Was kommt als nächstes?

Ein erfolgreich registrierter Benutzer hat ein Konto auf Ihrer Website und wird sich wahrscheinlich früher oder später anmelden. Auch dafür möchten Sie eine gut aussehende Benutzer-Anmeldeseite, die zum allgemeinen Erscheinungsbild der Website passt.

Dazu können Sie das Anmeldeformular-Widget des PowerPacks verwenden. Mit diesem Widget können Sie die Benutzeranmeldeseite Ihrer WordPress-Website mit dem Elementor-Editor anpassen.

Sie können sich dieses Video ansehen, um zu sehen, wie Sie die Anmeldeseite Ihrer Website anpassen können:

Wenn Sie dieses Tutorial nützlich fanden, teilen Sie es!