Projektowanie odliczania
Zmień kolory, czcionki, tła, obramowania i odstępy, aby odliczanie pasowało do Twojego sklepu.
Szablon daje wygląd wyjściowy. Karta Design to miejsce, w którym nadajesz mu własny charakter – albo przebudowujesz go całkowicie, ponieważ każdy element można edytować.
Liczniki odliczające i szacowane daty dostawy mają pełną kartę Design. Odliczania zapasów i koszyka mają mniej opcji, które znajdują się na karcie Settings.
Karta Design z podglądem aktualizowanym w trakcie zmiany ustawień.
Zmiana szablonu
Dział zatytułowany „Zmiana szablonu”Nie jesteś związany z projektem wybranym na początku. Otwórz selektor szablonów z poziomu kreatora i wybierz inny – sezony są ułożone w karty u góry: Default, New year, Valentine, Summer Sale, Moon Festival, Halloween, Black Friday, Christmas i Winter Sales.
Zmiana szablonu zastępuje wygląd. Tekst, czas i warunki zostają zachowane.
Wygląd licznika odliczającego
Dział zatytułowany „Wygląd licznika odliczającego”Karta Design licznika ma cztery sekcje oraz własny CSS.
Design Main Section
Dział zatytułowany „Design Main Section”Zewnętrzny kontener odliczania – panel, w którym mieści się wszystko inne.
| Grupa | Kontrolki |
|---|---|
| Background | Jednolity kolor lub przesłany obraz. Przy kolorze dostępny jest Main background color z osobnymi wartościami Left i Right, więc jednolite wypełnienie to jeden kolor po obu stronach, a gradient to dwa kolory |
| Overlay image | Przyciemnia przesłane tło, aby tekst pozostał czytelny |
| Text | Czcionka całego odliczania. Włącz Use custom font style, aby wybrać rodzinę i grubość czcionki |
| Padding | Odstęp wewnątrz panelu, ustawiany jako Top / Right oraz Bottom / Left |
| Border | Rozmiar, promień i styl obramowania – Solid, Dotted lub Dashed – oraz kolor |
| Shadow | Yes lub No |
Element styling: Title i Subtitle
Dział zatytułowany „Element styling: Title i Subtitle”Title i Subtitle mają własną czcionkę, rozmiar czcionki, kolor i marginesy. Tutaj sprawisz, że tytuł będzie dominował, a podtytuł ustąpi miejsca, albo zbliżysz je do siebie.
Design Timer Section
Dział zatytułowany „Design Timer Section”Same cyfry.
| Grupa | Kontrolki |
|---|---|
| Font | Timer font size dla liczb i Label font size dla słów pod nimi |
| Border | Rozmiar i styl ramki wokół każdej jednostki |
| Color | Number color, Data text color dla etykiet, Background color dla pola każdej jednostki, Dot color dla separatorów oraz Border color |
| Padding | Odstęp wewnątrz pola każdej jednostki |
Ustawienie tła i obramowania jednostek daje wygląd w ramkach; pozostawienie obu pustych daje zwykłe liczby na panelu.
Jeśli włączysz przycisk, będzie on miał własne obramowanie (promień, rozmiar, styl), kolory (tło, tekst, obramowanie) i odstępy.
Design Mobile Section
Dział zatytułowany „Design Mobile Section”Osobne rozmiary czcionek dla telefonów, opisane w aplikacji jako „Optimize countdown appearance and layout for mobile devices to ensure a smooth and responsive user experience.”
Możesz ustawić rozmiary specyficzne dla urządzeń mobilnych dla Title, Subtitle, Timer number i Timer label, a także mobilne odstępy.
Ta sekcja jest warta minuty uwagi przy każdym odliczaniu. Tytuł, który dobrze wygląda w rozmiarze 25 px na komputerze, zwykle jest za duży na telefonie, a cztery jednostki licznika w rozmiarze desktopowym często się zawijają lub wychodzą poza ekran.
Wygląd szacowanej daty dostawy
Dział zatytułowany „Wygląd szacowanej daty dostawy”Karta Design daty dostawy jest podzielona zgodnie z jej dwiema częściami:
- Design Main Widget – komunikat: czcionki, kolory, rozmiar, obramowania, odstępy.
- Design Process Widget – pasek Ordered → Dispatched → Delivered: ikony, kolory i odstępy.
Jeśli wybrany układ to Message only lub Progress bar only, znaczenie ma tylko odpowiednia połowa.
Wygląd odliczania zapasów i koszyka
Dział zatytułowany „Wygląd odliczania zapasów i koszyka”Te dwa typy mają kontrolki wyglądu na karcie Settings.
Stock countdown oferuje Alignment, osobne kolory komunikatu, suwaka, wartości zapasów i tła oraz Animation – None, Flash lub Pulse.
Cart countdown oferuje położenie, kolory komunikatu, licznika i tła, obramowania oraz czcionki.
Custom CSS
Dział zatytułowany „Custom CSS”Każdy typ kończy się polem Custom CSS (Developer Zone) na wszystko, czego nie obejmują kontrolki. Zobacz Custom CSS.
Praktyczne wskazówki
Dział zatytułowany „Praktyczne wskazówki”Czerp z motywu. Odliczanie w kolorach Twojej marki wygląda jak część sklepu; w domyślnych kolorach szablonu wygląda jak doklejone. Kolor akcentowy motywu to zwykle dobre tło.
Kontrast liczy się bardziej niż kolor. Liczby są najważniejsze – upewnij się, że są czytelne na tle, które się za nimi znajduje, także przy najmniejszych rozmiarach.
Sprawdź na prawdziwej stronie. Podgląd pokazuje samo odliczanie na jego własnym tle. Na Twojej stronie produktu konkurują z nim cena, przycisk i obrazy.
Sprawdź na telefonie. Użyj Design Mobile Section zamiast akceptować to, co robią rozmiary desktopowe na małym ekranie.