Je kunt de lay-out van de loginpagina op verschillende manieren aanpassen. Je kunt dit doen door middel van de Divi login module en met de plugin LoginPress. Daarnaast kun je ook een kant-en-klare Divi Layout hiervoor gebruiken (zie de Divi Layouts pagina). De Divi module is wat minder visueel in het aanpassen, maar geeft de mogelijkheid om de loginpagina echt een eigen custom styling te geven. LoginPress is een handige plugin om op een visuele manier eenvoudig de loginpagina aan te passen, maar behoudt (zonder pro versie) altijd wat meer de WordPress look-and-feel. Voor beide opties lees je hieronder de uitgebreide uitleg.
Belangrijk: het ontwerp/aanpassingen die je doet met LoginPress worden ook overgenomen op de Wachtwoord vergeten? pagina en op de pagina waar je klanten hun nieuwe wachtwoord kunnen instellen. De Divi login module doet dit niet. Je kan de Divi login module desgewenst prima gebruiken in combinatie met LoginPress.
Divi module
- Voeg een nieuwe pagina toe
- Klik op de nieuwe pagina op het grijze plusje en kies de ‘Login’ module.
- Na het toevoegen van de module, openen direct de instellingen van de module. Je kunt hier de content (inhoud) van de module aanpassen en het ontwerp.
Content aanpassen
Je kunt de titel en tekst van de module aanpassen onder het tabje ‘content’. Hieronder de opties:
- Titel
Pas hier de titel aan van de module. - Corps
Hier kun je de tekst onder de titel aanpassen of dit veld leeg maken als je geen tekst wilt tonen.
Ontwerp aanpassen
Je kunt de vormgeving van de ‘Login’ module naar wens aanpassen. Onder de tabjes ‘content’ en ‘ontwerp’ heb je verschillende opties. Hieronder lees je wat je per onderdeel kunt aanpassen:
- Achtergrondkleur
Content > Achtergrond: hier kun je een achtergrondkleur of achtergrondverloop kiezen.
- Velden
Ontwerp > Velden: pas hier o.a. kleuren, witruimte en lettertype aan van de velden voor de gebruikersnaam en het wachtwoord. Je ziet hier aparte kleuren voor ‘focus’, dit zijn de kleuren die iemand ziet wanneer ze in het veld hebben geklikt.
- Titel
Ontwerp > Titel tekst: je kunt hier de grootte, kleur en het lettertype aanpassen voor de titel.
- Tekst onder titel
Ontwerp > Corps tekst: je kunt hier de grootte, kleur en het lettertype aanpassen voor de tekst onder de titel.
- Knop
Ontwerp > Knop: de knop krijgt automatisch de standaard vormgeving mee. Wil je hier van afwijken, dan kun je het schuifje omzetten bij ‘Aangepaste stijlen gebruiken voor knop’ en hier de gewenste vormgeving instellen.
- Formaat
Ontwerp > Formaat wijzigen: je kunt hier het formaat van de module aanpassen. Let hierbij wel op dat dit op desktop, tablet en mobiel anders zal ogen. Je kunt daarom per schermformaat een andere instelling meegeven bij veel onderdelen (zie screenshot).
- Afstand
Ontwerp > Afstand: je kunt hier de witruimte om de module heen aanpassen (marge) en de witruimte binnen de module (buffer). Let hierbij ook weer op de verschillende schermformaten.
- Rand
Ontwerp > Rand: hier kun je de instellingen aanpassen voor de rand om de module heen.
- Box shadow
Ontwerp > Box shadow: wanneer je een schaduw achter de module wilt, kun je deze hier instellen.
Loginpagina instellen
- Voeg de loginpagina toe aan het juiste menu.
- WordPress gebruikt nog steeds de loginpagina die je hebt ingesteld bij de Poppyz instellingen. Zorg daarom dat je geen pagina hebt geselecteerd bij de Poppyz instellingen (zie screenshot). Anders treedt er namelijk een conflict op.
LoginPress plugin
Plugin installeren
- Ga in het WordPress menu naar Plugins > Nieuwe plugin
- Typ in het zoekvenster ‘LoginPress’
- Installeer en activeer de plugin
Stel de juiste loginpagina in
- Ga in het WordPress menu naar Cursussen > Instellingen
- Zet Inlog pagina op ‘Selecteer een pagina’, zodat hier geen pagina geselecteerd staat
- Sla wijzigingen op
Pas de loginpagina aan naar wens
- Ga in het WordPress menu naar LoginPress > Customizer
- Vanuit deze customizer kun je veel onderdelen van de loginpagina aanpassen. Hieronder lees je per onderdeel wat je hier kunt wijzigen met de gratis versie van de plugin:
- Thema’s: hier kun je een thema kiezen. Bij de gratis versie van de plugin zit één thema: Default.
- Logo: upload hier je eigen logo en stel de juiste formaten in.
- Achtergrond: kies hier een andere achtergrondafbeelding, of kies voor een achtergrondkleur. Je kunt hier ook de positie en grootte van een achtergrondafbeelding aanpassen.
- Pas login formulier aan: je kunt ervoor kiezen om hier het formulier en de velden aan te passen in kleur of grootte.
- Aanpassen vergeet formulier: je kunt hier de achtergrond aanpassen voor het formulier dat je te zien krijgt zodra je op ‘Wachtwoord vergeten’ klikt.
- Knop schoonheid: je kunt hier alle instellingen van de ‘Inloggen’ knop naar wens aanpassen.
- Fout berichten: wanneer gewenst kun je hier de foutmeldingen aanpassen naar je eigen teksten.
- Welkomst berichten: wanneer gewenst kun je hier nog een aantal standaard teksten aanpassen.
- Formulier footer: hier kun je de instellingen aanpassen voor het deel van het formulier onder de ‘Inloggen’ knop.
Standaard laat de LoginPress plugin het tekstje ‘Powered by LoginPress’ rechts onderin zien. Dit tekstje kun je verbergen door onderaan het schuifje bij ‘Toon wat liefde…’ uit te schakelen.
- Zodra je klaar bent met alle wijzigingen, klik je op ‘Publiceren’.