Cum să proiectați un formular de conectare în linie pentru un antet global personalizat în Divi

Crearea unui formular de conectare în linie pentru antetul dvs. poate fi un impuls minunat pentru experiența utilizatorului. Acestea sunt perfecte pentru site-urile de membru și magazinele online, deoarece facilitează autentificarea utilizatorilor în orice moment sau pe orice pagină a site-ului. În acest tutorial, vă vom arăta cum să proiectați un formular de conectare în linie pentru un utilizator de antet personalizat, Divi Theme Builder. Pentru a face acest lucru, vom construi un antet global receptiv simplu și apoi vom proiecta un formular de conectare compact în linie în partea dreaptă sus a antetului utilizând modulul de conectare Divi. Construcția necesită puțin CSS personalizat, dar odată ce totul este la locul său, va fi ușor să personalizați formularul de conectare în linie pentru a se potrivi cu orice design de antet cu ușurință, folosind opțiunile de proiectare încorporate ale Divi.

Să începem!

Trage cu ochiul

Iată o scurtă privire la antetul personalizat cu formularul de conectare în linie pe care îl vom construi în acest tutorial.

Și iată formularul de conectare online pe afișajul tabletei și al telefonului.

Iată mesajul și linkul „deconectare” care vor apărea când utilizatorii sunt conectați.

Descărcați GRATUIT aspectul antetului formularului de conectare în linie

Pentru a pune mâna pe aspect din acest tutorial, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi abonați și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Pentru a importa aspectul în pagina dvs., pur și simplu extrageți fișierul zip și adăugați unul dintre fișierele json în Divi Theme Builder folosind opțiunea Theme Builder Portability.

Să trecem la tutorial, nu-i așa?

Ce trebuie să începeți

Dacă nu ați făcut-o încă, instalați și activați tema Divi. Asta e cam tot ce trebuie să începi. Vom crea un nou șablon de antet de la zero cu Divi Theme Builder.

Adăugarea unui nou antet global

Pentru ca lucrurile să ruleze, trebuie să creăm un nou antet global pentru site-ul nostru. Pentru a face acest lucru, accesați tabloul de bord WordPress și navigați la Divi> Theme Builder.

În șablonul de site implicit, faceți clic pe „Adăugați antet global” și apoi pe „Creați antet global”.

Apoi selectați opțiunea pentru a construi de la zero.

Proiectarea antetului global Divi cu un formular de conectare în linie

Personalizarea secțiunii

Formați editorul Global Header Layout, veți putea crea antetul personalizat pentru site-ul dvs. de la zero. Pentru a începe, deschideți setările pentru secțiunea obișnuită și actualizați următoarele:

• Culoarea din stânga a gradientului de fundal:
• Culoarea dreaptă a gradientului de fundal:
• Direcția gradientului: 48 grade
• Căptușeală: 10 px sus, 10 px jos, 20 px stânga, 20 px dreapta

Pentru a face antetul personalizat mai receptiv, vom adăuga următorul CSS personalizat la Elementul principal al secțiunii.

display:flex;
justify-content:center;
align-items:center;

Adăugarea siglei antet la primul rând

Acum că secțiunea este gata, putem adăuga primul rând.

Adăugați rând

Adăugați un rând cu o coloană la secțiune.

Adăugați un modul de imagine cu imaginea logo-ului

În rândul cu o coloană, adăugați un modul de imagine. Aici vom adăuga sigla pentru antet.

Actualizați imaginea și marja modulului de imagine

Actualizați setările imaginii după cum urmează:

• Imagine: [adăugați sigla (aproximativ 64 px cu 64 px)]

• Marja: 20 px dreapta

Actualizați setările rândului

Înainte de a merge mai departe, deschideți setările pentru rând și actualizați următoarele:

• Utilizați lățimea personalizată a jgheabului: DA
• Lățimea jgheabului: 1
• Lățime: 25%
• Aliniere rând: stânga
• Căptușeală: 0 px sus, 0 px jos

Adăugarea formularului de conectare în linie la al doilea rând

Adăugați rând

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. Acesta va fi în esență rândul desemnat pentru sigla antetului nostru. 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 o structură cu o coloană la secțiune.

Adăugați un formular de autentificare

În interiorul rândului cu o coloană, adăugați un modul de conectare.

Ștergeți conținutul implicit

Sub setările de conectare, ștergeți titlul fals și conținutul corpului.

Adăugați formular de autentificare Clasă personalizată și CSS

Înainte de a ajunge prea departe în proiectarea formularului de conectare în linie, să adăugăm mai întâi clasa CSS și CSS personalizate la modulul de conectare. Acest lucru ne va permite să obținem structura de bază în linie a formularului înainte de a pune ultimele atingeri de design pe formular cu opțiunile încorporate ale Divi.

Sub fila Advanced, adăugați următoarea clasă CSS:

• Clasa CSS: header-login-form

Adăugați următoarele CSS personalizate în caseta CSS Descriere autentificare:

margin-bottom: 0px !important

Apoi adăugați următorul CSS personalizat în caseta CSS Formular de autentificare:

width: 100%;

Adăugați următoarele CSS personalizate în caseta CSS Fields Login:

padding: 5px 4% !important

Adăugați CSS personalizat la setările de aspect antet

Deoarece avem clasa CSS personalizată adăugată la modulul formular de conectare, putem adăuga CSS personalizat care va viza doar acest formular de conectare special.

Deschideți setarea de aspect antet și adăugați următoarele CSS personalizate:

.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ă fie afișate în linie (orizontal), să ascundă „ați uitat parola?” link și adăugați o mică marjă între câmpuri.

Setări rând

Înainte de a pune ultimele atingeri pe formularul de conectare în linie, să actualizăm setările rândului după cum urmează:

• Utilizați lățimea personalizată a jgheabului: DA
• Lățimea jgheabului: 1
• Alinierea rândurilor: corect
• Căptușeală: 0 px sus, 0 px jos

Setări de proiectare formular de autentificare

Acum suntem gata să actualizăm setările formularului de conectare. Deschideți setările modulului de conectare și actualizați următoarele:

• Folosiți culoarea de fundal: NU

Text de câmp și link

• Fundalul câmpurilor: Culoare: rgba (255.255.255,0.2)
• Culoare text câmpuri: #ffffff
• Fields Font: Lato
• Dimensiune text câmpuri: 14 px
• Alinierea textului: corect
• Link Font: Lato
• Stil Font Link: Subliniat
• Culoare text link: # ff3190

Design de butoane

• Dimensiune text buton: 15 px
• Culoarea fundalului butonului: # ff3190
• Lățimea chenarului butonului: 0 px
• Buton Font: Lato
• Garnitura de butoane: 2 px sus, 2 px jos
• Marja: 15 px de jos
• Căptușeală: 0 px sus, 0 px jos, 0 px stânga, 0 px dreapta

Adăugarea meniului la al doilea rând

Modul meniu

Cu formularul nostru de conectare în linie, putem adăuga meniul direct sub acesta.

Adăugați un modul de meniu sub modulul de formular de conectare.

Setări modul de meniu

Actualizați setările meniului după cum urmează:

• Culoare fundal: rgba (0,0,0,0)
• Font de meniu: Lato
• Greutate font meniu: îndrăzneț
• Culoare text meniu: #ffffff
• Dimensiune text meniu: 16 px
• Alinierea textului: corect
• Culoarea fundalului meniului derulant: #ffffff
• Culoare linie meniu derulant: rgba (0,0,0,0)
• Culoarea textului din meniul drop-down: # 000000
• Culoarea fundalului meniului mobil: #ffffff
• Culoarea textului meniului mobil: # 000000
• Culoare pictogramă coș de cumpărături: #ffffff
• Caută pictograma Culoare: #ffffff
• Culoare pictogramă meniu hamburger: #ffffff

Salvarea antetului formularului de conectare în linie

Asigurați-vă că salvați aspectul înainte de a ieși din editorul de aspect al antetului.

Apoi, salvați și setările Theme Builder.

Rezultate finale

Asta e!

Acum, să verificăm rezultatul final. Pentru a vizualiza rezultatul final, vizitați simplu o pagină de pe site-ul dvs. web.

Iată antetul afișat pe desktop.

Iată antetul formularului de conectare în linie de pe afișajul tabletei.

Și iată formularul de conectare în linie de pe afișajul telefonului. Observați și meniul mobil.

Iată ce va vedea utilizatorul odată conectat.

Gânduri finale

Acest antet global personalizat cu un formular de conectare în linie va fi cu siguranță la îndemână pentru orice site de membru sau magazin online. Cu doar puțin CSS personalizat, am reușit să convertim modulul de conectare Divi într-un formular elegant de conectare în linie, care va sta frumos în antetul oricărui site web. Sperăm că acest lucru vă va fi util pentru următorul dvs. proiect.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!