Wil je je WordPress inlogpagina aanpassen aan het ontwerp van je website? De standaard inlogpagina van WordPress is functioneel, maar ziet er op vrijwel iedere website hetzelfde uit: het WordPress-logo bovenaan, een neutrale achtergrond en het bekende witte loginformulier.
Dat is prima voor een persoonlijke website. Maar zodra je een website voor een bedrijf, klant of organisatie bouwt, voelt die standaardpagina al snel als een vreemde onderbreking.
Je bezoeker komt vanaf een zorgvuldig ontworpen website ineens terecht op een pagina die er nauwelijks mee te maken lijkt te hebben.
Gelukkig kun je de WordPress-inlogpagina aanpassen aan de huisstijl van je website. Daarbij kun je verder gaan dan alleen het logo vervangen: ook kleuren, knoppen, achtergrond, formulier en links kunnen aansluiten op het bestaande ontwerp.
Waarom zou je de WordPress-inlogpagina aanpassen?
Niet iedere bezoeker ziet de loginpagina, maar voor sommige websites is het een belangrijk onderdeel van de gebruikerservaring.
Denk bijvoorbeeld aan:
- webshops met klantaccounts;
- membershipwebsites;
- websites met meerdere beheerders of redacteuren;
- online leeromgevingen;
- portals en extranetten;
- websites die voor klanten worden gebouwd.
Wanneer iemand vanaf je website naar /wp-login.php gaat, is het prettig als die pagina herkenbaar blijft als onderdeel van dezelfde website.
Dat hoeft geen compleet nieuw ontwerp te zijn. Vaak maken een paar goed gekozen aanpassingen al een groot verschil.
Wat kun je aanpassen aan de WordPress-login?
De loginpagina bestaat uit een aantal duidelijke onderdelen.
Je kunt bijvoorbeeld het WordPress-logo vervangen door je eigen logo en de achtergrond laten aansluiten op de website. Ook het formulier zelf kan een andere achtergrondkleur krijgen.
Daarnaast kun je de kleuren van teksten en links aanpassen en de loginbutton dezelfde uitstraling geven als de andere knoppen op de website.
Bij die knop gaat het niet alleen om de kleur. Ook zaken zoals tekstkleur, hoverkleur, border, afgeronde hoeken en padding bepalen of de knop daadwerkelijk bij het ontwerp past.
Juist die combinatie zorgt ervoor dat de loginpagina niet simpelweg ‘een andere kleur’ krijgt, maar echt onderdeel wordt van de huisstijl.
Het probleem met kleuren handmatig overnemen
Je kunt al deze instellingen natuurlijk zelf invullen.
Open de website, zoek de juiste kleurcodes op en kopieer ze vervolgens naar de instellingen van je loginpagina.
Dat werkt, maar het heeft een nadeel: je bouwt eigenlijk een tweede versie van je designsysteem.
Veel moderne WordPress-websites hebben hun kleuren en stijlen namelijk al centraal vastgelegd.
Bijvoorbeeld in:
- Elementor Global Colors;
- Divi;
- de Astra Global Palette;
- WordPress Global Styles.
Als de primaire kleur van de website later verandert, wil je eigenlijk niet op allerlei verschillende plekken opnieuw HEX-codes hoeven zoeken en aanpassen.
De betere vraag is daarom niet:
Welke kleur moet deze loginbutton krijgen?
maar:
Welke kleur gebruikt de website zelf voor zijn buttons?
Je website heeft vaak al een designsysteem
Page builders en moderne WordPress-thema's werken steeds meer met centrale ontwerpinstellingen.
In Elementor kun je bijvoorbeeld globale kleuren definiëren. Astra heeft een Global Palette en WordPress zelf beschikt via theme.json en Global Styles eveneens over centrale ontwerpinstellingen.
Ook Divi bevat globale en algemene ontwerpinstellingen die op verschillende onderdelen van de website worden gebruikt.
Daar zit een belangrijk voordeel in: ontwerpbeslissingen worden op één plaats vastgelegd en vervolgens door de hele website hergebruikt.
De WordPress-loginpagina staat daar traditioneel buiten.
En juist dat is een beetje vreemd.
Als je website al weet wat de primaire kleur is, hoe een knop eruitziet en welke kleuren onderdeel zijn van de huisstijl, waarom zou je die informatie dan opnieuw met de hand invoeren voor de loginpagina?
Websitekleuren automatisch gebruiken op de loginpagina
Dat was ook het uitgangspunt achter DP Websolutions – Login Branding.
In plaats van opnieuw een compleet designsysteem voor de loginpagina te creëren, probeert de plugin gebruik te maken van het designsysteem dat al op de website aanwezig is.
De plugin kan ondersteunde ontwerpinstellingen uitlezen uit onder andere:
- Elementor;
- Divi;
- Astra;
- WordPress Global Styles.
Op het detectiescherm zie je vervolgens welke websitekleuren en buttonstijlen gevonden zijn.
Je beslist zelf welke daarvan je wilt toepassen.
De plugin blijft dus niet voortdurend afhankelijk van de instellingen van je theme of page builder. Wanneer je een stijl toepast, wordt die als een vaste instelling voor de loginpagina opgeslagen. Daardoor kun je het resultaat daarna ook verder aanpassen.
Eerst detecteren, daarna beslissen
Automatische detectie betekent niet dat de plugin zomaar alles op je loginpagina verandert.
Dat zou juist onhandig zijn.
Misschien wil je bijvoorbeeld wel de knopstijl van je website gebruiken, maar een andere achtergrond voor de loginpagina. Of je wilt alleen de primaire kleur overnemen.
Daarom bestaat het proces uit twee stappen.
Eerst bekijkt de plugin welke relevante ontwerpinstellingen op de website beschikbaar zijn. Daarna kies je zelf welke onderdelen je daadwerkelijk wilt toepassen.
Je behoudt daarmee de controle, maar hoeft niet alle waarden handmatig op te zoeken.
Ook de buttonstijl telt mee
Een button bestaat uit meer dan één achtergrondkleur.
Op veel websites wordt de uitstraling juist bepaald door een combinatie van eigenschappen zoals:
- achtergrondkleur;
- tekstkleur;
- hoverkleur;
- borderkleur;
- borderdikte;
- afgeronde hoeken;
- verticale en horizontale padding.
Wanneer alleen de buttonkleur wordt overgenomen, kan het resultaat daarom nog steeds behoorlijk verschillen van de rest van de website.
DP Login Branding probeert daarom waar mogelijk ook de relevante buttonstijl van het gebruikte designsysteem te herkennen.
In de instellingen kun je de normale en hoverstatus afzonderlijk bekijken en aanpassen.
De WordPress-loginpagina verder aanpassen
Na het overnemen van de bestaande websitekleuren kun je de loginpagina verder naar wens aanpassen.
Zo kun je onder andere werken met je eigen logo, achtergrond, formulierkleuren, links en buttons.
Via de WordPress Customizer kun je het resultaat direct bekijken terwijl je wijzigingen maakt.
Het uitgangspunt blijft daarbij hetzelfde: de bestaande website is het vertrekpunt. Je hoeft niet opnieuw vanaf een leeg kleurenpalet een tweede ontwerp te bouwen.
Elementor, Divi, Astra en WordPress Global Styles
Niet iedere WordPress-website slaat zijn ontwerpinstellingen op dezelfde manier op.
Elementor heeft zijn eigen globale instellingen, Divi gebruikt een ander systeem en Astra heeft weer zijn eigen Global Palette. Daarnaast kunnen moderne block themes hun stijlen via WordPress Global Styles vastleggen.
Daarom moet de informatie per designsysteem anders worden gelezen.
DP Login Branding vertaalt de relevante gegevens van ondersteunde systemen naar dezelfde soort instellingen voor de loginpagina.
Het resultaat voor de gebruiker is eenvoudig: je ziet welke kleuren en buttoneigenschappen zijn gevonden en kunt die vervolgens gebruiken.
Een loginpagina hoeft geen losstaand ontwerp te zijn
Het aanpassen van wp-login.php wordt vaak behandeld als een afzonderlijke ontwerptaak.
Kies een logo. Kies een achtergrondkleur. Vul een buttonkleur in. Stel een paar linkkleuren in.
Maar eigenlijk is dat achterstevoren.
Op een bestaande website zijn veel van die ontwerpbeslissingen al genomen.
Een consistente WordPress-loginpagina hoeft daarom niet te beginnen met opnieuw ontwerpen. Je kunt beter beginnen met het ontwerp dat er al is.
Dat levert niet alleen een herkenbaardere loginpagina op, maar voorkomt ook onnodig dubbel werk.
DP Websolutions – Login Branding is gratis beschikbaar via WordPress.org en kan rechtstreeks vanuit WordPress worden geïnstalleerd.