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.
Ș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.
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”.
Apoi selectați opțiunea Construiți 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
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ă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 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.
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)]
- Marja: 20px dreapta
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ă
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 un formular de autentificare
În rândul unei coloane, adăugați un modul de conectare.
Eliminați conținutul implicit
În setările de conectare, ștergeți titlul fals și conținutul corpului.
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
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.
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ă
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
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
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
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.
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
Salvarea antetului formularului de conectare
Asigurați-vă că salvați aspectul înainte de a ieși din Editorul de aspect antet.
Apoi, de asemenea, salvați setările generatorului de temă.
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.
Iată antetul formularului de conectare online de pe ecranul tabletei.
Și iată formularul de conectare online de pe ecranul telefonului. Rețineți și meniul mobil.
Și asta este ceea ce va vedea utilizatorul atunci când este conectat.
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!