Jak dodać widżet licznika czasu w WordPress (3 proste sposoby)

Dodanie minutnika odliczania do Twojej witryny WordPress może sprawić, że będzie ona bardziej angażująca. Niezależnie od tego, czy podkreślasz premierę produktu, zaznaczasz ważną datę, czy budujesz oczekiwanie na wydarzenie, minutnik odliczania skutecznie wykonuje swoje zadanie.

Na przykład, użyliśmy odliczania na naszych stronach internetowych, aby podkreślić wyprzedaże produktów, oferty Black Friday i inne.

Wystarczy kilka kroków, aby skonfigurować ten przyciągający wzrok widżet na swojej stronie. Nie tylko przyciąga uwagę, ale także informuje odbiorców.

W tym artykule nauczysz się trzech prostych sposobów dodawania licznika czasu do swojej witryny WordPress. Nawet jeśli nie jesteś biegły w technologii, mamy dla Ciebie rozwiązanie.

Kiedy i dlaczego używać widżetu odliczania?

Odliczanie jest wszechstronne i może być używane w różnych scenariuszach. Dodaje ekscytacji i pilności, zachęcając odwiedzających do podjęcia działania.

Uruchamiasz nową stronę internetową? Timer odliczania może budować oczekiwanie i tworzyć szum. Wyświetlasz timer na pięknej stronie w budowie, aby zachęcić odwiedzających do sprawdzenia najnowszych aktualizacji.

Innym świetnym momentem na użycie licznika czasu jest zbliżająca się wyprzedaż lub promocja w Twoim sklepie internetowym. Wyświetlając timer, informujesz swoich klientów o ofertach ograniczonych czasowo, zwiększając sprzedaż i zaangażowanie.

Liczniki czasu mogą być również pomocne dla organizatorów wydarzeń. Niezależnie od tego, czy jest to webinar, konferencja czy spotkanie towarzyskie, ustawienie timera pomaga uczestnikom dokładnie wiedzieć, kiedy wydarzenie się odbędzie.

Podczas konserwacji strony internetowej, timery odliczające są również przydatne. Pozwalają one odwiedzającym wiedzieć, kiedy strona będzie ponownie dostępna, dzięki czemu możesz ich informować i zmniejszać frustrację.

W przypadku mniejszych zastosowań, takich jak zaznaczenie osobistego kamienia milowego lub rocznicy, zegary odliczające dodają blasku Twojej stronie WordPress.

Teraz możesz wyświetlić licznik czasu do wydarzenia na swoich postach, stronach i w widżecie paska bocznego.

Odliczania można również dodawać do okien podręcznych typu lightbox, pływających pasków, pól przewijania i innych elementów projektu, aby zaangażować odwiedzających witrynę i przyciągnąć ich z powrotem do Twojej witryny.

Ponieważ istnieje tak wiele zastosowań dla timera odliczającego, wymieniliśmy 3 różne metody dodawania widżetu timera odliczającego w WordPressie:

• Metoda 1: Dodawanie widżetu odliczania za pomocą wtyczki Countdown Timer Ultimate (bezpłatna)
• Metoda 2: Dodawanie widżetu minutnika odliczania za pomocą OptinMonster (zalecane)
• Metoda 3: Dodawanie widżetu minutnika odliczania za pomocą SeedProd

Samouczek wideo

Subskrybuj WPBeginner

Jeśli wolisz pisemne instrukcje, po prostu czytaj dalej.

Metoda 1: Dodawanie widżetu odliczania za pomocą wtyczki Countdown Timer Ultimate (bezpłatna)

Countdown Timer Ultimate to prosta wtyczka, która pozwala dodać podstawowy minutnik odliczania do Twojej witryny.

W tym samouczku użyjemy darmowej wtyczki, ponieważ ma ona wszystkie narzędzia potrzebne do stworzenia licznika czasu.

Aby rozpocząć, pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i aktywowanie wtyczki Countdown Timer Ultimate. Jeśli potrzebujesz pomocy, możesz zapoznać się z naszym przewodnikiem krok po kroku na temat jak zainstalować wtyczkę WordPress.

Po aktywacji przejdź do Countdown Timer » Add Timer z obszaru administracyjnego WordPress.

Na następnym ekranie możesz nadać swojemu timerowi tytuł. Po prostu wpisz dowolny tytuł, który chcesz, w pole „Dodaj nowy timer”.

Następnie możesz przewinąć w dół do obszaru „Ustawienia licznika czasu” i ustawić datę i godzinę wygaśnięcia licznika czasu.

Po zlokalizowaniu pola „Data i czas wygaśnięcia” wybierz datę z selektora dat. Następnie możesz przeciągnąć suwaki „Godzina”, „Minuta” i „Sekunda”, aby dostosować czas wygaśnięcia.

Po prostu kliknij „Gotowe”, aby przejść do następnego kroku.

Następnym krokiem jest zdefiniowanie etykiety minutnika.

Aby wyświetlić wskaźniki dni, godzin, minut i sekund w liczniku czasu odliczania, zaznacz wszystkie pola w polu „Etykieta licznika”.

Teraz przewińmy stronę w dół i przełączmy się na zakładkę „Projekt”, aby nadać styl licznikowi odliczania.

W pierwszej sekcji „Ustawienia projektu” możesz wybrać projekt i ustawić rozmiar timera.

Niestety, darmowi użytkownicy mogą wybrać tylko projekt timera „Styl okręgu 1”. Jednak w sekcji „Szerokość timera” możemy określić, jak szeroki będzie nasz timer. Tutaj ustawiliśmy go na 850 px.

Pod „Szerokość timera” znajdziesz sekcję „Ustawienia stylu okręgu”.

Pierwszą rzeczą, którą będziesz chciał zrobić, jest wybór animacji. Masz dwie opcje: „Płynna” i „Tykanie”.

Po zdecydowaniu się na animację timera, możesz ustawić szerokość pierwszego planu i tła koła, przeciągając suwaki.

Następnie możesz dostosować kolory odliczania.

W sekcji „Ustawienia kolorów tła zegara” możesz dostosować kolor tła i indywidualnie zmienić kolor dla dni, godzin, minut i sekund.

Gdy będziesz zadowolony z ustawień, kliknij przycisk „Opublikuj”.

Wyświetlanie widżetu odliczania w WordPress

Teraz, gdy skonfigurowałeś widżet licznika czasu odliczania, czas dodać go do swojej strony internetowej.

Najpierw kliknij pozycję menu „Odliczanie” na swojej stronie WordPress. Timer, który właśnie utworzyłeś, będzie widoczny w tabeli „Odliczanie”.

Obok minutnika odliczania zobaczysz kod krótki, który musisz skopiować.

Po skopiowaniu shortcode'u, będziesz chciał otworzyć swój post lub stronę, na której chcesz wyświetlić licznik czasu.

Stąd możesz kliknąć przycisk „+”, aby dodać blok Shortcode. Następnie po prostu wklej ten skrócony kod do obszaru treści swojego wpisu lub strony WordPress.

Następnie upewnij się, że klikniesz przycisk „Zaktualizuj” lub „Opublikuj”, aby zapisać zmiany.

Możesz teraz odwiedzić swoją stronę internetową, aby zobaczyć widżet odliczania w akcji.

Jeśli używasz klasycznego motywu, możesz również dodać ten licznik czasu do paska bocznego swojej witryny.

Po prostu przejdź do strony Wygląd » Widżety. Następnie możesz kliknąć przycisk „+” w sekcji „Główny pasek boczny” i wyszukać blok Shortcode.

Po prostu kliknij go, gdy się pojawi, i wklej skrócony kod odliczania.

Po zakończeniu nie zapomnij kliknąć przycisku „Aktualizuj”, aby zachować ustawienia widżetu.

Możesz teraz odwiedzić swoją witrynę, aby zobaczyć licznik odliczania na pasku bocznym lub w obszarze gotowym na widżety.

Metoda 2: Dodawanie widżetu minutnika odliczania za pomocą OptinMonster (zalecane)

OptinMonster to najlepsza wtyczka do wyskakujących okienek WordPress na rynku, ale robi znacznie więcej niż tylko wyskakujące okienka. Pomaga przekształcić porzucających stronę odwiedzających w subskrybentów i klientów.

Korzystając z funkcji odliczania w OptinMonster, możesz zintegrować odliczanie z wyskakującym okienkiem lightbox, widżetem paska bocznego, pływającym paskiem lub dowolnym innym typem kampanii OptinMonster.

Narzędzie oferuje inteligentny sposób wyświetlania timera odliczającego z pięknym designem. Pozwala nawet tworzyć wiecznie zielone timery odliczające w WordPressie.

Wieczny licznik czasu odliczania rozpoczyna odliczanie dla każdego indywidualnego odwiedzającego. Następnie licznik rozpoczyna się, gdy osoba odwiedza Twoją witrynę. Jest on również określany jako dynamiczny licznik czasu odliczania.

Najpierw odwiedź stronę OptinMonster i zarejestruj się w planie, który odpowiada Twoim potrzebom.

Po zakończeniu możesz zainstalować wtyczkę OptinMonster na swojej witrynie WordPress. Aby uzyskać więcej szczegółów, zapoznaj się z naszym przewodnikiem krok po kroku dotyczącym instalacji wtyczki WordPress.

Ten wtyczka połączy Twoją witrynę WordPress z aplikacją OptinMonster. Po aktywacji możesz kliknąć przycisk „Połącz istniejące konto” i postępować zgodnie z instrukcjami, aby rozpocząć proces integracji.

Następnie zobaczysz wyskakujące okienko. Po prostu wybierz adres e-mail, którego użyłeś do zarejestrowania się w koncie OptinMonster i kliknij przycisk „Połącz z WordPressem”.

Wtyczka połączy teraz Twoją witrynę WordPress z Twoim kontem OptinMonster.

Po połączeniu możesz zacząć tworzyć nową kampanię z pulpitu OptinMonster. Po prostu przejdź do OptinMonster » Kampanie i kliknij przycisk „Utwórz swoją pierwszą kampanię”.

Wtyczka oferuje różnorodne typy kampanii i szablony do wyboru.

Możesz użyć dowolnego typu kampanii i dodać do niej licznik czasu. W tym samouczku użyjemy typu kampanii „Popup”. Następnie użyjemy szablonu „Uzyskaj kod rabatowy”.

Pojawi się okno podręczne, w którym należy nazwać szablon. Nazwa służy tylko do Twojej wiadomości, więc możesz użyć czegokolwiek chcesz.

Na przykład, nazwaliśmy naszą kampanię „Odliczanie”.

Gdy to zrobisz, kliknij „Rozpocznij tworzenie”. OptinMonster przekieruje Cię do interfejsu budowniczego.

Stąd przejdźmy do sekcji „Blok” na lewym panelu. Następnie po prostu przeciągnij blok „Odliczanie” i upuść go w podglądzie na prawym panelu, gdy go zobaczysz.

Następnie możesz wybrać „Typ odliczania” z listy rozwijanej w panelu bocznym. Istnieją dwie opcje: „Statyczny” i „Dynamiczny”.

Wybór między tymi dwoma typami zależy całkowicie od Twojego celu. Statyczny licznik, jak sama nazwa wskazuje, pozostaje ustalony na jednej dacie i godzinie zakończenia, co czyni go idealnym do jednorazowych wydarzeń, takich jak premiera produktu lub webinar.

Ale co jeśli chcesz stworzyć powtarzające się poczucie pilności? Właśnie tutaj przydaje się dynamiczny zegar.

Załóżmy, że Twój sklep internetowy co tydzień organizuje wyprzedaż błyskawiczną. Dynamiczny zegar automatycznie zresetuje się po każdym okresie wyprzedaży, co może być ogromną pomocą.

W tym przewodniku stworzymy dynamiczne odliczanie, aby promować cotygodniowe błyskawiczne wyprzedaże.

Wybierzmy zatem z menu rozwijanego opcję „Dynamiczne” i ustawmy datę oraz godzinę wygaśnięcia. Następnie możesz również włączyć opcję „Śledzenie konwersji?”, aby zbierać informacje o kampanii.

Jeśli chcesz, możesz dostosować wygląd timera odliczania.

Po prostu przełącz się na zakładkę „Zaawansowane”, a znajdziesz opcje dostosowywania, aby zmienić kolor tła timera, czcionki, cienie i inne.

Gdy wszystko będzie gotowe, przejdź do zakładki „Zasady wyświetlania”.

Tutaj kontrolujesz dokładnie, kiedy i na których stronach pojawi się Twoje okno podręczne. Domyślne ustawienie to 5 sekund na każdej stronie, ale możesz je łatwo dostosować do swoich potrzeb.

Alternatywnie możesz skorzystać z funkcji MonsterLink firmy OptinMonster.

Ta funkcja pozwala wywołać pojawienie się okna podręcznego, gdy użytkownicy klikną link lub przycisk na Twojej stronie. Dzięki temu odwiedzający mają bezpośrednią kontrolę nad tym, kiedy chcą zobaczyć Twoją ofertę lub wiadomość.

Aby użyć MonsterLink, najpierw musisz kliknąć menu rozwijane „czas na stronie”. Następnie po prostu wybierz „Kiedy (Wyzwalacze)”, a następnie „MonsterLink (Po kliknięciu)”.

Po dodaniu możesz kliknąć „Skopiuj kod MonsterLink”. Będzie on potrzebny podczas procesu osadzania.

Następnie możesz usunąć inną regułę wyświetlania, klikając ikonę kosza.

Teraz czas opublikować kampanię z timerem odliczającym. Aby to zrobić, przejdźmy do zakładki „Publikuj”.

Stąd możesz zmienić status z „Szkic” na „Opublikuj”. Następnie po prostu kliknij przycisk „Zapisz” i wyjdź z edytora.

Następnie zostaniesz przekierowany na stronę OptinMonster, gdzie musisz zweryfikować status swojej kampanii.

W sekcji „Widoczność i status” zmień status „Oczekujący” na „Opublikowany”.

Nie zapomnij kliknąć zielonego przycisku „Zapisz zmiany”, aby upewnić się, że Twoje zmiany zostały zapisane.

Jedyną rzeczą, która pozostała do zrobienia, jest dodanie kodu MonsterLink do Twojej strony WordPress.

Przede wszystkim otwórz post lub stronę, na której chcesz wyświetlić kampanię z odliczaniem.

Na przykład dodamy nasz do strony „Galeria” na naszej demonstracyjnej stronie fotograficznej. Przejdźmy więc do Strony » Wszystkie strony i kliknij „Edytuj” na stronie „Galeria”.

W edytorze strony możesz kliknąć przycisk „+” i wyszukać blok Niestandardowy HTML. Po prostu kliknij go, aby dodać do strony.

W bloku „Niestandardowy HTML” po prostu wklej kod MonsterLink, który wcześniej skopiowałeś.

Oto jak może to wyglądać w edytorze bloków strony:

Teraz wezwanie do działania „Subskrybuj teraz!” może nie pasować do celu kampanii.

Zmieńmy więc na „Pobierz nasz limitowany kod promocyjny”, „Odblokuj ekskluzywne rabaty” lub coś innego, co lepiej pasuje do kontekstu. Po zakończeniu możesz kliknąć „Aktualizuj” lub „Opublikuj” stronę.

Teraz, jeśli odwiedzisz stronę, zobaczysz MonsterLink w akcji.

Po prostu spróbuj w to kliknąć, a zobaczysz popup kampanii z odliczaniem.

Oto jak to wygląda na naszej stronie demonstracyjnej „Galeria”:

Metoda 3: Dodawanie widżetu minutnika odliczania za pomocą SeedProd

SeedProd to najlepszy kreator motywów i stron docelowych dla WordPress.

Jego kreator typu „przeciągnij i upuść” pozwala tworzyć niesamowite strony docelowe i dodawać odliczanie, aby przyciągnąć uwagę odwiedzających.

Aby korzystać z funkcji odliczania, będziesz potrzebować SeedProd Pro. Z planem Pro uzyskasz również dostęp do różnych szablonów, bloków stron do personalizacji, integracji z marketingiem e-mailowym i nie tylko.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę SeedProd Pro na swojej stronie WordPress. Aby uzyskać więcej szczegółów, zapoznaj się z naszym przewodnikiem krok po kroku dotyczącym jak zainstalować wtyczkę WordPress.

Po aktywacji możesz przejść do SeedProd » Settings z pulpitu WordPress, aby dodać i zweryfikować swój klucz licencyjny. Klucz ten możesz uzyskać w swoim koncie SeedProd.

Po wprowadzeniu klucza licencyjnego możesz kliknąć przycisk „Zweryfikuj klucz”.

Możesz również zainstalować SeedProd Pro ręcznie. Zanim to zrobisz, upewnij się, że pobrałeś plik .zip SeedProd Pro ze swojego konta SeedProd.

Następnie możesz przejść do Wtyczki » Dodaj nową wtyczkę i kliknąć przycisk „Prześlij wtyczkę”, aby wyświetlić opcję „Wybierz plik”. Prześlij plik SeedProd Pro .zip.

Następnie po prostu kliknij przycisk „Zainstaluj teraz”.

Teraz jesteś gotowy do utworzenia nowej strony docelowej. Aby rozpocząć, przejdź do SeedProd » Strony docelowe.

SeedProd pozwala na tworzenie różnych typów stron, w tym stron „wkrótce”, niestandardowych stron koszyka WooCommerce, stron logowania i stron 404. Możesz również tworzyć inne strony docelowe, klikając przycisk „Dodaj nową stronę docelową”, takie jak strona podziękowania lub strona rejestracji na webinar.

W tym samouczku użyjemy strony „Wkrótce”. To świetne miejsce, aby dodać licznik czasu i przypomnieć odbiorcom o nadchodzącym produkcie lub wydarzeniu.

Kliknijmy przycisk „Ustaw stronę wkrótce”.

Następnie wybierzesz szablon dla swojej strony docelowej.

Chociaż istnieje opcja tworzenia strony od podstaw przy użyciu pustego szablonu, zalecamy użycie szablonu, ponieważ oszczędza to czas i pozwala na edycję projektu według własnych potrzeb.

Po znalezieniu idealnego szablonu możesz najechać na niego kursorem i kliknąć przycisk „sprawdź”, aby go użyć.

Na następnym ekranie zostaniesz przeniesiony do kreatora stron metodą przeciągnij i upuść SeedProd w zakładce „Projekt”.

Tutaj możesz dostosować stronę docelową, dodając lub usuwając sekcje i bloki. Możesz również sformatować układ strony.

Aby dodać licznik czasu odliczania, po prostu przewiń w dół lewego panelu do sekcji bloków „Zaawansowane”. Następnie przeciągnij i upuść blok „Odliczanie” w dowolnym miejscu na swojej stronie docelowej.

Po dodaniu bloku odliczania, dostosujmy go. Po prostu kliknij go, a zobaczysz opcje dostosowywania w lewym panelu.

Istnieją 3 zakładki, które możesz sprawdzić: „Treść”, „Szablony” i „Zaawansowane”. Sprawdźmy je po kolei.

W zakładce „Treść” możesz wybrać typ licznika czasu, ustawić datę i godzinę zakończenia, wybrać strefę czasową, dostosować wyrównanie licznika czasu i inne.

Teraz przejdźmy do „Szablonów”.

Tutaj SeedProd pozwala wybrać spośród 5 dostępnych stylów odliczania.

Na koniec zakładka „Zaawansowane” zawiera kilka sekcji.

Sekcja „Style” pozwala na zmianę ustawień typografii, kolorów i obramowań timera.

Następnie możesz przewinąć w dół zakładki „Zaawansowane” do sekcji „Efekty animacji”.

Tutaj możesz zastosować animację, aby wyróżnić licznik czasu, gdy odwiedzający go zobaczą. Po prostu kliknij menu rozwijane i wybierz spośród dostępnych efektów, takich jak „Flash”, „Pulse”, „Swing”, „Wobble” i inne.

Jeśli chcesz dostosować inne elementy strony docelowej, takie jak teksty lub przyciski mediów społecznościowych, możesz na nie kliknąć. Następnie SeedProd otworzy opcje dostosowywania.

Gdy wszystko będzie gotowe, kliknij zakładkę „Ustawienia strony”, aby opublikować swoją stronę docelową z odliczaniem.

Pierwszą rzeczą, którą chcesz zrobić, to nadać stronie docelowej tytuł. Na przykład, nazwaliśmy naszą stronę docelową „Wkrótce”.

Następnie możesz zmienić „Status strony” z „Szkic” na „Opublikuj”. Masz również możliwość wyświetlenia lub ukrycia linku „Zasilane przez SeedProd”.

Następnie sprawdźmy „Kontrolę dostępu” w zakładce „Ustawienia strony” i zarządzajmy, kto może wyświetlać Twoją stronę docelową.

Ta funkcja jest bardzo przydatna, jeśli chcesz, aby określone osoby mogły ominąć stronę „Wkrótce” i pracować nad rozwojem swojej witryny. SeedProd pozwala również na uwzględnianie i wykluczanie adresów URL, na których będzie wyświetlana strona „Wkrótce”.

Domyślnie strona będzie widoczna w całej witrynie. Możesz jednak zmienić ją tak, aby wyświetlała się tylko na stronie głównej lub na określonych adresach URL.

Następnie możesz zoptymalizować swoją stronę pod kątem wyszukiwarek, przechodząc do ustawień SEO.

SeedProd pozwala na dodanie tytułu SEO, opisu, ikony witryny (favicon) i miniatury w mediach społecznościowych.

Jeśli chcesz dodać fragmenty kodu do swojej strony docelowej, przejdź do sekcji „Skrypty” w Ustawieniach strony. Tutaj możesz dodać skrypty do nagłówka, ciała i stopki swojej strony.

Na przykład, możesz dodać kod śledzenia Google Analytics w polu „Skrypty nagłówka”, aby zobaczyć, jak ludzie korzystają z Twojej strony docelowej.

Po zakończeniu upewnij się, że klikniesz przycisk „Zapisz”. Możesz również podglądnąć swoją stronę docelową, aby upewnić się, że wszystko jest poprawnie skonfigurowane.

Następnie po prostu kliknij przycisk „X”, aby zamknąć edytor SeedProd.

Teraz przejdźmy do SeedProd » Strony docelowe i zmień status swojej strony „Wkrótce” na „Aktywny”.

To wszystko. Twoja strona docelowa z odliczaniem będzie na żywo.

Możesz teraz odwiedzić swoją witrynę, aby zobaczyć minutnik odliczania „Wkrótce” w akcji.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodać widżet odliczania w WordPress. Następnie możesz również sprawdzić więcej fajnych sztuczek projektowania stron internetowych na jak dodać przewijany pasek wiadomości i jak dodać obracające się referencje w WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.