Divi Login: So erstellen Sie eine benutzerdefinierte Anmeldeseite
Das Erstellen einer benutzerdefinierten Anmeldeseite kann die Benutzererfahrung auf Ihrer Website erheblich verbessern, indem sie ansprechender und an Ihre Marke angepasst wird. In diesem Beitrag erfahren Sie, wie Sie mit dem Divi-Theme eine einzigartige und stilvolle WordPress Anmeldeseite erstellen.
Dieser umfassende Leitfaden führt Sie durch die detaillierten Schritte und stellt sicher, dass Sie eine professionelle und angepasste Anmeldeseite für Ihre WordPress-Website erstellen können.
Divi Login Modul
Eine angepasste Login-Seite ist optisch betrachtet der standardmäßigen WordPress-Anmeldeseite weit überlegen.
Die standardmäßige WordPress-Anmeldeseite ist funktional, aber es fehlt ihr an visueller Attraktivität und Markenidentität.
Mit dem Divi Login-Modul, benutzerdefiniertem CSS und weiteren Designanpassungen können Sie eine Anmeldeseite erstellen, die nicht nur funktional, sondern auch optisch ansprechend und konsistent mit dem Branding Ihrer Website ist.
Schritte zur Erstellung einer benutzerdefinierten Anmeldeseite
1. Erstellen einer neuen Seite
1. Erstellen Sie eine neue Seite in Ihrem WordPress-Dashboard:
– Navigieren Sie zu Seiten > Erstellen.
– Benennen Sie Ihre Seite „Login“ oder einen anderen bevorzugten Titel, der zu Ihrer Website passt.
2. Verwenden Sie den Divi Builder, um die Seite von Grund auf zu erstellen:
– Klicken Sie auf „Divi Builder verwenden“.
– Wählen Sie „Von Grund auf neu erstellen“, um mit einer leeren Page zu beginnen.
2. Hinzufügen und Konfigurieren des Divi Login-Moduls
1. Fügen Sie auf der neuen Seite eine einspaltige Zeile hinzu:
– Klicken Sie auf das „+“-Symbol, um eine neue Zeile hinzuzufügen.
– Wählen Sie das einspaltige Layout.
2. Fügen Sie das Divi Login-Modul ein:
– Klicken Sie auf das „+“-Symbol innerhalb der Spalte, um ein Modul hinzuzufügen.
– Suchen und wählen Sie das „Login“-Modul.
Hier finden Sie die Liste aller verfgübaren Divi Module.
3. Passen Sie das Modul an:
– Titel und Inhalt: Fügen Sie den gewünschten Titel und zusätzlichen Inhalt hinzu, um die Anmeldungserfahrung zu personalisieren.
– Weiterleitung-URL: Legen Sie eine Weiterleitung-URL fest, um Benutzer nach der Anmeldung zu einer bestimmten Seite zu führen, z. B. zur Startseite oder zu einem Benutzer-Dashboard.
3. Erstellen einer Vollbildsektion
1. Passen Sie die Höhe der Sektion auf 100vh (Sichthöhe) an:
– Gehen Sie zu den Sektions-Einstellungen, indem Sie auf das Zahnrad-Symbol in der Sektion klicken.
– Navigieren Sie zur Registerkarte Design und finden Sie die Größenoptionen.
– Stellen Sie die Höhe auf 100vh ein, um die Sektion im Vollbildmodus anzuzeigen und sicherzustellen, dass das Anmeldeformular sichtbar ist.
4. Vertikale Ausrichtung des Login-Moduls
1. Verwenden Sie ein wenig benutzerdefiniertes CSS, um das Login-Modul vertikal zu zentrieren:
– Gehen Sie zur Registerkarte „Erweitert“ in den Sektions-Einstellungen.
– Öffnen Sie den Abschnitt „Benutzerdefiniertes CSS“ und fügen Sie den folgenden CSS-Code zum Haupt-Element hinzu:
display: flex;
justify-content: center;
align-items: center;5. Hinzufügen eines Hintergrundbildes
1. Verbessern Sie die Optik, indem Sie ein Hintergrundbild zur Sektion hinzufügen:
– Gehen Sie in den Sektions-Einstellungen zur Registerkarte Hintergrund.
– Wählen Sie aus verschiedenen Hintergrundoptionen, einschließlich Farben, Verläufen, Bildern, Videos, Mustern und Masken.
– Laden Sie ein Bild hoch, das zu Ihrer Marke passt und die Schönheit der Anmeldeseite verbessert.
6. Gestaltung des Divi Login-Moduls
1. Passen Sie das Login-Modul weiter an:
– Button Style: Passen Sie das Button-Design an den Stil Ihrer Marke an, indem Sie die Button-Farbe, den Rahmen und die Schriftart ändern.
– Rahmen und Schatten: Fügen Sie dem Login-Modul Rahmen und Box-Schatten hinzu, um es vom Hintergrund abzuheben.
– Formularfelder: Passen Sie die Formularfelder an, indem Sie deren Randradius, Farben und Abstände ändern, um ein einheitliches Erscheinungsbild zu erzielen.
7. Überprüfung der Responsivität
1. Stellen Sie sicher, dass die Anmeldeseite auf allen Geräten gut aussieht:
– Verwenden Sie die Responsivitätsansicht[1] im Divi Builder, um zu überprüfen, wie die Seite auf Desktops, Tablets und Mobiltelefonen aussieht.
– Nehmen Sie alle notwendigen Anpassungen vor, um sicherzustellen, dass das Design auf allen Geräten gut aussieht und benutzerfreundlich ist.
8. Hinzufügen der Anmeldeseite zum Menü
1. Veröffentlichen Sie die Anmeldeseite:
– Klicken Sie auf die Schaltfläche „Veröffentlichen“, um Ihre Anmeldeseite live zu schalten.
2. Fügen Sie die Anmeldeseite zum Menü Ihrer Website hinzu:
– Gehen Sie zum WordPress-Dashboard und navigieren Sie zu Design > Menüs.
– Wählen Sie das Menü aus, zu dem Sie die Anmeldeseite hinzufügen möchten.
– Fügen Sie die neue Anmeldeseite Ihrem bevorzugten Menü für einen einfachen Zugriff durch Ihre Benutzer hinzu.
Geheimtipp: Divi ToolBox Plugin
Mit der Divi Toolbox lassen sich sehr einfach geniale Login-Seiten für WordPress und Divi erstellen. Ganz ohne die Verwendung von Programmierkenntnissen. Aber das Plugin kann noch weit mehr als das und ist, vollgepackt mit vielen nützlichen Features.
Lesen Sie hier das Review.
Letzte Anpassungen und Tests
Nachdem Sie die Einrichtung abgeschlossen haben, empfehle ich Ihnen, die Anmeldeseite in einem Inkognito-Fenster zu testen, um sicherzustellen, dass sie korrekt funktioniert, ohne angemeldet zu sein.
Dieser Schritt ist entscheidend, um zu überprüfen, ob alle Benutzer, unabhängig davon, ob sie angemeldet sind oder nicht, das beabsichtigte Design und die Funktionalität sehen.
1. Testen Sie die Anmeldefunktionalität:
– Öffnen Sie ein neues Inkognito-Fenster oder melden Sie sich von Ihrer WordPress-Website ab.
– Navigieren Sie zur neuen Anmeldeseite und testen Sie den Anmeldevorgang.
– Stellen Sie sicher, dass Benutzer nach der Anmeldung zur richtigen Seite weitergeleitet werden.
2. Überprüfen Sie die Designkonsistenz:
– Überprüfen Sie die Anmeldeseite auf verschiedenen Geräten und Browsern, um die Konsistenz sicherzustellen.
– Nehmen Sie alle notwendigen Anpassungen vor, um ein einheitliches Erscheinungsbild auf allen Plattformen zu erhalten.
Fazit
Das Erstellen einer benutzerdefinierten Login Seite mit dem Divi-Theme ist ein unkomplizierter Prozess, der die Benutzererfahrung auf Ihrer Website erheblich verbessern kann.
Indem Sie meinem detaillierten Tutorial folgen, können Sie eine visuell ansprechende und funktionale Anmeldeseite erstellen, die sich von der standardmäßigen WordPress Login Seite abhebt.
Durch die Anpassung Ihrer Anmeldeseite verbessern Sie nicht nur die ästhetische Attraktivität Ihrer Website, sondern stärken auch Ihre Markenidentität und bieten eine nahtlose Benutzererfahrung.
Eine gut gestaltete Anmeldeseite kann einen starken ersten Eindruck bei den Benutzern hinterlassen und den Ton für ihre gesamte Interaktion mit Ihrer Website setzen.
Viel Spaß beim weiteren Designen!
