Dodawanie widżetu odliczania milestone w WordPress

Czy chcesz dodać odliczanie milestone w WordPress?

Licznik czasu pomaga zaprezentować ważne osiągnięcia, rocznice, nadchodzące wydarzenia i wiele innych.

W tym artykule pokażemy, jak łatwo dodać widżet odliczania do witryny WordPress.

Adding a milestone countdown widget in WordPress

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

Widżety odliczania Milestone to przydatne narzędzie, które przypomina odbiorcom o ważnym wydarzeniu w Twojej firmie, takim jak nadchodzące wydarzenie, premiera produktu lub wydarzenie sprzedażowe.

Odliczanie pomaga budować oczekiwanie wśród klientów i poprawić zaangażowanie użytkowników.

Oto kilka typowych scenariuszy, w których używasz widżetu odliczania kamieni milowych:

  • Przed uruchomieniem witryny na stronie już wkrótce.
  • Podczas konserwacji strony internetowej, aby poinformować odwiedzających, kiedy strona będzie ponownie dostępna.
  • Przed wprowadzeniem nowego produktu do sklepu internetowego.
  • Podczas organizowania imprezy lub konferencji.
  • W dniu urodzin Twojego biznesu online.
  • Na święta i wydarzenia wyprzedażowe, takie jak Czarny piątek, aby zaoferować duże rabaty na produkty lub usługi.

Możesz wyświetlić licznik milestone w obszarze postów, stron i widżetów paska bocznego.

Liczniki odliczania można również dodawać do wyskakujących okienek lightbox, pływających pasków, pól przewijania i innych elementów projektu, aby zaangażować porzucających odwiedzających witrynę i przywrócić ich do swojej witryny.

Ponieważ istnieje tak wiele przypadków użycia licznika, wymieniliśmy różne metody 3 dodawania widżetu odliczania milestone w WordPress:

  1. Utwórz widżet odliczania Milestone za pomocą Countdown Timer Ultimate
  2. Twórz bardzo angażujące dynamiczne liczniki z OptinMonster
  3. Utwórz licznik czasu nadchodzącego i trybu konserwacji za pomocą SeedProd

Przyjrzyjmy się, jak łatwo dodać widżet odliczania milestone w WordPress.

Video Tutorial

Subskrybuj WPBeginner

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

Metoda 1: Dodawanie widżetu odliczania Milestone za pomocą wtyczki Countdown Timer Ultimate

Countdown timer demo

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

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę Countdown Timer Ultimate. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji musisz odwiedzić Countdown Timer ” Dodaj Timer strona w obszarze administracyjnym WordPress.

Na tej stronie musisz zacząć od dodania nazwy kamienia milowego jako tytułu nowego licznika.

Uwaga: Timer używa strefy czasowej ustawionej w Ustawieniach witryny WordPress. Jeśli chcesz zmienić strefę czasową dla tego minutnika, musisz przejść do Ustawienia ” Ogólne i zaktualizuj ustawienia strefy czasowej swojej witryny WordPress.

Add timer title

Następnie możesz przewinąć w dół, aby ustawić datę wygaśnięcia, dzień i godzinę dla licznika milestone.

Set expiry date

Następnie musisz wybrać styl animacji z listy rozwijanej. Można również łatwo dostosować okrąg i szerokość tła.

Choose animation

W polu Szerokość odliczania można zdefiniować szerokość pełnego wyświetlania widżetu odliczania. Jeśli pozostawisz to pole puste, wyświetli ono timer o domyślnym rozmiarze.

Następnie możesz dodać kolor tła i pierwszego planu dla minutnika. Możesz indywidualnie zmieniać kolor na dni, godziny, minuty i sekundy. Możesz również zmienić etykiety dla elementów, takich jak dni, godziny itp.

Jedną z rzeczy, o których należy pamiętać, jest to, że wtyczka niestety nie dostosowuje etykiety dla liczby mnogiej lub pojedynczej, więc na przykład powie „1 godzina” zamiast „1 godzina”.

Background foreground color

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

Wyświetlanie widżetu odliczania Milestone w WordPress

Teraz, gdy utworzyłeś swój widżet odliczania milestone, dodajmy go do twojej witryny.

Najpierw musisz kliknąć menu odliczania czasu. Na stronie odliczania WP zobaczysz zegar, który właśnie utworzyłeś.

Copy shortcode

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

Musisz skopiować i wkleić ten krótki kod w obszarze treści postu lub strony. Następnie kliknij przycisk Aktualizuj lub Publikuj, aby zapisać zmiany.

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

Countdown timer demo

Możesz również dodać ten minutnik na pasku bocznym witryny WordPress. Po prostu przejdź do Wygląd ” Widgety strona i dodaj widżet „tekst” do paska bocznego. W Ustawieniach widżetu musisz wkleić skrócony kod odliczającego czas.

Countdown widget settings

Po zakończeniu nie zapomnij kliknąć przycisku Zapisz, aby zapisać ustawienia widżetu.

Countdown milestone preview

Metoda 2: Dodanie widżetu odliczania MileStone za pomocą OptinMonster

OptinMonster to najlepsza wtyczka popup WordPress na rynku, ale robi znacznie więcej niż tylko wyskakujące okienka. Pomaga konwertować porzucanie odwiedzających witrynę na subskrybentów i klientów.

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

Poniżej znajduje się przykład jednej z gotowych kampanii odliczania, które mają, ale możesz użyć kreatora przeciągnij i upuść, aby utworzyć całkowicie spersonalizowany licznik czasu.

OptinMonster Countdown Timer Popup for Holidays

OptinMonster to inteligentny sposób na pokazanie minutnika w bardzo przyciągających uwagę elementach projektu. Pozwalają nawet tworzyć wiecznie zielone liczniki w WordPress.

Zimozielony licznik czasu rozpoczyna odliczanie dla każdego indywidualnego gościa. Zegar rozpoczyna się, gdy osoba pojawi się na twojej stronie. Jest również określany jako dynamiczny zegar odliczający.

Najpierw musisz odwiedzić stronę OptinMonster i zarejestrować plan, który spełni Twoje potrzeby.

Get OptinMonster

Następnie musisz zainstalować wtyczkę OptinMonster na swojej stronie WordPress. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Ta wtyczka będzie działać jako łącznik między witryną WordPress a aplikacją OptinMonster.

Po aktywacji musisz przejść do OptinMonster ” Ustawienia z menu administratora WordPress i połącz swoje konto.

Możesz kliknąć przycisk „Połącz istniejące konto”, aby rozpocząć.

Connect OptinMonster account

Następnie pojawi się wyskakujące okno. Po prostu wybierz adres e-mail użyty do rejestracji konta OptinMonster i kliknij przycisk „Połącz się z WordPress”.

Click the Connect to WordPress button

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

Po połączeniu możesz rozpocząć tworzenie nowej kampanii z pulpitu OptinMonster. Wystarczy udać się do OptinMonster ” Kampanie i kliknij przycisk „Stwórz swoją pierwszą kampanię”.

Create a new campaign

Możesz użyć dowolnego typu kampanii i zintegrować z nią licznik czasu.

Choose type of OptinMonster campaign

Aby uzyskać więcej informacji, zobacz ten samouczek krok po kroku, jak utworzyć kampanię odliczania w OptinMonster.

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

SeedProd to najlepszy kreator stron docelowych dla WordPress. Kreator „przeciągnij i upuść” pozwala tworzyć niesamowite strony docelowe i dodawać licznik czasu, aby przyciągnąć uwagę odwiedzających.

Aby skorzystać z funkcji odliczania czasu, potrzebujesz wersji SeedProd Pro. Dzięki planowi Pro możesz również uzyskać dostęp do różnych szablonów, bloków stron do dostosowywania, integracji z e-mail marketingiem i innych.

SeedProd Preview of Countdown Timer

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę SeedProd Pro na swojej stronie WordPress. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji zostaniesz przekierowany do SeedProd w obszarze administracyjnym WordPress. Poprosi o klucz licencyjny, który możesz uzyskać z konta SeedProd. Po wprowadzeniu klucza licencyjnego możesz kliknąć przycisk „zweryfikuj klucz”.

Enter your license key

Następnie możesz utworzyć nową stronę docelową, przechodząc do SeedProd ” Strony.

SeedProd pozwala skonfigurować różne typy stron, w tym strony nadchodzące, strony logowania, niestandardowe strony koszyka WooCommerce i strony 404.

Możesz także utworzyć inne strony docelowe, klikając przycisk „Dodaj nową stronę docelową”, takie jak podziękowanie lub strona do rejestracji na webinarium.

W tym samouczku będziemy używać strony Coming Soon, ponieważ jest to świetne miejsce, aby dodać zegar odliczający czas i przypomnieć odbiorcom o nadchodzącym produkcie lub wydarzeniu.

Select a landing page type

Następnie możesz wybrać szablon dla swojej strony docelowej. Istnieje również możliwość utworzenia strony od podstaw za pomocą pustego szablonu.

Zalecamy jednak użycie szablonu, ponieważ oszczędza to czas i pomaga edytować projekt tak, jak chcesz.

Choose a page template

Na następnym ekranie zostaniesz przeniesiony do Kreatora Stron SeedProd przeciągnij i upuść na karcie Projekt.

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

Aby dodać licznik, po prostu przejdź do sekcji Zaawansowane bloki stron z lewego menu i umieść blok „odliczanie” w dowolnym miejscu na stronie.

Add the countdown timer block

Możesz także edytować różne sekcje strony coming soon. Po prostu kliknij sekcję, a zobaczysz więcej opcji w lewym menu.

Możesz na przykład edytować tekst w polu, zmienić jego czcionkę, kolor lub wyrównać zawartość.

Edit page sections

Po zakończeniu edycji projektu strony docelowej możesz przejść do karty Połącz i zintegrować usługi e-mail marketingu. SeedProd obsługuje popularne usługi, takie jak Drip, Constant Contact, Sendinblue, ConvertKit i inne.

Connect email marketing services

Następnie kliknij kartę Ustawienia strony, aby opublikować stronę docelową z licznikiem czasu.

W ustawieniach ogólnych możesz zmienić „Status strony” z wersji roboczej na publikację, a Twoja strona będzie aktywna.

Change the Page Settings

Następnie możesz przejść do ustawień „kontroli dostępu” na karcie Ustawienia strony i zarządzać, kto może wyświetlić Twoją stronę docelową.

Ta funkcja jest bardzo przydatna, jeśli chcesz, aby pewne osoby ominęły stronę coming soon I pracowały nad rozwojem Twojej witryny.

SeedProd pozwala również na dołączanie i wykluczanie adresów URL, na których pojawi się wkrótce strona. Domyślnie strona będzie widoczna na całej stronie. Możesz go jednak zmienić, aby wyświetlał się tylko na stronie głównej lub na określonych adresach URL.

Edit Access Control settings

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

SeedProd pozwala dodać tytuł SEO, opis, ikonę favicon i miniaturę mediów społecznościowych.

Optimize your page for SEO

Jeśli chcesz dodać fragmenty kodu do strony docelowej, przejdź do sekcji „Skrypty” w Ustawieniach strony. Tutaj możesz dodać skrypty w nagłówku, treści i stopce strony.

Na przykład możesz dodać kod śledzenia Google Analytics w skryptach nagłówka, aby zobaczyć, jak użytkownicy korzystają z twojej strony docelowej.

Add scripts to your landing page

Gdy będziesz zadowolony, kliknij przycisk Zapisz. Możesz także wyświetlić podgląd strony docelowej, aby wprowadzić zmiany w jej wyglądzie.

Następnie musisz udać się do SeedProd ” Strony i zmień status swojej strony coming soon na ” Active.’

Change page status to Active

Możesz teraz odwiedzić swoją stronę, aby zobaczyć licznik coming soon w akcji.

Countdown timer preview

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodać widżet odliczania milestone w WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat sprawdzonych sposobów zarabiania w Internecie na blogach z WordPress lub naszym kompletnym przewodnikiem na temat tworzenia biuletynu e-mail.

Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.

You May Also Like

Jak stworzyć katalog stron w WordPress (krok po kroku)

W artykule: Co To jest katalog stron www?Metoda 1: Tworzenie katalogu WordPress…

Jak dodać stronę HTML Sitemap w WordPress (2 sposoby)

W artykule: Jaka jest różnica między mapami witryn XML i HTML?Metoda 1.…

Jak i dlaczego należy ograniczyć próby logowania w WordPress?

W artykule: Dlaczego warto ograniczyć próby logowania w WordPress?Jak ograniczyć próby logowania…

13 darmowych wtyczek do zarządzania użytkownikami dla WordPress (2021)

W artykule: Dlaczego potrzebujesz wtyczki do zarządzania użytkownikami w WordPress?1. Członkowie2. WPForms3.…