Uwaga: Poniższy artykuł pomoże Ci w: Jak utworzyć prosty widżet odliczania dla swojej witryny
Widżety odliczające umożliwiają wyświetlanie licznika czasu dla wprowadzenia produktu na rynek, rozpoczęcia określonego wydarzenia i nie tylko. Sprzedaż może wzrosnąć w okresie świątecznym ze względu na poczucie pilnej potrzeby związane z wyświetlaniem licznika czasu. Możesz stworzyć swój specjalny widżet odliczania dla swojej strony internetowej za pomocą narzędzie do tworzenia widżetów. Niezależnie od sezonu świątecznego, do którego dążysz, możesz utworzyć prosty widżet odliczający na swojej stronie internetowej, który pokaże dni lub czas pozostały do nowego specjalnego wydarzenia lub święta.
Ekscytujące oczekiwanie na nadchodzące wydarzenie jest zaraźliwe i przyciąga całą twoją uwagę. Może nawet powodować nerwowość i pośpiech. Odliczanie jest intrygujące i sprawia, że nie możesz się doczekać sekund odliczających się do weekendu, ślubu, wakacji, Wigilii lub dni do emerytury.
W tym artykule znajdziesz informacje o najpopularniejszych sposobach wykonania minutnika, jak wygląda i kiedy najlepiej go używać.
Kiedy należy używać minutnika?
Wykorzystaj widżety odliczania czasu w sprzedaży, promocjach w sklepie, umowach firmowych i przyszłych webinariach. Minutnik będzie odpowiedni w następujących przypadkach:
- Aby przypomnieć o rozpoczęciu lub zakończeniu sprzedaży;
- Informować o dużych rabatach;
- Aby przypomnieć klientom o zakończeniu okresów próbnych lub wygaśnięciu rabatów;
- Aby przypomnieć uczestnikom o godzinie rozpoczęcia webinaru i przygotować się na ewentualne losowania (np. loterii).
Sposoby tworzenia minutnika:
- Używaj czystego JavaScript lub bibliotek JavaScript (takich jak jQuery);
- Użyj CSS lub SVG;
- Połącz motyw: JavaScript + CSS + SVG;
- Użyj specjalnych narzędzi.
Metoda 1: Podstawowy JavaScript
Zamiast szukać wyrafinowanego sposobu tworzenia widżetu timera, możesz stworzyć zegar odliczający czas zwykły JavaScript. Dni, godziny, minuty i sekundy to cztery cyfry wyświetlane na minutniku. Każda liczba znajduje się w elemencie
Metoda 2: czysty CSS
To rozwiązanie wykorzystuje prostą logikę do wyświetlania niektórych bloków z liczbami i ukrywania innych za pomocą klatek kluczowych CSS. Na przykład, jeśli dziesiąte części sekundy mają zmieniać się co sekundę, to animacja powinna trwać łącznie 60 sekund (czas trwania animacji), a także powinno być 60 iteracji (60/60 = 1 sekunda). Obliczenia animacji są nieco trudniejsze przez kilka minut, ale nadal mają sens.
Metoda 3: Połączenie SVG + CSS + JavaScript
Ta odmiana estetycznie stylizuje minutnik, łącząc dwie poprzednie techniki (CSS + JavaScript) z SVG. Tutaj każda komórka liczbowa ma siedem kształtów wielokątów, które są wyświetlane przez określony czas za pomocą klatek kluczowych CSS (lub ukryte za pomocą właściwości przezroczystości obiektu SVG — fill-opacity). Dajemy w ten sposób wrażenie, że tarcza odliczania czasu jest włączana lub wyłączana. Dla każdego z siedmiu kształtów wielokątów każda liczba ma swoją sekwencję animacji CSS. W związku z tym dla 4-cyfrowej tarczy zegara (00:00) potrzeba 28 animacji. Początkowa wiodąca minuta zero nie zawiera żadnych animacji, ponieważ nasz stoper może działać tylko przez pięć minut, co zmniejsza całkowitą liczbę animacji do 21.
Przezroczystość kształtu jest zmieniana przez animacje po określonym czasie (za pomocą właściwości czasu trwania animacji — czas trwania animacji). Dlatego elementy reprezentujące ułamki sekund powinny zmieniać się raz na minutę (czas trwania animacji: 60s), natomiast elementy reprezentujące pojedyncze sekundy powinny zmieniać się co sekundę (czas trwania animacji: 10s).
W JavaScript ustawiamy jedynie limit czasu na 5 minut, aby wyświetlić odpowiednie powiadomienie, gdy wygaśnie, co minimalizuje użycie JavaScript w tej technice. Większość pracy jest zakończona przy użyciu klatek kluczowych CSS, a do zbudowania skalowalnego modelu zegara używamy kształtów SVG.
Metoda 4: Usługi tworzenia timera
Ta opcja jest dla tych, którzy wolą korzystać z usług lub nie mają czasu zajmować się kodem i stylami. Poza tym nie trzeba być programistą ani zatrudnić programisty, aby móc dodać prosty widżet odliczania do swojej strony internetowej. Zwykle narzędzia do tworzenia prostych widżetów odliczania obejmują następujące kroki:
1. Dostosuj swój widżet.
Wypróbuj wszystkie ustawienia i stwórz swój idealny widżet;
2. Pobierz kod instalacyjny.
Uzyskaj unikalny kod dla gotowego widżetu i skopiuj go;
3. Osadź kod na swojej stronie.
Wklej kod do szablonu lub struktury strony, w której ma znajdować się widżet.
Podsumowując
Minutnik z sekundami tykającymi do tyłu stwarza poczucie pilności i braku czasu. Klient rozumie, że oferta jest ważna przez ograniczony czas. Pobudza do działania i nie daje szansy na odłożenie lub zapomnienie. Minutnik jest więc jedną ze sprawdzonych strategii, które zachęcają do skoncentrowanej aktywności i zwiększają sprzedaż. Złożone narzędzie marketingowe, minutnik, może zapewniać różne wydarzenia, takie jak promocje i/lub wydarzenia online, z poczuciem pilności. Możesz użyć określonego narzędzia lub napisać swój kod HTML, aby utworzyć prosty widżet odliczania. Jak widzisz, tworzenie timera nie jest kłopotliwe, więc wybierz najodpowiedniejszą metodę i ulepsz swój biznes.
