Divi: Cum se creează un formular de conectare pop-up

Doriți să creați un formă autentificare pop-up în Divi cu butoane de conectare / deconectare?

Crearea unui formă pop-up de conectare Divi poate fi o modalitate eficientă de a îmbunătăți designul site-ului dvs. și experiența utilizatorului de conectare/deconectare. 

Ideea este de a crea un formă autentificare care se afișează într-o fereastră pop-up de fiecare dată când utilizatorul face clic pe un buton de conectare din antetul paginii. 

Acest lucru este mai convenabil decât redirecționarea utilizatorului către o pagină de conectare personalizată.

În acest tutorial, vom crea un formular de conectare pop-up cu butoane personalizate de conectare și deconectare în Divi. 

Folosind modulul Divi Login și câteva module Button, vom crea o experiență de conectare fără întreruperi pop-up pe front-end, permițând utilizatorilor să se autentifice și să se deconecteze fără a fi redirecționați către o altă pagină.

Să începem!

studiu

Iată o privire rapidă asupra designului pe care îl vom crea în acest tutorial.

Observați cum se schimbă butonul de conectare și, respectiv, butoanele de deconectare. Și, odată ce utilizatorul se conectează, acesta rămâne pe pagina curentă. 

În plus, formularul de conectare pop-up afișează conținut diferit de „avertisment” de fiecare dată când utilizatorul încearcă să se deconecteze.

Ce ai nevoie pentru a începe

Deși puteți adăuga acest formular de conectare de tip pop-up și butoane personalizate de conectare/deconectare la orice antet personalizat, vom folosi un antet prestabilit pentru a accelera procesul și pentru a începe rapid proiectarea.

Importați șablonul de antet „Crowdfunding Layout Pack” în generatorul Divi

Pentru a începe, descărcați Divi Crowdfunding Layout Pack Antet și subsol gratuit . Pentru a face acest lucru, accesați postarea pe blog .

Apoi introduceți adresa dvs. de e-mail pentru a descărca fișierul zip.

După aceea, dezarhivați fișierul, astfel încât să fie gata de import.

Pentru a importa fișierul în editorul de teme, urmați acești pași:

1. Accesați Divi > Theme Builder.
2. Faceți clic pe pictograma portabilitate.
3. În fereastra pop-up Portabilitate, selectați fila de import.
4. Alegeți fișierul dezarhivat descărcat anterior pentru a importa.
5. Faceți clic pe Importați Divi Theme Builder Șabloane.
6. Faceți clic pe pictograma de editare pentru a edita antetul importat.

Crearea formularului de conectare pop-up în Divi

Partea 1: Crearea butoanelor de conectare și deconectare

Odată ajuns în Editorul de aspect global antet, deschideți vizualizare strat astfel încât să puteți vedea cu ușurință toate elementele.

În rândul de sus al secțiunii antet, ștergeți modulul Urmăriți pe rețelele de socializare lângă butonul Conectare din coloana 3.

Citiți și: Divi: Comparația diferitelor tipuri de gradienți

Crearea butonului de conectare

Pentru a crea butonul nostru de conectare, deschideți setările modulului Buton în coloana 3 a rândului de sus.

Actualizați următoarele elemente din fila design:

• Pictograma buton: pictograma de blocare (vezi captura de ecran)
• Plasarea pictogramei butonului: dreapta
• Afișați doar pictograma la trecerea cursorului pentru buton: NU
• Umplutură: 0,5 em (sus și jos), 2 em (stânga), 0,7 em (dreapta)

Sub filă Avansat, atribuiți butonului două clase CSS personalizate, după cum urmează:

• Clasa CSS: et-toggle-popup et-popup-login-button

Crearea butonului de deconectare

Pentru a crea butonul de deconectare, duplicați butonul de conectare existent în coloana 3.

Pentru a ajuta la distingerea celor două butoane, puteți actualiza eticheta fiecăruia respectiv. Apoi, deschideți setările modulului Duplicate Button din coloana 3.

Schimbați textul butonului pentru a citi „Deconectare”.

Actualizați următoarele elemente din fila design:

• Pictograma butonului: pictograma de deblocare (vezi captura de ecran)

Sub filă Avansat, actualizați butonul CSS Classes după cum urmează:

• Clasa CSS: et-toggle-popup et-popup-logout-button

Prima clasă va rămâne aceeași, dar a doua clasă va fi diferită.

Partea 2: Crearea secțiunii pop-up

Odată ce butoanele sunt terminate, suntem gata să creăm secțiunea pop-up care va servi drept pop-up care conține formulare conexiune.

Sub secțiunea antet, adăugați o nouă secțiune obișnuită.

Apoi introduceți un rând cu o singură coloană în interiorul secțiunii.

Setări secțiune

Înainte de a actualiza rândul, deschideți setările secțiunii.

Sub filă Conţinut, dați secțiunii o culoare de fundal albă:

• Fundal: #ffffff

Sub filă Amenajări, actualizați următoarele:

• Latime: 100%
• Lățime maximă: 800 px (desktop), 80% (tabletă), 100% (telefon)
• Alinierea secțiunii: Centru
• Înălțime: automat (desktop și tabletă), 100% (telefon)
• Înălțime maximă: 100%
• Umplutură: 0px (sus și jos)

• Colțuri rotunjite: 10px
• Box Shadow: vezi captura de ecran
• Poziție verticală a umbrei casetei: 0px
• Intensitatea estomparii: 100 pixeli
• Puterea de răspândire: 50px

Sub filă Avansat, actualizați următoarele:

Adăugați o clasă CSS personalizată.

• Clasa CSS: et-popup-login

Adăugați un fragment CSS personalizat la elementul principal:

overscroll-behavior: contain;

Actualizați opțiunile de vizibilitate și poziție.

• Overflow orizontal: Ascuns
• Overflow vertical: automat
• Poziție: fixă
• Locație: Centru Centru
• Index Z: 999999

Setări de linie

Cu setările secțiunii activate, deschideți setările liniei și actualizați următoarele setări de design:

• Utilizați lățimea jgheab personalizată: DA
• Lățimea jgheabului: 1
• Latime: 100%
• Latime maxima: 100%
• Umplutură: 0px (sus), 5vh (jos)

Partea 3: Crearea pictogramei pop-up de închidere

Pentru a crea pictograma de închidere pop-up care va închide/ascunde pop-up-ul la clic, vom folosi un modul Blurb.

Adăugați un nou modul Blurb la rând.

Deschideți setarea modulului și ștergeți titlul și textul corpului.

Apoi adăugați pictograma după cum urmează:

• Utilizați pictograma: DA
• Pictogramă: pictograma „x” (vezi captura de ecran)

Sub filă Amenajări, actualizați următoarele:

• Culoare pictogramă: #004e43
• Aliniere imagine/pictogramă: centrat
• Utilizați dimensiunea fontului pictogramei: DA
• Dimensiunea fontului pictogramei: 50px
• Latime: 50 pixeli
• Modul de aliniere: dreapta
• Înălțime: 50px

Sub filă Avansat, adăugați o clasă CSS la modulul Blurb, după cum urmează:

• Clasa CSS: et-toggle-popup

Partea 4: Crearea formularelor de conectare „Conectat” și „Deconectat”.

Pentru a avea conținut și design diferit pentru formularul de autentificare la conectare și deconectare, vom crea două module diferite de formular de autentificare. 

Primul va fi formularul de conectare care va fi afișat de fiecare dată când utilizatorul este „deconectat”. Al doilea va fi formularul de conectare care va fi afișat de fiecare dată când utilizatorul este „conectat”.

Crearea formularului „Deconectat”.

Pentru a crea formularul de conectare „Deconectat”, adăugați un nou modul de conectare sub pictograma modulului Blurb din interiorul rândului.

Deschideți setările modulului și modificați următoarele setări:

fila Conținut

• Redirecționați către pagina curentă: DA
• Utilizați culoarea de fundal: NU

Fila Design

• Culoare de fundal câmpuri: rgba(0,78,67,0.05)
• Culoare de fundal de focalizare pe câmp: rgba (0,78,67,0,15)
• Alinierea textului: centrat
• Culoare text: Întunecat

• Font de titlu: Poppins
• Greutatea fontului titlului: semi-bold
• Culoare text: #000000
• Înălțimea liniei de titlu: 1,3 em
• Font pentru corp: Work Sans

Pentru a actualiza stilurile de butoane, copiați stilurile de butoane din butonul de conectare pe care l-am creat în a treia coloană din rândul secțiunii Antet.

Apoi lipiți stilurile de butoane în grupul de opțiuni de buton din setările de conexiune din fila Design.

Apoi, actualizați stilurile de butoane pentru formularul de autentificare după cum urmează:

• Buton
  • Culoare text: #ffffff
  • Fundal: #004e43
  • Fundal (Hover): #00683c
  • Lățimea chenarului: 0 pixeli
  • Umplutură: 15 px (sus și jos)

Apoi, actualizați opțiunile de dimensionare după cum urmează:

• Latime: 100%
• Lățimea maximă: 80% (desktop), 90% (tabletă), 95% (telefon)
• Modul de aliniere: Centru

Filă avansată

Sub filă Avansat, actualizați clasa CSS și CSS personalizat după cum urmează:

• Clasa CSS: et-logged-out-form

CSS personalizat pentru descrierea conexiunii:

width: 100% !important;
float: none !important;

CSS personalizat pentru formularul de conectare:

width: 100% !important;
padding: 0px !important;

Acest lucru va asigura că modulul de conectare se întinde pe toată lățimea rândului/coloanei, chiar și pe desktop.

Crearea formularului „Autentificat”.

Acum că versiunea „Deconectat” a formularului este completă, trebuie să creăm versiunea „Deconectat” care va avea conținut și stil diferit pentru a maximiza experiența utilizatorului.

Pentru a crea formularul de conectare „Deconectat”, duplicați formularul de conectare existent.

Apoi, actualizați eticheta pentru fiecare dintre formulare conexiunea respectiv.

Deschideți setările duplicate (formularul „Conectat”) și adăugați titlul site-ului ca conținut dinamic la titlul modulului formular de conectare.

Apoi deschideți setările de conținut dinamic pentru titlul site-ului și actualizați conținutul înainte și după după cum urmează:

• Înainte: „Încercați să vă deconectați de la Teme elegante”
• După: ". " 

Acest lucru va crea o notificare dinamică plăcută pentru utilizatorii care încearcă să se deconecteze de pe site.

Apoi adăugați următorul antet H3 în corp:

<h3>Are you sure?</h3>

Dacă ați văzut vreodată conținutul modulului de autentificare când v-ați conectat, știți că există un mesaj personalizat care include un link personalizat „deconectare”. Pentru ca acest link să arate ca un buton, trebuie să personalizăm setările fontului/textului link-ului, după cum urmează:

• Selectați fila Link sub opțiune Corpul textului.
• Font link: Work Sans
• Greutatea fontului link-ului: semi-aldine
• Stil font: TT
• Aliniere text link: centrat
• Culoare text link: #ffffff

NOTĂ: Nu veți putea previzualiza aceste rezultate până când nu vizualizați formularul pe o pagină live.

Sub filă Avansat, actualizați clasa CSS și CSS personalizat după cum urmează:

• Clasa CSS: et-logged-in-form

CSS personalizat pentru formularul de conectare:

display:none;

Partea 5: Adăugați cod personalizat

Pentru a adăuga CSS și JQuery personalizat necesare pentru funcționalitatea formularului de conectare pop-up, creați un nou modul Cod sub ultimul modul de conectare.

CSS

Deschideți setările modulului Cod și inserați următorul CSS în caseta de cod, asigurându-vă că includeți CSS-ul în etichetele de stil necesare.

/* hide popup section */
.et-popup-login {
  display: none;
}
 
/* hide login button when logged in */
.logged-in .et-popup-login-button {
  display: none !important;
}
 
/* hide logout button when logged out */
.et-popup-logout-button {
  display: none !important;
}
 
/* show logout button when logged in */
.logged-in .et-popup-logout-button {
  display: inline-block !important;
}
 
/* hide logged out form when logged in */
.logged-in .et-logged-out-form {
  display: none !important;
}
 
/* hide logged in form when logged out */
.et-logged-in-form {
  display: none !important;
}
 
/* show logged in form when logged in */
.logged-in .et-logged-in-form {
  display: block !important;
}
 
/* style logout link within logged in form */
.et-logged-in-form a {
  display: block;
  padding: 15px 1em;
  border-radius: 8px;
  background: #004e43;
  max-width: 400px;
  margin: 20px auto 0px;
}
.et-toggle-popup {
  cursor: pointer;
}
 
/* show hidden elements in visual builder */
body.et-fb .et-popup-login,
body.et-fb .et-logged-out-form {
  display: block !important;
}
body.et-fb .et-popup-login-button {
  display: inline-block !important;
}

Rețineți că CSS utilizează clasa „conectată” care este încorporată în WordPress pentru a ascunde/afișa butoanele de conectare/deconectare corespunzătoare și formulare Mesajul de conectare „Logged”/”Logged Out” de fiecare dată când utilizatorul este conectat sau deconectat.

JQuery

Sub eticheta de stil final, lipiți următorul JQuery, asigurându-vă că includeți codul în etichetele de script necesare.

(function ($) {
  $(document).ready(function () {
    $(".et-toggle-popup").click(function (e) {
      e.preventDefault();
      $(".et-popup-login").fadeToggle(500);
    });
  });
})(jQuery);

Acest fragment comută pur și simplu în secțiunea pop-up ori de câte ori utilizatorul face clic pe unul dintre cele trei elemente cu clasa " și-toggle-pop-up (butoanele de conectare și deconectare plus pictograma de prezentare „x”).

Vezi si: Divi: Cum să utilizați setările măștii de fundal și opțiunile de transformare a modelului

E gata !

Nu uitați să salvați modificările pe care le-ați făcut șablonului în generatorul de teme. Odată salvate, puteți vizualiza rezultatele pe o pagină live.

Rezultat final

Iată rezultatele finale pe computer, tabletă și telefon.

Observați cum se schimbă butonul de conectare și butonul de deconectare. Și, odată ce utilizatorul se conectează, acesta rămâne pe pagina curentă. 

În plus, formularul de conectare pop-up afișează conținut diferit de „avertisment” de fiecare dată când utilizatorul încearcă să se deconecteze.

Descărcați DIVI acum!!!

Concluzie.

Sperăm că crearea acestui formular de conectare pop-up și a butoanelor personalizate de conectare/deconectare vă va oferi o perspectivă asupra modului de utilizare creativ a formularului de conectare Divi. 

Simțiți-vă liber să ajustați designul și conținutul fiecărui formular de conectare (sau butoane) pentru a crea o experiență de conectare unică pe propriul site web.

De asemenea, sperăm că acest tutorial vă va inspira pentru următoarele proiecte Divi. Dacă aveți nelămuriri sau sugestii, găsiți-ne în secțiunea de comentarii pentru a discuta despre asta.

De asemenea, puteți consulta resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet.

Nu ezitați să consultați și ghidul nostru despre Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.

Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.

...