Jak wyświetlić animację zliczania liczb w WordPress

Wiesz, co jest lepsze niż wyświetlanie „10 000+ zadowolonych klientów” na twojej witrynie internetowej? Gdy liczby te faktycznie liczone są od zera! Ta wciągająca animacja, zwana licznikiem liczb, może sprawić, że twoje statystyki i osiągnięcia naprawdę się wyróżnią.

Od czasu do czasu używamy liczników liczb na stronach docelowych naszych partnerów, gdy chcemy podkreślić ważne kamienie milowe lub przyciągnąć uwagę odwiedzających. Są one szczególnie skuteczne w prezentowaniu takich rzeczy jak liczba klientów, liczba pobrań lub ukończonych projektów.

A co najlepsze? Dodanie tych animowanych liczników do twojej witryny WordPress jest znacznie prostsze, niż można by się spodziewać. W tym przewodniku pokażemy dwie proste metody tworzenia przyciągających wzrok animacji liczb.

Zanim dodasz animację zliczania liczb w WordPress… 📊

Zanim zagłębimy się w „jak”, zastanówmy się szybko, gdzie te animowane liczniki najlepiej sprawdzą się na twojej witrynie internetowej WordPress:

• Główne sekcje strony głównej prezentujące najważniejsze osiągnięcia
• Strony produktów podkreślające ocenę zadowolenia klientów
• Strony Zamierzasz wyświetlić kamienie milowe firmy
• Strony docelowe podkreślające dowód społeczny
• Sekcje cenowe pokazujące bazę klientów lub oszczędności

Z naszego doświadczenia wynika, że strategiczne rozmieszczenie jest równie ważne, jak sama animacja. Na przykład OptinMonster skutecznie wykorzystuje licznik liczb do wyświetlania zoptymalizowanych miesięcznych sesji odwiedzających, umieszczając go dokładnie tam, gdzie potencjalni klienci podejmują decyzje.

Dodawanie i konfigurowanie zliczania liczb w WordPress zazwyczaj wymaga edycji kodu. Może to być trudne dla początkujących, którzy nie wiedzą, jak pisać kod.

To powiedziawszy, zobaczmy, jak można wyświetlić animowany licznik liczb w WordPress. Omówimy 2 proste metody przy użyciu narzędzia do tworzenia witryn internetowych premium i darmowej wtyczki.

Możesz kliknąć poniższe odnośniki, aby przejść do twojej preferowanej sekcji:

Opcja 1: Utwórz stronę docelową z animacją zliczania liczb za pomocą kreatora stron

Jeśli tworzysz stronę docelową i chcesz mieć pełną kontrolę nad wyglądem i zachowaniem twoich liczników, najlepszym rozwiązaniem będzie kreator stron.

Przetestowaliśmy dziesiątki kreatorów stron WordPress na przestrzeni lat, a SeedProd konsekwentnie wyróżnia się rozbudowanymi opcjami konfiguratora, zwłaszcza w przypadku elementów dynamicznych, takich jak liczniki liczb.

W tym poradniku użyjemy wersji SeedProd Pro, ponieważ zawiera ona zaawansowane bloki i pozwala na dodanie licznika. Istnieje również wersja SeedProd Lite, którą można wypróbować za darmo.

Więcej informacji można znaleźć w naszej szczegółowej recenzji SeedProd.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i włączyć SeedProd. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem na temat instalacji wtyczki WordPress.

Po włączaniu SeedProd poprosi o wpisz klucza licencyjnego. Klucz licencyjny można znaleźć w obszarze Twojego konta oraz w e-mailu z potwierdzeniem zakupu.

Następnie musisz przejść do SeedProd ” Landing Pages z twojego panelu administracyjnego WordPress.

SeedProd umożliwia tworzenie profesjonalnie zaprojektowanych własnych stron docelowych, w tym strony „coming soon„, strony trybu konserwacji, strony logowania i strony 404.

Kliknij przycisk „Utwórz nową stronę docelową”.

Następnie możesz wybrać szablon SeedProd dla twojej strony docelowej i wyświetlić animowany licznik liczb.

Wystarczy najechać kursorem na szablon i kliknąć pomarańczowy przycisk wyboru.

Otworzy się wyskakujące okno. Wystarczy wpisz nazwę strony i adres URL strony.

Następnie kliknij przycisk „Zapisz i rozpocznij edycję strony”.

Spowoduje to uruchomienie kreatora przeciągania i upuszczania SeedProd.

Następnie możesz edytować szablon twojej strony, dodając różne bloki lub klikając istniejące elementy na stronie.

Aby dodać animowaną liczbę, wystarczy przeciągnąć blok Licznik z menu po twojej lewej stronie i upuścić go na szablonie.

Następnie można wybrać blok licznika, aby dostosować go do własnych potrzeb.

Dostępne są na przykład opcje zmiany początkowego i końcowego numeru licznika, wpisz prefiks i sufiks numeru oraz edytuj tytuł.

Następnie możesz przejść do karty „Zaawansowane” w ustawieniach bloku licznika po twojej lewej stronie.

Tutaj znajdziesz więcej opcji zmiany stylu, schematu kolorów, odstępów, kroju pisma i innych elementów twojego bloku licznika.

Następnie kliknij przełącznik „Zapisz” u góry.

Możesz teraz wybrać opcję „Opublikuj” z menu rozwijanego.

Aby zobaczyć animowany licznik liczb w działaniu, przejdź na twój blog WordPress.

Tak to wyglądało na naszej witrynie demonstracyjnej.

Opcja 2: Dodanie animacji szybkiego zliczania liczb do dowolnej strony za pomocą wtyczki

Czasami kreator stron może być zbyt rozbudowany, gdy potrzebujesz tylko prostego licznika. W tym miejscu z pomocą przychodzi wtyczka Counter Number. Jest to darmowe, lekkie rozwiązanie, które robi jedną rzecz i robi to dobrze: pozwala dodawać animacje liczb w dowolnym miejscu na twojej witrynie za pomocą krótkich kodów.

Najpierw musisz zainstalować i włączyć wtyczkę Counter Number. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem na temat instalacji wtyczki WordPress.

Po włączaniu możesz przejść do Numery liczników ” Wszystkie liczniki z twojego kokpitu WordPress i kliknąć przycisk „Utwórz nowy licznik”.

Następnie możesz wpisz tytuł dla twojego numeru licznika.

W wersji darmowej można wybrać tylko zwykły szablon.

Następnie można dodać szczegóły numeru licznika. Dostępne są opcje edycji tytułu licznika, wyboru ikonki i wpisz wartość numeru licznika.

Możesz dodać dowolną liczbę numerów liczników, klikając przycisk „Utwórz nowy licznik” na dole.

Poza tym, w panelu po twojej prawej stronie dostępnych jest więcej opcji konfiguratora.

Wtyczka pozwala na przykład zmienić kolor tytułu licznika, kolor liczb, rozmiar ikonki, wielkość litery, rodzinę pisma i wiele innych.

Po wprowadzeniu zmian, przewiń z powrotem na górę i opublikuj twój licznik.

Następnie możesz przejść do Numery liczników ” Wszystkie liczniki z twojego kokpitu WordPress.

Śmiało i skopiuj krótki kod licznika. Będzie on wyglądał mniej więcej tak:

[COUNTER_NUMBER id=41].

Następnie możesz umieścić ten element projektu WordPress w dowolnym miejscu na twojej witrynie internetowej, od wpisów i stron po panele boczne.

Wystarczy utworzyć nowy wpis lub stronę albo edytować już istniejącą. Po przejściu do edytora treści wystarczy kliknąć znak „+” i dodać blok krótkiego kodu.

Następnie możesz wkleić krótki kod numeru licznika w bloku.

W tym miejscu możesz wyświetlić podgląd i opublikować swoją stronę lub wpis, aby zobaczyć animowaną liczbę w działaniu.

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak wyświetlić animację zliczania liczb w WordPress. Możesz również zapoznać się z naszym poradnikiem na temat dodawania animowanego tła w WordPressie i naszym eksperckim wyborem najlepszych kreatorów motywów WordPress, aby zaprojektować twój idealny motyw.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.