> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.pandectes.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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**

| Tema | Padding | Stile dei pulsanti | Larghezza dei pulsanti |
| ---- |
| **Block** | Ridotto | Quadrato | Proporzionale |
| **Classic** | Ridotto | Arrotondato | Uguale |
| **Edgeless** | Nessuno | Quadrato | Uguale |
| **Wired** | Ridotto | Quadrato (colori invertiti) | Proporzionale |

### 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

${youtube}[How to customize your cookie banner in Pandectes GDPR compliance](Q_fGcnwDQxk)