Je hebt je website zorgvuldig ontworpen met Elementor. Je Global Colors staan goed ingesteld, je knoppen passen bij je huisstijl en je logo komt overal netjes terug.
En dan open je de WordPress-inlogpagina en zie je ineens weer de standaard WordPress-opmaak.
Wil je je WordPress-inlogpagina aanpassen met Elementor, dan hoef je niet per se een aparte loginpagina te bouwen of zelf CSS te schrijven.
Met de gratis plugin DP Websolutions – Login Branding kun je ondersteunde Elementor Global Colors en bestaande website-stijlen gebruiken als uitgangspunt voor de echte WordPress-inlogpagina op wp-login.php.
Kan Elementor wp-login.php aanpassen?
Met Elementor kun je een aparte loginpagina maken met een loginwidget of formulier, maar dat is iets anders dan het aanpassen van de standaard WordPress-inlogpagina.
De echte WordPress-login blijft gewoon beschikbaar via:
jouwdomein.nl/wp-login.php
Dat is de pagina waarop websitebeheerders, redacteuren en andere WordPress-gebruikers doorgaans inloggen.
Als je alleen wilt dat die bestaande loginpagina dezelfde uitstraling krijgt als je Elementor-website, is het vaak niet nodig om een volledig nieuwe pagina te bouwen.
DP Websolutions – Login Branding behoudt de normale WordPress-inlogpagina en past alleen de vormgeving ervan aan.
Gebruik je Elementor Global Colors op de WordPress-inlogpagina
Hier wordt de Elementor-integratie extra interessant.
Als je je huisstijl al hebt vastgelegd met Elementor Global Colors, wil je natuurlijk niet opnieuw alle HEX-codes opzoeken en je kleuren handmatig nabouwen voor de WordPress-login.
Login Branding kan ondersteunde Elementor-ontwerpwaarden herkennen en deze als keuzes aanbieden voor je loginpagina.
Je bestaande Elementor-designsysteem wordt daarmee het uitgangspunt voor de branding van je WordPress-inlogscherm.
Afhankelijk van de instellingen van je website kan de plugin onder andere ondersteunde waarden herkennen voor:
- Elementor Global Colors.
- Website- en merkkleuren.
- Achtergrondkleuren van knoppen.
- Tekst- en hoverkleuren van knoppen.
- Knopranden en afgeronde hoeken.
- Padding en typografie van knoppen.
- Tekst-, accent- en linkkleuren.
De plugin toont alleen ontwerpwaarden die betrouwbaar kunnen worden herkend. Je kunt gevonden stijlen altijd combineren met je eigen handmatige instellingen.
Waarom Elementor Global Colors gebruiken voor je loginbranding?
Global Colors zijn een van de handigste onderdelen van het designsysteem van Elementor.
In plaats van op iedere pagina net een iets andere kleur te kiezen, leg je belangrijke huisstijlkleuren één keer vast en gebruik je ze daarna door de hele website.
Je WordPress-inlogpagina hoort eigenlijk bij dezelfde merkbeleving. Het is dus logisch om daar met dezelfde kleuren te beginnen.
Je kunt bijvoorbeeld:
- Je Elementor Primary Color gebruiken voor de inlogknop.
- Je Accent Color gebruiken voor links en focuskleuren.
- Een neutrale Global Color gebruiken voor tekst.
- Je bestaande knopstijl als uitgangspunt nemen voor de loginbutton.
Je houdt zelf de controle. Login Branding zet niet automatisch alle gevonden Elementor-instellingen op je loginpagina. Je kiest zelf welke onderdelen je wilt toepassen.
WordPress-inlogpagina aanpassen met Elementor: stap voor stap
Stap 1: installeer DP Websolutions – Login Branding
Ga in je WordPress-dashboard naar Plugins → Nieuwe plugin toevoegen.
Zoek op DP Websolutions – Login Branding, installeer de plugin en activeer hem.
De plugin is gratis en speciaal bedoeld om de echte WordPress-inlogpagina vorm te geven zonder dat je zelf CSS hoeft te schrijven.
Je kunt de functies, screenshots en voorbeelden ook bekijken op:
DP Websolutions – Login Branding →
Stap 2: laat de plugin je Elementor-branding herkennen
Ga na activatie naar Weergave → Login Screen.
Login Branding analyseert de ondersteunde website-stijlen die het uit Elementor kan herkennen en toont die naast de branding die momenteel op je WordPress-loginpagina wordt gebruikt.
Dat is vooral handig als je website Elementor Global Colors gebruikt.
In plaats van Elementor te openen, een kleurcode te kopiëren, terug te gaan naar een andere instellingenpagina en hem daar opnieuw te plakken, kun je ondersteunde gevonden kleuren direct selecteren.
Stap 3: pas je Elementor-kleuren en knopstijl toe
Selecteer de gevonden ontwerp-elementen die je wilt gebruiken en klik op Apply to login screen.
Je kunt bijvoorbeeld je bestaande Elementor-knopstijl gebruiken, maar de achtergrond van je loginpagina anders instellen. Of je Global Colors toepassen en een ander logoformaat kiezen.
De plugin verandert niets aan je Elementor-instellingen. Hij gebruikt ze alleen als bron voor je loginontwerp.
Stap 4: verfijn je loginpagina
Nadat je de branding van je website hebt toegepast, kun je het resultaat verder aanpassen in de WordPress Customizer.
Daar kun je onder andere het logo, de achtergrond, het inlogformulier, de knop, links en accentkleuren aanpassen terwijl je het resultaat direct in de preview ziet.
Je hoeft geen CSS te schrijven en je hoeft het WordPress-inlogformulier niet opnieuw op te bouwen in Elementor.
Stap 5: publiceer en controleer wp-login.php
Ben je tevreden met het resultaat? Klik dan op Publiceren.
Open vervolgens:
jouwdomein.nl/wp-login.php
De standaard WordPress-inlogpagina gebruikt nu de branding die je hebt ingesteld.
Controleer het resultaat bij voorkeur ook even op mobiel, zeker als je een groot logo, extra padding of een achtergrondafbeelding gebruikt.
Blijft de loginpagina automatisch gekoppeld aan Elementor?
Nee. Dat is bewust zo ontworpen.
Login Branding kan je Elementor-ontwerp gebruiken als bron op het moment dat je de instellingen toepast, maar slaat het uiteindelijke loginontwerp afzonderlijk op.
De publieke WordPress-inlogpagina hoeft daardoor niet iedere keer Elementor uit te lezen wanneer iemand inlogt.
Dat betekent ook dat je loginpagina niet onverwacht verandert als je later een Elementor Global Color aanpast.
Wil je je loginbranding bijwerken, dan kun je de huidige website-stijlen opnieuw laten detecteren en zelf kiezen welke nieuwe waarden je wilt toepassen.
Wat gebeurt er als ik een Elementor Global Color verander?
Je bestaande loginontwerp blijft gewoon hetzelfde totdat je besluit het bij te werken.
Stel dat je tijdens een rebranding je Elementor Primary Color verandert van blauw naar groen. Je WordPress-inlogknop wordt dan niet automatisch ineens groen.
Open Login Branding opnieuw, bekijk de nieuw gevonden ontwerpwaarden en pas de nieuwe kleur toe wanneer jij daar klaar voor bent.
Zo profiteer je van je Elementor-designsysteem zonder dat je een permanente technische afhankelijkheid creëert tussen Elementor en je inlogpagina.
Heb ik Elementor Pro nodig?
Het belangrijkste is niet of je Elementor Pro gebruikt, maar of de Elementor-instellingen die je wilt hergebruiken beschikbaar zijn op je website en betrouwbaar kunnen worden herkend.
Login Branding toont de ondersteunde ontwerpwaarden die het vindt. Alles wat niet automatisch kan worden overgenomen, kun je alsnog handmatig instellen via de Customizer.
Elementor Login Widget of WordPress Login Branding?
Er zijn goede redenen om een aparte loginpagina met Elementor te bouwen.
Dat kan bijvoorbeeld handig zijn voor een ledenwebsite, klantportaal of andere frontend-omgeving waarbij gebruikers de WordPress-beheeromgeving helemaal niet hoeven te zien.
Maar dat is een ander gebruiksscenario.
Wil je gewoon:
- De echte WordPress-inlogpagina blijven gebruiken.
- Je eigen logo tonen.
- Je Elementor Global Colors gebruiken.
- Je bestaande knopstijl terug laten komen.
- Geen CSS hoeven schrijven.
dan is het vaak eenvoudiger om wp-login.php gewoon te behouden en rechtstreeks te branden.
Pas de WordPress-login aan zonder hem opnieuw te bouwen
Een professioneel vormgegeven website hoeft niet ineens generiek te worden op het moment dat iemand inlogt.
Dat is een van de redenen waarom ik DP Websolutions – Login Branding heb ontwikkeld.
In plaats van loginbranding weer een compleet nieuw designproject te maken, kun je beginnen met de visuele identiteit die je al voor je website hebt opgebouwd.
Voor Elementor-gebruikers betekent dat dat je Global Colors en ondersteunde website-stijlen kunt hergebruiken op de echte WordPress-inlogpagina.
Geen aparte loginpagina. Geen kleurcodes steeds opnieuw kopiëren. Geen maatwerk-CSS nodig.
En de plugin is volledig gratis.
Wil je je WordPress-inlogpagina dezelfde uitstraling geven als je Elementor-website?