Contenuto ed elementi della barra
I sei elementi che una barra può contenere, come ordinarli e come i gruppi permettono a un banner di dire due cose.
Il pannello Content è la prima icona nella barra laterale del builder. Contiene tutto ciò che dice la barra.
Gli elementi scorrono da sinistra a destra nella barra, nell’ordine in cui compaiono in questo elenco.
Aggiungere e ordinare
Sezione intitolata “Aggiungere e ordinare”- Add element apre un menu con i sei tipi. Il nuovo elemento viene aggiunto in fondo all’elenco.
- Trascina la maniglia a sinistra di una riga per spostarla. La barra segue l’ordine di questo elenco.
- Passa il puntatore su una riga per vedere i pulsanti di duplicazione ed eliminazione.
- Clicca su una riga per aprire le sue impostazioni nella colonna a destra.
I sei elementi
Sezione intitolata “I sei elementi”Il messaggio. Imposta le parole, la dimensione, grassetto, corsivo, sottolineato e un colore dedicato.
Lascia vuoto il colore e il testo segue il colore del testo della barra, quindi cambiando lo stile della barra cambia anche il messaggio.
Countdown
Sezione intitolata “Countdown”Un timer dal vivo all’interno della barra. Ha tre modalità:
| Modalità | Cosa vede chi visita il negozio |
|---|---|
| Count down to a date | Tutti vedono lo stesso tempo rimanente |
| Fixed minutes per visitor | Ogni persona ha il proprio orologio quando arriva |
| Daily recurring | Funziona nei giorni della settimana scelti tra due orari |
Puoi anche scegliere quali unità mostrare (giorni, ore, minuti, secondi), se mostrare le didascalie delle unità sotto i numeri e cosa dicono. Lascia vuota una didascalia per usare quella predefinita in inglese.
When the timer ends decide cosa succede allo zero: nascondere il banner, lasciarlo a zero o riavviarlo.
Un’etichetta più un’azione:
| Al clic | Cosa fa |
|---|---|
| Open a link | Porta la persona a un URL |
| Scroll to a section | Passa a una parte della pagina corrente, tramite selettore CSS |
| Apply a discount code | Applica il codice al carrello della persona |
Per un link puoi anche attivare Open in a new tab, che lascia il tuo negozio aperto dietro.
Il resto riguarda lo stile: forma (quadrata, arrotondata, a pillola), dimensione del carattere, dimensione predefinita, grassetto/corsivo/sottolineato, sfondo, colore dell’etichetta e bordo.
Discount code
Sezione intitolata “Discount code”Il codice stesso, mostrato in un contorno tratteggiato. Attiva Copy on click e la persona lo copia cliccandoci sopra, senza selezionarlo né digitarlo.
Puoi personalizzarlo con uno stile del bordo, il raggio degli angoli e un colore dedicato.
Un logo o un badge. Incolla un URL oppure carica un file e il campo si compila da solo. Imposta l’altezza e il testo alternativo.
Il testo alternativo è ciò che gli screen reader leggono ad alta voce e ciò che compare se l’immagine non si carica.
Line break
Sezione intitolata “Line break”Nulla da vedere. Tutto ciò che viene dopo inizia su una nuova riga, così una barra lunga può occupare due righe invece di una sola compressa.
Trascinalo tra due elementi per dividere la barra dove vuoi.
Un elemento, due schermi
Sezione intitolata “Un elemento, due schermi”Apri un elemento qualsiasi, tranne l’interruzione di riga, e la sua sezione Style inizia con Device settings, tre icone: un occhio, un desktop e un telefono.
Device settings si trova in cima a Style e tutto ciò che sta sotto segue l’icona che scegli.
L’occhio è il caso normale: ciò che imposti vale per entrambi gli schermi.
Le icone del desktop e del telefono limitano le impostazioni sottostanti a quel solo schermo. Scegli il telefono, riduci la dimensione del carattere a 12 e solo i telefoni useranno 12; i desktop mantengono ciò che ha impostato l’occhio. Tutto in Style si divide in questo modo: dimensioni del carattere, dimensioni di numeri ed etichette di un countdown, i suoi colori e le unità mostrate, l’altezza di un’immagine, forma e dimensione di un pulsante, bordo e colore di un codice sconto.
Scegliendo uno schermo compare anche un interruttore Hide on desktop o Hide on mobile. È il modo per eliminare un elemento che non si adatta a un telefono, come una frase lunga o un’immagine, senza creare un secondo banner. Resta visibile sull’altro schermo.
Un’interruzione di riga non ha la sezione Style, quindi mantiene un semplice controllo Show on: Both screens, Desktop only o Mobile only.
Gruppi: un banner, due messaggi
Sezione intitolata “Gruppi: un banner, due messaggi”Sotto l’elenco degli elementi c’è Add group.
Un solo gruppo è il caso normale. Aggiungine un secondo e la barra alterna i due: si vede il primo gruppo, poi il secondo, poi di nuovo il primo. Ogni gruppo ha i propri elementi, quindi un banner può alternare «Free shipping over $50» e «Sale ends tonight».
La velocità del cambio e la scelta tra dissolvenza e scorrimento si trovano in Animazione e gruppi.