Come personalizzare i colori della tua pagina di accesso WooCommerce

Una pagina di login nel blu predefinito può stonare accanto ai colori del brand del tuo negozio. I clienti se ne accorgono. Un pulsante che non corrisponde al tuo logo, o un pannello promozionale che contrasta con l'intestazione, rende la pagina incompleta. Custom Login for WooCommerce ti permette di impostare i colori principali della pagina di login da un'unica schermata, senza codice.

Questo articolo ti mostra come impostare i colori del pannello, del testo, dei pulsanti, dei link, degli input e dei pulsanti promozionali. Sceglierai anche come si comporta il pannello promozionale sui telefoni. Scelta di un template, rinominare le etichette del modulo e modificare il testo della promozione hanno ciascuno i propri articoli.

Prerequisiti

Se non hai ancora configurato il plugin, inizia con Guida introduttiva a Custom Login for WooCommerce. Non sei sicuro di quale layout utilizzare? Consulta prima come scegliere un template per la pagina di login, perché il template che scegli decide quali impostazioni di colore avranno effetto.

Passaggio 1: Apri la scheda Design

1. Vai su WooCommerce → Custom Login nella tua bacheca WordPress.
2. Fai clic sulla scheda Design.

Le impostazioni dei colori si trovano nelle loro sezioni dedicate: Colori Pannello, Colori Pulsanti, Colori Pulsanti Promozionali, Colori Link e Colori Input. Visualizzazione Promozione Mobile si trova sotto di esse.

Ogni colore ha una campitura e una piccola casella di testo. Fai clic sulla campitura per scegliere un colore visivamente. Oppure digita un codice hex direttamente nella casella di testo.

Inserisci i colori come codici hex che iniziano con #, come #1e40af. I nomi dei colori come "blu" non sono accettati. Se un valore non è un codice hex valido, la pagina di login utilizza invece il colore predefinito di quell'impostazione.

Passaggio 2: Imposta i colori del pannello

La sezione Colori Pannello imposta i colori di sfondo e del testo per i due lati di una pagina di login divisa. Il lato sinistro contiene il modulo di login. Il lato destro contiene il messaggio promozionale.

Scegli un colore di sfondo e uno di testo con un forte contrasto. Ad esempio, il testo chiaro su uno sfondo scuro rimane facile da leggere, mentre il testo grigio su uno sfondo grigio pallido no.

Passaggio 3: Imposta i colori dei pulsanti

La sezione Colori Pulsanti definisce lo stile del tuo pulsante di login. Hover indica il momento in cui un cliente sposta il mouse sul pulsante. Un colore di hover diverso indica che il pulsante è pronto per essere cliccato.

Un colore al passaggio del mouse leggermente più scuro del colore principale funziona bene.

Passaggio 4: Imposta i colori del pulsante promozionale

La sezione Colori del pulsante promozionale definisce lo stile del pulsante all'interno del tuo pannello promozionale, come Scopri di più. Questi colori sono importanti solo quando il pannello promozionale è visibile. Se hai disattivato Abilita sezione promozionale nella scheda Contenuto, puoi saltare questo passaggio.

Assicurati che il pulsante risalti rispetto allo Sfondo del pannello destro. Se entrambi sono dello stesso colore, il pulsante si fonde nel pannello.

Passaggio 5: Imposta i colori dei link

La sezione Colori dei link definisce lo stile del link Hai perso la password? sotto il modulo di accesso.

Passaggio 6: Imposta i colori degli input

La sezione Colori degli input definisce lo stile delle caselle Indirizzo email e Password.

Il focus indica il riquadro in cui un cliente ha cliccato. Un colore di focus più audace mostra loro dove si trovano nel modulo.

Passaggio 7: Scegli come viene visualizzata la promozione su mobile

Su uno schermo largo, il pannello promozionale si trova accanto al modulo di accesso. Su un telefono non c'è spazio per entrambi. La sezione Mobile Promo Display ti permette di decidere cosa succede invece.

Queste opzioni si applicano a schermi di circa 768 pixel di larghezza o più stretti. Su Gradient Modern e Warm Organic, il passaggio avviene a 900 pixel. Stack below login form ha effetto solo quando Enable promo section è attivo.

Scegli Hide on mobile per un accesso più veloce e pulito. Scegli Stack below login form quando la tua promozione contiene un'offerta che vuoi che gli acquirenti da telefono vedano.

Passaggio 8: Salva e controlla la tua pagina di accesso

1. Fai clic su Save Settings.
2. Disconnettiti o apri una finestra del browser privata.
3. Visita tuonegozioweb.com/login per vedere i nuovi colori.
4. Passa il mouse sopra il pulsante di accesso per controllare il suo colore al passaggio del mouse.
5. Passa il mouse sopra il link Lost your password? per controllare il suo colore al passaggio del mouse.
6. Apri la pagina sul tuo telefono per controllare il layout mobile.

Quali colori utilizza ciascun modello

Ogni modello legge le tue impostazioni di colore, ma alcuni modelli impostano anche alcuni colori propri. Quei colori del modello prevalgono sull'impostazione corrispondente. Classic Split segue tutti i tuoi colori. Gli altri modelli mantengono parte del loro aspetto integrato, quindi alcune impostazioni non hanno alcun effetto visibile lì.

“Parzialmente” significa che le etichette del modulo utilizzano il tuo colore del testo, ma il modello imposta i propri colori per le intestazioni e il testo promozionale. Centered Card nasconde il pannello promozionale sugli schermi larghi, quindi le impostazioni promozionali non hanno nulla da colorare lì.

Su ogni modello, Button Background colora anche la casella di controllo Remember Me quando è selezionata.

Se desideri il controllo completo di ogni colore, scegli Classic Split. Per istruzioni dettagliate, consulta come scegliere un modello di pagina di accesso.

Risoluzione dei problemi

Domande frequenti

Serve aiuto?

Custom Login for WooCommerce è un plugin premium, quindi se riscontri problemi, apri una richiesta di supporto e il nostro team potrà aiutarti a configurarlo.