Erstellen eines benutzerdefinierten WordPress-Anmeldeformulars mit flacher Benutzeroberfläche

Zuletzt aktualisiert - 8. Juli 2021

WordPress gibt es schon seit geraumer Zeit. Was als Portal für Blogger begann, hat sich mittlerweile zu einem Content-Management-System entwickelt, das für den Betrieb von fast der Hälfte aller Websites weltweit verantwortlich ist. Seine einfache, aber intuitive Benutzeroberfläche und anpassbare Designs haben es zur ersten Wahl für Webentwickler und Designer auf der ganzen Welt gemacht, die ihre Websites von Grund auf neu erstellen möchten.

Jeder, der WordPress verwendet, hat ein Auge für Details und Originalität, um die Benutzererfahrung zu verbessern und seine Klickrate zu erhöhen. Die meisten Entwickler konzentrieren sich hauptsächlich auf Themen allein, aber für Mitgliederseiten und andere Plattformen ist der Ausgangspunkt eine Anmeldeseite. Stellen Sie sich vor, wenn Sie ein neu registriertes Mitglied auf einer Website sind und sich auf einem Bildschirm anmelden, der dem nicht registrierter Mitglieder ähnelt, wird die Wirkung leicht gedämpft und Sie fühlen sich eher unzufrieden. Eine WordPress-Anmeldeseite, die an die Anforderungen und die Ästhetik Ihres Unternehmens angepasst ist, hinterlässt jedoch einen besseren Eindruck bei Besuchern und weckt deren Interesse.

Um Ihnen dabei zu helfen, haben wir einige einfache Richtlinien zum Einfügen Ihrer Stile für eine benutzerdefinierte WordPress-Anmeldeseite zusammengefasst, die sich visuell in Ihr Website-Designschema integriert.

Erstellen einer benutzerdefinierten WordPress-Anmeldeseite ohne Plugin

Man kann mehrere Änderungen an der WordPress-Anmeldeseite vornehmen, indem man den Quellcode in der Datei function.php des gewählten Themes aktualisiert. Sobald Sie WordPress aktualisieren, gehen diese Änderungen jedoch verloren. Dies liegt daran, dass Ihr Design-Stylesheet für die Anmeldeseite nicht Teil des WordPress-Design-Setups ist, was erfordert, dass Sie ein anderes Stylesheet für die benutzerdefinierte Anmeldeseite erstellen.

Erstellen Sie zunächst einen Ordner namens „Login“ in Ihrem Themenordner und fügen Sie eine .txt-Datei mit dem Namen custom-login-style.css hinzu . Von da an können Sie einige grundlegende Änderungen vornehmen, um die Anmeldeseite anzupassen und einzigartig zu machen.

Ändern Sie den Hintergrund

Um die Hintergrundfarbe der Seite oder einer bestimmten Schaltfläche zu aktualisieren, wählen Sie die Hintergrundfarbe: #222222 und ändern den Hexa-Code in die Farbe Ihrer Wahl. Nutzen Sie die Hilfe einer Farbpalette, um eine Farbe auszuwählen, die zu Ihrer Geschäftsästhetik passt und optisch ansprechend ist.

Wenn Sie außerdem das Hintergrundbild Ihrer Anmeldeseite ändern möchten, wählen Sie die Codezeile background-image: url(logo_login.png') und ersetzen Sie logo_login.png , das ist der Name der Datei, durch Ihre aktualisierte Bilddatei-URL .

Unternehmen, die möchten, dass sich ihre Kunden an ihre Marke erinnern, können das WordPress-Logo in ihr benutzerdefiniertes Logo ändern. Nachdem Sie die benutzerdefinierte Logo-Bilddatei in Ihrem Login-Ordner gespeichert haben, ersetzen Sie den Dateinamen durch Ihr benutzerdefiniertes Logo im Code background-image: url('logo_login') .

Anpassen des Anmeldeformulars durch Anpassen von Polsterung und Rand

Entwickler können das Anmeldeformular anpassen, um ihre Seite attraktiv und passend zum Erscheinungsbild ihrer Website zu gestalten. Von der Polsterung von Schaltflächen bis hin zu Farbe und Schriftgröße von Beschriftungen usw. Sie können innerhalb der Schaltfläche mehr Platz hinzufügen, damit der Text nicht gestaucht erscheint, indem Sie die Polsterung erhöhen. Erhöhen Sie einfach die Zahlen im Code- Padding: 12px 12px 12px 12px. Wenn Sie mehr Platz außerhalb der Schaltfläche schaffen möchten, damit die umgebenden Elemente nicht dicht gepackt sind, können Sie dies tun, indem Sie den Randabstand im Coderand vergrößern: 12px 12px 12px 12px. Sogar etwas so Einfaches wie das Hinzufügen einiger Leerzeichen kann sich insgesamt auf das endgültige Aussehen Ihrer Anmeldeseite auswirken und sie zusammengefügter erscheinen lassen.

Ändern der Schriftgröße und -farbe

Sie können die Schriftgröße von Absatztext, Links oder Formularfeldern mit dem Code font-size: 15px ändern , indem Sie die Zahl an die gewünschte Größe anpassen. Dasselbe kann für die Schriftfarbe getan werden, indem die Farbe in der Codefarbe aktualisiert wird: #222222 und die Farbe ersetzt wird.

Ändern der Anmeldefehlermeldung

Mit der Zunahme von Cyberkriminalität und Betrug im Internet können Webentwickler und Geschäftsinhaber auf ihren Websites kein Risiko eingehen und vertrauliche Daten verlieren. Wenn ein Benutzer hastig die falschen Anmeldeinformationen eingibt, wird automatisch eine Standardfehlermeldung generiert. Während dies den Benutzern diesen Fehler signalisieren soll, kann es für Hacker eine Lücke sein, um zu versuchen, die Anmeldedaten zu knacken. Der beste Weg, Hacker in Schach zu halten, besteht also darin, die Fehlermeldung in der Datei function.php zu ändern.

Abschließend können diejenigen mit umfassendem CSS-Know-how die ultimative Kontrolle über das Design und die Anpassung ihres WordPress-Anmeldeformulars haben. Machen Sie sich jedoch keine Sorgen, wenn Ihr Mangel an Programmierkenntnissen Ihre Möglichkeiten zum Erstellen einer benutzerdefinierten Anmeldeseite einschränkt! Im WordPress-Repository stehen Ihnen eine Vielzahl von Plugin - Optionen zur Verfügung, um den WordPress-Webentwicklungsprozess zu optimieren , und wir haben die beliebtesten für Sie aufgelistet.

Login-Customizer-Plugin

Login Customizer ist eines der benutzerfreundlichsten Plugins und ermöglicht es Ihnen, Änderungen direkt von Ihrem WordPress Customizer aus vorzunehmen. Nach einem einfachen Installationsprozess können Sie einfach über Ihr WordPress-Dashboard auf der Registerkarte Aussehen darauf zugreifen. Klicken Sie auf Anpassung starten und Sie werden zum Customizer-Bildschirm weitergeleitet, wo Sie alle Bereiche nach Ihren Wünschen neu gestalten können.

Colorlib-Login-Customizer

Colorlib Login Customizer ist ein einfallsreiches und flexibles Tool, das alle Funktionen eines Premium-Plugins enthält, diese jedoch kostenlos anbietet. Seine große Auswahl an einzigartigen Funktionen macht es zur ultimativen Wahl für Webentwickler, die eine benutzerdefinierte Lösung für ihre Benutzer erstellen möchten. Auch dies ermöglicht die Anpassung über den WordPress Customizer, sodass Sie einfach navigieren und Ihre Anmeldeseite umgestalten können.

Zusammenfassend

Letztendlich gibt es mehr als einen Ansatz zum Anpassen einer Anmeldeseite, und Entwickler aller Erfahrungsstufen sind herzlich eingeladen, sie auszuprobieren. Was zählt, ist, dass die benutzerdefinierte WordPress-Anmeldeseite mit der Ästhetik der tatsächlichen Website übereinstimmt und diese ergänzt, um die Benutzererfahrung zu verbessern. Das Anpassen der Anmeldeseite Ihrer Website ist eine einfache, aber effektive Möglichkeit, Kunden zu begeistern und eine Markenidentität aufzubauen. Einfach anzufangen und auf den Grundlagen aufzubauen, kann einen einfachen Bildschirm in etwas Spektakuläres verwandeln und Kunden ein personalisiertes Online-Erlebnis bieten, das sie noch nie zuvor gesehen haben.