Hoe u de kleuren van uw WooCommerce-inlogpagina aanpast

Een loginpagina in standaardblauw kan misplaatst lijken naast de eigen merkkleuren van uw winkel. Klanten merken dit. Een knop die niet overeenkomt met uw logo, of een promopanel dat niet past bij uw header, zorgt ervoor dat de pagina onafgewerkt aanvoelt. Custom Login for WooCommerce stelt u in staat de belangrijkste kleuren van de loginpagina vanaf één scherm in te stellen, zonder code.

Dit artikel laat u zien hoe u de kleuren van het paneel, de tekst, de knop, de link en de promoknop instelt. U kiest ook hoe het promopanel zich gedraagt op telefoons. Een sjabloon kiezen, formulierlabels hernoemen en promotietekst bewerken hebben elk hun eigen artikelen.

Vereisten

Als u de plugin nog niet hebt ingesteld, begin dan met Aan de slag met Custom Login for WooCommerce. Weet u niet zeker welke lay-out u moet gebruiken? Bekijk eerst hoe u een loginpagina-sjabloon kiest, omdat het sjabloon dat u kiest bepaalt welke kleurinstellingen van kracht worden.

Stap 1: Open het tabblad Ontwerp

1. Ga naar WooCommerce → Custom Login in uw WordPress-beheer.
2. Klik op het tabblad Ontwerp.

De kleurinstellingen bevinden zich in hun eigen secties: Paneelkleuren, Knopkleuren, Promoknopkleuren, Linkkleuren en Invoerkleur. Mobiele Promoweergave staat eronder.

Elke kleur heeft een kleurenpalet en een klein tekstvak. Klik op het palet om visueel een kleur te kiezen. Of typ rechtstreeks een hex-code in het tekstvak.

Voer kleuren in als hex-codes die beginnen met #, zoals #1e40af. Kleurnamen zoals "blauw" worden niet geaccepteerd. Als een waarde geen geldige hex-code is, gebruikt de loginpagina de standaardkleur van die instelling.

Stap 2: Stel de paneelkleuren in

De sectie Paneelkleuren stelt de achtergrond- en tekstkleuren in voor de twee zijden van een gesplitste loginpagina. De linkerkant bevat uw inlogformulier. De rechterkant bevat uw prommessage.

Kies een achtergrond en een tekstkleur met sterk contrast. Lichte tekst op een donkere achtergrond blijft bijvoorbeeld goed leesbaar, terwijl grijze tekst op een lichtgrijze achtergrond dat niet doet.

Stap 3: Stel de knopkleuren in

De sectie Knopkleuren styleert uw inlogknop. Hover betekent het moment dat een klant hun muis over de knop beweegt. Een andere hoverkleur vertelt hen dat de knop klaar is om te klikken.

Een hoverkleur die iets donkerder is dan de hoofdkleur werkt goed.

Stap 4: Stel de promo-knopkleuren in

De sectie Promo-knopkleuren styleert de knop in uw promopanel, zoals Meer informatie. Deze kleuren zijn alleen van belang wanneer het promopanel zichtbaar is. Als u Promo-sectie inschakelen op het tabblad Inhoud hebt uitgeschakeld, kunt u deze stap overslaan.

Zorg ervoor dat de knop opvalt tegen de Achtergrond van het rechterpaneel. Als beide dezelfde kleur hebben, valt de knop weg in het paneel.

Stap 5: Stel de linkkleuren in

De sectie Linkkleuren styleert de link Uw wachtwoord vergeten? onder het inlogformulier.

Stap 6: Stel de invoerveldkleuren in

De sectie Invoerveldkleuren styleert de vakken E-mailadres en Wachtwoord.

Focus betekent het vak waar een klant op heeft geklikt. Een vettere focuskleur laat zien waar ze zich op het formulier bevinden.

Stap 7: Kies hoe de promo wordt weergegeven op mobiel

Op een breed scherm staat het promopanel naast het inlogformulier. Op een telefoon is er geen ruimte voor beide. De sectie Mobiele Promoweergave bepaalt wat er in plaats daarvan gebeurt.

Deze opties zijn van toepassing op schermen van ongeveer 768 pixels breed of smaller. Op Gradient Modern en Warm Organic vindt de overgang plaats bij 900 pixels. Stapelen onder het inlogformulier heeft alleen effect wanneer Promosectie inschakelen is ingeschakeld.

Kies Verbergen op mobiel voor de snelste, schoonste login. Kies Stapelen onder het inlogformulier wanneer je promo een aanbieding bevat die je telefoonkopers wilt laten zien.

Stap 8: Sla je inlogpagina op en controleer deze

1. Klik op Instellingen opslaan.
2. Log uit of open een privé browsertabblad.
3. Bezoek jouwwinkel.nl/login om de nieuwe kleuren te zien.
4. Beweeg de muis over de inlogknop om de hoverkleur te controleren.
5. Beweeg de muis over de link Uw wachtwoord vergeten? om de hoverkleur te controleren.
6. Open de pagina op je telefoon om de mobiele lay-out te controleren.

Welke kleuren elke sjabloon gebruikt

Elk sjabloon leest je kleurensinstellingen, maar sommige sjablonen stellen ook een paar eigen kleuren in. Die sjabloonkleuren hebben voorrang op de bijpassende instelling. Classic Split volgt al je kleuren. De andere sjablonen behouden een deel van hun ingebouwde uiterlijk, dus sommige instellingen hebben daar geen zichtbaar effect.

“Gedeeltelijk” betekent dat de formulierlabels uw tekstkleur gebruiken, maar de template stelt zijn eigen kleuren voor koppen en promotieteksten in. Gecentreerde Kaart verbergt het promopanel op brede schermen, dus de promo-instellingen hebben daar niets om in te kleuren.

Op elke template kleuren Knop Achtergrond ook de Onthoud Mij-checkbox wanneer deze is aangevinkt.

Als u volledige controle wilt over elke kleur, kies dan Klassieke Splitsing. Voor gedetailleerde instructies, zie hoe u een loginpaginasjabloon kiest.

Probleemoplossing

Veelgestelde vragen

Hulp nodig?

Custom Login voor WooCommerce is een premium plugin, dus als u problemen ondervindt, opent u een ondersteuningsticket en ons team kan u helpen met de installatie.