Progetta un conto alla rovescia
Cambia colori, caratteri, sfondi, bordi e spaziatura perché il conto alla rovescia si adatti al tuo negozio.
Un modello ti dà un aspetto di partenza. La scheda Design è dove lo rendi tuo, o dove lo ricostruisci da zero, dato che ogni parte è modificabile.
I timer di conto alla rovescia e le date di consegna stimate hanno una scheda Design completa. I conti alla rovescia di scorte e carrello hanno meno opzioni e le mantengono nella scheda Settings.
La scheda Design, con l’anteprima che si aggiorna mentre modifichi le impostazioni.
Cambiare modello
Sezione intitolata “Cambiare modello”Non sei obbligato a tenere il design scelto all’inizio. Apri il selettore di modelli dall’interno del builder e scegline un altro: le stagioni sono in schede in alto: Default, New year, Valentine, Summer Sale, Moon Festival, Halloween, Black Friday, Christmas e Winter Sales.
Cambiare modello sostituisce il design. Testo, tempistiche e condizioni vengono mantenuti.
Design del timer di conto alla rovescia
Sezione intitolata “Design del timer di conto alla rovescia”La scheda Design del timer ha quattro sezioni più il CSS personalizzato.
Design Main Section
Sezione intitolata “Design Main Section”Il contenitore esterno del conto alla rovescia, cioè il pannello che racchiude tutto il resto.
| Gruppo | Controlli |
|---|---|
| Background | Un colore pieno o un’immagine caricata. Con il colore hai un Main background color con valori Left e Right separati: una tinta unita ha lo stesso colore su entrambi, un gradiente ne ha due |
| Overlay image | Scurisce uno sfondo caricato perché il testo resti leggibile |
| Text | Il carattere per tutto il conto alla rovescia. Attiva Use custom font style per scegliere famiglia e spessore del carattere |
| Padding | Lo spazio all’interno del pannello, impostato come Top / Right e Bottom / Left |
| Border | Dimensione, raggio, stile (Solid, Dotted o Dashed) e colore del bordo |
| Shadow | Yes o No |
Element styling: Title e Subtitle
Sezione intitolata “Element styling: Title e Subtitle”Title e Subtitle hanno ciascuno il proprio carattere, dimensione, colore e margini. Qui puoi far dominare il titolo e far passare in secondo piano il sottotitolo, oppure avvicinarli.
Design Timer Section
Sezione intitolata “Design Timer Section”Le cifre vere e proprie.
| Gruppo | Controlli |
|---|---|
| Font | Timer font size per i numeri e Label font size per le parole sotto |
| Border | Dimensione e stile del riquadro attorno a ogni unità |
| Color | Number color, Data text color per le etichette, Background color per il riquadro di ogni unità, Dot color per i separatori e Border color |
| Padding | Lo spazio all’interno del riquadro di ogni unità |
Impostando sfondo e bordo sulle unità ottieni l’aspetto a riquadri; lasciandoli entrambi vuoti ottieni numeri semplici sul pannello.
Se hai attivato il pulsante, ha un bordo proprio (raggio, dimensione, stile), colori (sfondo, testo, bordo) e padding.
Design Mobile Section
Sezione intitolata “Design Mobile Section”Dimensioni dei caratteri separate per i telefoni, descritte nell’app come «Optimize countdown appearance and layout for mobile devices to ensure a smooth and responsive user experience».
Puoi impostare dimensioni specifiche per mobile per Title, Subtitle, Timer number e Timer label, oltre al padding per mobile.
Vale la pena dedicare un minuto a questa sezione per ogni conto alla rovescia. Un titolo che si legge bene a 25 px su desktop di solito è troppo grande su un telefono, e quattro unità del timer a dimensione desktop spesso vanno a capo o escono dallo spazio.
Design della data di consegna stimata
Sezione intitolata “Design della data di consegna stimata”La scheda Design di una data di consegna è divisa in base alle sue due parti:
- Design Main Widget: il messaggio, con caratteri, colori, dimensioni, bordi e spaziatura.
- Design Process Widget: la barra Ordered → Dispatched → Delivered, con icone, colori e spaziatura.
Se il tuo layout è Message only o Progress bar only, conta solo la metà pertinente.
Design dei conti alla rovescia di scorte e carrello
Sezione intitolata “Design dei conti alla rovescia di scorte e carrello”Questi due hanno i controlli di design all’interno della scheda Settings.
Stock countdown offre Alignment, colori separati per messaggio, cursore, valore delle scorte e sfondo, e un’Animation: None, Flash o Pulse.
Cart countdown offre posizione, colori per messaggio, timer e sfondo, bordi e caratteri.
Custom CSS
Sezione intitolata “Custom CSS”Ogni tipo termina con una casella Custom CSS (Developer Zone) per tutto ciò che i controlli non coprono. Vedi Custom CSS.
Consigli pratici
Sezione intitolata “Consigli pratici”Prendi spunto dal tuo tema. Un conto alla rovescia con i colori del tuo brand sembra parte del negozio; uno con i valori predefiniti del modello sembra aggiunto a posteriori. Il colore d’accento del tema di solito è lo sfondo giusto.
Il contrasto conta più del colore. I numeri sono l’elemento chiave: assicurati che siano leggibili su ciò che hanno dietro, anche alla dimensione più piccola.
Controllalo su una pagina reale. L’anteprima mostra il conto alla rovescia da solo, sul suo sfondo. La tua pagina prodotto ha un prezzo, un pulsante e immagini che competono con esso.
Controllalo su un telefono. Usa la Design Mobile Section invece di accettare ciò che le dimensioni desktop producono su uno schermo piccolo.