Cum să creați o fereastră modală pop-up pentru autentificarea WordPress (Pas cu Pas)

Adăugarea unui modal de autentificare WordPress pe site-ul dvs. poate face procesul de conectare mai fluid pentru utilizatorii dvs. Permite vizitatorilor să se autentifice fără a părăsi pagina curentă, ceea ce le îmbunătățește experiența generală.

Am văzut mai multe site-uri web de succes care folosesc această funcție pentru a menține utilizatorii implicați și pentru a îmbunătăți interacțiunea pe site. Este o modalitate simplă, dar eficientă de a eficientiza procesul de autentificare.

În acest articol, vă vom ghida prin pașii pentru a crea o fereastră modală de autentificare WordPress.

De ce să creați un popup modal de autentificare WordPress?

Dacă aveți un magazin online, vindeți cursuri online sau aveți un site de membri, probabil că permiteți utilizatorilor să se înregistreze și să se autentifice pe site-ul dvs.

De obicei, atunci când utilizatorii fac clic pe linkul de autentificare, aceștia sunt direcționați către pagina implicită de autentificare WordPress sau către o altă pagină de autentificare personalizată de pe site-ul dvs. web. Odată ce utilizatorii sunt autentificați, aceștia sunt redirecționați din nou către o altă pagină.

Din păcate, acest lucru poate fi incomod pentru utilizatori.

Un popup modal de autentificare vă permite să afișați formularul fără a trimite utilizatorii pe o altă pagină. Odată autentificat, puteți redirecționa utilizatorii către orice pagină doriți. Deoarece procesul este mai rapid și mai rafinat, poate contribui la îmbunătățirea experienței utilizatorului și la creșterea conversiilor.

Având în vedere acest lucru, vă vom arăta cum să creați cu ușurință o fereastră modală pop-up de autentificare în WordPress folosind un plugin gratuit și pluginuri premium. Puteți pur și simplu să faceți clic pe linkurile de mai jos pentru a sări la metoda preferată:

• Metoda 1: Crearea unui popup de autentificare modal folosind Login/Signup Popup
• Metoda 2: Creați o fereastră modală de autentificare folosind WPForms & OptinMonster
• Sfat bonus: Urmăriți parcursul utilizatorului în formularele de lead WordPress

Gata? Să începem!

Metoda 1: Crearea unui popup de autentificare modal folosind Login/Signup Popup

Pentru prima metodă, vom folosi pluginul Login/Signup Popup, un plugin gratuit care permite utilizatorilor dvs. să se autentifice sau să se înregistreze cu ușurință pe site-ul dvs.

Mai întâi, va trebui să instalați și să activați pluginul Login/Signup Popup. Dacă aveți nevoie de ajutor, consultați ghidul nostru despre cum să instalați un plugin WordPress.

După activare, puteți accesa Login/Signup Popup » Setări din panoul de administrare WordPress.

În secțiunea setărilor „Generale”, puteți activa înregistrarea, autentificarea automată a utilizatorului sau înscrierea și gestionarea resetărilor de parole.

Pe lângă aceasta, pluginul vă permite, de asemenea, să selectați rolul utilizatorului WordPress care va fi atribuit utilizatorilor nou înregistrați. Implicit, va atribui rolul de „Abonat”.

Dacă derulați în jos, veți vedea mai multe setări. De exemplu, puteți adăuga o adresă URL de redirecționare atunci când un utilizator se autentifică sau se înregistrează.

Nu uitați să faceți clic pe butonul „Salvare” dacă ați făcut modificări.

Apoi, puteți comuta la fila „Stil” și puteți edita modalul pop-up de autentificare/înregistrare. Pluginul vă permite să schimbați poziția pop-up-ului, lățimea, înălțimea, culoarea de fundal, culoarea textului și multe altele.

După aceea, puteți personaliza și câmpurile formularului din modalul pop-up.

Pur și simplu accesați Login/Signup Popup » Fields din tabloul de bord WordPress. Aici, puteți activa diferite câmpuri de formular, puteți edita etichetele acestora, le puteți face câmpuri obligatorii și multe altele.

Pe lângă acestea, există și o opțiune de a adăuga mai multe câmpuri la fereastra pop-up de autentificare/înregistrare.

Pur și simplu faceți clic pe butonul „+ Adăugare câmp” din partea de sus și selectați câmpuri suplimentare de formular pentru a le adăuga la fereastra modală de conectare.

După ce ați personalizat câmpurile formularului, puteți acum să adăugați fereastra pop-up de autentificare modală pe site-ul dvs. web. Pluginul oferă diferite modalități de a adăuga fereastra pop-up pe site-ul dvs.

1. Adăugați fereastra pop-up modală de autentificare la meniuri

Mai întâi, puteți accesa Aspect » Meniuri din tabloul de bord WordPress.

După aceea, puteți vedea elementele de meniu „Popup Autentificare/Înregistrare”. Pur și simplu selectați elementele pe care doriți să le afișați și faceți clic pe butonul „Adăugare la meniu”.

Pentru mai multe detalii, vă rugăm să consultați ghidul nostru despre cum să adăugați un meniu de navigare în WordPress.

2. Adăugați modalul de autentificare pop-up ca linkuri de ancorare

Apoi, puteți adăuga #login sau #register la sfârșitul URL-ului site-ului dvs. și puteți plasa fereastra modală de autentificare ca un link intern.

De exemplu, URL-ul dvs. ar putea arăta astfel:

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

Pentru a face acest lucru, puteți edita o postare sau o pagină.

Odată ce sunteți în editorul de conținut, veți dori să faceți clic pe cele 3 puncte și să selectați opțiunea „Editare ca HTML”.

După aceea, puteți adăuga linkul intern la textul de ancorare pentru autentificare.

Puteți afla mai multe urmând ghidul nostru despre cum să adăugați linkuri de ancorare în WordPress.

3. Utilizați Shortcode-uri pentru a adăuga o fereastră modală de autentificare

O altă modalitate de a adăuga fereastra pop-up de autentificare/înregistrare este prin utilizarea shortcode-urilor.

Puteți pur și simplu introduce shortcode-ul [xoo_el_action] oriunde pe site-ul dvs. pentru a crea un link/buton pentru a deschide fereastra modală.

De exemplu, puteți accesa Aspect » Widgeturi și puteți adăuga un bloc widget de tip shortcode pentru a afișa pop-up-ul de autentificare în bara laterală a site-ului dvs. web.

Când ați terminat, pur și simplu faceți clic pe butonul „Actualizare”.

Acum, puteți vizita site-ul dvs. web pentru a vedea fereastra modală de autentificare în acțiune.

Metoda 2: Creați o fereastră modală de autentificare folosind WPForms & OptinMonster

Această metodă este excelentă pentru cei care doresc mai mult control asupra designului și comportamentului ferestrei pop-up de autentificare.

Utilizarea WPForms și OptinMonster împreună vă oferă opțiuni puternice de design, reguli avansate de afișare (cum ar fi afișarea popup-ului după ce un utilizator face clic pe un anumit link) și o mai bună integrare cu serviciile de marketing prin e-mail.

WPForms este cel mai bun plugin de formular de contact WordPress, și veți avea nevoie cel puțin de planul lor Pro pentru a accesa addon-ul „Înregistrare utilizator”.

OptinMonster este cel mai bun plugin de popup WordPress de pe piață. Vă ajută să convertiți vizitatorii site-ului web în abonați și clienți.

La WPBeginner, l-am folosit de mai multe ori pentru a crea pop-up-uri interactive și am avut o experiență excelentă. Pentru mai multe detalii, consultați recenzia noastră completă despre OptinMonster.

Rețineți că veți avea nevoie de cel puțin planul Pro pentru a accesa funcționalitatea MonsterLinks a instrumentului pe care o prezentăm în acest articol.

Utilizarea WPForms pentru a crea un formular de autentificare pentru utilizatori

Mai întâi, să instalăm și să activăm pluginul WPForms. Pentru mai multe detalii, puteți consulta ghidul nostru pas cu pas despre cum se instalează un plugin WordPress.

După activare, va trebui să accesați WPForms » Setări din tabloul de bord WordPress și să introduceți licența.

Puteți găsi cheia în zona contului dvs. WPForms.

Apoi, să mergem la WPForms » Addons pentru a instala și activa „User Registration Addon”.

După activarea add-on-ului, veți dori să accesați WPForms » Adăugare Nou și să creați un nou formular.

Pe ecranul următor, va trebui mai întâi să denumiți formularul.

Apoi, veți alege un șablon de formular preconstruit din galeria de șabloane. Puteți folosi bara de căutare pentru a găsi cu ușurință șablonul „Formular de autentificare utilizator”.

Odată ce l-ați găsit, puteți face clic pe butonul „Utilizați șablonul”.

Acest șablon de formular de conectare are câmpuri pentru e-mail și parolă care vor funcționa similar cu formularul de conectare implicit WordPress.

Puteți trage și plasa orice câmpuri suplimentare din partea stângă a ecranului, după cum este necesar.

În continuare, puteți face clic pe câmpul „Parolă”, iar acesta va afișa opțiunile câmpului în partea stângă.

Puteți adăuga codul de mai jos în caseta de descriere a câmpului „Parolă” pentru a afișa opțiuni precum „uitat parola” și „înregistrare utilizator”.

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>.

După aceea, trebuie să faceți clic pe butonul „Salvare” pentru a salva modificările și sunteți gata să publicați formularul.

Pentru a începe, puteți pur și simplu să faceți clic pe butonul „Embed”.

Se va deschide o fereastră pop-up cu opțiuni pentru a adăuga formularul dvs. de autentificare.

Continuați și selectați opțiunea „utilizați un shortcode”. Acesta va apărea ca un link în fereastră, nu ca un buton.

Ar trebui să vedeți acum un cod de încorporare pentru formularul dvs.

Aici, veți dori să copiați shortcode-ul și să îl salvați pentru a-l utiliza mai târziu.

Utilizarea OptinMonster pentru a crea un modal pop-up

În acest moment, formularul dvs. de autentificare este gata. Următorul pas este să creați fereastra modală folosind OptinMonster.

Mai întâi, va trebui să vizitați site-ul OptinMonster și să vă înregistrați pentru un cont.

Apoi, va trebui să instalați și să activați pluginul OptinMonster. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum se instalează un plugin WordPress.

Pluginul acționează ca un conector între site-ul dvs. WordPress și OptinMonster.

După activare, ar trebui să vedeți ecranul de bun venit. Continuați și faceți clic pe butonul „Conectați-vă contul existent”.

Se va deschide acum o nouă fereastră.

Pur și simplu faceți clic pe butonul „Connect to WordPress”.

Odată conectat, ești gata să creezi fereastra modală pop-up.

Pur și simplu accesați OptinMonster în zona de administrare WordPress și faceți clic pe butonul „Creați prima campanie”.

Pe ecranul următor, veți alege o campanie și un șablon.

Deoarece creăm o fereastră modală pop-up, să selectăm „Popup” ca tip de campanie.

În ceea ce privește șablonul, OptinMonster oferă o mulțime de șabloane preconstruite, astfel încât să puteți ajusta rapid unul, dacă este necesar.

Odată ce ați selectat un șablon, se va deschide o fereastră pop-up. Vi se va cere să adăugați un nume campaniei dvs.

După ce introduceți un nume, puteți face clic pe butonul „Start Building”.

După ce ați făcut acest lucru, veți fi redirecționat către constructorul de campanii OptinMonster.

Puteți adăuga diferite blocuri la șablonul dvs. din meniul din stânga. Deci, continuați și adăugați blocul WPForms.

După aceea, ar trebui să vedeți opțiunile blocului WPForms în meniul din stânga.

Puteți selecta formularul de autentificare pe care tocmai l-ați creat din meniul derulant „Selecție formular”.

Dacă nu vedeți formularul, selectați pur și simplu opțiunea „Adăugare scurtcod manual” și introduceți scurtcodul pe care l-ați copiat anterior la crearea formularului în WPForms.

Nu vă faceți griji dacă nu puteți previzualiza formularul în constructorul de campanii; formularul va apărea atunci când publicați campania.

Apoi, puteți accesa fila „Reguli de afișare”. OptinMonster oferă opțiuni puternice de direcționare.

De aici, veți dori să selectați regula de afișare „MonsterLink™” (La clic).

După selectarea opțiunii, ar trebui să vedeți MonsterLink ca regulă de afișare.

Continuați și faceți clic pe butonul „Copy MonsterLink Code”, apoi păstrați linkul undeva în siguranță. Veți avea nevoie de el mai târziu.

Acum, sunteți gata să faceți campania live.

Pur și simplu accesați fila „Publicare” din partea de sus a constructorului de campanii. De aici, puteți seta „Starea publicării” la „Publicare”.

Odată ce ați făcut acest lucru, nu uitați să faceți clic pe butonul „Salvare” din colțul din dreapta sus pentru a salva modificările.

Adăugarea unei ferestre modale de autentificare în WordPress

Acum, puteți crea o pagină WordPress nouă sau edita una existentă.

Odată ce sunteți în editorul de conținut, puteți face clic pe butonul „+” și adăuga un bloc „HTML personalizat”.

După aceea, va trebui să lipiți MonsterLink în blocul HTML personalizat. Ar trebui să arate cam așa:

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

Implicit, textul linkului din codul dvs. MonsterLink va fi „Înscrieți-vă acum”, deoarece este adesea folosit pentru optin-uri prin e-mail.

Iată un exemplu de cod implicit:

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

Deoarece acesta este un formular de autentificare, veți dori să schimbați acel text. Pentru acest tutorial, l-am schimbat în „autentificare sau înregistrare”, așa cum puteți vedea în fragmentul de cod de mai jos.

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

Puteți adăuga, de asemenea, codul de mai sus la meniurile WordPress, bara laterală sau orice altă zonă de pe site-ul dvs.

Asigurați-vă doar că salvați modificările paginii WordPress și vizitați site-ul dvs. pentru a vedea modalul de autentificare în acțiune.

Sfat bonus: Urmăriți parcursul utilizatorului în formularele de lead WordPress

Acum că ați învățat cum să creați o fereastră modală de autentificare în WordPress, să vedem cum să urmăriți parcursul utilizatorilor pentru formularele dvs. WordPress.

Acest lucru poate fi deosebit de util pentru formularul dvs. de autentificare, deoarece poate dezvălui ce conținut vizualizează utilizatorii chiar înainte de a decide să se autentifice sau să se înregistreze. Această informație vă poate ajuta să îmbunătățiți navigarea și experiența utilizatorului pe site-ul dvs.

Știind ce îi încurajează pe utilizatori să completeze formularele vă permite să recreați acel proces pentru a obține mai mulți clienți potențiali și a vă dezvolta afacerea. În timp ce Google Analytics poate arăta o parte din activitatea utilizatorilor, nu leagă comportamentul direct de utilizatorul specific care a trimis formularul.

Aici intervine WPForms. Este un plugin popular pentru crearea de formulare care include un add-on „User Journey”, permițându-vă să vedeți de unde au venit utilizatorii, ce cale au urmat și cât timp au petrecut pe fiecare pagină înainte de a trimite un formular.

Dacă sunteți interesat să aflați mai multe, nu ezitați să consultați ghidul nostru despre cum să urmăriți parcursul utilizatorului pe formularele de lead WordPress.

Întrebări frecvente (FAQ)

Iată câteva întrebări adresate frecvent de cititorii noștri despre adăugarea unui modal de autentificare pop-up în WordPress:

Pot personaliza designul pop-up-ului meu de autentificare WordPress?

Da, absolut. Ambele metode pe care le-am acoperit oferă opțiuni de personalizare pentru a se potrivi cu brandingul site-ului dvs. web. De obicei, puteți schimba culorile, fonturile, dimensiunile și puteți adăuga propriul logo pentru a crea un aspect coerent.

Un popup modal de autentificare va funcționa pe dispozitive mobile?

Da. Plugin-urile moderne de tip popup, precum OptinMonster, sunt construite pentru a fi complet responsive. Aceasta înseamnă că fereastra modală de autentificare se va ajusta automat pentru a arăta excelent pe desktop-uri, tablete și smartphone-uri.

Încetinesc ferestrele pop-up de autentificare un site web?

Când utilizați pluginuri bine codificate și optimizate precum WPForms și OptinMonster, nu ar trebui să existe un impact vizibil asupra performanței site-ului dvs.. Aceste instrumente sunt concepute pentru a fi ușoare și a se încărca eficient.

Pot adăuga butoane de autentificare socială la pop-up-ul meu?

Unele pluginuri oferă funcționalitate de autentificare socială ca o caracteristică încorporată sau premium. De exemplu, versiunea pro a pluginului Login/Signup Popup suportă autentificările sociale. Acest lucru poate face chiar mai ușor pentru utilizatori să se autentifice.

Sperăm că acest articol v-a ajutat să învățați cum să creați un modal pop-up de autentificare în WordPress. Puteți, de asemenea, să consultați lista noastră completă cu cele mai bune pluginuri pentru pagina de autentificare WordPress și ghidul nostru despre cum să redirecționați utilizatorii după autentificarea reușită în WordPress.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.