Vorresti che il tuo banner per i cookie sembrasse appartenere al tuo sito piuttosto che esservi applicato esternamente? La scheda Stile sotto Progettazione banner controlla i colori del banner, la dimensione del testo e la forma e il colore dei suoi tre pulsanti. Tutto ciò di cui hai bisogno è WPConsent installato e attivato.
Questa guida esamina ogni impostazione su quella scheda e mostra come verificare il tuo lavoro nell'anteprima live prima di salvare.
Indice
- Impostazione dei colori e della dimensione del testo del banner
- Formare i pulsanti
- Colorare i tre pulsanti
- Anteprima del banner
- Salvataggio degli stili
- Domande frequenti
Prima di iniziare, assicurati che WPConsent sia installato e attivato sul tuo sito WordPress.
Impostazione dei colori e della dimensione del testo del banner
Per iniziare, apriremo la scheda che contiene i colori e la dimensione del testo del banner.
Dalla barra laterale di amministrazione di WordPress, vai su WPConsent » Progettazione banner.
Progettazione banner si apre nella scheda Layout. In cima alla pagina ci sono tre schede in ordine: Layout, poi Stile, poi Contenuto. Per accedere alle impostazioni di stile, fai clic su Stile.
Le tre schede dividono il banner in tre compiti. Layout decide la forma del banner e dove si trova, e la nostra guida alle opzioni di layout del banner lo copre. Contenuto contiene ogni parola che il banner dice, coperto nella nostra guida al contenuto e testo del banner. Stile, la scheda su cui ci troviamo, gestisce come appare tutto.
Ogni impostazione su questa scheda alimenta un'anteprima live che si apre da un pulsante nell'intestazione della pagina. Puoi provare un colore o una forma del pulsante e vedere il risultato prima di impegnarti.
La prima sezione del pannello si chiama Banner e contiene le tre impostazioni che definiscono la forma del banner stesso.
Colore di sfondo riempie il pannello del banner e Colore del testo si applica al messaggio del banner. La coppia colora anche il pulsante delle impostazioni fluttuanti, se lo hai attivato. Dimensione del carattere imposta la dimensione del testo del messaggio.
WPConsent disegna il banner all'interno del proprio contenitore isolato, quindi i colori che scegli qui sono i colori che i visitatori vedono indipendentemente da ciò che fa il foglio di stile del tuo tema.
Per cambiare un colore, fai clic sul campo Colore di sfondo.
Il selettore ti offre un'area sfumata per la tonalità, un cursore verticale per la tinta e una riga di predefiniti in fondo. Puoi anche digitare direttamente un valore esadecimale nel campo, che è il percorso più veloce quando conosci già il colore del tuo marchio. Colore del testo e i sei colori dei pulsanti più in basso aprono tutti lo stesso selettore.
Fare clic in un punto qualsiasi al di fuori del selettore lo chiude e il piccolo quadrato accanto al campo continua a mostrare il colore su cui sei atterrato.
Per il testo del messaggio, apri il menu a discesa Dimensione del carattere.
L'elenco va da 12px a 30px a passi di 2px. Questa impostazione governa il testo del messaggio del banner. Il testo del pulsante è dimensionato da Dimensione del pulsante invece, che la sezione successiva copre.
Formare i pulsanti
Un gruppo di impostazioni definisce contemporaneamente tutti i pulsanti del banner, quindi dimensioni e forma vengono impostate una sola volta anziché pulsante per pulsante.
Sotto un divisore, la sezione Pulsanti contiene tre menu a discesa. Inizia con Dimensione pulsante.
Dimensione pulsante imposta l'altezza e la dimensione del testo insieme. Piccolo fornisce un pulsante da 30px con testo da 14px, Normale fornisce 45px e 15px, e Grande fornisce 60px e 18px.
Piccolo si adatta a un banner che vuoi che rimanga discreto, e Grande si adatta a uno su cui vuoi che i visitatori agiscano subito.
Angolo pulsante imposta quanto sono arrotondati gli angoli. Quadrato fornisce angoli netti, e Leggermente Arrotondato un piccolo raggio di 4px. Arrotondato fornisce un raggio di 20px, che appare come una pillola sulle dimensioni più piccole dei pulsanti.
Quello da scegliere è quello che corrisponde ai pulsanti già utilizzati dal tuo tema. Quadrato si adatta a un design netto ed editoriale e Arrotondato a uno più morbido, con Leggermente Arrotondato che si posiziona tra i due.
Tipo pulsante è quello che vale la pena visualizzare in anteprima. Per vederlo, apri Tipo pulsante e scegli Contornato.
Pieno fornisce a ciascun pulsante un riempimento solido. Contornato rende l'interno del pulsante trasparente e disegna un bordo di 2px nel colore che Pieno usa come riempimento.
I pulsanti contornati si posizionano più discretamente su una pagina affollata, e i pulsanti pieni appaiono più chiaramente cliccabili.
Tutte e tre queste impostazioni raggiungono anche i pulsanti nel pannello delle preferenze. I pulsanti che i visitatori vedono dopo aver aperto le loro impostazioni sui cookie corrispondono a quelli sul banner. La nostra guida sul pannello delle preferenze copre quella schermata.
Colorare i tre pulsanti
Sotto un altro divisore, la sezione Colore pulsante abbina un colore di sfondo e un colore del carattere per ciascuno dei tre pulsanti del banner. Inizia con Sfondo Accetta.
Le tre righe seguono i tre pulsanti del banner. Sfondo Accetta e il suo Colore carattere stilizzano il pulsante di accettazione. Sfondo Rifiuta e il suo Colore carattere stilizzano il pulsante di rifiuto. Sfondo Personalizza e il suo Colore carattere stilizzano il pulsante delle preferenze.
Dare al pulsante di accettazione il colore più forte e lasciare gli altri due più discreti è una scelta comune. Mantiene il banner leggibile a colpo d'occhio.
Nota: Con Tipo pulsante impostato su Contornato, ogni colore di sfondo diventa invece il colore del bordo di quel pulsante. Un pulsante contornato non ha riempimento dietro il suo testo, quindi ogni Colore carattere deve essere leggibile sullo sfondo del tuo banner anziché sul pulsante.
Se hai attivato il pulsante delle impostazioni fluttuante, una sezione Design pulsante impostazioni fluttuante segue questa con un selettore di icone. La nostra guida sul pulsante di consenso fluttuante copre quell'impostazione.
Anteprima del banner
WPConsent può visualizzare il tuo banner sulla pagina di amministrazione a grandezza naturale. Questo è il modo più rapido per giudicare una scelta di colore prima che vada online.
In alto a destra della pagina, fai clic su Anteprima.
L'overlay utilizza le impostazioni attualmente visualizzate anziché quelle salvate l'ultima volta, quindi le modifiche non salvate vi compaiono. Con Tipo pulsante impostato su Pieno, ogni pulsante ha uno sfondo solido.
Con Tipo pulsante impostato su Contornato, gli stessi tre pulsanti mantengono un bordo e perdono il loro riempimento.
Questa anteprima mostra anche perché il colore del carattere è più importante una volta che il riempimento è scomparso. Ogni pulsante mantiene il colore del carattere che gli è stato assegnato per lo stile riempito e, con il riempimento rimosso, quel colore ora si trova sullo sfondo del banner. Passare a Contorno è quindi un buon momento per controllare i tre campi Colore del carattere.
L'anteprima rimane aperta mentre continui a lavorare e segue ogni modifica apportata nella scheda. Lo stesso pulsante la nasconde di nuovo.
Salvataggio degli stili
Nulla in questa scheda viene memorizzato finché non salvi, quindi l'ultimo passaggio consiste nel confermare ciò che hai impostato.
Quando il tuo banner ha l'aspetto desiderato, scorri fino in fondo al pannello. Quindi fai clic su Salva e continua.
Questo pulsante memorizza i tuoi stili e ti sposta alla scheda Contenuto, che è il passaggio successivo nella sequenza di tre schede. Il link Indietro accanto ad esso ritorna a Layout senza salvare.
Il pulsante Salva in alto a destra della pagina memorizza le stesse impostazioni e ti lascia sulla scheda Stile. Quella è da usare quando lo stile è l'unica cosa che sei venuto qui a cambiare.
Ecco fatto! Il tuo banner di consenso ora riporta i tuoi colori, la dimensione del carattere e le forme dei pulsanti.
Successivamente, dai un'occhiata alla nostra guida su contenuto e testo del banner per impostare il messaggio e le etichette dei pulsanti che il tuo banner mostra.
Domande frequenti
I miei nuovi colori non vengono visualizzati sul mio sito
Svuota le cache e ricarica il sito. Gli stili del banner fanno parte della pagina che WPConsent renderizza. Un plugin di caching o una cache di pagina a livello di host possono continuare a servire la versione precedente alla tua modifica. La nostra guida sulla gestione del database e della cache copre le cache che WPConsent gestisce autonomamente.
Perché il testo del mio pulsante contornato sembra invisibile?
Un pulsante contornato ha un interno trasparente, quindi il suo testo si trova direttamente sullo sfondo del banner e mantiene il colore del carattere che gli hai assegnato. Il testo bianco su un banner bianco è la causa più comune. Assegna a ciascun pulsante un colore del carattere che contrasti con il colore di sfondo, oppure reimposta il tipo di pulsante su Riempito.
La dimensione del carattere cambia anche il testo del pulsante?
No. La dimensione del carattere si applica al messaggio del banner. Il testo del pulsante è dimensionato dalla dimensione del pulsante, che abbina testo 14px a Piccolo, 15px a Regolare e 18px a Grande.
Questi stili si applicano al pannello delle preferenze?
In parte. Il colore di sfondo, il colore del testo e le tre coppie di colori dei pulsanti vengono trasferiti al pannello delle preferenze, così come la dimensione del pulsante, l'angolo del pulsante e il tipo di pulsante. La dimensione del carattere si applica al messaggio del banner.
Il mio tema sovrascriverà gli stili del banner?
No. WPConsent renderizza il banner all'interno di una shadow root, che tiene separati il CSS del tuo tema e il CSS del banner. È anche per questo che uno stile del banner deve essere modificato qui anziché nel foglio di stile del tuo tema.
Posso stilizzare qualcosa che la scheda Stile non copre?
Sì. WPConsent espone i colori e le dimensioni del banner come variabili CSS che puoi impostare tu stesso, e accetta il tuo CSS per qualsiasi cosa più specifica. Le nostre guide su come personalizzare il banner con variabili CSS e come personalizzare il banner con CSS coprono entrambi i percorsi.
L'anteprima salva qualcosa?
No. L'anteprima legge le impostazioni attualmente visualizzate, quindi mostra sia le modifiche non salvate che quelle salvate. Lasciare la pagina senza salvare annulla tutto ciò che si stava tentando.
Posso usare stili diversi su pagine diverse?
La scheda Stile imposta un aspetto per l'intero sito, quindi ogni pagina mostra lo stesso banner. Per un controllo più preciso rispetto a quello offerto dalla scheda, la nostra guida su come personalizzare il banner con CSS copre il metodo manuale.