Blok licznika (counter) w Spectra

Jeżeli tworzymy stronę na Gutenbergu, możemy skorzystać z wtyczki Spectra. Umożliwia ona dodanie różnorakich bloków do WordPressa np. dodatkowych nagłówków, ikon, przycisków, układów treści i wielu innych. Plugin jest stale rozwijany, dzięki czemu zyskujemy kolejne możliwości. Jednym z nich jest dodanie licznika.

Jak dodać licznik jako blok w Gutenbergu

Po zainstalowaniu i aktywowaniu pluginu, należy wyszukiwać blok o nazwie Counter:

Otrzymamy wówczas prosty blok z licznikiem do samodzielnej edycji:

Personalizacja licznika

Teraz czas dostosować licznik pod własne potrzeby. Zacznijmy od ikony na samej górze, która domyślnie przedstawia gwiazdkę. Możemy ją ukryć/pokazać, ustawić jej pozycję względem licznika oraz zmienić na inną lub na własny obrazek.

Jeżeli chcemy pozostać przy ikonie, do dyspozycji mamy naprawdę dużą bibliotekę:

Mając wybraną ikonę, możemy przejść do layoutu – czy chcemy, aby licznik pojawiał się w formie cyferek, koła czy paska postępu:

Poniżej zdecydujemy także o odpowiednich wartościach:

• jaka ma być liczba początkowa (starting number)
• liczba końcowa (ending numer),
• liczba całościowa (total number),
• liczba miejsc po przecinku – dla wartości dziesiętnych (decimal places),
• prefix i sufix (np. %, waluta itp.),
• czas animacji.

Ustawienia szczegółowego wyglądu licznika Spectra

Przechodząc do opcji Style możemy ustawić szczegółowy wygląd kolorów, kroju pisma czy odległości pomiędzy elementami naszego licznika. Jest to bardzo wygodne, bo pozwala dostosować wygląd do całościowego motywu przewodniego naszej strony na WordPressie.

Oto nasz przykładowy licznik:

Kiedy warto użyć licznika?

Oto kilka propozycji wyświetlania licznika:

• odliczanie do startu kampanii marketingowej;
• wyświetlanie ważnych informacji liczbowych (np. liczba projektów, lata doświadczenia);
• śledzenie postępów;
• wyświetlanie danych statystycznych.

Z jakiegokolwiek powodu nie skorzystamy, zawsze wzbogaci to wygląd naszej strony czy artykułu blogowego. A im ciekawszy wygląd, tym w powiązaniu z odpowiednim contentem, zatrzyma dłużej użytkownika na naszej stronie internetowej.