Design del banner
Personalizza l'aspetto del banner cookie per adattarlo al tuo sito
Dove impostare il design
Puoi configurare il design del banner cookie nella dashboard di Consentio, nella sezione Designer del tuo sito. Le modifiche hanno effetto immediato sul tuo sito.
Layout disponibili
Scegli tra diversi layout predefiniti:
Box (modale)
Una classica finestra modale al centro dello schermo. Adatta ai siti che vogliono assicurarsi che gli utenti notino il banner.
Barra (banner)
Una barra orizzontale in fondo o in cima allo schermo. Un'opzione meno invasiva che non ostacola la navigazione dei contenuti.
Nuvola (flottante)
Una finestra flottante compatta in un angolo dello schermo. Un'opzione minimalista per i siti che preferiscono un design discreto.
Posizione
A seconda del layout scelto, puoi impostare la posizione:
| Layout | Posizioni disponibili |
|---|---|
| Box | Centro dello schermo |
| Barra | In alto, In basso |
| Nuvola | In basso a sinistra, In basso a destra, In alto a sinistra, In alto a destra |
Schema colori
Personalizza i colori del banner per adattarli al tuo brand:
Temi predefiniti
- Chiaro - Sfondo chiaro, testo scuro
- Scuro - Sfondo scuro, testo chiaro
- Automatico - In base all'impostazione di sistema dell'utente
Colori personalizzati
Imposta colori personalizzati per i singoli elementi:
- Sfondo - Colore di sfondo del banner
- Testo - Colore del testo principale
- Pulsante primario - Colore del pulsante "Accetta tutti"
- Pulsante secondario - Colore del pulsante "Rifiuta"
- Link - Colore dei link
Tipografia
Imposta i font per il testo del banner:
- Famiglia di font - Scegli tra Google Fonts o usa un font di sistema
- Dimensione del testo - Dimensione del testo principale
- Dimensione del titolo - Dimensione del titolo del banner
Animazioni
Imposta l'animazione per la comparsa e la scomparsa del banner:
- Dissolvenza - Comparsa e scomparsa graduale
- Scorrimento - Ingresso dal bordo dello schermo
- Nessuna - Nessuna animazione
Raggio dei bordi
Imposta il raggio dei bordi per il banner e i pulsanti:
- Nessuno - Angoli netti (0px)
- Piccolo - Arrotondamento leggero (4px)
- Medio - Arrotondamento medio (8px)
- Grande - Arrotondamento marcato (16px)
- Completo - Arrotondamento massimo (999px)
Limitazioni di piano
Alcune opzioni di personalizzazione sono disponibili solo nei piani a pagamento:
| Funzionalità | Free | Pro |
|---|---|---|
| Layout | Solo Barra | Tutti |
| Temi colore | Chiaro/Scuro | Colori personalizzati |
| Font | Sistema | Google Fonts + personalizzati |
| Badge "Powered by" | Obbligatorio | Facoltativo |
Testo del banner
Modifica il testo mostrato nel banner:
- Titolo - Titolo principale del banner
- Descrizione - Testo esplicativo sui cookie
- Pulsante Accetta - Testo del pulsante per accettare tutti i cookie
- Pulsante Rifiuta - Testo del pulsante di rifiuto
- Link impostazioni - Testo per aprire le preferenze
Anteprima delle modifiche
Nel designer puoi vedere un'anteprima dal vivo del banner. Puoi:
- Passare dalla vista desktop a quella mobile
- Testare stati diversi (prima visualizzazione, centro preferenze)
- Verificare l'aspetto in modalità chiara/scura
Personalizzazione CSS
Per una personalizzazione avanzata puoi usare CSS personalizzato. Il widget utilizza variabili CSS:
/* Esempio di override degli stili */
.consentio-banner {
--consentio-bg: #ffffff;
--consentio-text: #1a1a1a;
--consentio-primary: #10b981;
--consentio-primary-hover: #059669;
--consentio-border-radius: 12px;
}