Jak utworzyć pasek powiadomień w WordPress (3 proste sposoby)

Czy chcesz dodać pasek powiadomień do swojej witryny WordPress?

Pasek powiadomień lub pasek informacyjny to świetny sposób, aby poinformować odwiedzających o ważnych aktualizacjach, ofertach specjalnych, nowych produktach i nie tylko.

W tym artykule pokażemy Ci, jak utworzyć pasek powiadomień w WordPress za pomocą 3 prostych rozwiązań.

Dlaczego warto tworzyć pasek powiadomień w WordPress?

Pasek powiadomień to świetny sposób, aby poinformować odwiedzających o czymś ważnym na Twojej stronie internetowej. Może to być trwająca wyprzedaż, aktualizacja godzin otwarcia lub zmiany w usługach.

Możesz również użyć paska powiadomień, aby poinformować odwiedzających o specjalnej ofercie, takiej jak oferta kup jeden, drugi za darmo. Jest to świetna opcja, jeśli prowadzisz sklep internetowy.

Używanie paska powiadomień jest lepsze niż po prostu umieszczanie ogłoszenia na Twojej stronie głównej. Pasek powiadomień może pojawić się wyraźnie na samej górze każdej strony w całej Twojej witrynie.

Stworzenie paska powiadomień w WordPress jest łatwe. Przyjrzymy się metodom wykorzystującym najlepsze wtyczki do pasków powiadomień oraz metodzie ręcznej z wykorzystaniem kodu HTML i CSS. Po prostu kliknij poniższe linki, aby przejść bezpośrednio do każdej opcji:

• Metoda 1: Tworzenie paska powiadomień za pomocą OptinMonster
• Metoda 2: Tworzenie paska powiadomień za pomocą Thrive Leads
• Metoda 3: Ręczne tworzenie paska alertów za pomocą niestandardowego HTML/CSS
• Bonus: Dodaj niestandardowe komunikaty powiadomień do stron WordPress

Metoda 1: Tworzenie paska powiadomień za pomocą OptinMonster

OptinMonster to najlepsze oprogramowanie do optymalizacji konwersji i generowania leadów na rynku. Pomaga przekształcić więcej odwiedzających witrynę w subskrybentów i klientów.

OptinMonster oferuje kreator kampanii typu „przeciągnij i upuść”. Zawiera piękne okienka typu lightbox, maty powitalne, zegary odliczania i inne dynamiczne nakładki, które pomagają zwiększyć liczbę subskrybentów i sprzedaż na Twojej stronie internetowej.

Możesz również użyć OptinMonster do stworzenia paska powiadomień dla swojej strony internetowej. Ich gotowe szablony ułatwiają stworzenie paska powiadomień, który świetnie wygląda w ciągu kilku minut.

Najpierw musisz odwiedzić stronę OptinMonster i zarejestrować konto. Będziesz potrzebować co najmniej planu Basic, ponieważ obejmuje on typ kampanii Pływający pasek.

Następnie musisz zainstalować i aktywować wtyczkę OptinMonster WordPress. Aby uzyskać więcej szczegółów, zapoznaj się z naszym przewodnikiem krok po kroku na temat jak zainstalować wtyczkę WordPress.

Ten wtyczka pozwala połączyć Twoją witrynę WordPress z oprogramowaniem OptinMonster.

Po aktywacji zobaczysz ekran powitalny i kreator konfiguracji. Kliknij przycisk „Połącz istniejące konto”.

Następnie otworzy się nowe okno, w którym będziesz musiał połączyć swoją witrynę WordPress z OptinMonster.

Po prostu kliknij przycisk „Połącz z WordPress” , aby przejść dalej.

Teraz możesz postępować zgodnie z instrukcjami na ekranie, aby połączyć swoje konto OptinMonster.

Następnie przejdź do OptinMonster » Kampanie w swoim panelu WordPress. Kliknij przycisk „Utwórz pierwszą kampanię”.

Otworzy to kreator kampanii OptinMonster.

Stąd musisz wybrać „Pływający pasek” jako typ kampanii, aby utworzyć pasek powiadomień.

Następnie zobaczysz wybór szablonów kampanii. Wybierz szablon, którego chcesz użyć.

Wystarczy najechać myszką na szablon i kliknąć przycisk „Użyj szablonu”, aby go wybrać. Do naszego paska powiadomień użyjemy szablonu Kodu kuponu promocyjnego.

Następnie zostaniesz poproszony o nadanie nazwy swojemu szablonowi. Po nazwaniu kampanii kliknij przycisk „Rozpocznij budowanie”.

Teraz zobaczysz edytor kampanii. Tutaj możesz zaprojektować swój pasek powiadomień.

OptinMonster oferuje różne bloki, które można po prostu przeciągnąć i upuścić na szablon. Na przykład, możesz dodać obraz, tekst, przycisk i inne elementy do swojego paska powiadomień.

Zobaczysz, że pasek powiadomień domyślnie pojawia się na dole ekranu.

Aby przenieść go na górę ekranu, kliknij „Ustawienia Paska Pływającego” po lewej stronie. Następnie po prostu kliknij suwak, aby przenieść pływający pasek na górę strony.

Aby zmienić tekst na pływającym pasku, po prostu kliknij obszar, który chcesz zmienić, i wpisz dowolny tekst.

Możesz również zmienić czcionkę, rozmiar i kolor tekstu oraz inne elementy.

Aby zmienić ustawienia odliczania, po prostu wybierz zegar.

Następnie wprowadź żądaną datę i godzinę zakończenia. OptinMonster pozwala również wybrać typ odliczania. Możesz wybrać typ „Statyczny”, jeśli chcesz pokazać standardowy zegar z określoną datą i godziną zakończenia.

Z drugiej strony istnieje „Dynamiczny” odliczanie. Timer będzie działał w oparciu o zachowanie każdego użytkownika na Twojej stronie. Odliczanie jest ustawiane oddzielnie dla każdego odwiedzającego Twoją witrynę.

Gdy będziesz zadowolony z projektu swojego paska powiadomień, nie zapomnij kliknąć przycisku „Zapisz” u góry ekranu.

Następnie musisz przejść do zakładki „Reguły wyświetlania”, aby wybrać, kiedy i gdzie pasek powiadomień będzie wyświetlany na Twojej stronie. Domyślna reguła polega na wyświetlaniu paska powiadomień po 5 sekundach od wejścia odwiedzającego na stronę.

Zmienimy to na 0 sekund, aby pasek powiadomień pojawił się natychmiast. Aby to zrobić, po prostu zmień wartość „sek” na 0.

Oprócz tego możesz również wybrać, gdzie pojawi się pasek powiadomień. Możesz użyć domyślnego ustawienia, czyli „ścieżka bieżącego adresu URL to dowolna strona”. W ten sposób pasek powiadomień pojawi się na wszystkich stronach Twojej witryny WordPress.

Następnie kliknij przycisk „Następny krok”, aby zmienić ustawienia akcji. Możesz pozostawić ustawienia „pokaż widok kampanii” jako Optin i wybrać, czy chcesz odtworzyć efekt dźwiękowy, gdy pojawi się pasek powiadomień.

Po wprowadzeniu zmian kliknij ponownie przycisk „Następny krok”.

Tutaj zobaczysz podsumowanie swoich reguł wyświetlania. Możesz dokonać ostatecznych edycji i zmian w swojej kampanii paska powiadomień.

Gdy będziesz zadowolony, po prostu kliknij przycisk „Zapisz” u góry ekranu.

Następnie możesz przejść do zakładki Publikuj na górze i zmienić Status publikacji na „Opublikuj”. Po zakończeniu musisz kliknąć przycisk „Zapisz” i zamknąć kreatora kampanii.

Następnie zobaczysz Ustawienia Wyjścia Kampanii.

Ostatnim krokiem jest aktywacja kampanii na Twojej stronie internetowej. Po prostu zmień Status z „Oczekujący” na „Opublikowany”.

Nie zapomnij kliknąć przycisku „Zapisz zmiany”, gdy skończysz.

Teraz po prostu odwiedź dowolną stronę swojej witryny, a zobaczysz swoją kampanię w akcji.

Metoda 2: Tworzenie paska powiadomień za pomocą Thrive Leads

Innym sposobem dodawania pasków powiadomień do Twojej witryny WordPress jest użycie Thrive Leads. Jest to część pakietu Thrive Themes i pomaga generować leady za pomocą pasków powiadomień, okienek lightbox, wyskakujących okienek typu slide-in i innych.

Najpierw musisz odwiedzić stronę internetową Thrive Themes i założyć konto. Po prostu kliknij przycisk „Start Now”, aby rozpocząć.

Następnie musisz zainstalować i aktywować wtyczkę Thrive Product Manager na swojej stronie. Aby uzyskać więcej szczegółów, zapoznaj się z naszym przewodnikiem na temat jak zainstalować wtyczkę WordPress.

Wtyczkę Thrive Product Manager znajdziesz w obszarze swojego konta.

Po zainstalowaniu wtyczki przejdź po prostu do strony Menedżer Produktów z obszaru administracyjnego WordPress.

Stąd kliknij przycisk „Zaloguj się na moje konto”.

Po zalogowaniu się na swoje konto zobaczysz różne wtyczki i narzędzia oferowane przez Thrive Themes.

Po prostu wybierz wtyczkę Thrive Leads, a następnie kliknij przycisk „Zainstaluj wybrane produkty” na dole.

Gdy Thrive Leads będzie gotowy do użycia, zobaczysz komunikat o sukcesie.

Następnie możesz kliknąć przycisk „Przejdź do panelu Thrive Themes”.

Następnie musisz przejść do Thrive Dashboard » Thrive Leads z panelu administracyjnego WordPress.

Obok nagłówka Grupy wiodące kliknij przycisk „Dodaj nowy”.

Następnie otworzy się nowe okno.

Możesz wprowadzić nazwę dla swojej nowej grupy leadów i kliknąć przycisk „Dodaj grupę leadów”.

Następnie musisz utworzyć nowy formularz zapisu.

Kliknij przycisk „Dodaj nowy typ formularza opt-in”.

Następnie Thrive Leads poprosi Cię o wybranie typu formularza.

Możesz wybrać typ „Wstążka”, aby dodać pasek powiadomień do swojej strony internetowej.

Po dodaniu typu formularza zapisu „Wstążka” będziesz musiał dodać formularz.

Po prostu kliknij opcję „Dodaj formularz” w sekcji Grupy leadów.

Na następnym ekranie możesz wybrać dowolny z istniejących formularzy.

Ponieważ jest to Twój pierwszy raz tworzenia formularza, kliknij przycisk „Utwórz formularz”.

Teraz na ekranie pojawi się okno podręczne.

Możesz wprowadzić nazwę dla swojego formularza i kliknąć przycisk „Create Form”.

Twój formularz zostanie dodany do grupy leadów wstążki.

Aby edytować projekt formularza, po prostu kliknij ikonę ołówka.

Następnie Thrive Leads wyświetli wiele szablonów do wyboru.

Po prostu wybierz szablon i kliknij przycisk „Wybierz szablon” na dole.

Uruchomi to wizualny kreator z podglądem na żywo, gdzie możesz dostosować swój pasek powiadomień.

Na przykład, możesz wybrać tekst w szablonie i zmienić go zgodnie ze swoimi potrzebami. Lub kliknąć na obrazek w pasku powiadomień i go zmienić.

Po zakończeniu edycji kliknij przycisk „Zapisz pracę” na dole.

Możesz teraz zamknąć edytor wizualny i wrócić do ustawień formularza. Zobaczysz tutaj opcje ustawień wyzwalacza paska powiadomień, częstotliwości wyświetlania i pozycji.

Domyślnie pasek powiadomień pojawi się na górze strony po jej załadowaniu. Możesz jednak zmienić te ustawienia.

Na przykład, jeśli klikniesz opcję Wyzwalacz, zobaczysz więcej opcji, takich jak wyświetlanie paska powiadomień po określonym czasie, gdy użytkownik przewinie określoną ilość, lub gdy użytkownik dotrze do dołu strony.

Poza tym możesz również zmienić częstotliwość wyświetlania. Pasek powiadomień będzie domyślnie wyświetlany przez cały czas wszystkim użytkownikom.

Możesz jednak edytować to i wyświetlać swój pasek powiadomień temu samemu odwiedzającemu po określonej liczbie dni.

Następnie możesz wrócić do strony Thrive Leads z panelu administracyjnego WordPress.

Następnie po prostu kliknij ikonę koła zębatego, aby otworzyć Ustawienia wyświetlania.

Stąd możesz wybrać, na których postach i stronach ma się pojawić pasek powiadomień.

Na przykład, możesz wyświetlić go tylko na stronie głównej lub wybrać wszystkie posty i strony. Istnieje również opcja wykluczenia niektórych stron i postów z wyświetlania wiadomości powiadomienia.

Po zakończeniu kliknij przycisk „Zapisz i zamknij”.

Ostatnim krokiem jest kliknięcie przełączników, aby wyświetlić pasek powiadomień na urządzeniach stacjonarnych i mobilnych.

Gdy to zrobisz, Twój pasek powiadomień będzie gotowy do zbierania adresów e-mail użytkowników i budowania Twojej listy e-mailowej.

Możesz odwiedzić swoją stronę internetową, aby zobaczyć ją w akcji.

Możesz zobaczyć naszą pełną recenzję Thrive Themes aby uzyskać więcej szczegółów.

Metoda 3: Ręczne tworzenie paska alertów za pomocą niestandardowego HTML/CSS

Co jeśli nie chcesz używać OptinMonster lub Thrive Leads? W tej metodzie pokażemy Ci, jak utworzyć pasek powiadomień za pomocą kodu HTML i CSS.

Najpierw musisz skopiować poniższy kod CSS dla paska powiadomień:

<pre class="wp-block-syntaxhighlighter-code">
.alertbar {
    background-color: #ff0000;
    color: #FFFFFF;
    display: block;
    line-height: 45px;
    height: 50px;
    position: relative;
    text-align: center;
    text-decoration: none;
    top: 0px;
    width: 100%;
    z-index: 100;
}
</pre>

Łatwym sposobem na dodanie kodu CSS do swojej witryny jest użycie WPCode. Jest to najlepsza wtyczka do fragmentów kodu dla WordPress, która pomaga dodawać niestandardowy kod do Twojej witryny.

Uwaga: WPCode to jedna z własnych wtyczek WPBeginner. Stworzyliśmy ją, aby ułatwić dodawanie skryptów, kodu HTML i innych elementów do stron Twojej witryny. Posiada funkcje takie jak wbudowana biblioteka fragmentów kodu, logika warunkowa, piksele konwersji i wiele innych.

Najpierw musisz zainstalować i aktywować darmowy plugin WPCode. Więcej szczegółów znajdziesz w naszym przewodniku jak zainstalować plugin WordPress.

Po aktywacji musisz przejść do Code Snippets » + Add Snippet z panelu WordPress i wybrać opcję „Add Your Custom Code (New Snippet)”.

Następnie wpisz tytuł swojego fragmentu na górze i wklej kod CSS w obszarze Podgląd kodu.

Musisz również zmienić Typ kodu na opcję „Fragment CSS”.

Następnie możesz przewinąć w dół do sekcji Wstawianie. Tutaj możesz wybrać, gdzie kod będzie działał.

Ponieważ chcemy, aby pasek powiadomień pojawiał się na całej stronie internetowej, możesz użyć domyślnej metody „Automatyczne wstawianie”. Możesz również zachować ustawienie „Uruchom wszędzie”.

Po zakończeniu możesz kliknąć przycisk „Zapisz fragment” na górze.

Będziesz także musiał kliknąć przełącznik, aby aktywować kod.

Następnie przejdź do Fragmenty kodu » Nagłówki i stopka w swoim panelu administracyjnym WordPress.

Po prostu skopiuj i wklej poniższą linię kodu HTML do pola „Nagłówek”:

<div class="alertbar">We are currently closed due to Covid-10.</div>

Tak powinien wyglądać ten kod w polu „Nagłówek” w WPCode:

Możesz zmienić tekst powiadomienia na cokolwiek innego. Nie zapomnij kliknąć przycisku „Zapisz zmiany” u góry strony po zakończeniu.

Teraz możesz odwiedzić swojego bloga WordPress, aby zobaczyć pasek powiadomień. Powinien on pojawić się na górze każdej strony, tak jak pokazano:

Wskazówka: W niektórych motywach WordPress pasek powiadomień może nakładać się na menu. Aby tego uniknąć, możesz zmienić wysokość paska na 40px lub 30px. Będziesz również musiał odpowiednio zmniejszyć wysokość linii, aby tekst pozostał wyśrodkowany pionowo na pasku.

Bonus: Dodaj niestandardowe komunikaty powiadomień do stron WordPress

Jeśli chcesz dodać niestandardowe komunikaty powiadomień do różnych części swojej witryny, takich jak strony produktów, strony realizacji zakupu i strony sklepu, możesz użyć SeedProd. Jest to najlepszy kreator stron internetowych i kreator stron docelowych dla WordPress.

Wtyczka oferuje kreator typu „przeciągnij i upuść”, który pozwala na tworzenie niestandardowych motywów i stron internetowych bez edycji kodu. Oferuje również blok Powiadomienie, który można umieścić w dowolnym miejscu na stronie.

Ten blok Alert może ostrzegać klientów, że zapasy się kończą, konkretne produkty są w promocji lub inne ostrzeżenia dotyczące czasu.

Możesz po prostu dodać blok Powiadomienie do swojej strony, a następnie dodać tytuł i opis. Wtyczka pozwala również na dodanie dynamicznej zawartości, która pozwala na wstawianie dat i innych parametrów zapytania.

Istnieje również więcej opcji dostosowywania dla bloku Powiadomienie. Na przykład możesz zmienić jego wyrównanie, dostosować rozmiar czcionki i edytować ikonę.

Aby dowiedzieć się więcej o korzystaniu z SeedProd, zapoznaj się z tym przewodnikiem na temat tworzenia niestandardowych stron w WordPress.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak utworzyć pasek powiadomień w WordPress. Możesz również zapoznać się z naszym przewodnikiem po najlepszych kreatorach stron WordPress typu przeciągnij i upuść, aby pomóc Ci dalej dostosowywać swoją witrynę, oraz najlepszych wtyczkach WooCommerce, aby zwiększyć sprzedaż w swoim sklepie.

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.