Jak dodać wyskakujące okienko w WordPress (2 proste sposoby)

Opublikowany: 2022-11-21
Facebook Ćwierkać Linkedin

Czy chcesz wiedzieć, jak dodać wyskakujące okienko na WordPress?

Wyskakujące okienka są niezwykle przydatne do zbierania informacji kontaktowych odwiedzających, prezentowania ofert specjalnych i wyprzedaży, rejestrowania użytkowników na wydarzenia i nie tylko.

Jeśli masz witrynę WordPress, powinieneś poważnie rozważyć dodanie wyskakujących okienek w ramach strategii sprzedaży i marketingu.

Co to jest wyskakujące okienko?

Wyskakujące okienko lub wyskakujące okienko to mniejsze okno, które „wyskakuje” w Twojej witrynie, aby pokazać użytkownikom coś, co zasługuje na dodatkową uwagę. Prawdopodobnie zauważyłeś, że wiele stron internetowych prosi o Twój adres e-mail za pomocą prostego formularza w wyskakującym okienku.

MonsterInsights to najlepsza wtyczka WordPress Analytics. Zdobądź to za darmo!

Czy wyskakujące okienka są trudne do zrobienia?

Wyskakujące okienka są łatwe do zrobienia na stronie WordPress, nawet dla osób z niewielkim doświadczeniem technicznym. Możesz używać wtyczek WordPress do tworzenia wyskakujących okienek, zbierania adresów e-mail, a nawet automatycznego dodawania tych e-maili do list e-mailowych za pomocą zaledwie kilku kliknięć.

W dalszej części tego postu pokażemy dwa różne sposoby tworzenia wyskakujących okienek przy użyciu dwóch najpopularniejszych narzędzi do tworzenia wyskakujących okienek w WordPress.

Ponadto użyjemy innej wtyczki do utworzenia formularza przechwytywania potencjalnych klientów. Osadzimy formularz w naszym wyskakującym okienku podczas tworzenia kampanii wyskakującej.

Zacznijmy!

Metoda 1: Zbuduj wyskakujące okienko WordPress za pomocą OptinMonster i WPForms

Logo narzędzia do tworzenia wyskakujących okienek OptinMonster

OptinMonster to najczęściej używana wtyczka do tworzenia wyskakujących okienek dla WordPress, z ponad milionem aktywnych instalacji. Jak widać po nazwie, jest przeznaczony do tworzenia formularzy zgody i wyskakujących okienek.

Formularz zgody to po prostu formularz, w którym prosi się użytkownika o „wyrażenie zgody” na otrzymywanie wiadomości e-mail lub komunikatów marketingowych. Ale oczywiście wyskakujące okienka są używane do znacznie więcej.

Ta wtyczka ułatwia zarówno początkującym, jak i ekspertom tworzenie pięknych, bardzo wciągających wyskakujących okienek do różnych celów.

Oprócz łatwości użytkowania OptinMonster oferuje następujące zaawansowane funkcje:

  • Narzędzie do tworzenia wyskakujących okienek typu „przeciągnij i upuść” pozwala początkującym projektować niestandardowe wyskakujące okienka
  • Ponad 400 szablonów i 6 typów kampanii na każdą potrzebę
  • Wiele różnych opcji wyzwalania, aby wyświetlać wyskakujące okienka, gdzie i kiedy chcesz
  • Exit-Intent, InactivitySensor i inne funkcje technologiczne zwiększają liczbę konwersji
  • Działa na dowolnej stronie internetowej, nie tylko na WordPressie (wtyczka nie jest wymagana)

OptinMonster ma możliwość stworzenia prostego formularza zgody. Jednak w przypadku bardziej zaawansowanych formularzy z większą liczbą opcji projektowania sugerujemy dedykowaną wtyczkę do tworzenia formularzy.

Na szczęście OptinMonster pozwala dodawać formularze bezpośrednio do wyskakujących okienek za pomocą kilku kliknięć. Nie musisz znać się na programowaniu ani tworzeniu stron internetowych, aby dodać formularz przy użyciu poniższej metody.

W tym przykładzie użyjemy WPForms, najlepszej wtyczki formularzy do WordPressa, jaką możesz dostać.

WPForms — najlepsza wtyczka formularzy do tworzenia wyskakujących okienek

WPForms automatycznie łączy się z OptinMonster po zainstalowaniu obu wtyczek. Dzięki temu niezwykle łatwo jest tworzyć profesjonalnie wyglądające wyskakujące okienka zawierające niestandardowe formularze.

Zacznijmy od zainstalowania WPForms.

Zainstaluj WPForms na WordPressie

Aby zainstalować WPForms na swojej stronie, przejdź do WPForms i kup licencję. Pobierz WPForms Pro , aby uzyskać dostęp do ponad 500 szablonów, przetwarzania płatności, ankiet i innych zaawansowanych funkcji.

Możesz jednak utworzyć formularz dla swojego wyskakującego okienka z dowolnym z oferowanych planów.

Po otrzymaniu licencji pobierz wtyczkę WPForms ze swojego konta, klikając Pobierz WPForms . Będąc na tym ekranie, możesz również skopiować swój klucz licencyjny, klikając ikonę schowka obok pozycji Klucz licencyjny .

Wtyczka pobierania konta WPForms

Teraz zaloguj się do swojej witryny WordPress i zainstaluj wtyczkę. Najpierw klikniesz Wtyczki »Dodaj nowy . Następnie kliknij przycisk Prześlij wtyczkę i wybierz pobrany plik WPForms.

WPForms Upload Zainstaluj wtyczkę

W tym momencie możesz kliknąć Instaluj , aby zakończyć instalację i aktywację WPForms. Gdy wtyczka jest aktywna, przejdź do WPForms » Ustawienia » Ogólne i wprowadź skopiowany wcześniej klucz licencyjny. Kliknij przycisk Zweryfikuj klucz i gotowe!

WPForms weryfikuje klucz licencyjny

Utwórz formularz przechwytywania leadów w WPForms

Aby rozpocząć tworzenie nowego formularza w WPForms, kliknij WPForms »Dodaj nowy na pulpicie nawigacyjnym WordPress. Zostaniesz poproszony o wybranie szablonu jako punktu wyjścia.

Ale najpierw wpisz odpowiednią nazwę formularza w polu Nazwij swój formularz u góry ekranu. Nazwiemy nasz przykładowy formularz Email Lead Capture – Newsletter Signup .

WPForms Nowy tytuł i szablon formularza

Jeśli dopiero zaczynasz, zalecamy skorzystanie z szablonu. Wybierzmy szablon formularza zapisu do newslettera , klikając Użyj szablonu .

W porządku, oto nasz szablon formularza rejestracyjnego. Jak widać, jest to prosty formularz, który prosi tylko o podanie imienia i nazwiska oraz adresu e-mail.

Formularz rejestracji edytora WPForms

Jeśli jesteś zadowolony z ustawień domyślnych, możesz kliknąć Zapisz teraz. Wprowadźmy jednak jedną zmianę, aby zwiększyć szansę wypełnienia naszego formularza przez odwiedzających.

Kliknij obszar pola Nazwa , aby wyświetlić okno Opcje pola. Teraz ustawmy pole Nazwa jako opcjonalne, aby użytkownicy nie musieli wypełniać tej części, aby przesłać formularz. Jest to wymagane domyślnie, więc po prostu wyłącz opcję Wymagane , aby uczynić to pole opcjonalnym.

WPForms Dostosuj formularz rejestracji pola

Teraz możesz kliknąć Zapisz , aby zapisać ten formularz do późniejszego wykorzystania.

W tym momencie utworzysz nowe wyskakujące okienko, a następnie dodasz do niego zapisany formularz. Następnym krokiem jest zainstalowanie wyskakującej wtyczki WordPress.

Zainstaluj OptinMonster na WordPressie

W tym kroku zainstalujemy bezpłatną wersję wtyczki OptinMonster, aby zbudować nasze wyskakujące okienko na WordPress.

Jeśli potrzebujesz dodatkowej pomocy, podstawowy plan OptinMonster zawiera jedną konfigurację Gotowe dla Ciebie . Oznacza to, że ekspert ds. konwersji OptinMonster pomoże skonfigurować Twoją pierwszą kampanię pop-up, aby upewnić się, że Twoja premiera zakończy się sukcesem!

Aby otrzymać bezpłatną wtyczkę OptinMonster, zaloguj się do WordPress i kliknij Wtyczki » Dodaj nowy w menu pulpitu nawigacyjnego.

WordPress Dodaj menu wtyczki

Teraz wpisz optinmonster w polu wyszukiwania i wprowadź. Znajdź OptinMonster w wynikach wyszukiwania i kliknij przycisk Zainstaluj teraz .

Aktywuj OptinMonster

Po zainstalowaniu kliknij Aktywuj i gotowe!

Utwórz nową kampanię Pop-up za pomocą OptinMonster

Teraz, gdy już zainstalowałeś i aktywowałeś OptinMonster, nadszedł czas, aby utworzyć wyskakujące okienko.

Najpierw kliknij OptinMonster » Pulpit nawigacyjny , aby wyświetlić ekran przeglądu, który wyświetla statystyki dotyczące kampanii opt-in. Tutaj możesz także rozpocząć tworzenie nowego wyskakującego okienka. Po prostu kliknij Utwórz nowy w kafelku Popup .

OptinMonster Utwórz nowe wyskakujące okienko

Następnie zobaczysz nowy ekran, na którym musisz wybrać szablon dla wyskakującego okienka.

W tym przykładzie wybierzemy szablon Entice. Możesz najpierw wyświetlić podgląd szablonu, aby upewnić się, że odpowiada on Twoim potrzebom. Gdy zdecydujesz się na szablon wyskakującego okienka, kliknij Użyj szablonu .

OptinMonster Wybierz szablon

Teraz zostaniesz poproszony o nazwanie kampanii wyskakującej. Nazwijmy ten przykład Subskrypcja biuletynu . Wpisz nazwę kampanii w polu i kliknij Rozpocznij tworzenie .

Nazwa kampanii wyskakującej OptinMonster

Po kliknięciu przycisku otworzysz edytor typu „przeciągnij i upuść” OptinMonster z szablonem gotowym do edycji. Teraz możesz po prostu przeciągnąć blok WPForms z lewej strony do wyskakującego okienka, gdziekolwiek chcesz umieścić nowy formularz przechwytywania leadów.

OptinMonster Add Form to Popup

Po umieszczeniu bloku WPForms automatycznie otworzy się lista rozwijana, w której możesz wybrać formularz, który ma się pojawić w wyskakującym okienku. Więc tutaj wybierzesz nazwę formularza utworzonego w WPForms: Email Lead Capture – Newsletter Signup .

Usuń dodatkowe przyciski

Teraz ostatni krok przed zapisaniem wyskakującego okienka. Ponieważ formularz WPForms zawiera przycisk Prześlij, należy usunąć przyciski z szablonu OptinMonster. Aby to zrobić, po prostu umieść kursor w bloku, a następnie kliknij ikonę kosza, aby usunąć.

OptinMonster usuń blok

Kliknij przycisk Zapisz , aby zapisać wyskakujące okienko i formularz, a następnie kliknij X , aby zamknąć edytor OptinMonster. Wrócisz do pulpitu nawigacyjnego WordPress i ekranu ustawień wyjściowych kampanii OptinMonster.

Tutaj decydujesz, gdzie i kiedy wyświetlać wyskakujące okienko na swojej stronie WordPress. Domyślnie kampanie pop-up wyświetlają się na każdej stronie, każdemu odwiedzającemu.

Ale możesz ustawić wyskakujące okienko tak, aby wyświetlało się tylko na jednej stronie, ładowało tylko posty lub wyświetlało tylko zalogowanym użytkownikom, tylko dla kilku przykładów.

W tym przykładzie możesz pozostawić ustawienia wyjścia bez zmian. Aby jednak umożliwić wyświetlanie wyskakującego okienka, przejdź do listy rozwijanej Status i zmień status na Opublikowany . Następnie kliknij Zapisz zmiany .

OptinMonster Dodaj wyskakujące okienko na WordPress

Okej, to wszystko! Twoje nowe wyskakujące okienko i formularz przechwytywania potencjalnych klientów będą teraz wyświetlane na każdej stronie w Twojej witrynie, aby rozpocząć gromadzenie nowych subskrybentów.

Oto nasza próbka po opublikowaniu:

Opublikowane okno podglądu OptinMonster

Po tym, jak Twoja kampania wyskakująca przekształci odwiedzającego witrynę w subskrybenta, znajdziesz jego dane kontaktowe, przechodząc do WPForms »Wpisy na pulpicie nawigacyjnym WordPress.

Wyskakujące wpisy WPForms Optin

WPForms ma dodatki, które umożliwiają automatyczne dodawanie nowych subskrybentów do listy e-mail w Sendinblue, Constant Contact i innych popularnych dostawcach poczty e-mail. To automatyzuje przepływ pracy marketingowej, aby komunikacja z subskrybentami była super wydajna.

To wszystko, jeśli chodzi o naszą pierwszą metodę tworzenia wyskakującego okienka. Przejdźmy od razu do drugiego sposobu dodawania wyskakującego okienka na WordPress….

Metoda 2: Dodaj wyskakujące okienko w WordPress za pomocą Popup Maker i WPForms

Wtyczka WordPress do tworzenia wyskakujących okienek

Z ponad 700 000 aktywnych użytkowników, Popup Maker jest drugą najpopularniejszą wtyczką wyskakującą WordPress na WordPress.org.

Zainstaluj Popup Maker na WordPress

Najpierw zaloguj się do swojej witryny WordPress i kliknij Wtyczki » Dodaj nowy . Wpisz kreator wyskakujących okienek w pasku wyszukiwania i wprowadź.

Kreator wyskakujących okienek z wtyczką WordPress

Znajdź Popup Maker w wynikach wyszukiwania i kliknij przycisk Zainstaluj teraz .

Instalacja wtyczki WordPress Popup Maker

Po zainstalowaniu wtyczki kliknij Aktywuj i gotowe! Twój pulpit nawigacyjny WordPress powinien teraz zawierać menu Kreatora wyskakujących okienek. Kliknij Kreator wyskakujących okienek » Utwórz wyskakujące okienko , aby rozpocząć tworzenie nowego wyskakującego okienka.

Utwórz nowe wyskakujące okienko

Ekran edytora Popup Maker wygląda bardzo podobnie do edytora stron WordPress. Wprowadź nazwę wyskakującego okienka w górnym polu. Jeśli chcesz, możesz również wpisać nagłówek, który pojawi się w wyskakującym okienku w drugim polu.

Edytor kreatora wyskakujących okienek

Teraz wystarczy kliknąć przycisk Dodaj formularz . Pojawi się wyskakujące okienko z rozwijaną listą, z której możesz wybrać formularz utworzony wcześniej w WPForms.

Kreator wyskakujących okienek Dodaj formularz WPForms

Śmiało i wybierz ten formularz, a następnie kliknij Dodaj formularz . Spowoduje to dodanie krótkiego kodu WPForms dla wybranego formularza do wyskakującego okienka.

Krótki kod WPForms do tworzenia wyskakujących okienek

Dobrze, teraz przed opublikowaniem musisz skonfigurować wyzwalacze, aby określić, kiedy i gdzie wyskakujące okienko ma się wyświetlać w Twojej witrynie.

Przewiń w dół do pola Ustawienia wyskakujących okienek i kliknij przycisk Dodaj nowy wyzwalacz .

Kreator wyskakujących okienek Dodaj wyzwalacz

Tutaj możesz wybrać, czy wyskakujące okienko ma się wyświetlać po pewnym czasie, po kliknięciu, czy po przesłaniu formularza. Wybierzmy opóźnienie czasowe .

Wyzwalacz opóźnienia czasowego twórcy wyskakujących okienek

Kliknij przycisk Dodaj , a Kreator wyskakujących okienek zapyta, jak długie powinno być opóźnienie w milisekundach. Wartość domyślna to 500, czyli pół sekundy. Możesz zostawić to tak, jak jest, lub zmienić, jeśli wolisz. Następnie ponownie kliknij Dodaj .

Wyskakujące okienko na WordPress Opóźnienie czasowe w milisekundach

Następnym krokiem w konfiguracji wyskakującego okienka jest wybranie miejsca, w którym ma się wyświetlać w Twojej witrynie, komu i tak dalej. Kliknij kartę Kierowanie .

Kierowanie na twórcę wyskakujących okienek

Lista rozwijana tego ustawienia pozwala wybrać konkretną stronę, na której będzie wyświetlane wyskakujące okienko. Kreator wyskakujących okienek ma również wiele filtrów, dzięki którym możesz wyświetlać go na stronach według kategorii, tagów, hierarchii i nie tylko.

Następne ustawienie oferuje kilka opcji wyświetlania . Wybierz jedną z 4 opcji wyświetlania z kafelków, a następnie dostosuj, klikając powyższe łącza dotyczące ustawień Wygląd , Rozmiar , Animacja , Dźwięki , Pozycja i Zaawansowane .

Ustawienia wyświetlania kreatora wyskakujących okienek

W porządku, prawie skończyliśmy! Kliknij kartę Zamknij w polu Ustawienia. Teraz musisz powiedzieć, aby wyskakujące okienko zostało zamknięte po tym, jak ktoś prześle formularz rejestracyjny. Kliknij opcję Przesyłanie formularza u góry, a następnie zaznacz pole wyboru Zamknij po przesłaniu formularza .

Kreator wyskakujących okienek zamyka się po przesłaniu formularza

OK, na razie możesz pozostawić wszystko inne na ustawieniach domyślnych. Zapiszmy, klikając przycisk Publikuj na prawym pasku bocznym.

Teraz odwiedź swoją witrynę, aby zobaczyć wyskakujące okienko na żywo!

Kreator wyskakujących okienek Dodaj wyskakujące okienko do próbki WordPress

Podobnie jak w przypadku naszej pierwszej metody, aby zobaczyć nowych subskrybentów, musisz przejść do WPForms »Wpisy , aby wyświetlić informacje kontaktowe osób, które się zarejestrowały.

Chociaż OptinMonster jest ogólnie potężniejszym narzędziem, z większą liczbą opcji, wbudowanymi szablonami i rozszerzeniami, WP Popup Maker to prosta alternatywa, która dobrze sprawdza się w przypadku podstawowych kampanii.

I to wszystko w naszym samouczku dotyczącym 2 prostych sposobów dodawania wyskakującego okienka do witryny WordPress. Nauczyłeś się również, jak utworzyć formularz zgody do zbierania potencjalnych klientów za pomocą e-maili za pomocą WPForms.

Śledź konwersje formularzy za pomocą MonsterInsights

Przyjrzeliśmy się, jak możesz przeglądać wpisy formularzy na ekranie wpisów WPForms. Nie daje to jednak zbyt wielu informacji na temat wydajności formularzy.

Aby uzyskać więcej informacji na temat wydajności formularzy, potrzebujesz narzędzia takiego jak MonsterInsights, najlepsza wtyczka WordPress do Google Analytics.

Ekran raportów MonsterInsights

MonsterInsights oferuje dodatek do Formularzy, który pozwala zobaczyć, w jaki sposób użytkownicy wchodzą w interakcję z formularzami w Twojej witrynie, w tym wyświetlenia, konwersje i współczynnik konwersji na formularz. Jest to świetne rozwiązanie, jeśli witryna zawiera wiele formularzy lub wyskakujących okienek do śledzenia.

Po zainstalowaniu MonsterInsights z włączonym śledzeniem formularzy raport Formularze znajdziesz, przechodząc do Statystyki » Raporty i klikając kartę Formularze .

Dodatek MonsterInsights do śledzenia konwersji formularzy

Teraz możesz przeglądać wszystkie swoje formularze, wyświetlenia i konwersje na jednej stronie w WordPress, szybko i skutecznie. Sprawdź, czy Twoje formularze i wyskakujące okienka wyświetlają się poprawnie i czy dobrze konwertują, czy też wymagają poprawy.

Śledzenie MonsterInsights działa automatycznie z niemal każdą wtyczką formularza WordPress, w tym WPForms, Gravity Forms, Formidable Forms, Ninja Forms i innymi.

Potrzebujesz więcej informacji na temat rozpoczęcia korzystania z MonsterInsights? Sprawdź ten post, aby uzyskać szczegółowy samouczek dotyczący instalacji i konfiguracji MonsterInsights.

Jeśli lubisz uczyć się o tym, jak dodać wyskakujące okienko do swojej witryny, możesz przeczytać ten artykuł na temat tworzenia biuletynu e-mailowego.

Nie zapomnij śledzić nas na Twitterze, Facebooku i YouTube, aby uzyskać więcej pomocnych recenzji, samouczków i wskazówek Google Analytics.