Je hebt een prachtige website gebouwd met Divi. Je eigen kleuren, een herkenbaar logo en knoppen die precies bij je huisstijl passen. Maar zodra je naar de WordPress-inlogpagina gaat, zie je nog steeds dat standaard WordPress-scherm met het bekende logo en de blauwe inlogknop.
Gelukkig kun je ook je WordPress-inlogpagina aanpassen met Divi, zonder CSS te schrijven of een compleet nieuwe loginpagina te bouwen. In deze handleiding laat ik zien hoe je de bestaande huisstijl van je Divi-website kunt toepassen op de echte WordPress-inlogpagina.
De Divi Login Module of de echte WordPress-inlogpagina aanpassen?
Divi heeft zelf een Login Module waarmee je een inlogformulier op een zelfgemaakte pagina kunt plaatsen. Dat is handig voor bijvoorbeeld een ledenomgeving of een klantportaal.
Maar wat als je gewoon de bestaande WordPress-inlogpagina op wp-login.php wilt aanpassen?
De Divi Login Module verandert die standaard WordPress-inlogpagina niet. Als je wilt dat ook de pagina waarop jijzelf, je klanten en andere beheerders inloggen aansluit bij het ontwerp van je website, heb je een andere oplossing nodig.
Met de gratis plugin DP Websolutions – Login Branding kun je je bestaande WordPress-inlogpagina vormgeven met de huisstijl die je al in Divi hebt ingesteld.
Hoe werkt WordPress Login Branding met Divi?
DP Websolutions – Login Branding kan ondersteunde ontwerpinstellingen van je Divi-website herkennen. Denk aan je logo, themakleuren en knopstijlen. Ook Divi 5 wordt ondersteund.
De plugin toont de gevonden ontwerpinstellingen naast je huidige loginontwerp. Je kiest vervolgens zelf welke onderdelen je wilt overnemen.
Afhankelijk van de instellingen van je website kun je onder andere het volgende aanpassen:
- Je eigen website- of bedrijfslogo.
- De achtergrondkleur of een achtergrondafbeelding.
- De achtergrond en vormgeving van het inlogformulier.
- De kleuren, afmetingen en afgeronde hoeken van de inlogknop.
- Knopstijlen voor zowel de normale als de hoverstatus.
- Tekst-, accent- en linkkleuren.
Niet alle Divi-websites gebruiken dezelfde globale instellingen. De plugin toont daarom alleen ontwerpwaarden die betrouwbaar kunnen worden herkend. Je kunt ontbrekende onderdelen altijd zelf instellen.
Stap voor stap: je Divi-inlogpagina aanpassen
1. Installeer de gratis Login Branding-plugin
Open je WordPress-dashboard en ga naar Plugins → Nieuwe plugin toevoegen. Zoek op DP Websolutions – Login Branding, klik op Installeren en activeer de plugin.
Je kunt hem ook rechtstreeks vinden in de officiële WordPress-plugindirectory:
Download DP Websolutions – Login Branding (gratis)
2. Bekijk de gevonden Divi-kleuren en stijlen
Ga naar Weergave → Login Screen. Hier vind je het overzicht met de huisstijl die de plugin op je website heeft herkend.
Gebruik je globale kleuren of algemene knopinstellingen in Divi? Dan kun je de ondersteunde waarden hier terugvinden, naast de instellingen die momenteel op je inlogpagina worden gebruikt.
Zo hoef je niet alle kleurcodes handmatig op te zoeken en opnieuw in te voeren.
3. Pas je Divi-huisstijl toe op de loginpagina
Selecteer de gevonden onderdelen die je wilt gebruiken en klik op Apply to login screen.
De plugin neemt uitsluitend de geselecteerde instellingen over. Je Divi-website, thema-instellingen en globale kleuren blijven ongewijzigd.
Je houdt dus de controle over welke onderdelen van je websiteontwerp op het WordPress-inlogscherm verschijnen.
4. Pas het ontwerp verder aan in de Customizer
Wil je bijvoorbeeld toch een andere achtergrond, een groter logo of een iets andere knopkleur? Open dan de WordPress Customizer via de plugin.
Daar kun je het resultaat in een veilige live preview bekijken en de verschillende onderdelen verder aanpassen. Je kunt onder andere de achtergrond, het formulier, de knop, het logo en de accentkleuren afzonderlijk instellen.
Ben je tevreden met het resultaat? Klik dan op Publiceren.
5. Controleer je nieuwe WordPress-inlogpagina
Open vervolgens de standaard WordPress-inlogpagina van je website, bijvoorbeeld via jouwdomein.nl/wp-login.php. Je ziet nu het ontwerp dat je zojuist hebt ingesteld.
Controleer ook even hoe het formulier er op een mobiele telefoon uitziet en of je tekst en knoppen goed leesbaar zijn.
Blijft de loginpagina automatisch gekoppeld aan Divi?
Nee, en dat is bewust zo ontworpen.
De plugin gebruikt je Divi-ontwerp als uitgangspunt, maar slaat de gekozen instellingen afzonderlijk op. Als je later je globale kleuren of knopstijlen in Divi wijzigt, verandert je bestaande WordPress-inlogpagina dus niet onverwacht mee.
Wil je je nieuwe Divi-huisstijl ook op je inlogpagina toepassen? Dan kun je de gevonden instellingen opnieuw bekijken en de gewenste onderdelen overnemen.
Werkt dit ook met Divi 4?
Ja. DP Websolutions – Login Branding ondersteunt zowel Divi als Divi 5. Welke kleuren en stijlen automatisch kunnen worden herkend, hangt af van de instellingen die je in de betreffende Divi-versie gebruikt.
Zelfs als je een onderdeel niet automatisch kunt overnemen, kun je het nog steeds handmatig aanpassen in de WordPress Customizer.
Je WordPress-inlogpagina aanpassen zonder CSS
Je kunt de standaard WordPress-inlogpagina natuurlijk ook zelf met CSS en WordPress-hooks aanpassen. Maar voor veel website-eigenaren en webdesigners betekent dat vooral dat ze hun logo, kleuren en knopstijlen een tweede keer moeten configureren.
Werk je al met Divi, dan is het praktischer om de huisstijl die je hebt ontworpen als uitgangspunt te nemen.
Daarvoor heb ik DP Websolutions – Login Branding ontwikkeld: een gratis WordPress-plugin die bestaande websitebranding herkent, zodat je de standaard inlogpagina eenvoudig kunt laten aansluiten bij de rest van je website.
Wil je het zelf proberen? Installeer de plugin gratis via WordPress.org en geef je WordPress-inlogpagina dezelfde uitstraling als je Divi-website.