Jak stworzyć modalne okno logowania w WordPressie (krok po kroku)

Dodanie modalnego wyskakującego okienka logowania WordPress do Twojej witryny może ułatwić logowanie użytkownikom. Pozwala odwiedzającym logować się bez opuszczania bieżącej strony, co poprawia ich ogólne wrażenia.

Widzieliśmy kilka udanych stron internetowych, które wykorzystały tę funkcję, aby utrzymać zaangażowanie użytkowników i poprawić interakcję na stronie. Jest to prosty, ale skuteczny sposób na usprawnienie procesu logowania.

W tym artykule przeprowadzimy Cię przez kroki tworzenia okna modalnego logowania WordPress.

Dlaczego tworzyć wysuwany formularz logowania w WordPressie?

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

Zazwyczaj, gdy użytkownicy klikają link do logowania, są przenoszeni na domyślną stronę logowania WordPress lub inną niestandardową stronę logowania na Twojej stronie internetowej. Po zalogowaniu użytkownicy są ponownie przekierowywani na inną stronę.

Niestety, może to być niewygodne dla użytkowników.

Wysuwany formularz logowania pozwala wyświetlić formularz bez przenoszenia użytkowników na inną stronę. Po zalogowaniu możesz przekierować użytkowników na dowolną stronę. Ponieważ proces jest szybszy i bardziej dopracowany, może pomóc poprawić doświadczenie użytkownika i zwiększyć konwersje.

Mając to na uwadze, pokażemy Ci, jak łatwo utworzyć wyskakujące okienko modalnego logowania w WordPress, korzystając z darmowej wtyczki i wtyczek premium. Możesz po prostu kliknąć poniższe linki, aby przejść do preferowanej metody:

• Metoda 1: Utwórz wyskakujące okienko logowania modalnego za pomocą wyskakującego okienka logowania/rejestracji.
• Metoda 2: Utwórz okno modalne logowania za pomocą WPForms i OptinMonster
• Dodatkowa wskazówka: Śledź ścieżkę użytkownika w formularzach leadów WordPress

Gotowi? Zanurzmy się od razu!

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

W pierwszej metodzie użyjemy wtyczki Login/Signup Popup, darmowej wtyczki, która pozwala użytkownikom łatwo logować się lub rejestrować na Twojej stronie.

Najpierw musisz zainstalować i aktywować wtyczkę Login/Signup Popup. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem jak zainstalować wtyczkę WordPress.

Po aktywacji możesz przejść do Login/Signup Popup » Ustawienia z panelu administracyjnego WordPress.

W ustawieniach „Ogólne” możesz włączyć rejestrację, automatyczne logowanie użytkownika lub rejestrację oraz obsługiwać resetowanie hasła.

Oprócz tego wtyczka pozwala również wybrać rolę użytkownika WordPress, która zostanie przypisana nowo zarejestrowanym użytkownikom. Domyślnie będzie przypisana rola „Subskrybent”.

Jeśli przewiniesz w dół, zobaczysz więcej ustawień. Na przykład, możesz dodać adres URL przekierowania, gdy użytkownik się zaloguje lub zarejestruje.

Nie zapomnij kliknąć przycisku „Zapisz”, jeśli dokonałeś jakichkolwiek zmian.

Następnie możesz przejść do zakładki „Styl” i edytować swoje wyskakujące okienko logowania/rejestracji. Wtyczka pozwala na zmianę pozycji wyskakującego okienka, szerokości, wysokości, koloru tła, koloru tekstu i nie tylko.

Po tym możesz również dostosować pola formularza w wyskakującym okienku modalnym.

Po prostu przejdź do Login/Signup Popup » Pola z panelu administracyjnego WordPress. Tutaj możesz aktywować różne pola formularza, edytować ich etykiety, oznaczyć je jako wymagane i wiele więcej.

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

Po prostu kliknij przycisk „+ Dodaj pole” na górze i wybierz dodatkowe pola formularza do dodania do swojego wyskakującego okienka logowania.

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

1. Dodaj modalne wyskakujące okienko logowania do menu

Najpierw możesz przejść do Wygląd » Menu z panelu administracyjnego WordPress.

Po tym zobaczysz pozycje menu „Logowanie/Rejestracja Popup”. Po prostu wybierz pozycje, które chcesz pokazać i kliknij przycisk „Dodaj do menu”.

Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem jak dodać menu nawigacyjne w WordPress.

2. Dodaj modalne okno logowania jako linki kotwiczące

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

Na przykład Twój adres URL może wyglądać tak:

<a href="https://www.myawesomesite.com/#login">Login</a>

Aby to zrobić, możesz edytować post lub stronę.

Gdy znajdziesz się w edytorze treści, kliknij 3 kropki i wybierz opcję „Edytuj jako HTML”.

Następnie możesz dodać wewnętrzny link do tekstu kotwicy logowania.

Więcej informacji znajdziesz w naszym przewodniku jak dodawać linki kotwiczące w WordPress.

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

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

Możesz po prostu wprowadzić krótki kod [xoo_el_action] w dowolnym miejscu na swojej stronie, aby utworzyć link/przycisk otwierający wyskakujące okienko.

Na przykład możesz przejść do Wygląd » Widgety i dodać blok widżetu kodu krótkiego, aby wyświetlić wyskakujące okienko logowania na pasku bocznym Twojej witryny.

Po zakończeniu po prostu kliknij przycisk „Zaktualizuj”.

Teraz możesz odwiedzić swoją stronę internetową, aby zobaczyć wyskakujące okienko logowania w akcji.

Metoda 2: Utwórz okno modalne logowania za pomocą WPForms i OptinMonster

Ta metoda jest świetna dla tych, którzy chcą mieć większą kontrolę nad wyglądem i działaniem swojego wyskakującego okienka logowania.

Używanie WPForms i OptinMonster razem daje potężne opcje projektowania, zaawansowane zasady wyświetlania (takie jak wyświetlanie wyskakującego okienka po kliknięciu przez użytkownika określonego linku) i lepszą integrację z usługami marketingowymi e-mail.

WPForms to najlepsza wtyczka formularza kontaktowego WordPress i będziesz potrzebować co najmniej ich planu Pro, aby uzyskać dostęp do dodatku „Rejestracja użytkownika”.

OptinMonster to najlepsza wtyczka do wyskakujących okienek w WordPressie na rynku. Pomaga przekształcić odwiedzających stronę w subskrybentów i klientów.

W WPBeginner wielokrotnie używaliśmy go do tworzenia interaktywnych wyskakujących okienek i mieliśmy doskonałe doświadczenia. Aby uzyskać więcej informacji, zapoznaj się z naszą pełną recenzją OptinMonster.

Pamiętaj, że będziesz potrzebować co najmniej planu Pro, aby uzyskać dostęp do funkcji MonsterLinks narzędzia, którą pokazujemy w tym artykule.

Używanie WPForms do tworzenia formularza logowania użytkownika

Najpierw zainstalujmy i aktywujmy wtyczkę WPForms. Aby uzyskać więcej szczegółów, możesz zapoznać się z naszym przewodnikiem krok po kroku na temat jak zainstalować wtyczkę WordPress.

Po aktywacji musisz przejść do WPForms » Ustawienia z panelu administratora WordPress i wprowadzić licencję.

Klucz znajdziesz w obszarze konta WPForms.

Następnie przejdź do WPForms » Dodatki, aby zainstalować i aktywować „Dodatek Rejestracja użytkownika”.

Po aktywacji dodatku przejdź do WPForms » Dodaj nowy i utwórz nowy formularz.

Na następnym ekranie najpierw musisz nazwać swój formularz.

Następnie wybierzesz gotowy szablon formularza z galerii szablonów. Możesz użyć paska wyszukiwania, aby łatwo znaleźć szablon „Formularz logowania użytkownika”.

Po jego znalezieniu możesz kliknąć przycisk „Użyj szablonu”.

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

Możesz przeciągać i upuszczać dowolne dodatkowe pola z lewej strony ekranu, w razie potrzeby.

Następnie możesz kliknąć pole „Hasło”, a opcje pola pojawią się po lewej stronie.

Możesz dodać poniższy kod do pola opisu pola „Hasło”, aby wyświetlić opcje takie jak „zapomniałem 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 musisz kliknąć przycisk „Zapisz”, aby zachować zmiany, i możesz opublikować formularz.

Aby rozpocząć, możesz po prostu kliknąć przycisk „Osadź”.

Otworzy się okno podręczne z opcjami dodania formularza logowania.

Wybierz opcję „użyj krótkiego kodu”. Pojawi się ona jako link w oknie, a nie jako przycisk.

Powinieneś teraz zobaczyć kod osadzania dla swojego formularza.

Tutaj będziesz chciał skopiować krótki kod i zapisać go do późniejszego wykorzystania.

Tworzenie wyskakującego okienka modalnego za pomocą OptinMonster

W tym momencie Twój formularz logowania jest gotowy. Następnym krokiem jest utworzenie wyskakującego okienka modalnego za pomocą OptinMonster.

Najpierw musisz odwiedzić stronę OptinMonster i założyć konto.

Następnie musisz zainstalować i aktywować wtyczkę OptinMonster. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku, jak zainstalować wtyczkę WordPress.

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

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

Otworzy się nowe okno.

Po prostu kliknij przycisk „Połącz z WordPress”.

Po połączeniu będziesz gotowy do utworzenia swojego wyskakującego okienka modalnego.

Po prostu przejdź do sekcji OptinMonster w obszarze administracyjnym WordPress i kliknij przycisk „Utwórz swoją pierwszą kampanię”.

Na następnym ekranie wybierzesz kampanię i szablon.

Ponieważ tworzymy wyskakujące okienko modalne, wybierzmy „Popup” jako typ kampanii.

Jeśli chodzi o szablony, OptinMonster oferuje wiele gotowych szablonów, dzięki czemu możesz szybko dostosować jeden z nich w razie potrzeby.

Po wybraniu szablonu otworzy się okno podręczne. Zostaniesz poproszony o dodanie nazwy do swojej kampanii.

Po wprowadzeniu nazwy możesz kliknąć przycisk „Rozpocznij tworzenie”.

Po wykonaniu tej czynności zostaniesz przekierowany do kreatora kampanii OptinMonster.

Możesz dodawać różne bloki do swojego szablonu z menu po lewej stronie. Zatem dodaj blok WPForms.

Po tym powinieneś zobaczyć opcje bloku WPForms w menu po 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 wprowadź 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 formularza w kreatorze kampanii; formularz pojawi się po opublikowaniu kampanii.

Następnie możesz przejść do zakładki „Zasady wyświetlania”. OptinMonster oferuje zaawansowane opcje targetowania.

Stąd wybierz regułę wyświetlania „MonsterLink™” (po kliknięciu).

Po wybraniu opcji powinieneś zobaczyć MonsterLink jako regułę wyświetlania.

Kliknij przycisk „Kopiuj kod MonsterLink”, a następnie zachowaj link w bezpiecznym miejscu. Będzie Ci potrzebny później.

Teraz jesteś gotowy, aby uruchomić kampanię.

Po prostu przejdź do zakładki „Publikuj” na górze kreatora kampanii. Stąd możesz ustawić „Status publikacji” na „Opublikuj”.

Gdy to zrobisz, nie zapomnij kliknąć przycisku „Zapisz” w prawym górnym rogu, aby zachować zmiany.

Dodawanie modalnego logowania w WordPress

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

Gdy znajdziesz się w edytorze treści, możesz kliknąć przycisk „+” i dodać blok „Niestandardowy HTML”.

Następnie będziesz musiał wkleić MonsterLink w bloku niestandardowego HTML. Powinno to wyglądać mniej więcej tak:

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

Domyślnie tekst linku w kodzie MonsterLink będzie brzmiał „Zapisz się teraz”, ponieważ jest on często używany do zbierania adresów e-mail.

Oto przykład domyślnego kodu:

<a href="https://app.monstercampaigns.com/c/pimhy1fgvnqqqtormzmw/" target="_blank" rel="noopener noreferrer">Subscribe Now</a>

Ponieważ jest to formularz logowania, będziesz chciał zmienić ten tekst. W tym samouczku zmieniliśmy go na „zaloguj się lub zarejestruj”, jak widać w poniższym fragmencie kodu.

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

Możesz również dodać powyższy kod do menu WordPress, paska bocznego lub dowolnego innego obszaru na swojej stronie.

Po prostu upewnij się, że zapisałeś zmiany na stronie WordPress i odwiedź swoją witrynę, aby zobaczyć modal logowania w akcji.

Dodatkowa wskazówka: Śledź ścieżkę użytkownika w formularzach leadów WordPress

Teraz, gdy już wiesz, jak utworzyć wyskakujące okienko modalne logowania w WordPress, przyjrzyjmy się, jak śledzić ścieżki użytkowników dla Twoich formularzy WordPress.

Może to być szczególnie pomocne w przypadku formularza logowania, ponieważ może ujawnić, jakie treści użytkownicy przeglądają tuż przed podjęciem decyzji o zalogowaniu się lub zarejestrowaniu. Te informacje mogą pomóc w ulepszeniu nawigacji i doświadczenia użytkownika na Twojej stronie.

Wiedza o tym, co zachęca użytkowników do wypełniania formularzy, pozwala odtworzyć ten proces, aby uzyskać więcej potencjalnych klientów i rozwijać swój biznes. Chociaż Google Analytics może pokazywać niektóre aktywności użytkowników, nie powiąże zachowania bezpośrednio z konkretnym użytkownikiem, który przesłał formularz.

Właśnie dlatego WPForms jest tak przydatne. Jest to popularna wtyczka do tworzenia formularzy, która zawiera dodatek „User Journey”, pozwalający zobaczyć, skąd pochodzili użytkownicy, jaką ścieżkę wybrali i ile czasu spędzili na każdej stronie przed wysłaniem formularza.

Jeśli chcesz dowiedzieć się więcej, zapoznaj się z naszym przewodnikiem jak śledzić podróż użytkownika w formularzach kontaktowych WordPress.

Najczęściej zadawane pytania (FAQ)

Oto kilka pytań, które często zadają nasi czytelnicy dotyczące dodawania modalnego okna logowania w WordPressie:

Czy mogę dostosować wygląd mojego wyskakującego okienka logowania w WordPress?

Tak, absolutnie. Obie omówione przez nas metody oferują opcje dostosowywania, aby dopasować je do brandingu Twojej strony internetowej. Zazwyczaj możesz zmieniać kolory, czcionki, rozmiary i dodawać własne logo, aby uzyskać spójny wygląd.

Czy wyskakujący formularz logowania będzie działał na urządzeniach mobilnych?

Tak. Nowoczesne wtyczki typu popup, takie jak OptinMonster, są w pełni responsywne. Oznacza to, że Twój modal logowania automatycznie dostosuje się, aby świetnie wyglądać na komputerach stacjonarnych, tabletach i smartfonach.

Czy wyskakujące okienka logowania spowalniają witrynę?

Korzystając z dobrze zakodowanych i zoptymalizowanych wtyczek, takich jak WPForms i OptinMonster, nie powinno być zauważalnego wpływu na wydajność Twojej witryny. Narzędzia te są zaprojektowane tak, aby były lekkie i ładowały się wydajnie.

Czy mogę dodać przyciski logowania społecznościowego do mojego wyskakującego okienka?

Niektóre wtyczki oferują funkcjonalność logowania społecznościowego jako wbudowaną lub płatną funkcję. Na przykład wersja pro wtyczki Login/Signup Popup obsługuje logowanie społecznościowe. Może to ułatwić użytkownikom logowanie.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak utworzyć wyskakujące okienko logowania w WordPress. Możesz również zapoznać się z naszą pełną listą najlepszych wtyczek do stron logowania WordPress oraz naszym przewodnikiem jak przekierować użytkowników po pomyślnym zalogowaniu w WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.