Een aftelling ontwerpen
Wijzig kleuren, lettertypen, achtergronden, randen en witruimte zodat een aftelling bij je webshop past.
Een sjabloon geeft je een startlook. Op het tabblad Design maak je hem van jezelf, of bouw je hem helemaal opnieuw op, want elk onderdeel is bewerkbaar.
Countdown timers en geschatte bezorgdata hebben een volledig tabblad Design. Voorraad- en winkelwagenaftellingen hebben minder opties en houden die in het tabblad Settings.
Het tabblad Design, met het voorbeeld dat meebeweegt als je instellingen wijzigt.
Van sjabloon wisselen
Section titled “Van sjabloon wisselen”Je zit niet vast aan het ontwerp dat je aan het begin hebt gekozen. Open de sjabloonkiezer vanuit de builder en kies een ander sjabloon. De seizoenen staan als tabbladen bovenaan: Default, New year, Valentine, Summer Sale, Moon Festival, Halloween, Black Friday, Christmas en Winter Sales.
Als je van sjabloon wisselt, wordt het ontwerp vervangen. Je tekst, timing en voorwaarden blijven behouden.
Ontwerp van de countdown timer
Section titled “Ontwerp van de countdown timer”Het tabblad Design van de timer heeft vier secties plus eigen CSS.
Design Main Section
Section titled “Design Main Section”De buitenste container van de aftelling: het paneel waarin al het andere staat.
| Groep | Opties |
|---|---|
| Background | Een effen kleur of een geüploade afbeelding. Bij een kleur krijg je een Main background color met aparte waarden voor Left en Right, dus een egale vulling is één kleur aan beide kanten en een verloop is twee kleuren |
| Overlay image | Maakt een geüploade achtergrond donkerder zodat tekst leesbaar blijft |
| Text | Het lettertype voor de hele aftelling. Zet Use custom font style aan om een lettertypefamilie en gewicht te kiezen |
| Padding | Ruimte binnen het paneel, ingesteld als Top / Right en Bottom / Left |
| Border | Randdikte, afronding, stijl (Solid, Dotted of Dashed) en kleur |
| Shadow | Yes of No |
Element styling: Title en Subtitle
Section titled “Element styling: Title en Subtitle”De Title en Subtitle hebben elk een eigen lettertype, lettergrootte, kleur en marges. Hier laat je de titel domineren en de ondertitel naar de achtergrond verdwijnen, of breng je ze dichter bij elkaar.
Design Timer Section
Section titled “Design Timer Section”De cijfers zelf.
| Groep | Opties |
|---|---|
| Font | Timer font size voor de getallen en Label font size voor de woorden eronder |
| Border | Grootte en stijl van het kader rond elke eenheid |
| Color | Number color, Data text color voor de labels, Background color voor het vak van elke eenheid, Dot color voor de scheidingstekens en Border color |
| Padding | Ruimte binnen het vak van elke eenheid |
Met een achtergrond en rand op de eenheden krijg je de look met vakjes. Laat je beide leeg, dan krijg je gewone getallen op het paneel.
Button
Section titled “Button”Als je de knop hebt ingeschakeld, krijgt hij een eigen rand (afronding, dikte, stijl), kleuren (achtergrond, tekst, rand) en padding.
Design Mobile Section
Section titled “Design Mobile Section”Aparte lettergroottes voor telefoons, in de app omschreven als “Optimize countdown appearance and layout for mobile devices to ensure a smooth and responsive user experience.”
Je kunt mobiele groottes instellen voor de Title, Subtitle, Timer number en Timer label, plus mobiele padding.
Deze sectie is bij elke aftelling een minuut waard. Een titel die op desktop goed leest met 25px is op een telefoon meestal te groot, en vier timereenheden in desktopformaat lopen vaak over of breken af.
Ontwerp van de geschatte bezorgdatum
Section titled “Ontwerp van de geschatte bezorgdatum”Het tabblad Design van een bezorgdatum is opgesplitst naar zijn twee onderdelen:
- Design Main Widget: het bericht, met lettertypen, kleuren, grootte, randen en witruimte.
- Design Process Widget: de balk Ordered → Dispatched → Delivered, met pictogrammen, kleuren en witruimte.
Als je indeling Message only of Progress bar only is, doet alleen de relevante helft ertoe.
Ontwerp van voorraad- en winkelwagenaftelling
Section titled “Ontwerp van voorraad- en winkelwagenaftelling”Bij deze twee staan de ontwerpopties in het tabblad Settings.
Stock countdown biedt Alignment, aparte kleuren voor het bericht, de schuifregelaar, het voorraadaantal en de achtergrond, en een Animation: None, Flash of Pulse.
Cart countdown biedt positie, kleuren voor het bericht, de timer en de achtergrond, randen en lettertypen.
Eigen CSS
Section titled “Eigen CSS”Elk type eindigt met een vak Custom CSS (Developer Zone) voor alles wat de opties niet dekken. Zie Eigen CSS.
Praktisch advies
Section titled “Praktisch advies”Leen van je thema. Een aftelling in je huiskleuren lijkt een onderdeel van de webshop. Een aftelling in de standaardkleuren van het sjabloon lijkt er los op geplakt. De accentkleur van je thema is meestal de juiste achtergrond.
Contrast is belangrijker dan kleur. De getallen zijn waar het om gaat. Zorg dat ze leesbaar zijn tegen wat er ook achter staat, ook aan de kleine kant van het groottebereik.
Controleer het op een echte pagina. Het voorbeeld toont de aftelling alleen, op een eigen achtergrond. Op je productpagina concurreren een prijs, een knop en afbeeldingen om aandacht.
Controleer het op een telefoon. Gebruik de Design Mobile Section in plaats van te accepteren wat de desktopformaten op een klein scherm doen.