Treci la conținutul principal

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

Divi: cea mai ușoară temă WordPress de utilizat

Divi: cea mai bună temă WordPress din toate timpurile!

mai mult Descărcări 901.000, Divi este cea mai populară temă WordPress din lume. Este completă, ușor de folosit și are mai mult de șabloane gratuite 62. [Recomandat]

Crearea unui formular de conectare online pentru antetul dvs. poate fi un impuls extraordinar pentru experiența utilizatorului. Acestea sunt excelente pentru site-urile de membru și magazinele online, deoarece permit utilizatorilor să se conecteze oricând și pe orice pagină de pe site. 

În acest tutorial, vă vom arăta cum să proiectați un formular de conectare online utilizând un antet personalizat pe Divi Theme Builder. Pentru a face acest lucru, vom crea un antet global receptiv simplu, apoi vom proiecta un formular de conectare online compact în partea dreaptă sus a antetului utilizând 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 utilizând opțiunile de proiectare. integrat 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ă funcționeze, trebuie să creăm un nou antet global pentru site-ul nostru. Pentru a face acest lucru, accesați tabloul de bord WordPress și accesați Divi> Theme Builder.

În șablonul implicit al site-ului web, faceți clic pe „Adăugați un antet global”, apoi faceți clic pe „Creați un 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.

Creați cu ușurință site-ul dvs. web cu Elementor

Elementor vă permite să creați cu ușurință orice design de site web cu un aspect profesionist. Nu mai plătiți scump pentru ceea ce puteți face singur. [Gratuit]

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:

Căutați cele mai bune teme și pluginuri WordPress?

Descărcați cele mai bune pluginuri și teme WordPress pe Envato și creați cu ușurință site-ul dvs. Web. Deja mai mult de descărcări 49.720.000. [EXCLUSIV]

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

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 vizitați o pagină de pe site-ul dvs. 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.

Creați ușor magazinul dvs. online

Descărcați gratuit WooCommerce, cele mai bune pluginuri de e-commerce pentru a vă vinde produsele fizice și digitale pe WordPress. [Recomandat]

formular de autentificare online

Ș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.

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ță la îndemână pentru orice site de membru sau magazin online. Cu doar un pic de CSS personalizat, am putut converti modulul de conectare Divi într-un formular elegant de conectare online, care va sta frumos în antetul oricărui site web. Sper că veți găsi acest lucru util pentru următorul dvs. proiect.

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

Pentru sănătatea ta!

Acest articol conține comentarii 0

Lasă un comentariu

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate *

Acest site folosește Akismet pentru a reduce nedorite. Aflați mai multe despre modul în care sunt utilizate datele dvs. de comentarii.

Inapoi in top
1 acțiuni
acțiune1
tweet
Registru