Jak utworzyć wyskakujące okienko logowania WordPress (krok po kroku)

Czy chcesz dodać wyskakujący modal logowania WordPress na twojej witrynie?

Modalne wyskakujące okienko logowania pozwala użytkownikom szybko logować się do twojej witryny internetowej bez opuszczania strony, którą aktualnie zobaczyli. Poprawia to doświadczenie użytkownika i zaangażowanie na twojej witrynie internetowej.

W tym artykule pokażemy, jak łatwo utworzyć wyskakujące okienko logowania WordPress.

Dlaczego warto utworzyć wyskakujące okienko logowania WordPress?

Jeśli prowadzisz sklep internetowy, witrynę członkowską lub sprzedajesz kursy online, prawdopodobnie pozwalasz użytkownikom rejestrować się i logować na twojej witrynie internetowej.

Zazwyczaj po kliknięciu odnośnika logowania klienci są przenoszeni na domyślną stronę logowania WordPress lub inną własną stronę logowania w Twojej witrynie internetowej. Po zalogowaniu się użytkownicy są ponownie przekierowywani na inną stronę.

Modalne okienko logowania pozwala wyświetlić formularz bez przekierowywania użytkowników na inną stronę. Po zalogowaniu się, możesz przekierować użytkowników na dowolną stronę.

Modalne wyskakujące okienko logowania jest szybsze i poprawia komfort użytkowania twojej witryny internetowej. Szybsze i bardziej dopracowane doświadczenie użytkownika może zwiększyć twoją sprzedaż i konwersje.

Biorąc to pod uwagę, przyjrzyjmy się, jak łatwo utworzyć modalne wyskakujące okienko logowania w WordPress. Pokażemy ci dwie metody, aby to zrobić, używając darmowej wtyczki i wtyczki premium.

Wystarczy kliknąć poniższe odnośniki, aby przejść do Twojej preferowanej metody:

Metoda 1: Utwórz modalne wyskakujące okienko logowania za pomocą wyskakującego okienka logowania/rejestracji

W przypadku pierwszej metody użyjemy wtyczki Login/Signup Popup. Jest to darmowa wtyczka, która pozwala twoim użytkownikom łatwo logować się lub rejestrować w witrynie.

Najpierw musisz zainstalować i włączyć wtyczkę Login/Signup Popup. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem na temat instalacji wtyczki WordPress.

Po włączaniu można przejść do Login/Signup Popup ” Settings z panelu administracyjnego WordPress.

W ustawieniach ogólnych można włączyć rejestrację, automatyczne logowanie użytkownika lub rejestrację oraz obsługę resetowania hasła.

Poza tym wtyczka pozwala również wybrać rolę użytkownika WordPress, która zostanie przypisana nowo zarejestrowanym użytkownikom. Domyślnie przypisywana jest rola „Subskrybent”.

Jeśli przewiniesz w dół, zobaczysz więcej ustawień. Możesz na przykład dodać adres URL przekierowania, gdy użytkownik loguje się lub rejestruje.

Po wprowadzeniu zmian nie zapomnij kliknąć przycisku „Zapisz”.

Następnie możesz przejść do karty „Styl” i edytować twój modal logowania/signup popup. Wtyczka pozwala zmienić pozycję popup, szerokość, wysokość, kolor tła, kolor tekstu i wiele więcej.

Następnie można również dostosować pola formularza w modalu popup.

Po prostu przejdź do Login/Signup Popup ” Fields z twojego kokpitu WordPress. Tutaj możesz włączać różne pola formularzy, edytować ich etykiety, ustawiać je jako pola wymagane i nie tylko.

Poza tym istnieje również opcja dodania większej liczby pól do twojego wyskakującego okienka logowania / rejestracji.

Wystarczy kliknąć przycisk „+ Dodaj pole” u góry i wybrać dodatkowe pola formularza, aby dodać je do twojego wyskakującego okienka logowania.

Po dostosowaniu pól formularza, możesz teraz dodać modalne wyskakujące okienko logowania do twojej witryny internetowej. Wtyczka oferuje różne sposoby dodawania wyskakującego okienka do twojej witryny.

1. Dodaj wyskakujące okienko logowania do menu

Po pierwsze, możesz udać się do Wygląd ” Menu z twojego kokpitu WordPress.

Następnie możesz zobaczyć elementy menu podręcznego logowania/rejestracji. Po prostu wybierz elementy, które chcesz wyświetlić i kliknij przycisk „Dodaj do menu”.

Więcej szczegółów można znaleźć w naszym przewodniku na temat dodawania menu nawigacyjnego w WordPress.

2. Dodaj Login Popup Modal jako odnośnik kotwicy

Następnie możesz dodać #login lub #register na końcu adresu URL twojej witryny internetowej i umieścić wyskakujące okienko logowania jako odnośnik wewnętrzny.

Na przykład, twój adres URL będzie wyglądał następująco:

<a href="www.mywebsite.com#login">Login</a>

W tym celu można edytować wpis lub stronę.

Po przejściu do edytora treści kliknij 3 kropki i wybierz opcję „Edytuj jako HTML”.

Następnie można dodać odnośnik wewnętrzny do tekstu kotwicy logowania.

Możesz dowiedzieć się więcej, korzystając z naszego przewodnika na temat dodawania odnośników kotwicy w WordPressie.

3. Użyj krótkich kodów, aby dodać wyskakujące okienko logowania Modal

Innym sposobem dodania wyskakującego okienka logowania/signup jest użycie krótkich kodów.

Możesz po prostu wpisz krótki kod [xoo_el_action] w dowolnym miejscu na twojej witrynie, aby utworzyć odnośnik / przycisk otwierający wyskakujące okienko.

Na przykład, przejdź do Wygląd ” Widżety i dodaj blok widżetów z krótkim kodem, aby wyświetlić wyskakujące okienko logowania na panelu bocznym twojej witryny internetowej.

Po zakończeniu kliknij przycisk „Aktualizuj”.

Następnie możesz przejść na twoją witrynę internetową, aby zobaczyć wyskakujące okienko logowania w działaniu.

Metoda 2: Tworzenie modalnego okna logowania przy użyciu WPForms i OptinMonster

Do tej metody potrzebne będą wtyczki WPForms i OptinMonster.

WPForms to najlepsza wtyczka do formularzy kontaktowych WordPress. Aby uzyskać dostęp do dodatku do rejestracji użytkowników, wymagany jest co najmniej plan Pro.

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

Aby uzyskać więcej informacji, zobacz naszą pełną recenzję OptinMonster.

Użycie WPForms do stworzenia formularza logowania użytkownika

Najpierw należy zainstalować i włączyć wtyczkę WPForms. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po włączaniu, musisz udać się do WPForms ” Ustawienia z twojego kokpitu WordPress i wpisz licencję.

Klucz można znaleźć w obszarze twojego konta WPForms.

Następnie należy przejść do strony WPForms ” Addons, aby zainstalować i włączyć dodatek User Registration Addon.

Po włączaniu dodatku należy przejść do strony WPForms ” Add New, aby utworzyć nowy formularz.

WPForms oferuje wiele gotowych szablonów formularzy do wyboru. Najpierw wpisz nazwę twojego formularza, a następnie wybierz szablon „Formularz logowania użytkownika”. Następnie możesz kliknąć przycisk „Użyj szablonu”.

Ten szablon formularza logowania ma pola e-mail i hasła, które będą działać podobnie do domyślnego formularza logowania WordPress.

W razie potrzeby można przeciągać i upuszczać dodatkowe pola z lewej strony ekranu.

Następnie kliknij pole Hasło, co spowoduje wyświetlenie opcji pola po lewej stronie.

Możesz dodać poniższy kod w polu opisu pola hasła, aby wyświetlić opcje takie jak zapomnij hasła i rejestracja użytkownika.

Can't remember your password? <a href="{url_lost_password}">Click here</a>. Don't have an account? <a href="{url_register}">Register here</a>.

Następnie należy kliknąć przycisk „Zapisz”, aby zapisać twoje zmiany.

Następnie wystarczy kliknąć przycisk „Osadzaj”.

Otworzy się wyskakujące okno z opcjami dodania twojego formularza logowania.

Przejdź dalej i wybierz opcję „użyj krótkiego kodu”. Pojawi się on jako odnośnik w oknie, a nie przycisk.

Powinieneś teraz zobaczyć kod osadzania dla twojego formularza.

Teraz skopiuj ten krótki kod i zapisz go, aby użyć go później.

Twój formularz logowania jest gotowy. Teraz możesz przejść dalej i utworzyć modalny popup za pomocą OptinMonster.

Korzystanie z OptinMonster do tworzenia modalnych okienek popup

Najpierw należy przejść na witrynę internetową OptinMonster i założyć konto.

Następnie należy zainstalować i włączyć wtyczkę OptinMonster. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Wtyczka działa jako łącznik między twoją witryną WordPress a OptinMonster.

Po włączaniu powinieneś zobaczyć ekran powitalny. Kliknij przycisk „Połącz Twoje istniejące konto”.

Otworzy się nowe okno.

Kliknij przycisk „Połącz z WordPress”.

Jesteś teraz gotowy do utworzenia wyskakującego okienka logowania.

Wystarczy przejść do OptinMonster w obszarze administracyjnym WordPress i kliknąć przycisk „Utwórz swoją pierwszą kampanię”.

Twój kokpit OptinMonster otworzy się na nowej stronie internetowej.

Po wejściu do środka należy wybrać „Popup” jako rodzaj kampanii, aby dodać twój formularz logowania do wyskakującego okienka.

Następnie należy wybrać szablon kampanii.

OptinMonster oferuje gotowe szablony, dzięki czemu można szybko wybrać i edytować jeden z nich.

Po wybraniu szablonu otworzy się wyskakujące okienko. Zostaniesz poproszony o dodanie nazwy do twojej kampanii.

Po wpiszeniu nazwy kliknij przycisk „Rozpocznij tworzenie”.

Po kliknięciu przycisku zostaniesz przekierowany do kreatora kampanii OptinMonster.

Możesz dodać różne bloki do twojego szablonu z menu po lewej stronie. Przejdź dalej i dodaj blok WPForms.

Następnie powinieneś zobaczyć opcje bloku WPForms w menu po twojej lewej stronie.

Możesz wybrać formularz logowania, który właśnie utworzyłeś z menu rozwijanego „Wybór formularza”.

Jeśli nie widzisz swojego formularza, po prostu wybierz opcję „Dodaj krótki kod ręcznie” i wpisz krótki kod, który skopiowałeś wcześniej podczas tworzenia formularza w WPForms.

Nie martw się, jeśli nie możesz wyświetlić podglądu twojego formularza w kreatorze kampanii. Formularz pojawi się po opublikowaniu kampanii.

Następnie możesz przejść do karty „Reguły wyświetlania”. OptinMonster oferuje potężne opcje targetowania.

W tym miejscu wybierz regułę wyświetlania „MonsterLink™” (po kliknięciu).

Następnie zobaczysz MonsterLink jako regułę wyświetlania.

Kliknij przycisk „Kopiuj kod MonsterLink”. Będziesz potrzebował tego odnośnika później.

Teraz możesz przejść do karty „Opublikuj” u góry.

Wystarczy zmienić status publikacji z „Wersja robocza” na „Opublikuj”.

Nie zapomnij kliknąć przycisku „Zapisz” u góry i wyjść z kreatora kampanii.

Następnie zobaczysz ustawienia wyjściowe WordPress dla twojej kampanii. Upewnij się, że status jest ustawiony na „Opublikowany” w sekcji „Widoczność i status”.

Kliknij przycisk „Zapisz” w prawym górnym rogu i przejdź do sekcji „Opublikuj”, aby włączyć status.

Dodawanie logowania modalnego w WordPress

Następnie możesz utworzyć nową stronę WordPress lub edytować istniejącą.

Po przejściu do edytora treści kliknij przycisk „+” i dodaj własny blok HTML.

Następnie należy wkleić MonsterLink we własnym bloku HTML. Powinien on wyglądać mniej więcej tak:

<a href="https://app.monstercampaigns.com/c/pimhy1fgvnqqqtormzmw/" target="_blank" rel="noopener noreferrer">log in or register</a>

Ponieważ jest to formularz logowania, a nie e-mail optin, będziesz chciał zmienić tekst odnośnika w kodzie, który mówi „Subskrybuj teraz” na cokolwiek chcesz. W tym poradniku zmieniliśmy go na „zaloguj się lub zarejestruj”, jak widać w powyższym fragmencie kodu.

Możesz również dodać powyższy kod do menu WordPress, panelu bocznego lub dowolnego innego obszaru na twojej witrynie.

Pamiętaj, aby zapisać zmiany na stronie WordPress i przejdź na swoją witrynę, aby zobaczyć modalne logowanie w działaniu.

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak utworzyć wyskakujący modal logowania w WordPress. Możesz również zapoznać się z naszą pełną listą najlepszych wtyczek WordPress do tworzenia stron log owania i naszym przewodnikiem na temat tworzenia stron docelowych w WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.