W artykule:
Czy chcesz dodać pasek alertów do swojej witryny WordPress?
Pasek alertów lub pasek powiadomień to świetny sposób na poinformowanie odwiedzających o ważnych aktualizacjach, ofertach specjalnych, nowych produktach i nie tylko.
W tym artykule pokażemy, jak utworzyć pasek alertów w WordPress z łatwymi rozwiązaniami 2.
Dlaczego warto utworzyć pasek alertów w WordPress?
Pasek alertów to świetny sposób, aby poinformować odwiedzających o czymś ważnym. Może to być bieżące wydarzenie sprzedażowe, aktualizacja godzin otwarcia lub zmiany w usługach.
Możesz również użyć paska alertów, aby poinformować odwiedzających o specjalnej ofercie, takiej jak Kup jeden uzyskaj jedną bezpłatną ofertę. Jest to świetna opcja, jeśli prowadzisz sklep internetowy.
Korzystanie z paska alertów jest lepsze niż tylko umieszczenie ogłoszenia na stronie głównej. Pasek alertów może być widoczny u góry każdej strony w całej witrynie.
Łatwo jest utworzyć pasek alertów w WordPress. Omówimy najlepszą wtyczkę paska powiadomień i ręczną metodę wykorzystującą kod HTML i CSS. Po prostu kliknij poniższe linki, aby przejść od razu do każdej opcji:
- Metoda 1: OptinMonster
- Metoda 2: Niestandardowy HTML i CSS
Metoda 1: Tworzenie paska alertów przy użyciu OptinMonster
OptinMonster to najlepsze oprogramowanie do optymalizacji konwersji na rynku. Pomaga konwertować więcej odwiedzających witrynę na subskrybentów i klientów.
Jest wyposażony w piękne wyskakujące okienka lightbox, maty powitalne, liczniki i inne dynamiczne nakładki, które pomogą Ci zwiększyć subskrybentów i sprzedaż Twojej witryny.
Możesz również użyć OptinMonster, aby utworzyć pasek alertów dla swojej witryny. Oto ten, który stworzymy:
Istnieje wiele gotowych szablonów wewnątrz OptinMonster. Dzięki temu bardzo łatwo jest utworzyć pasek alertów, który wygląda świetnie w ciągu kilku minut.
Najpierw musisz odwiedzić stronę OptinMonster i założyć konto.
Następnie musisz zainstalować i aktywować wtyczkę do WordPressa OptinMonster. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Ta wtyczka pozwala połączyć witrynę WordPress z oprogramowaniem OptinMonster.
Po aktywacji musisz teraz połączyć swoje konto. Na początek wystarczy udać się do OptinMonster ” Ustawienia z pulpitu WordPress.
Następnie kliknij przycisk „Połącz istniejące konto”.
Pojawi się wyskakujące okno z prośbą o podanie adresu e-mail. Po prostu wybierz swój adres e-mail i kliknij przycisk „Połącz się z WordPress”.
Możesz teraz postępować zgodnie z instrukcjami wyświetlanymi na ekranie, aby połączyć swoje konto OptinMonster.
Po podłączeniu OptinMonster wystarczy przejść do OptinMonster ” Kampanie w panelu WordPress. Śmiało i kliknij przycisk „Stwórz swoją pierwszą kampanię”.
W tym miejscu musisz wybrać „pływający pasek” jako typ kampanii, aby utworzyć pasek alertów.
Następnie zobaczysz wybór szablonów kampanii. Po prostu wybierz szablon, którego chcesz użyć. Wystarczy umieścić nad nim kursor myszy i kliknąć przycisk „Użyj szablonu”, aby go wybrać.
Użyjemy szablonu 'Promo’ dla naszego paska alertów.
Następnie zostaniesz poproszony o nadanie szablonu nazwy. Po nadaniu nazwy kampanii kliknij przycisk „Rozpocznij budowanie”.
Teraz zobaczysz edytor kampanii. Tutaj możesz zaprojektować swoją kampanię.
Zobaczysz, że pasek alertów jest domyślnie wyświetlany u dołu ekranu. Aby przesunąć go na górę ekranu, kliknij „Ustawienia pływające” po lewej stronie.
Następnie kliknij suwak, aby przesunąć pływający pasek na górę strony.
Aby zmienić tekst na pasku pływającym, po prostu kliknij obszar, który chcesz zmienić i wpisz dowolny tekst.
Możesz także zmienić czcionkę, rozmiar i kolor tekstu i wiele innych.
Aby zmienić licznik, po prostu wybierz licznik na szablonie, a następnie kliknij kartę odliczanie z lewego menu. Następnie śmiało i wprowadź żądaną datę zakończenia i godzinę.
Możesz także ustawić licznik tak, aby działał jako wiecznie zielone odliczanie zamiast statycznego odliczania, jeśli wolisz. Wiecznie zielone odliczanie jest ustawiane oddzielnie dla każdego odwiedzającego Twoją witrynę.
Śmiało i wprowadź tyle zmian w pasku alertów, ile chcesz. Gdy będziesz zadowolony, 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 alertów będzie wyświetlany w Twojej witrynie. Domyślną regułą jest wyświetlanie paska alertów po tym, jak odwiedzający był na stronie przez 5 sekund.
Zmienimy to na 0 sekund, więc pasek alertów pojawi się natychmiast. Aby to zrobić, wystarczy zmienić odliczanie ” sec ” na 0.
Następnie kliknij przycisk „Następny krok”, aby zmienić ustawienia akcji. Możesz pozostawić Ustawienia „Pokaż widok kampanii”, aby wybrać opcję Optin i wybrać, czy chcesz odtwarzać efekt dźwiękowy, gdy pojawi się pasek alertów.
Po wprowadzeniu zmian kliknij ponownie przycisk „Następny krok”, a zobaczysz podsumowanie.
Gdy będziesz zadowolony, po prostu kliknij przycisk „Zapisz” u góry ekranu.
Następnie możesz przejść do zakładki Publikuj u góry i zmienić status publikowania na ” Publikuj.’
Ostatnim krokiem jest aktywacja kampanii na własnej stronie internetowej.
Aby to zrobić, możesz zamknąć Edytor kampanii, a następnie przejść do OptinMonster ” Kampanie. Zobaczysz tutaj swoją kampanię, a jej Status będzie oczekujący.
Śmiało i kliknij Status oczekujące, aby zmienić go na „Publikuj” z rozwijanego menu.
Teraz po prostu odwiedź dowolną stronę w swojej witrynie, a zobaczysz swoją kampanię w akcji.
Metoda 2: ręcznie utwórz Pasek alertów za pomocą niestandardowego HTML / CSS
Co zrobić, jeśli nie chcesz używać OptinMonster? W tej metodzie pokażemy, jak utworzyć pasek powiadomień za pomocą kodu HTML i CSS.
Uwaga: Nie zalecamy tej metody dla początkujących. Jeśli jesteś nowy w WordPress lub nie czujesz się pewnie dodając kod do swojej witryny, sugerujemy użycie powyższej metody.
Najpierw musisz skopiować i wkleić niestandardowy kod CSS dla paska alertów. Po prostu przejdź do Wygląd ” Customizer strona w pulpicie nawigacyjnym, a następnie kliknij kartę „dodatkowy CSS” u dołu.
Teraz, śmiało i skopiuj i wklej ten kod CSS do tego pola:
.alertbar {
background-color: # ff0000;
color: # FFFFFF;
wyświetlacz: blok;
line-height: 45px;
wysokość: 50px;
pozycja: względna;
text-align: center;
tekst-Dekoracja: Brak;
top: 0px;
Szerokość: 100%;
z-index: 100;
}
Po skopiowaniu tego kodu powinien on wyglądać tak. Wystarczy kliknąć przycisk Publikuj na górze strony, aby zapisać kod CSS.
Następnie musisz dodać kod HTML tekstu paska alertów do swojej witryny.
Najlepszym sposobem na to jest zainstalowanie i aktywacja bezpłatnej wtyczki Wstaw nagłówki i stopki.
Uwaga: Wstaw nagłówki i stopki jest jedną z własnych wtyczek WPBeginner. Stworzyliśmy go, aby ułatwić dodawanie skryptów, kodu HTML i innych elementów do stron twojej witryny.
Po aktywacji wtyczki przejdź do Ustawienia ” Wstawianie nagłówków i stopek w Twoim adminie WordPress. Wystarczy skopiować i wkleić następujący wiersz kodu HTML do pola „Skrypty w ciele”:
< div class="alertbar">obecnie jesteśmy zamknięci z powodu Covid-19.< / div>
Oto jak ten kod powinien wyglądać w polu „Skrypty w ciele” wstawiania nagłówków i stopek:
Oczywiście możesz zmienić tekst alertu na dowolny inny. Nie zapomnij kliknąć przycisku „Zapisz” na dole strony, gdy skończysz.
Teraz możesz odwiedzić swoją witrynę, aby zobaczyć pasek alertów. Powinien pojawić się na górze każdej strony, w ten sposób:
Tip: W kilku motywach WordPress Pasek alertów może nakładać się na menu. Możesz zmienić wysokość paska na 40px lub 30px, aby tego uniknąć. Należy również odpowiednio zmniejszyć wysokość linii, aby tekst pozostał wyśrodkowany w pionie na pasku.
Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak utworzyć pasek alertów w WordPress. Może Ci się również spodobać nasze porównanie najlepszych kreatorów stron typu „przeciągnij i upuść” WordPress, aby pomóc ci w dalszym dostosowaniu witryny bez pisania kodu, a także nasza lista najlepszych wtyczek WooCommerce, aby zwiększyć sprzedaż w sklepie.
Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.
