Trebuie să creați antet global cu formă conexiune în DIVI?
Crearea unui formă autentificarea pe antetul dvs. poate fi un mare impuls pentru experiența utilizatorului.
Sunt ideale pentru site-urile web cu abonament și magazinele online, deoarece permit utilizatorilor să se conecteze în orice moment pe orice pagină a site-ul web.
În acest tutorial, vă vom arăta cum să proiectați un formă autentificare online pentru utilizatori pe un antet personalizat. Să începem!
studiu
Iată o previzualizare rapidă a antetului personalizat cu formularul de conectare pe care îl vom crea în acest tutorial.
Iată mesajul „deconectare” și linkul care se vor afișa atunci când utilizatorii sunt conectați.
Adăugarea unui nou antet global
Pentru ca lucrurile să meargă, trebuie să creăm un nou antet global pentru nostru site-ul web. Pentru a face acest lucru, accesați tabloul de bord WordPress și navigați la Divi > Theme Builder.
Pe șablon de site în mod implicit, faceți clic pe „Adăugați antet global”, apoi faceți clic pe „Creați antet global”.
Design antet global Divi cu un formular de conectare orizontal
Personalizați secțiunea
Din editorul Global Header Layout, puteți crea antetul personalizat al dvs site-ul web Pornind de la nimic. Pentru a începe, deschideți setările în secțiunea normală și actualizați următoarele:
- Culoare gradient de fundal stânga:
- Culoare gradient de fundal dreapta:
- Direcția gradient: 48 de grade
- Marja interioară: 10px Sus, 10px Jos, 20px Stânga, 20px Dreapta
Pentru a face antetul nostru mai receptiv, vom adăuga următorul CSS personalizat la elementul secțiunii principale.
display:flex;
justify-content:center;
align-items:center;
Adăugați sigla antetului pe prima linie
Acum că secțiunea este gata, putem adăuga prima linie.
Adăugați linie
Adăugați un rând la o coloană din secțiune.
Adăugați un modul Imagine cu o imagine de siglă
În rândul cu o singură coloană, adăugați un modul Imagine. Aici vom adăuga sigla antetului.
Actualizați imaginea și marginea modulului de imagine
Actualizați setările imaginii după cum urmează:
- Imagine: [adăugați sigla (aprox. 64 x 64 px)]
- Marja: 20px dreapta
Actualizați parametrii liniei
Înainte de a merge mai departe, deschideți setările liniei și actualizați următoarele:
- Utilizați lățime personalizată a jgheabului: DA
- Distanța între coloane: 1
- Lățime maximă: 25%
- Alinierea: stânga
- Marja internă: 0px de sus, 0px de jos
A fost adăugat un formular de conectare orizontal pe a doua linie
Adăugați linie
Acum că primul rând este gata, veți observa în editor că primul rând va ocupa 25% din secțiunea din stânga. Aceasta va fi practic linia desemnată pentru logo-ul nostru antet. Trebuie să creăm un rând de secțiune pentru formularul de conectare și meniul din partea dreaptă.
Adăugați un al doilea rând cu structură la o coloană din secțiune.
Adăugați un formular de autentificare
În rândul cu o singură coloană, adăugați un modul „Conectare”.
Eliminați conținutul implicit
Sub setările modulului de conectare, eliminați titlul fals și conținutul corpului.
Adăugați o clasă personalizată pentru formularul de conectare și CSS
Înainte de a merge prea departe în proiectarea formularului de conectare, să adăugăm mai întâi clasa CSS și CSS personalizat la modulul Login. Acest lucru va configura structura de bază online a formularului înainte de a pune ultimele modificări asupra designului formularului cu opțiunile încorporate ale Divi.
Consultați, de asemenea, ghidul nostru Cum să creați un meniu lateral alunecant și receptiv în DIVI
Sub fila Avansat, adăugați următoarea clasă CSS:
- Clasa CSS: header-login-form
Adăugați următorul CSS personalizat la caseta CSS cu descrierea conexiunii:
margin-bottom: 0px !important
Apoi adăugați următorul CSS personalizat în zona CSS a formularului de conectare:
width: 100%;Adăugați următorul CSS personalizat în zona CSS Câmpuri de conectare:
padding: 5px 4% !important
Adăugați CSS personalizat la setările de aspect al antetului
Deoarece am adăugat clasa noastră CSS personalizată la modulul formularului de conectare, putem adăuga CSS-ul nostru personalizat care va viza doar acel formular de conectare anume.
Citiți și tutorialul nostru pe Cum se creează pagina de blog cu modulul Blog cu DIVI
Deschideți setarea de aspect al antetului și adăugați următorul CSS personalizat:
.header-login-form .et_pb_login_form form {
display: flex;
justify-content: flex-end;
align-items: center;
}
.header-login-form .et_pb_login_form .et_pb_contact_form_field {
padding-bottom: 0px;
margin-right: 5px;
}
.header-login-form .et_pb_forgot_password {
display:none;
}Acest CSS va face ca câmpurile de conectare și butonul să afișeze în linie (orizontal), mesajul „Ați uitat parola?” va fi ascuns și va fi adăugată o mică marjă între câmpuri.
Setări de linie
Înainte de a pune ultimele remedii pe formularul de autentificare, să actualizăm parametrii de linie după cum urmează:
- Utilizați lățimea jgheab personalizată: DA
- Distanța între coloane: 1
- Alinierea: dreapta
- Marja internă: 0px de sus, 0px de jos
Setări de proiectare pentru formularul de autentificare
Acum suntem gata să actualizăm setările formularului de conectare. Deschideți setările modulului Connect și actualizați următoarele:
- Utilizați culoarea de fundal: NU
Câmp și text de legătură
- Câmpuri de culoare de fundal: rgba(255,255,255,0.2)
- Câmpuri de culoare text: #ffffff
- Font câmpuri: Lato
- Câmpuri pentru dimensiunea textului: 14 px
- Aliniere text: dreapta
Proiectare buton
- Utilizați stiluri personalizate pentru Buton: NU
- Dimensiunea textului butonului: 15px
- Buton de fundal: #ff3190
- Buton pentru lățimea chenarului: 0 pixeli
- Font pentru buton: Lato
- Buton Marjă: 2px Sus, 2px Jos
- Buton de umplutură: 15px de jos
- Marja interioară: 0px Sus, 0px Jos, 0px Stânga, 0px Dreapta
Adăugarea meniului la a doua linie
Modul de meniu
Cu formularul nostru de conectare activat, putem adăuga meniul direct de mai jos.
Adăugați un modul Meniu sub modulul Conectare.
Setări modul modul
Actualizați setările meniului după cum urmează:
- Fundal: rgba(0,0,0,0)
- Meniu font: Lato
- Meniu Soft Light: Bold
- Culoarea textului meniului: #ffffff
- Dimensiunea textului meniului: 16px
- Aliniere text: dreapta
- Culoarea de fundal a meniului drop-down: #ffffff
- Culoarea rândului dropdown: rgba(0,0,0,0)
- Culoarea textului meniului derulant: #000000
- Culoarea de fundal a meniului mobil: #ffffff
- Culoarea textului meniului mobil: #000000
- Culoarea pictogramei coș: #ffffff
- Culoarea pictogramei de căutare: #ffffff
- Culoarea pictogramei meniului Hamburger: #ffffff
Salvarea antetului formularului de conectare
Asigurați-vă că salvați aspectul înainte de a părăsi editorul de antet.
Apoi, salvați și setările Theme Builder.
Rezultate finale
E gata !
Acum să vedem rezultatul final. Pentru a vedea rezultatul final, tot ce trebuie să faci este să vizitezi o pagină de pe site-ul tău.
Și asta este ceea ce va vedea utilizatorul atunci când este conectat.
Descărcați DIVI acum!!!
Concluzie
Acest antet global personalizat cu un formular de conectare va fi cu siguranță util pentru orice site web cu abonament sau magazin online.
Cu doar un pic de CSS personalizat, am reușit să transformăm modulul de conectare al Divi într-un formular elegant de autentificare care se va potrivi perfect în antetul oricărui site web.
Sper că acest lucru va fi util pentru următorul dvs. proiect. Dacă aveți nelămuriri sau sugestii, găsiți-ne în secțiunea de comentarii pentru a discuta despre asta.
Cu toate acestea, puteți consulta și resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la 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.
...
