Schluss mit dem 08/15 Design! Mach Deine WordPress Loginseite zum echten Hinkucker und logge Dich ab sofort gutgelaunt in Dein Backend ein – ich zeige Dir wie 😉
Wenn ich Websites erstelle, beschäftige ich mich zu einem Teil auch mit Seiten, die viele Besucher:innen nicht oder nur selten zu Gesicht bekommen: Etwa mit der 404-Seite, einer Archivseite oder der Suchergebnisseite …
Oft übersehen: Die Loginseite
Eine Seite, die oftmals kaum Beachtung findet, weil sie meistens nur von der Websiteinhaber:in und nicht von den Personen, die die Website ansurfen, gesehen und deshalb ignoriert wird, ist die Loginseite. Also die Seite, über die meine Kund:in ins Backend der Website kommt.
Die Standard WordPress Loginseite
Von Haus aus ist diese sehr dürftig designt und wahrlich kein Augenschmaus:
Aber keine Sorge, Du kannst Deine WordPress Loginseite auch individuell gestalten und voll „on brand“ erstrahlen lassen – da macht das Einloggen ins Backend doch gleich doppelt Spaß.
Aber hey, das muss nicht so bleiben! Denn Deine Loginseite ist eigentlich ein perfekter Ort, um Deine Marke auch dann zu präsentieren, wenn nur Du (und vielleicht Dein Team) sie zu Gesicht bekommt.
Wie auch Du Deine WordPress Loginseite individuell gestalten und voll „on brand“ erstrahlen lassen kannst, zeige ich Dir im nächsten Schritt – da macht das Einloggen ins Backend doch gleich doppelt Spaß. So punktest Du mit einem professionellen Auftritt, sollten sich doch jemals Kund:innen auf Deine Loginseite verirren 😉
So machst Du Deine WordPress Loginseite zum echten Hinkucker
Ich nutze dafür Colorlib Login Customizer. Mit diesem gratis Plugin, ein bisschen TLC (Tender – Love – Care, zu deutsch etwa Fürsorge & Pflege) und etwas Custom CSS Code verwandelst Du auch Deine Loginseite zum echten Hinkucker.
Einfach Plugin hinzufügen und aktivieren. Du findest die Einstellungen dann im Dashboard > Design > Customizer > Colorlib Login Customizer.
Schritt 1 – Templates
Unter Templates kannst Du Dich für ein Layout entscheiden. Ich nehme meistens das einfache Formular.
Schritt 2 – Logo Options
Bei Logo Options wähle ich das Logo, das anzeigt werden soll, aus der Mediathek aus und gebe ihm eine passende Größe.
Schritt 3 – Layout Options
Beim Layout bleibe ich in der Regel bei der einspaltigen Variante, die ich vertikal und horizontal mittig platziere.
Schritt 4 – Background Options
Dort wähle ich ein großflächiges Hintergrundbild, das zur Marke passt, aus.
Schritt 5 – General Form Options
Hier passe ich Höhe und Breite des Formulars an und nehme weitere Einstellungen vor.
Schritt 6 – Login Form Texts
Hier passe ich bei Bedarf die Übersetzung für die Formularfelder an.
Schritt 7 – Lost Passwords Form Texts
Und die Übersetzung für “Passwort vergessen”.
Schritt 8 – Form Buttons & Links
Dann passe ich die Farben für Buttons und Links passend zum Branding an.
Schritt 9 – Custom CSS
Und zu guter Letzt sorge ich mit folgendem Custom CSS dafür, dass das Formular ganz zum Branding passt:
@font-face {
font-family: 'Poppins';
src: url('/wp-content/uploads/2024/10/Poppins.woff2') format('woff2');
font-weight: 300;
font-style: normal;
}
/**Definiert meine benutzerdefinierte Schriftart namens „Poppins“ mit einer Gewichtung von 300 (leicht) und lädt sie aus der auf meinem Server hinterlegten WOFF2-Datei.**/
#login {
background-color: #ffffff;
}
/**Setzt den Hintergrund der Login-Box auf reines Weiß.**/
body #login p{
font-family: 'Poppins';
}
/**Wendet die Schriftart „Poppins“ auf alle Absätze innerhalb des Login-Bereichs an.**/
.login form {
border: none;
}
/**Entfernt den Rahmen vom Login-Formular.**/
.ml-container #login {
padding-top: 2rem;
}
/**Fügt oberhalb des Login-Containers innerhalb eines Elements mit der Klasse .ml-container einen Abstand von 2 rem hinzu.**/
.login form .input, .login input[type=password], .login input[type=text] {
font-size: 1rem;
}
/**Setzt die Schriftgröße der Eingabefelder im Login-Formular auf 1rem.**/
.wp-core-ui .button-group.button-large .button, .wp-core-ui .button.button-large {
padding-left: 3rem;
padding-right: 3rem;
border-radius: 50px;
text-transform: uppercase;
font-weight: 500;
font-size: 1.2em;
letter-spacing: 2px;
}
/**Gestaltet große Buttons mit großzügigem seitlichen Innenabstand, abgerundeten Ecken, Großbuchstaben, halbfetter Schrift, größerer Schriftgröße und zusätzlichem Buchstabenabstand.**/
#nav a {
font-size: 0.9rem;
}
/**Reduziert die Schriftgröße der Links im Navigationsbereich der Loginseite leicht.**/
#backtoblog a {
font-size: 0.9rem;
}
/**Verkleinert die Schriftgröße des „Zurück zur Website“-Links auf 0.9rem.**/Lass Dich von individuellen WordPress Loginseiten inspirieren
Anbei einige mit dem Colorlib Login Customizer individuell gestalteten Loginseiten:
Viel Spaß beim Loginseite individualisieren!
