Möchten Sie wissen, wie Sie eine Anmeldeseite mit erstellen Elementor ?

In WordPress können Sie gehen auf yourdomain.com/wp-login.php um zur Login-Seite Ihrer Website zu gelangen. Wenn Sie eine große Website mit mehreren Autoren / Benutzern haben, möchten Sie möglicherweise eine benutzerdefinierte Anmeldeseite mit Ihrem eigenen Design erstellen, um Ihre Markenidentität für Ihre Website zu stärken.

Mit Elementorkönnen Sie mühelos eine benutzerdefinierte Anmeldeseite für Ihre WordPress-Website erstellen – ohne zu programmieren oder zusätzliche Plugins zu installieren.

Elementor verfügt über ein Widget – das Login-Widget –, mit dem Sie eine benutzerdefinierte Anmeldeseite erstellen können. Elementor bietet sogar Vorlagen für Anmeldeseiten an, sodass Sie im Handumdrehen eine Anmeldeseite erstellen können.

So erstellen Sie eine benutzerdefinierte WordPress-Anmeldeseite mit Elementor

Bitte beachten Sie, dass das Login-Widget nur auf Elementor Pro verfügbar ist. Bevor Sie also eine benutzerdefinierte Anmeldeseite erstellen können, müssen Sie Elementor auf die Pro-Version aktualisieren.

1. So erstellen Sie eine Anmeldeseite aus einer Vorlage

Wie bereits erwähnt, bietet Elementor Vorlagen, mit denen Sie im Handumdrehen eine personalisierte Anmeldeseite erstellen können. Um eine zu verwenden, erstellen Sie zunächst eine neue Seite (Seiten -> Hinzufügen) Und ändere es mit Elementor.

Klicken Sie im Elementor-Editor auf das Ordnersymbol, um die Modellbibliothek zu öffnen.

Suchen Sie nach einer benutzerdefinierten Anmeldeseitenvorlage. Sie können das Suchfeld verwenden, um Ihre Arbeit zu erleichtern. Wenn Sie das gewünschte Modell gefunden haben, fahren Sie mit der Maus darüber und klicken Sie auf die Schaltfläche EINFÜGEN.

Warten Sie einen Moment, bis Elementor das Laden des Modells abgeschlossen hat. Sobald das Modell geladen ist, können Sie auf klicken veröffentlichen es zu veröffentlichen.

Voilà.

Um die Seite anzuzeigen, klicken Sie auf das dreizeilige Symbol in der oberen Ecke des linken Fensters und wählen Sie Seite anzeigen.

Und hier ist das Endergebnis, wenn Sie sich für das gleiche Modell wie wir entschieden haben.

So erstellen Sie eine Anmeldeseite mit Elementor

2. So erstellen Sie eine benutzerdefinierte Anmeldeseite von Grund auf

Wenn Sie Ihr eigenes Anmeldeseitendesign haben möchten, können Sie auch Ihre benutzerdefinierte Anmeldeseite von Grund auf neu erstellen. Erstellen Sie zunächst eine neue Seite und bearbeiten Sie sie mit Elementor.

Fügen Sie im Elementor-Editor einen neuen Abschnitt hinzu, indem Sie auf das Plus-Symbol klicken. Sie können eine Spaltenstruktur basierend auf dem zu erstellenden Design auswählen.

Sobald Ihr Abschnitt fertig ist, fügen Sie das Verbindungs-Widget hinzu, indem Sie es aus dem linken Bereich in den Zeichenbereich ziehen.

So erstellen Sie eine Anmeldeseite mit Elementor

Gehen Sie zur Registerkarte Inhalt auf der linken Seite, um grundlegende Optionen einzustellen. Es gibt 3 Optionsblöcke, die Sie bearbeiten können:

1. Formularfelder

Sie können diesen Block öffnen, um das Tag zu aktivieren/deaktivieren und die Eingangsgröße einzustellen.

2. Knopf

Sie können diesen Block öffnen, um Schaltflächentext, Schaltflächengröße und Schaltflächenausrichtung festzulegen.

3. Zusätzliche Optionen

Sie können diesen Block öffnen, um Elemente Ihrer Anmeldeseite wie z. B. den Link zu aktivieren / deaktivieren MPasswort vergessen und die Option Mich erinnern. Da Sie eine Anmeldeseite erstellen möchten, aktivieren die Option Nach dem Login umleiten und fügen Sie die WordPress-Dashboard-URL ein (deinedomain.com/wp-admin) im verfügbaren Feld. Sie können die Option auch aktivieren Weiterleitung nach Abmeldung wenn Sie es wünschen.

Sie können die Option aktivieren Benutzerdefiniertes Etikett wenn Sie benutzerdefinierte Beschriftungen und benutzerdefinierte Platzhalter auf Ihrem verwenden möchten Formular Verbindung.

Sobald die Definition Basisoptionen abgeschlossen, gehen Sie zu die Registerkarte Stil um die zu personalisieren Formular Verbindung. Es stehen 5 Blöcke mit Stiloptionen zur Verfügung:

1. Formular

Sie können diesen Block öffnen, um den Abstand zwischen den Linien, die Farbe der Verknüpfungen und die Farbe der Ausrichtung der Verknüpfungen festzulegen.

2. Etikette

Sie können diesen Block nur sehen, wenn Sie die Beschriftung von aktivieren Formular. Sie können diesen Block öffnen, um den Abstand zwischen Formularbeschriftungen, die Textfarbe und die Typografie (Schriftfamilie, Schriftgröße, Schriftstil usw.) festzulegen.

3. Felder

Sie können diesen Block öffnen, um die Farbe der Textfelder, die Typografie (Schriftfamilie, Schriftgröße, Schriftstil usw.), den Hintergrund des Steuerelements, die Farbe des Rahmens des Steuerelements, die Breite des Rahmens festzulegen des Feldes und den Radius der Feldgrenze.

4. Knopf

Sie können diesen Block öffnen, um die Anmeldeschaltfläche anzupassen. Sie können Dinge wie Schaltflächentextfarbe, Hover-Textfarbe, Typografie, Schaltflächenhintergrundfarbe, Rahmenradius und Schaltflächentextfüllung festlegen.

5. Angemeldete Nachricht

Sie können diesen Block öffnen, um die Nachricht anzupassen, sobald Ihre Benutzer angemeldet sind. Hier ist die Nachricht:

Sie können die Textfarbe und die Typografie der Nachricht einstellen.

Nachdem Sie das Widget für die Anmeldung fertig gestaltet haben, können Sie andere Widgets auf Ihrer Seite anpassen. Sobald die Seitenbearbeitung abgeschlossen ist, veröffentlichen / aktualisieren Sie Ihre Seite und Sie haben die benutzerdefinierte Anmeldeseite erfolgreich erstellt.

Lesen Sie auch: So exportieren und importieren Sie Elementor-Modelle

Eine entscheidende Sache zu beachten. Löschen Sie die Datei nicht, nachdem Sie die benutzerdefinierte Anmeldeseite erstellt haben wp-login.php auf Ihrer WordPress-Website. Ihre WordPress-Site benötigt diese Datei weiterhin, um den Anmeldevorgang abzuwickeln.

Holen Sie sich jetzt Elementor Pro!

Zusammenfassung

Hier ist ! Das war's für diesen Artikel, der Ihnen zeigt, wie Sie eine Anmeldeseite mit Elementor erstellen create. Wenn Sie Bedenken haben, wie Sie dorthin gelangen, flass es uns wissen im commentaires.

Sie können sich aber auch beraten unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.

Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.

...