Jak otworzyć formularz Popup WordPress po kliknięciu linku lub obrazu

Czy chcesz utworzyć wyskakujące okienko, które pojawi się, gdy odwiedzający klikną link lub obraz w Twojej witrynie?

Jest to sprawdzony sposób na zwiększenie listy e-mail i jest często używany przez popularne witryny, aby zaoferować motywację optin.

W tym artykule pokażemy, jak otworzyć wyskakujące okienko WordPress po kliknięciu linku lub obrazu, krok po kroku.

Uruchomienie wyskakującego formularza WordPress po kliknięciu nie jest tak skomplikowane, jak mogłoby się wydawać. W tym artykule pokażemy Ci, jak to zrobić.

Co To jest wyskakujący formularz „On Click”?

Formularze wyskakujące po kliknięciu To wyskakujące okienka lightbox, które otwierają się, gdy użytkownik kliknie łącze, przycisk lub obraz w Twojej witrynie.

Zwykle wyskakujące okienka pojawiają się na stronach internetowych, gdy użytkownik przybywa lub gdy ma zamiar odejść. Po kliknięciu formularze wyskakujące są wyzwalane przez interakcję użytkownika.

Mamy dwa wyskakujące okienka na stronie WPBeginner, których używamy do rozwijania naszej listy e-mailowej: pierwszy na pasku bocznym ikona e-mail, która znajduje się obok wszystkich ikon społecznościowych, a drugi pod każdym postem, aby pobrać nasz zestaw narzędzi.

Najprostszym sposobem na utworzenie wyskakującego okienka on click jest użycie wtyczki popup dla WordPress. W tym tutorialu użyjemy OptinMonster.

Dlaczego Formularze On Click Popup Są Tak Skuteczne?

On click popup form jest skuteczny, ponieważ wykorzystuje potężny efekt Zeigarnika. Jest to psychologiczna zasada, która stwierdza, że użytkownicy, którzy rozpoczynają akcję, są bardziej skłonni ją zakończyć.

Gdy ktoś kliknie łącze lub przycisk, aby uruchomić wyskakujące okienko, już wykazał zainteresowanie. Gdy pojawi się wyskakujące okienko formularza, będą bardziej skłonni go użyć.

W tym samouczku użyjemy wyskakującego okienka on click, aby zaoferować magnes ołowiany.

Istnieją jednak inne sposoby korzystania z wyskakujących okienek na stronie. Na przykład możesz poprosić użytkowników o odebranie kodu kuponu, dowiedzieć się więcej o produkcie, wypełnić ankiety i nie tylko.

Mając to na uwadze, rzućmy okiem na to, jak łatwo utworzyć wyskakujące okienko lightbox na swojej stronie internetowej.

Instalacja i aktywacja OptinMonster

Najpierw musisz zarejestrować konto OptinMonster. Będziesz potrzebował konta Pro (lub wyższego). Daje to funkcję MonsterLinks™, która umożliwia tworzenie wyskakujących okienek po kliknięciu.

Następnie musisz zainstalować i aktywować wtyczkę OptinMonster na swojej stronie WordPress. Pozwala to połączyć konto OptinMonster z witryną WordPress.

Aby uzyskać pomoc, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywowaniu wtyczki musisz połączyć swoje konto. Powinieneś zostać automatycznie przeniesiony na stronę powitalną. Jeśli nie, po prostu kliknij link OptinMonster na pulpicie nawigacyjnym WordPress.

Kliknij „Połącz swoje konto” i postępuj zgodnie z instrukcjami wyświetlanymi na ekranie.

Tworzenie Pierwszego Kliknięcia Popup

Po podłączeniu konta OptinMonster do witryny WordPress możesz rozpocząć tworzenie wyskakującego okienka on click. Kliknij przycisk „Utwórz nową kampanię” u góry ekranu:

Zostaniesz przeniesiony bezpośrednio na stronę OptinMonster.

Typ kampanii powinien być już ustawiony na wyskakujące okienko. Jeśli nie, po prostu kliknij wyskakujące okienko, aby je wybrać.

Następnie wybierz szablon kampanii. Będziesz mógł później zmodyfikować dokładnie to, jak to wygląda. Użyjemy podstawowego szablonu dla tego samouczka.

Najedź kursorem na szablon i kliknij przycisk „Użyj szablonu”.

Teraz zostaniesz poproszony o podanie nazwy kampanii. Jeśli korzystasz z OptinMonster w więcej niż jednej witrynie, upewnij się, że wybrałeś właściwą. W razie potrzeby wprowadź nową stronę internetową. Następnie kliknij „Rozpocznij budowanie”, aby utworzyć wyskakujące okienko.

OptinMonster automatycznie załaduje wybrany szablon.

Możesz edytować domyślny tekst i dodawać lub usuwać elementy z szablonu. Po prostu kliknij na cokolwiek chcesz edytować.

Na przykład usuniemy pole nazwa z formularza. Po prostu kliknij pole, aby je wybrać, a zobaczysz opcje pola w lewej kolumnie, w tym opcję usunięcia go.

Po zaprojektowaniu wyskakującego okienka następnym krokiem jest zaprojektowanie widoku sukcesu, który jest tym, co ludzie widzą po wypełnieniu formularza. Po prostu przejdź do widoku „sukces” u góry ekranu.

Widok sukces można edytować tak, jak edytowano widok optin. Na przykład, możesz pozwolić użytkownikowi pobrać magnes ołowiany od razu. Możesz dołączyć link do niego tutaj.

Aby dodać link do obrazu, kliknij na obrazek, a następnie przewiń w dół do „Dodaj Link do obrazu? po lewej stronie.

Możesz przełączyć, aby włączyć link obrazu i wprowadzić link do magnesu wiodącego w polu „URL”.

Łączenie wyskakującego okienka z listą e-mail

Gdy będziesz zadowolony z wyskakującego okienka, kliknij kartę integracje u góry ekranu. Musisz połączyć OptinMonster z usługą e-mail marketingu, aby móc dodawać osoby do listy e-mailowej.

Kliknij przycisk '+ Dodaj nową integrację ’ po lewej stronie ekranu.

Następnie wybierz dostawcę poczty e-mail z listy rozwijanej i postępuj zgodnie z instrukcjami, aby połączyć go z OptinMonster.

Uwaga: Instrukcje integracji są różne dla każdej usługi e-mail marketingu. Jeśli utkniesz, OptinMonster ma listę szczegółowych przewodników integracji e-mail.

Ustawianie wyskakującego okienka, aby pojawiało się po kliknięciu

Teraz musisz skonfigurować wyskakujące okienko tak, aby pojawiało się, gdy użytkownik kliknie łącze. Kliknij kartę „wyświetl reguły” u góry ekranu.

Domyślną regułą wyświetlania jest czas na stronie. Kliknij menu rozwijane i wybierz „użytkownik kliknął MonsterLink™” zamiast tego.

Kliknij przycisk, aby skopiować kod MonsterLink™. Będziesz tego potrzebował za chwilę.

Dokonywanie Na Kliknięcie Popup Na Żywo

Teraz przejdź do zakładki Publikuj i ustaw status kampanii na aktywny. Możesz także sprawdzić lub zmienić stronę internetową, do której jest podłączona Twoja kampania.

Gdy to zrobisz, kliknij przycisk Zapisz u góry ekranu.

Następnie musisz umieścić swoją kampanię na swojej stronie WordPress.

Przejdź do Pulpitu nawigacyjnego WordPress i kliknij link OptinMonster. Kliknij przycisk Odśwież kampanie.

Powinieneś zobaczyć swoją kampanię, pokazaną na żywo. Jeśli chcesz ją wyłączyć w dowolnym momencie, kliknij link „Wyłącz” znajdujący się pod nazwą kampanii.

Dodawanie swojego Monsterlinka do swojej strony

Teraz musisz dodać specjalny MonsterLink™ do swojej witryny. Jeśli nie skopiowałeś tego wcześniej, możesz go uzyskać, przechodząc z powrotem do ustawień reguł wyświetlania dla Twojej kampanii w witrynie MonsterInsights.

Utwórz nowy post lub stronę lub Edytuj tę, na której chcesz dodać link.

Monsterlink to kod HTML, więc musisz wkleić go do niestandardowego bloku HTML.

Kliknij przycisk ( + ), aby dodać nowy blok. Niestandardowy blok HTML znajduje się w sekcji formatowanie lub możesz go wyszukać za pomocą paska wyszukiwania. Kliknij na niego, aby utworzyć blok.

Skopiuj swój MonsterLink do tego bloku. Powinno wyglądać mniej więcej tak:

Możesz zmienić słowa ” Kliknij mnie!’do dowolnego tekstu, którego chcesz użyć do linku. Będziemy używać ’ Kliknij, aby uzyskać BONUS 10 wskazówek!’

Po umieszczeniu linku możesz wyświetlić podgląd strony lub postu, aby upewnić się, że działa.

Oto nasz link w akcji. Uwaga zastosowaliśmy pewne stylizacje do tekstu, aby utworzyć pudełko z większym tekstem, aby promować magnes wiodący:

Tip: Nie ograniczasz się tylko do linków tekstowych za pomocą MonsterLinks. Możesz również użyć MonsterLink z przyciskami wezwania do działania, obrazami, banerami lub menu nawigacji na swojej stronie internetowej.

Mamy nadzieję, że ten samouczek pomógł Ci nauczyć się wyzwalać wyskakujący formularz WordPress po kliknięciu. Możesz również zobaczyć nasz samouczek na temat tego, jak przyspieszyć swoją witrynę WordPress i nasz najlepszy przewodnik SEO WordPress.

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