Progettare un banner
Sfondo, colori, spaziatura, pulsante di chiusura e come rendere cliccabile l'intera barra.
Il pannello Design è l’icona del pennello nella barra laterale del builder. Riguarda tutto l’aspetto della barra, esclusi gli elementi stessi.
Le impostazioni di Design si applicano all’intera barra, non a un singolo elemento.
Aspetto e sfondo
Sezione intitolata “Aspetto e sfondo”Tre stili di sfondo:
| Stile | Cosa imposti |
|---|---|
| Solid | Un solo colore |
| Gradient | Un colore di partenza, un colore di arrivo e un angolo |
| Image | Un’immagine che copre la barra |
| Impostazione | Cosa riguarda |
|---|---|
| Font | Il carattere tipografico. Lascialo sul carattere del tema, a meno che la barra non ne richieda uno proprio. |
| Text | Il colore del testo della barra |
| Accent | Pulsanti, codici sconto e countdown, a meno che a uno non sia assegnato un colore proprio |
Accent è l’impostazione da capire bene. Impostalo una volta e il pulsante, il contorno del codice e il timer lo seguono tutti. Assegna a un elemento un colore proprio e quell’elemento smette di seguirlo.
Pulsante di chiusura e link
Sezione intitolata “Pulsante di chiusura e link”Due cose distinte, entrambe relative a ciò che accade quando una persona interagisce con la barra.
Close button
Sezione intitolata “Close button”Attivalo e alla fine della barra compare una ×. Imposta il suo colore e il colore al passaggio del mouse.
Quando una persona chiude il banner, per lei resta chiuso: l’app lo ricorda nel browser, quindi non ricompare nella pagina successiva.
Whole bar clickable
Sezione intitolata “Whole bar clickable”Attivalo e un clic in qualsiasi punto della barra apre il link impostato sotto. Open in a new tab lascia il tuo negozio aperto dietro.
I clic su un pulsante o su un codice sconto all’interno della barra fanno comunque la loro azione: il link della barra non li intercetta.
Come sono allineati gli elementi all’interno della barra.
| Impostazione | Cosa fa |
|---|---|
| Alignment | A sinistra, centrato, a destra o distribuito |
| Gap between elements | Lo spazio tra un elemento e l’altro |
| Wrap on small screens | Se attivo, la riga va a capo quando lo spazio finisce. Se disattivo, si comprime, e questo può tagliare i messaggi lunghi. |
Spaziatura
Sezione intitolata “Spaziatura”Vertical padding è l’altezza della barra. Horizontal padding è il margine a ciascuna estremità.
Una barra sottile viene percepita come un avviso; una alta come una sezione della pagina. La maggior parte delle barre di annuncio funziona meglio sottile.
CSS personalizzato
Sezione intitolata “CSS personalizzato”In fondo al pannello, Custom CSS (Developer Zone) accetta regole che si applicano solo all’interno di questo banner. Non possono influire sul resto del tuo tema.
Usalo per ciò che i pannelli non coprono: un’ombra del testo, una spaziatura tra le lettere, un bordo diverso su un elemento.