Designa en nedräkning
Ändra färger, typsnitt, bakgrunder, kantlinjer och avstånd så att en nedräkning passar din butik.
En mall ger dig ett utseende att utgå från. Fliken Design är där du gör det till ditt eget, eller bygger om det helt, eftersom varje del går att redigera.
Countdown timers och Estimated delivery dates får en fullständig flik Design. Stock och cart countdowns har färre alternativ och har dem på fliken Settings i stället.
Fliken Design, där förhandsvisningen uppdateras när du ändrar inställningar.
Byta mall
Section titled “Byta mall”Du sitter inte fast med den design du valde från början. Öppna mallväljaren inifrån byggaren och välj en annan. Säsongerna finns som flikar högst upp: Default, New year, Valentine, Summer Sale, Moon Festival, Halloween, Black Friday, Christmas och Winter Sales.
Att byta mall ersätter designen. Din text, timing och dina villkor behålls.
Design för countdown timer
Section titled “Design för countdown timer”Timerns flik Design har fyra avsnitt plus egen CSS.
Design Main Section
Section titled “Design Main Section”Nedräkningens yttre behållare – panelen som allt annat ligger i.
| Grupp | Reglage |
|---|---|
| Background | En enfärgad bakgrund eller en uppladdad bild. Med färg får du en Main background color med separata värden för Left och Right, så en enfärgad yta är samma färg på båda och en toning är två |
| Overlay image | Mörkar en uppladdad bakgrund så att texten förblir läsbar ovanpå den |
| Text | Typsnittet för hela nedräkningen. Slå på Use custom font style för att välja typsnittsfamilj och vikt |
| Padding | Utrymme inuti panelen, inställt som Top / Right och Bottom / Left |
| Border | Kantlinjens storlek, radie, stil (Solid, Dotted eller Dashed) och färg |
| Shadow | Yes eller No |
Element styling: Title and Subtitle
Section titled “Element styling: Title and Subtitle”Title och Subtitle får var sitt typsnitt, sin teckenstorlek, färg och marginaler. Här får du titeln att dominera och underrubriken att träda tillbaka, eller för dem närmare varandra.
Design Timer Section
Section titled “Design Timer Section”Själva siffrorna.
| Grupp | Reglage |
|---|---|
| Font | Timer font size för siffrorna och Label font size för orden under |
| Border | Storlek och stil på rutan runt varje enhet |
| Color | Number color, Data text color för etiketterna, Background color för varje enhets ruta, Dot color för avgränsarna och Border color |
| Padding | Utrymme inuti varje enhets ruta |
Med bakgrund och kantlinje på enheterna får du det inramade utseendet. Om du lämnar båda tomma får du vanliga siffror på panelen.
Button
Section titled “Button”Om du har slagit på knappen får den en egen kantlinje (radie, storlek, stil), egna färger (bakgrund, text, kantlinje) och eget utrymme (padding).
Design Mobile Section
Section titled “Design Mobile Section”Separata teckenstorlekar för mobiler, som appen beskriver som ”Optimize countdown appearance and layout for mobile devices to ensure a smooth and responsive user experience.”
Du kan ange mobilspecifika storlekar för Title, Subtitle, Timer number och Timer label, plus padding för mobil.
Det här avsnittet är värt en minut för varje nedräkning. En titel som läses bra i 25 px på dator är oftast för stor på en mobil, och fyra timerenheter i datorstorlek bryts ofta över flera rader eller flödar över.
Design för estimated delivery date
Section titled “Design för estimated delivery date”Fliken Design för ett leveransdatum är uppdelad så att den motsvarar dess två delar:
- Design Main Widget – meddelandet: typsnitt, färger, storlek, kantlinjer, avstånd.
- Design Process Widget – fältet Ordered → Dispatched → Delivered: ikoner, färger och avstånd.
Om din layout är Message only eller Progress bar only är bara den relevanta halvan viktig.
Design för stock och cart countdown
Section titled “Design för stock och cart countdown”Dessa två har sina designreglage på fliken Settings.
Stock countdown erbjuder Alignment, separata färger för meddelandet, reglaget, lagersiffran och bakgrunden samt en Animation: None, Flash eller Pulse.
Cart countdown erbjuder position, färger för meddelandet, timern och bakgrunden, kantlinjer och typsnitt.
Egen CSS
Section titled “Egen CSS”Varje typ avslutas med en ruta, Custom CSS (Developer Zone), för allt som reglagen inte täcker. Se Egen CSS.
Praktiska råd
Section titled “Praktiska råd”Låna från ditt tema. En nedräkning i dina varumärkesfärger ser ut som en del av butiken, medan en med mallens standardfärger ser påklistrad ut. Ditt temas accentfärg är oftast rätt bakgrund.
Kontrast betyder mer än färg. Siffrorna är poängen, så se till att de är läsbara mot det som ligger bakom, även i den lägre delen av storleksintervallet.
Kontrollera den på en riktig sida. Förhandsvisningen visar nedräkningen ensam, mot sin egen bakgrund. Din produktsida har ett pris, en knapp och bilder som konkurrerar med den.
Kontrollera den på en mobil. Använd Design Mobile Section i stället för att acceptera vad datorstorlekarna gör på en liten skärm.