Crearea unui formă Conectarea în linie pentru antetul dvs. poate fi un impuls extraordinar pentru experiența utilizatorului. Sunt perfecte pentru site-urile de membru și magazinele online, deoarece permit utilizatorilor să se conecteze oricând și pe orice pagină a site-ului. 

În acest tutorial, vă vom arăta cum să proiectați un formă online folosind un antet personalizat pe Divi Theme Builder. Pentru a face acest lucru, vom crea un antet global simplu receptiv și apoi vom proiecta un formă autentificare online compactă în partea dreaptă sus a antetului folosind modulul de conectare Divi. Construirea necesită un pic de cod CSS personalizat, dar odată ce totul este la locul său, va fi ușor să personalizați formularul de conectare online pentru a se potrivi cu ușurință cu orice design de antet folosind opțiunile de design ale serviciilor integrate Divi.

Prezentare generală a rezultatelor

Iată o prezentare rapidă a antetului personalizat cu formularul de conectare online pe care îl vom crea în acest tutorial.

Formular de conectare Divi

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

Iată mesajul și linkul de deconectare care vor fi afișate când utilizatorii sunt conectați.

formular de autentificare online

Ce ai nevoie pentru a începe

Dacă nu ați făcut-o deja, instalați și activați tema Divi . Este cam tot ce ai nevoie pentru a începe. Vom crea un nou aspect de șablon de antet de la zero cu Divi Theme Builder.

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” și apoi pe „Creați antet global”.

Crearea capului diviziei globale

Apoi selectați opțiunea Construiți de la zero.

Construind de la zero

Proiectați antetul global Divi cu un formular de conectare online

Personalizarea secțiunii

Din Global Header Layout Editor, veți putea crea complet antetul personalizat al site-ului dvs. Pentru a începe, deschideți setările obișnuite ale secțiunii și actualizați următoarele:

  • Gradientul fundalului de culoare stânga:
  • Gradientul de fundal drept:
  • Direcția gradientului: 48 de grade
  • Padding: 10 pixeli în partea de sus, 10 pixeli în partea de jos, 20 pixeli în stânga, 20 pixeli în dreapta
Personalizați în cap divii

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;

Adaugă cod css divi

Adăugați sigla antetului pe prima linie

Acum că secțiunea este gata, putem adăuga prima linie.

Adăugați un rând

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

Adăugați o coloană antet divi

Adăugați un modul de imagine cu o imagine logo

În rândul unei singure coloane, adăugați un modul de imagine. Aici vom adăuga sigla pentru antet.

Adăugați o imagine a modulului divi

Actualizați imaginea și marginea modulului de imagine

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

  • Imagine: [adăugați logo (aproximativ 64 pixeli pe 64 pixeli)]
Personalizați imaginea și marja sa de diviziune
  • Marja: 20px dreapta
Modificați marja dreaptă divi

Actualizați parametrii liniei

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

  • Utilizați o lățime personalizată a jgheabului: DA
  • Lățimea jgheabului: 1
  • Lățime: 25%
  • Alinierea rândurilor: stânga
  • Garnitură: 0px înaltă, 0px mică
Modificați parametrii liniei divi

Adăugarea formularului de conectare online la a doua linie

Adăugați un 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. Aceasta va fi practic linia desemnată pentru sigla noastră de antet. Trebuie să creăm o linie de secțiune pentru formular și meniul de conectare online din partea dreaptă.

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

Adăugați o nouă coloană divi în cap

Adăugați un formular de autentificare

În rândul unei coloane, adăugați un modul de conectare.

Adăugați un formular de conectare divi

Eliminați conținutul implicit

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

Eliminați conținutul implicit

Adăugați un formular de autentificare și o clasă CSS personalizată

Înainte de a merge prea departe în proiectarea formularului de conectare online, să adăugăm mai întâi clasele CSS și CSS personalizate la modulul de conectare. Acest lucru ne va permite să configurăm structura online de bază a formularului înainte de a pune atingerea finală a designului pe formular cu opțiunile integrate Divi.

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

  • Clasa CSS: antet-login-formular

Adăugați următorul CSS personalizat în zona CSS a descrierii conexiunii:

margin-bottom: 0px !important

Apoi adăugați următorul CSS personalizat în zona CSS a formularului de autentificare:

width: 100%;

Adăugați următoarea CSS personalizată în caseta CSS câmpuri de conexiune:

padding: 5px 4% !important

Personalizați codul divi css

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

Deoarece avem clasa noastră CSS personalizată adăugată la modulul de formular de autentificare, putem adăuga CSS-ul nostru personalizat care va viza doar acest formular de autentificare.

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ă apară în linie (orizontal), să ascundă linkul „Ați uitat parola?”. »Și adăugați o mică marjă între câmpuri.

Personalizați formularul divi

Setări de linie

Înainte de a pune punctele finalizate pe formularul de conectare online, actualizăm parametrii liniei după cum urmează:

  • Utilizați o lățime personalizată a jgheabului: DA
  • Lățimea jgheabului: 1
  • Alinierea liniei: dreaptă
  • Garnitură: 0px înaltă, 0px mică
Folosiți chenare speciale

Setări de proiectare pentru formularul de autentificare

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

  • Folosiți culoarea de fundal: NU
Folosiți culoarea de fundal divi
Câmp și text de legătură
  • Fundal de câmp: Culoare: rgba (255,255,255,0.2)
  • Culoarea textului câmpului: #ffffff
  • Poliția de teren: Lato
  • Dimensiunea textului câmpului: 14px
  • Aliniere text: corect
  • Font de legătură: Lato
  • Stil de font de legătură: subliniat
  • Culoarea textului legăturii: # ff3190
Personalizați formularul de conectare al modulului de culoare
Proiectare buton
  • Dimensiunea textului butonului: 15px
  • Culoarea fundalului butonului: # ff3190
  • Lățimea marginii butonului: 0px
  • Button font: Lato
  • Căptușirea butoanelor: 2px în partea de sus, 2px în partea de jos
  • Marja: 15px redusă
  • Căptușire: 0px în partea de sus, 0px în partea de jos, 0px în stânga, 0px în dreapta
formular de autentificare online

Adăugarea meniului la a doua linie

Modul de meniu

Cu formularul nostru de conectare online, putem adăuga meniul direct mai jos.

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

Introduceți un modul de meniu divi

Setări modul modul

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

  • Culoare fundal: rgba (0,0,0,0)
  • Font de meniu: Lato
  • Greutatea fontului din meniu: îndrăzneț
  • Culoarea textului meniului: #ffffff
  • Dimensiunea textului meniului: 16px
  • Aliniere text: corect
  • Culoarea fundalului meniului drop-down: #ffffff
  • Culoarea liniei din meniul derulant: rgba (0,0,0,0)
  • Culoarea textului din meniul derulant: # 000000
  • Culoarea fundalului meniului mobil: #ffffff
  • Culoarea textului meniului mobil: # 000000
  • Culoare pictogramă coș: #ffffff
  • Culoarea pictogramei de căutare: #ffffff
  • Culoarea pictogramei meniului hamburger: #ffffff
Personalizați culoarea modulului divi

Salvarea antetului formularului de conectare

Asigurați-vă că salvați aspectul înainte de a ieși din Editorul de aspect antet.

Buton de închidere cap Divi

Apoi, de asemenea, salvați setările generatorului de temă.

Salvați modificările antetului de creație divi

Rezultate finale

Asta e!

Acum să vedem rezultatul final. Pentru a vedea rezultatul final, pur și simplu accesați o pagină a dvs site-ul web.

Iată antetul de pe ecranul desktopului.

Meniul rezultat final cu forum de conexiune divi

Iată antetul formularului de conectare online de pe ecranul tabletei.

formular de autentificare online

Și iată formularul de conectare online de pe ecranul telefonului. Rețineți și meniul mobil.

Previzualizare pe telefon

Și asta este ceea ce va vedea utilizatorul atunci când este conectat.

Ce este vizibil atunci când utilizatorul este conectat divi

Ultimele gânduri

Acest antet global personalizat cu un formular de conectare online va fi cu siguranță util pentru orice site de membru sau magazin online. Cu doar un pic de CSS personalizat, am putut converti modulul de conectare al Divi într-un formular elegant de conectare online, care ar arăta bine în antetul oricărui site-ul web. Sper că acest lucru este de ajutor pentru următorul tău proiect.

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

Pentru sănătatea ta!