Cum de a crea un WordPress Login Popup Modal (pas cu pas)

Doriți să adăugați un mod pop-up de conectare WordPress pe site-ul dvs.? Un pop-up modual de conectare permite utilizatorilor să se conecteze rapid la site-ul dvs. fără a părăsi pagina pe care o vizualizează. Acest lucru îmbunătățește experiența și implicarea utilizatorilor pe site-ul dvs. Web. În acest articol, vă vom arăta cum să creați cu ușurință o modalitate pop-up de autentificare WordPress - pas cu pas.

De ce să creezi un Modal de conectare popup pentru WordPress?

Dacă rulați un magazin online, site-ul web al membrilor sau vând cursuri online, atunci probabil vă permiteți utilizatorilor să vă înregistrați și să vă conectați la site-ul dvs. Web.

În mod normal, atunci când utilizatorii fac clic pe link-ul de autentificare, aceștia sunt duși la pagina de login WordPress implicită sau la o altă pagină de conectare personalizată de pe site-ul dvs. Web. Odată ce utilizatorii sunt conectați, aceștia sunt redirecționați din nou către o altă pagină.

Un popup de conectare modală vă permite să afișați formularul de conectare fără a trimite utilizatori la o altă pagină. După ce v-ați conectat, puteți redirecționa utilizatorii către orice pagină dorită.

Un pop-up de conectare modală este mai rapid și îmbunătățește experiența utilizatorilor pe site-ul dvs. Web. O experiență mai rapidă și mai lustruită a utilizatorului poate crește vânzările și conversiile.

Acestea fiind spuse, să aruncăm o privire asupra modului în care puteți crea cu ușurință un popup de login modal în WordPress. Vă vom arăta două metode de a face acest lucru și puteți alege unul care se potrivește cel mai bine nevoilor dumneavoastră.

Metoda 1. Creați un popup de conectare modală utilizând Login CSH

Această metodă este mai ușor și recomandată pentru majoritatea utilizatorilor.

Primul lucru pe care trebuie să-l faceți este să instalați și să activați pluginul CSH Login. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

La activare, trebuie să mergeți Intrare modală în zona de administrare WordPress și selectați un tip pentru formularul de conectare modal.

După selectarea tipului de casetă de conectare modală, puteți derula în jos și puteți gestiona redirecționările de conectare / deconectare pentru formular. De asemenea, puteți permite utilizatorilor să genereze propriile parole.

Apoi, trebuie să derulați în jos până la stiluri și selectați aspectul, etichetele de afișare, culoarea de fundal, culoarea butonului, culoarea linkului și multe altele.

Mai mult, puteți adăuga e-mail de înregistrare, subiect de e-mail, utilizați Google reCaptcha și multe altele. Acest plugin vă permite, de asemenea, să adăugați date de conectare sociale cum ar fi Facebook, Twitter și Google.

Asigurați-vă că salvați modificările și copiați codul scurt situat în partea de sus a acestei pagini. Va trebui să creați o pagină nouă în WordPress sau să editați o pagină existentă pentru a adăuga codul scurt în editorul de conținut.

De asemenea, puteți adăuga modalitatea de conectare modală în bara laterală WordPress. Pur și simplu du-te la Aspect »Widgeturi pentru a trage și a lăsa Conectare CSH widget în bara laterală a site-ului dvs..

Conectarea modală CSH poate fi adăugată și în fișierele șablon de site-uri web. Odată ce l-ați adăugat pe site-ul dvs., pur și simplu vizitați site-ul dvs. WordPress pentru a vedea link-ul de conectare modal în acțiune.

Metoda 2. Creați un popup de conectare modală cu WPForms și OptinMonster

Pentru această metodă veți avea nevoie de pluginul WPForms și de OptinMontser. Dacă aveți deja aceste două pluginuri, atunci această metodă este soluția cea mai bună pentru dvs..

WPForms este cel mai bun plugin de formular de contact WordPress. Veți avea nevoie cel puțin de planul Pro pentru a accesa addonul pentru înregistrarea utilizatorului.

OptinMonster este cel mai bun software de generare de plumb de pe piață. Vă ajută să transformați vizitatorii site-ului în abonați și clienți. Veți avea nevoie cel puțin de planul Pro pentru a accesa caracteristica MonsterLinks folosită în acest articol.

Gata? Să începem.

Utilizarea formatelor WPForms pentru a crea un formular de conectare a utilizatorului

În primul rând, trebuie să instalați și să activați pluginul WPForms. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

La activare, trebuie să mergeți WPForms »Addons pentru a instala și a activa funcția Înregistrarea utilizatorilor.

După activarea addonului, trebuie să mergeți la WPForms »Adăugați noi pentru a crea formularul de autentificare pentru utilizator.

După lansarea WPForms builder, trebuie să alegeți pre-built-ul Formular de conectare utilizator șablon.

Acest șablon de formă de conectare are câmpurile de e-mail și parolă care vor funcționa similar cu formularul de conectare implicit WordPress. Puteți să trageți și să renunțați la orice câmpuri suplimentare din partea stângă a ecranului, după cum este necesar.

Apoi faceți clic pe Parola câmpul din secțiunea de previzualizare și va afișa opțiunile câmpului din partea stângă. Puteți adăuga codul dat în caseta de descriere de mai jos Parola pentru a afișa opțiuni precum uitarea parolei și înregistrarea utilizatorului.

 Nu-mi amintesc parola? Click aici. Nu aveți un cont? Înregistrează-te aici. 

După aceea, trebuie să faceți clic pe Salvați buton și apoi faceți clic pe Încorporare buton.

Se va deschide o fereastră pop-up cu codul de încorporare. Trebuie să copiați acest cod și să îl salvați pentru a putea utiliza ulterior.

Formularul dvs. de conectare este gata. Acum, puteți merge mai departe și creați ferestrele pop-up modale.

Folosind OptinMonster pentru a crea un popup modal

Mai întâi va trebui să instalați și să activați pluginul OptinMonster. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

La activare, trebuie să mergeți OptinMonster în zona de administrare WordPress și faceți clic pe Creați o nouă campanie buton.

Tabloul de bord OptinMonster se va deschide pe o nouă pagină Web.

Odată ce ați intrat, trebuie să selectați Afișare casetă luminoasă ca tip de campanie, astfel încât să puteți adăuga formularul dvs. de conectare în fereastra pop-up.

Apoi, trebuie să selectați pânză campanie care este un șablon gol și vă permite să adăugați cod personalizat și coduri scurte.

Acesta vă va cere să adăugați un nume la caseta dvs. lightbox și să selectați site-ul pe care doriți să încărcați acest pop-up.

După ce faceți clic pe Începeți construirea , veți fi redirecționat către pagina de configurare a campaniei OptinMonster.

De aici, trebuie să te duci Optin fila și setați lățimea și înălțimea pânzei, adăugați codul de încorporare pentru încorporarea în HTML personalizat pentru canvas câmpul, gestiona efecte de afișare și sunet pentru pop-up modal și multe altele.

Notă: Formularul de încorporare a formularului de autentificare trebuie să fie codul pe care l-ați copiat după crearea formularului de autentificare din pasul anterior.

Deoarece creați o fereastră pop-up modală, trebuie să accesați fila de configurare și să setați valoarea "0" pentru Durata cookie-urilor și Durata cookie-ului de succes. Acesta va afișa formularul pentru toți vizitatorii ori de câte ori fac clic pe linkul dvs..

În continuare, trebuie să vizitați Afișați regulile fila și extindeți-o MonsterLink pentru a schimba starea la activă.

Asigurați-vă că faceți clic pe Salvați butonul din colțul din dreapta sus și mergeți la Publica pentru a face starea activă.

Acum puteți adăuga acest pop-up modal de login în paginile WordPress sau în mesajele dvs..

Adăugarea Modal Login în WordPress

Trebuie să te întorci OptinMonster în zona de administrare WordPress și vă va afișa lista de campanii. Dacă nu vedeți campania dvs. recent creată pentru conectare modală, atunci faceți clic pur și simplu pe Actualizați campaniile buton.

Apoi, trebuie să modificați setările de ieșire a campaniei pentru a activa optinul pe site-ul dvs. și să selectați cine ar trebui să vadă popup-ul de conectare modală. Asigurați-vă că faceți clic pe Salvează setările buton.

După aceasta, trebuie să vă întoarceți la pagina de prezentare a campaniilor și să copiați melodia care este vizibilă sub opțiunea live a campaniei. Acest blocaj unic poate fi folosit în coduri scurte și cod pentru a afișa modalitatea de conectare în WordPress.

Apoi, puteți să creați o nouă pagină WordPress sau să editați o pagină existentă și să adăugați acest cod împreună cu slugul dvs. de campanie unic.

 Autentificare / Înregistrare 

De asemenea, puteți adăuga codul de mai sus în meniurile WordPress, în bara laterală sau în orice altă zonă a site-ului dvs..

Asigurați-vă că salvați modificările în pagina WordPress și vizitați site-ul dvs. pentru a vedea modalitatea de conectare în acțiune.

Sperăm că acest articol v-a ajutat să învățați cum să creați un login modal în WordPress. Puteți dori, de asemenea, să vedeți lista completă a celor mai bune module de conectare WordPress și să creați propria pagină de conectare cu ușurință.

Dacă v-ați plăcut acest articol, vă rugăm să vă abonați la tutorialele video YouTube pentru canalul YouTube pentru WordPress. Ne puteți găsi pe Twitter și pe Facebook.