Jak utworzyć WordPress login Popup Modal (krok po kroku)

Czy chcesz dodać WordPress login popup modal na swojej stronie? Wyskakujące okienko modalnego logowania pozwala użytkownikom szybko zalogować się do witryny bez opuszczania strony, którą przeglądają. Poprawia to doświadczenie użytkownika i zaangażowanie w witrynie. W tym artykule pokażemy, jak łatwo utworzyć WordPress login popup modal – krok po kroku.

Po co tworzyć WordPress login Popup Modal?

Jeśli prowadzisz sklep internetowy, witrynę członkowską lub sprzedajesz kursy online, prawdopodobnie zezwalasz użytkownikom na rejestrację i logowanie się do witryny.

Zwykle, gdy użytkownicy klikną link logowania, są przenoszeni do domyślnej strony logowania WordPress lub innej niestandardowej strony logowania w Twojej witrynie. Po zalogowaniu użytkownicy są ponownie przekierowywani na inną stronę.

Wyskakujące okienko modalnego logowania umożliwia wyświetlenie formularza logowania bez wysyłania użytkowników na inną stronę. Po zalogowaniu możesz przekierować użytkowników na dowolną stronę.

Wyskakujące okienko modalnego logowania jest szybsze i poprawia wygodę użytkownika na twojej stronie. Szybszy i bardziej dopracowany interfejs użytkownika może zwiększyć sprzedaż i konwersje.

Mając to na uwadze, przyjrzyjmy się, jak łatwo utworzyć wyskakujące okienko modalnego logowania w WordPress. Pokażemy Ci dwie metody, aby to zrobić, i możesz wybrać tę, która najlepiej pasuje do Twoich potrzeb.

Metoda 1. Utwórz wyskakujące okienko logowania modalnego za pomocą logowania CSH

Ta metoda jest łatwiejsza i zalecana dla większości użytkowników.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę csh Login. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji musisz przejść do Login Modalny strona w obszarze administracyjnym WordPress i wybierz typ modalnego formularza logowania.

Po wybraniu typu pola logowania modalnego możesz przewijać w dół i zarządzać przekierowaniami logowania / wylogowania dla formularza. Możesz także zezwolić użytkownikom na generowanie własnych haseł.

Następnie należy przewinąć w dół do Style sekcja i wybierz układ, wyświetl etykiety, kolor tła,kolor przycisku, kolor łącza i inne.

Ponadto możesz dodać e-mail rejestracyjny, temat wiadomości e-mail, korzystać z Google reCaptcha i wiele innych. Ta wtyczka pozwala również dodać login społecznościowy, taki jak Facebook, Twitter i Google.

Pamiętaj, aby zapisać zmiany i skopiować krótki kod znajdujący się na górze tej strony. Musisz utworzyć nową stronę w WordPress lub edytować istniejącą, aby dodać krótki kod w edytorze treści.

Możesz również dodać login modalny na pasku bocznym WordPress. Po prostu przejdź do Wygląd ” Widgety aby przeciągnąć i upuścić Logowanie CSH widget na pasku bocznym Twojej witryny.

CSH modal login można również dodać do plików szablonów stron internetowych. Po dodaniu go do swojej witryny, po prostu odwiedź witrynę WordPress, aby zobaczyć link modalnego logowania w akcji.

Metoda 2. Utwórz wyskakujące okienko logowania modalnego za pomocą WPForms i OptinMonster

Do tej metody będziesz potrzebował wtyczki WPForms i OptinMontser. Jeśli masz już te dwie wtyczki, ta metoda jest lepszym rozwiązaniem dla ciebie.

WPForms to najlepsza wtyczka do formularzy kontaktowych WordPress. Będziesz potrzebował przynajmniej swojego planu Pro, aby uzyskać dostęp do dodatku do rejestracji użytkownika.

OptinMonster to najlepsza wtyczka popup WordPress i oprogramowanie do generowania leadów na rynku. Pomaga konwertować odwiedzających witrynę na subskrybentów i klientów. Będziesz potrzebował przynajmniej planu Pro, aby uzyskać dostęp do funkcji MonsterLinks używanej w tym artykule.

Gotowy? Zaczynajmy.

Korzystanie z WPForms do tworzenia formularza logowania użytkownika

Najpierw musisz zainstalować i aktywować wtyczkę WPForms. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji musisz przejść do WPForms ” Dodatki strona instalacji i aktywacji Dodatek Do Rejestracji Użytkownika.

Po aktywacji dodatku, musisz przejść do WPForms ” Dodaj Nowy strona do utworzenia formularza logowania użytkownika.

Po uruchomieniu wpforms builder musisz wybrać wstępnie zbudowany Formularz Logowania Użytkownika szablon.

Ten szablon formularza logowania ma pola e-mail i hasło, które będą działać podobnie do domyślnego formularza logowania WordPress. W razie potrzeby możesz przeciągać i upuszczać dodatkowe pola z lewej strony ekranu.

Następnie kliknij na Hasło pole w sekcji Podgląd, a pokaże opcje pola po lewej stronie. Możesz dodać kod podany poniżej w polu opisu Hasło pole do wyświetlania opcji, takich jak zapomnij hasło i rejestracja użytkownika.

Nie pamiętasz hasła? <a href="{url_lost_password}">Kliknij tutaj < / a>. Nie masz konta? <a href="{url_register}">Zarejestruj się tutaj</a>.

Następnie należy kliknąć na Zapisz przycisk, a następnie kliknij na Embed guzik.

Otworzy się wyskakujące okno z kodem osadzania. Musisz skopiować ten kod i zapisać go, aby użyć go później.

Twój formularz logowania jest gotowy. Teraz możesz śmiało utworzyć wyskakujące okienko modalne.

Używanie OptinMonster do tworzenia wyskakującego okienka modalnego

Najpierw musisz zainstalować i aktywować wtyczkę OptinMonster. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji musisz przejść do OptinMonster w obszarze administracyjnym WordPress i kliknij na Utwórz Nową Kampanię guzik.

Panel OptinMonster otworzy się na nowej stronie internetowej.

Po wejściu do środka należy wybrać Lightbox Popup jako typ kampanii, więc możesz dodać formularz logowania w wyskakującym okienku.

Następnie musisz wybrać Płótno szablon kampanii, który jest pustym szablonem i pozwala dodać niestandardowy kod i skróty.

Poprosi Cię o dodanie nazwy do lightboxa i wybranie strony internetowej, na której chcesz załadować to wyskakujące okienko.

Po kliknięciu na Rozpocznij Budowę przycisk, zostaniesz przekierowany do strony konfiguracji kampanii OptinMonster.

Stąd musisz iść do Optin zakładkę i ustaw szerokość i wysokość płótna, Dodaj kod do formularza logowania Custom Canvas HTML pole, Zarządzaj wyświetlaniem i efektami dźwiękowymi dla modalnego wyskakującego okienka i nie tylko.

Uwaga: Kod do osadzenia formularza logowania powinien być kodem skopiowanym po utworzeniu formularza logowania w poprzednim kroku.

Ponieważ tworzysz wyskakujące okienko logowania modalnego, musisz przejść do zakładki setup i ustawić wartość ’ 0 ’ dla Czas Trwania Plików Cookie oraz Czas Trwania Pliku Cookie Sukcesu. Wyświetli formularz wszystkim odwiedzającym za każdym razem, gdy klikną Twój link.

Następnie musisz odwiedzić Zasady Wyświetlania Zakładka i rozwiń MonsterLink aby zmienić status na aktywny.

Pamiętaj, aby kliknąć na Zapisz przycisk w prawym górnym rogu i przejść do Publikuj sekcja, aby Status był aktywny.

Teraz możesz dodać to modalne wyskakujące okienko logowania na swoich stronach lub postach WordPress.

Dodawanie modalnego loginu w WordPress

Musisz wrócić do OptinMonster w obszarze administracyjnym WordPress i pokaże Ci listę kampanii. Jeśli nie widzisz ostatnio utworzonej kampanii logowania modalnego, po prostu kliknij na Odśwież Kampanie guzik.

Następnie musisz edytować ustawienia wyjściowe kampanii, aby włączyć optin w swojej witrynie i wybrać, kto powinien zobaczyć wyskakujące okienko modalnego logowania. Pamiętaj, aby kliknąć na Zapisz Ustawienia guzik.

Następnie musisz wrócić do strony przeglądu kampanii i skopiować plik, który jest widoczny pod opcją na żywo kampanii. Ten unikalny ślimak może być używany w skróconych kodach i kodzie do wyświetlania modalnego logowania w WordPress.

Następnie możesz utworzyć nową stronę WordPress lub edytować istniejącą i dodać ten kod za pomocą unikalnego ślimaka kampanii.

<a href="#" class="manual-optin-trigger" data-optin-SLUG="mw7pzo63ch6wpfzi" > Logowanie / Rejestracja< / A>

Możesz również dodać powyższy kod w menu WordPress, pasku bocznym lub dowolnym innym obszarze witryny.

Pamiętaj, aby zapisać zmiany na stronie WordPress i odwiedzić swoją witrynę, aby zobaczyć logowanie modalne w akcji.

Mamy nadzieję, że ten artykuł pomógł Ci nauczyć się tworzyć modalne logowanie w WordPress. Możesz również zobaczyć naszą pełną listę najlepszych wtyczek do strony logowania WordPress i łatwo zaprojektować własną stronę logowania.

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