Jak tworzyć pola alertów w WordPress

Jeśli Twoja witryna ma dużą liczbę odwiedzających, ale rejestracje lub konwersje są niższe niż chcesz, nie jesteś sam. Dostępnych jest mnóstwo zasobów, które pomogą zwiększyć ruch – ale sprawienie, by ruch ten podejmował właściwe działania w Twojej witrynie, to już inna historia.

Jednym z możliwych rozwiązań jest użycie skrzynki ostrzegawczej. To potężne i proste narzędzie, które może radykalnie zwiększyć liczbę konwersji w Twojej witrynie WordPress. Co więcej, tworzenie i dostosowywanie tej funkcji jest bardzo łatwe.

W tym artykule omówimy, czym jest pole alertu i dlaczego warto z niego korzystać. Następnie pokażemy Ci, jak stworzyć własne pole alertu w WordPress. Zanurzmy się!

Co to jest skrzynka alertów?

Pole alertu jest dokładnie tym, na co wygląda. Jest to alert, który pojawia się na stronie internetowej, aby powiadomić odwiedzających, że coś się wydarzyło. Być może znasz tę funkcję lepiej jako „wyskakujące okienko”.

Pola alertów w WordPress zwykle przybierają jedną z dwóch form. Na ekranie może pojawić się wyskakujące okienko lub pasek biegnący wzdłuż górnej części strony (czasami nazywany „paskiem powitalnym”).

Dlaczego warto utworzyć skrzynkę alertów?

Pola alertów są zwykle używane do powiadamiania (lub ostrzegania) użytkowników o czymś ważnym, co dzieje się w Twojej witrynie. Na przykład możesz użyć pola alertu WordPress, aby poinformować odwiedzających o specjalnej wyprzedaży produktu, którego inaczej mogliby nie zobaczyć, lub o serii polecanych postów.

Innym bardzo częstym zastosowaniem tej funkcji jest przechwytywanie adresów e-mail odwiedzających. Wiele wtyczek okienek alertów WordPress można ustawić tak, aby pojawiały się, gdy użytkownik odsunie kursor od witryny (na przykład, aby zamknąć kartę lub nacisnąć przycisk Wstecz).

Te alerty „w ostatniej chwili” mogą być świetnym sposobem na przechwycenie danych kontaktowych gości przed ich wyjazdem, co potencjalnie może skutkować konwersją w przyszłości. Alerty te mogą być niezwykle skuteczne – najlepiej działające wyskakujące okienka mają współczynnik konwersji przekraczający 9 procent. Innymi słowy, ich wdrożenie jest warte wysiłku.

Tworzenie okna alertów za pomocą wtyczki

Dzięki wtyczkom WordPress tworzenie własnych alertów jest proste. Przeprowadzimy Cię przez każdy krok, korzystając z potężnej (i bezpłatnej) wtyczki Popup Maker.

Krok 1: Pobierz wtyczkę (taką jak Popup Maker)

Pierwszą rzeczą, którą musisz zrobić, to wybrać dedykowaną wtyczkę. Jak wspomnieliśmy powyżej, bezpłatna wtyczka Popup Maker jest dobrze sprawdzona i stanowi solidny wybór.

Aby zainstalować to narzędzie, przejdź do pulpitu nawigacyjnego WordPress i przejdź do Wtyczki > Dodaj nowy . Wyszukaj „kreator wyskakujących okienek” i powinien to być pierwszy wpis:

Następnie kliknij Zainstaluj teraz . Po zakończeniu instalacji nie zapomnij aktywować wtyczki, wybierając Aktywuj . Pamiętaj, że chociaż sam Kreator wyskakujących okienek jest bezpłatny, niektóre funkcje wymagają planu premium.

Krok 2: Utwórz wyskakujące okienko

Po zainstalowaniu Popup Maker powinieneś zobaczyć nowy wpis na pasku bocznym WordPress, którego nazwa pochodzi od wtyczki . Kliknij go, aby otworzyć listę wszystkich wyskakujących okienek. Na początku będzie pusto, ale masz zamiar temu zaradzić.

Aby utworzyć wyskakujące okienko, kliknij Dodaj nowe wyskakujące okienko u góry ekranu. Spowoduje to otwarcie edytora WordPress:

Gdy odwiedzisz ten ekran, pojawi się samouczek pokazujący, jak utworzyć wyskakujące okienko. Pierwszą rzeczą, o którą zostaniesz poproszony, jest wprowadzenie nazwy, abyś mógł później zidentyfikować wyskakujące okienko.

Następnie możesz wprowadzić opcjonalny tytuł, który pojawi się w wyskakującym okienku jako nagłówek. W głównym polu edytora możesz również wpisać treść, którą chcesz wyświetlić w popupie. Jeśli chcesz po prostu stworzyć prosty formularz kontaktowy, możesz również skorzystać z predefiniowanego shortcode.

Te skróty znajdują się pod nowym przyciskiem z logo Popup Maker na pasku narzędzi:

Kliknij Formularz subskrypcji , aby wstawić podstawowy formularz kontaktowy do przechwytywania wiadomości e-mail. Tekst pól i oświadczenie o wyłączeniu odpowiedzialności za prywatność można dostosować, klikając formularz i wybierając przycisk edycji. Oprócz tekstu istnieje wiele opcji stylów i układu.

Krok 3: Skonfiguruj wyzwalacze dla swojego wyskakującego okienka

Po utworzeniu wyskakującego formularza następnym krokiem jest skonfigurowanie jego wyzwalaczy. Określają one, kiedy pojawi się okno alertu.

Na ekranie edytora wyskakujących okienek przewiń w dół do Ustawień wyskakujących okienek i wybierz Wyzwalacze z listy. Następnie kliknij Dodaj nowy wyzwalacz :

Podstawowa wtyczka Popup Maker zawiera tutaj trzy opcje: Kliknij Otwórz , Opóźnienie czasowe/Automatyczne otwieranie i Przesłanie formularza . Możesz także wybrać Exit Intent jako wyzwalacz, jeśli korzystasz z planu premium – jest to opcja, której możesz użyć, jeśli chcesz, aby wyskakujące okienko pojawiało się, gdy użytkownik próbuje opuścić Twoją witrynę.

Na karcie Kierowanie możesz również dostosować strony, na których ma się pojawiać pole alertu. Pamiętaj o dostosowaniu tego ustawienia, jeśli chcesz wykluczyć określone strony lub typy urządzeń z wyświetlania alertu.

Krok 4: Stylizuj swoje pole alertu

Na koniec możesz zmienić wygląd nowego pola alertu, aby lepiej pasował do motywu witryny. W obszarze Ustawienia wyskakujących okienek wybierz Wyświetlanie . Tam możesz zmienić miejsce, w którym wyskakujące okienko pojawia się na ekranie (w tym jako górny pasek), ustawić jego rozmiar i położenie oraz wybrać jeden z kilku dostępnych motywów:

Po zakończeniu wybierz przycisk Publikuj , aby zapisać zmiany i aktywować wyskakujące okienko.

Tworzenie Alert Box bez wtyczki

Jeśli wolisz nie używać wtyczki, możesz również samodzielnie utworzyć pole alertu, używając kodu i odrobiny smaru łokciowego. Będziesz musiał edytować plik header.php i dodać CSS do swojej witryny. W tym przykładzie utworzymy pasek alertów u góry strony.

Krok 1: Edytuj swój plik header.php

Pierwszą rzeczą, którą musisz zrobić, to dodać trochę kodu do pliku header.php . Dostęp do tego można uzyskać za pomocą Edytora motywów WordPress. Z pulpitu nawigacyjnego przejdź do Wygląd > Edytor motywów . Następnie wybierz nagłówek motywu (header.php) z paska bocznego po prawej stronie:

Skopiuj i wklej następujący kod do pliku na końcu sekcji <head> :

<div class="alertbar">All items 20% off!</div>

Oto jak plik powinien wyglądać po tym dodaniu:

Spowoduje to wyświetlenie komunikatu „Wszystkie produkty 20% taniej!” na pasku alertów. Możesz dostosować tekst, jak chcesz.

Krok 2: Dodaj niestandardowy CSS

Na koniec musisz użyć kaskadowych arkuszy stylów (CSS), aby nadać styl alertowi. Możesz dodać CSS za pomocą WordPress Customizer.

Aby to zrobić, przejdź do pulpitu nawigacyjnego WordPress i przejdź do Wygląd> Dostosuj. Spowoduje to otwarcie Twojej witryny w Konfiguratorze. Na pasku bocznym wybierz Dodatkowy CSS . Spowoduje to otwarcie pola kodu, w którym możesz wprowadzić niestandardowy CSS.

Wklej następujący kod w polu tekstowym:

.alertbar {

background-color: #A9A9A9;

color: #FFFFFF;

display: block;

line-height: 45px;

height: 50px;

position: relative;

text-align: center;

text-decoration: none;

top: 0px;

width: 100%;

z-index: 100;

}

Oto jak wygląda alert:

Powyższy kod tworzy ciemnoszary pasek z białym tekstem – ale możesz dostosować kolory i rozmiar, jak chcesz, aby dopasować swój motyw. Kiedy skończysz, kliknij Opublikuj , aby zapisać zmiany.

Ulepsz swoją witrynę za pomocą WP Engine

Niezależnie od tego, czy chcesz zwiększyć liczbę rejestracji e-mailowych, czy potrzebujesz prostego sposobu powiadamiania odwiedzających o ofertach specjalnych, skrzynka alertów to eleganckie i skuteczne rozwiązanie. Wdrożenie jednego na swojej stronie WordPress może radykalnie zwiększyć współczynnik konwersji.

Możesz zaimplementować okno alertu za pomocą wtyczki WordPress, takiej jak Popup Maker. Możesz również stosunkowo łatwo zakodować go samodzielnie za pomocą odrobiny CSS. Tak czy inaczej, otrzymasz konfigurowalny alert, którego celem jest zwiększenie liczby rejestracji i konwersji.

Jeśli chcesz jeszcze bardziej ulepszyć swoją witrynę, sprawdź nasze dedykowane plany hostingowe WordPress!