Personalizzare il layout del banner (versione Legacy)

Puoi personalizzare il layout e lo stile del tuo banner direttamente nell'applicazione. Questo ti permette di creare un aspetto e un'esperienza in linea con il brand e con l'esperienza utente della tua organizzazione.

Per accedere a queste opzioni, vai su:
Cookie banner > Style

Position

Scegli dove e come comparirà il banner sul tuo sito web:

1. Popup: Al centro dello schermo.
2. Overlay: Funziona come il popup, ma blocca la pagina finché l'utente non interagisce con il banner.
3. Bar at the top: Fissa in alto sullo schermo.
4. Bar at the top (pushdown): Scorre verso il basso dall'alto, spingendo giù il contenuto. (Nota: potrebbe non funzionare bene con gli header fissi.)
5. Floating at the top left: Posizionato in alto a sinistra con un piccolo margine.
6. Floating at the top center: Posizionato in alto al centro con un piccolo margine.
7. Floating at the top right: Posizionato in alto a destra con un piccolo margine.
8. Bar at the bottom: Fissa in basso sullo schermo.
9. Floating at the bottom left: Posizionato in basso a sinistra con un piccolo margine.
10. Floating at the bottom center: Posizionato in basso al centro con un piccolo margine.
11. Floating at the bottom right: Posizionato in basso a destra con un piccolo margine.

Theme

Seleziona un tema per controllare padding, stile dei pulsanti e aspetto:

1. Block: Padding ridotto, pulsanti quadrati con larghezza proporzionale.
2. Classic: Padding ridotto, pulsanti arrotondati della stessa larghezza.
3. Edgeless: Nessun padding, pulsanti quadrati della stessa larghezza.
4. Wired: Come Block, ma con sfondi e colori dei pulsanti invertiti.

Confronto tra i temi

Text Alignment

Si applica a titolo, messaggio e logo del banner:

• Left
• Center
• Right

Width

Regola la larghezza del banner usando le unità em (relative alla dimensione del font). Esempio: 2em = il doppio della dimensione del font.

• Si controlla con uno slider.
• Funziona con l'anteprima live per risultati immediati.
• Utile per messaggi o etichette dei pulsanti più lunghi.
• Nota: si applica solo alle posizioni banner, non alle barre (le barre occupano sempre tutta la larghezza).

Font Size

Regola la dimensione del testo usando le unità px. Esempio: 1px = 1/96 di pollice.

• Si controlla con uno slider.
• Funziona con l'anteprima live.
• Per impostazione predefinita usa la dimensione impostata dal tema del tuo negozio.

Padding

Regola lo spazio all'interno del banner usando le unità px.

• Si controlla con uno slider.
• Funziona con l'anteprima live.
• I valori predefiniti variano in base al tema.
• Nota: non supportato con il tema Edgeless.

Colors

Personalizza i colori del banner e dei pulsanti:

• Scegli da una palette o definisci colori personalizzati.
• Supporta i formati Hex (ad esempio #123456) e RGBA.
• RGBA aggiunge il supporto alla trasparenza, oltre ai valori di rosso, verde e blu.

Font Family

Per impostazione predefinita, il banner eredita il font del tema del tuo negozio. Puoi anche scegliere tra i font web-safe supportati da tutti i browser:

• Arial, Arial Black, Verdana, Tahoma, Trebuchet MS, Impact
• Times New Roman, Didot, Georgia, American Typewriter
• Andalé Mono, Courier, Lucida Console, Monaco
• Bradley Hand, Brush Script MT, Luminari, Comic Sans MS

Se vuoi usare un font personalizzato, caricalo prima negli asset del tuo negozio e rendilo disponibile nel tuo file CSS.

z-index

Controlla l'ordine di sovrapposizione del banner.

• Valori più alti garantiscono che il banner compaia sopra gli altri elementi della pagina.
• Modificalo in caso di conflitti con altre app o script.

Container ID

Definisce l'ID HTML del contenitore del banner.

• Modificalo solo se hai bisogno di raggiungere il banner con script personalizzati o selettori CSS.

Banner Shadow

Aggiunge un'ombra dietro il banner.

• Utile quando i colori del banner e dello sfondo sono simili, per migliorare la visibilità.

Animation

Attiva le animazioni per la comparsa e la chiusura del banner:

• Fade-in / slide-in all'apertura.
• Fade-out / slide-out alla chiusura.

Si applica anche al link Re-open banner (Revoke), se attivato in Behavior.

• Nota: non supportato da tutti i browser.

Custom CSS

Aggiungi le tue regole CSS per una personalizzazione ulteriore.

• Utile per rifinire dimensioni dei pulsanti, colori dei bordi, spaziature e altro.

Guida video

Aggiornato il: 20/10/2026