Nowe style liczników: Pierścień, Pasek, Pigułka i Klepsydra (także w mailu)
W beTiMES są cztery nowe style licznika: Pierścień, Pasek, Pigułka i Klepsydra. Działają na nowym, lżejszym kodzie licznika. Każdy z nich ma też animowaną wersję do maila.
Poniżej pokazujemy krok po kroku, jak wybrać styl, jak każdy wygląda na komputerze i na telefonie, kiedy którego użyć i jak wstawić licznik do maila.
Kto ma nowe style
- Nowe style są częścią nowego kodu licznika (widget 2.0).
- Każdy nowy licznik, który utworzysz, dostaje nowy kod i nowe style od razu.
- Liczniki utworzone wcześniej działają dalej bez zmian, na dotychczasowych stylach: Standardowy, Chrom i Mini. Nie musisz niczego poprawiać.
- Chcesz nowy styl przy starszym liczniku? Utwórz nowy licznik albo skopiuj istniejący i wklej na stronę jego kod z kroku Pobierz kod.
Jak wybrać styl krok po kroku
- Otwórz licznik i przejdź do kroku Wygląd licznika.
- W karcie Pozycja i styl znajdź sekcję Nowe style. Kliknij miniaturę stylu: Pierścień, Pasek, Pigułka albo Klepsydra.
- Spójrz na podgląd na górze strony. Pokazuje licznik tak, jak zobaczy go klient.
- W polu Pozycja licznika wybierz Przyklejony do góry, Przyklejony do dołu albo Tylko w treści.
- W polu Wyrównanie wybierz Do lewej, Wyśrodkowanie albo Do prawej. Przełącznikiem Zaokrąglony zdecydujesz, czy licznik ma zaokrąglone rogi.
- W kartach Kolory oraz Czcionka i wielkość dopasuj licznik do swojej strony.
Nie martw się o kontrast. Nowe style same dobierają czytelne kolory, więc tekst nie zleje się z tłem.
Nie chcesz ustawiać kolorów od zera? Wybierz gotowy schemat beTiMES 2.0. Jest na samej górze listy schematów kolorów.
Chcesz zobaczyć wersję do maila? Kliknij podgląd GIF pod podglądem licznika.
Nowe style: jak wyglądają i kiedy ich użyć
Pierścień
Jak wygląda: karta w rogu ekranu. Pierścień domyka się z każdą sekundą, w jego środku jest duża liczba. Pod pierścieniem są pozostałe jednostki czasu, a na dole przycisk z Twoim tekstem.
Na komputerze i telefonie: klient może zwinąć kartę strzałką pod spodem. Zostaje wtedy małe kółko z czasem. W ostatniej minucie licznik sam się rozwija, żeby nikt nie przegapił końca oferty.
Kiedy użyć: strona sprzedaży kursu, oferta specjalna, każda sytuacja, w której chcesz mocnego akcentu, ale bez zasłaniania treści.
Przykład: na stronie podziękowania po zakupie e-booka pokazujesz „Pakiet Balkonowy w cenie e-booka tylko przez 20 minut” z przyciskiem „Biorę pakiet za 97 zł”.
Pasek
Jak wygląda: pasek na całą szerokość strony, na górze albo na dole. W jednym wierszu jest tekst, odliczanie i przycisk. Pod spodem biegnie pasek postępu z procentem.
Na komputerze i telefonie: Pasek jest zawsze przyklejony do krawędzi ekranu, więc klient widzi go przez cały czas przewijania. Na telefonie zawija się: tekst i czas są nad przyciskiem, a pasek postępu zostaje na dole.
Kiedy użyć: promocja na całej stronie, Black Friday, zapisy do końca tygodnia. Wszędzie tam, gdzie licznik ma być widoczny cały czas.
Przykład: na stronie kursu na górze pasek „Zapisy na kurs zamykamy za 2 dni” z przyciskiem „Kup teraz ze zniżką”.
Pigułka
Jak wygląda: mała kapsułka w rogu ekranu z czasem i kółkiem sekund. Kliknięcie otwiera kartę z tekstem, jednostkami czasu i przyciskiem.
Na komputerze i telefonie: po każdym odświeżeniu strony Pigułka jest znowu zwinięta, więc nie przeszkadza w czytaniu. Gdy do końca zostało więcej niż doba, pokazuje dni w skrócie, np. 2d 05:37:12.
Kiedy użyć: blog, sklep, strona z dużą ilością treści. Wszędzie tam, gdzie licznik ma być pod ręką, ale nie może przeszkadzać.
Przykład: we wpisach na blogu przypominasz o promocji na kurs, która kończy się w piątek.
Klepsydra
Jak wygląda: animowana klepsydra w rogu ekranu. Przy wejściu na stronę obraca się, a co minutę przesypuje się w niej piasek. Pod klepsydrą jest kapsułka z czasem. Kliknięcie otwiera kartę z tekstem i przyciskiem.
Na komputerze i telefonie: w ostatnich 5 minutach kapsułka z czasem pulsuje, żeby pokazać, że zostało naprawdę mało czasu. Po odświeżeniu strony karta jest znowu zwinięta.
Kiedy użyć: kampanie grające na emocjach, webinary, ostatnie godziny oferty.
Przykład: na stronie z nagraniem webinaru pokazujesz ofertę specjalną ważną do północy.
Który styl kiedy
| Styl | Gdzie jest na stronie | Najlepiej do | Wyróżnia się tym, że |
|---|---|---|---|
| Pierścień | karta w rogu ekranu | strona sprzedaży kursu, oferta specjalna | sam się rozwija w ostatniej minucie |
| Pasek | na całą szerokość, na górze albo na dole | promocja na całej stronie, Black Friday, zapisy do końca tygodnia | jest widoczny cały czas |
| Pigułka | mała kapsułka w rogu ekranu | blog, sklep, strony z dużą ilością treści | najmniej przeszkadza |
| Klepsydra | animowana klepsydra w rogu ekranu | kampanie na emocjach, webinary, ostatnie godziny oferty | pulsuje w ostatnich 5 minutach |
Liczniki w mailu
Nowe style mają swoje wersje do maila. To animowane GIF-y: 60 klatek po 1 sekundzie, szerokość 480 px. Po otwarciu maila licznik odlicza przez minutę.
Obrazek tworzy się na nowo przy każdym otwarciu maila. Dzięki temu czas jest zawsze aktualny, nawet gdy klient otworzy maila kilka dni po wysyłce.
Jak pobrać kod licznika do maila
- Otwórz licznik i kliknij Pobierz kod.
- Wybierz zakładkę Licznik w mailu.
- Wybierz system mailingowy, z którego korzystasz.
- Skopiuj kod i wklej go w treść maila.
- Chcesz mieć licznik na środku maila? Pod polem z kodem rozwiń Pobierz kod licznika wyśrodkowanego w mailu i skopiuj ten kod.
Ważne: licznik w mailu nie ma przycisku, bo obrazka w mailu nie da się kliknąć jak przycisku na stronie. Link do oferty wstaw pod licznikiem, np. przycisk „Biorę pakiet za 97 zł” zrobiony w Twoim systemie mailingowym.
Tak wyglądają liczniki w mailu
Pigułka w mailu wygląda jak jej rozwinięta karta: tekst i odliczanie.
Nowy kod jest lżejszy
Nowe style działają na nowym kodzie licznika. Strona pobiera mniej danych i rzadziej łączy się z serwerem, więc licznik nie spowalnia Twojej strony.
| Stary kod | Nowy kod | |
|---|---|---|
| Pliki do pobrania | 4 | 1 |
| Rozmiar | ok. 101 KB | ok. 72 KB |
| Zapytania do serwera | co ok. 10 sekund | jedno |
Najczęstsze pytania
Nie widzę nowych stylów. Co zrobić?
Nowe style są w nowym kodzie licznika, który ma każdy nowo utworzony licznik. Liczniki utworzone wcześniej działają dalej na dotychczasowych stylach. Utwórz nowy licznik albo skopiuj istniejący i wklej na stronę jego kod z kroku Pobierz kod.
Czy mogę zmienić styl po wklejeniu kodu na stronę?
Tak. Zmień styl w kroku Wygląd licznika. Zmiana działa od razu na stronie, nie musisz wklejać nowego kodu.
Jak styl zachowuje się na telefonie?
Każdy nowy styl ma osobny układ na wąskich ekranach, do 500 px szerokości:
- Pierścień zostaje kartą w rogu i można go zwinąć strzałką do małego kółka z czasem.
- Pasek zawija się tak, żeby tekst, czas i przycisk zmieściły się na ekranie.
- Pigułka i Klepsydra zostają małe w rogu. Kartę klient otwiera kliknięciem.
GIF w mailu nie odlicza. Dlaczego?
Niektóre programy pocztowe, np. starsze wersje Outlooka, pokazują tylko pierwszą klatkę GIF-a. Klient widzi wtedy czas z chwili otwarcia maila, ale bez animacji. To ograniczenie programu pocztowego, licznik działa poprawnie.