Cum să adăugați un formular de autentificare dropdown în antetul dvs. Divi

Dacă creați un site web de membru, este foarte necesar să vă gândiți la experiența de conectare. Sigur, puteți permite vizitatorilor să utilizeze pagina implicită de autentificare WordPress, dar le puteți facilita și includerea unui formular de conectare în antetul dvs. În acest caz, veți dori să declanșați formularul de conectare la clic, astfel încât să puteți economisi spațiu în antetul dvs. Exact asta vă vom arăta în tutorialul Divi de astăzi. Vom crea un antet global de la zero și vom include un formular de autentificare drop-down. Veți putea descărca gratuit fișierul JSON!

Să ajungem la asta.

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Descărcați gratuit șablonul Global Header

Pentru a pune mâna pe șablonul global gratuit de antet, 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 „resubscris” ș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!

1. Creați un nou șablon global de antet

Accesați Divi Theme Builder

Începeți accesând Divi Theme Builder din backend-ul site-ului dvs. WordPress. Odată ajuns acolo, faceți clic pe „Adăugați antet global”.

Adăugați un nou antet global

Va apărea un meniu derulant. Pentru a începe construirea de la zero, continuați selectând „Build Global Header”.

2. Construiți designul antetului

Adăugați secțiunea nr. 1

Imagine de fundal

Odată ajuns în editorul de șabloane, veți observa deja o secțiune acolo. Deschideți setările secțiunii și încărcați o imagine de fundal sau utilizați o culoare de fundal.

Spațiere

Treceți la fila de proiectare a secțiunii și modificați în continuare partea superioară și cea inferioară.

• Căptușeală superioară: 10 px
• Căptușeală inferioară: 10 px

Adăugați rândul la secțiune

Structura coloanei

Continuați adăugând un rând nou folosind următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și modificați setările de dimensionare după cum urmează:

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Egalizați înălțimile coloanei: Da
• Lăţime:
  • Desktop: 80%
  • Tabletă și telefon: 95%
• Lățime maximă: 2580 px

Spațiere

Modificați valorile de umplere în continuare.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px
• Căptușeală stângă: 1%
• Garnitura dreapta: 1%

Element principal CSS

Pentru a alinia automat coloanele pe verticală, vom adăuga următoarele linii de cod CSS la elementul principal al rândului în fila avansată:

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

Adăugați modulul Social Media Follow în coloana 1

Adăugați rețele sociale

Este timpul să adăugați module, începând cu un modul Social Follow Follow din coloana 1. Adăugați rețelele sociale la alegere.

Schimbați individual culoarea de fundal a fiecărei rețele sociale

Apoi, schimbați culoarea de fundal a fiecărei rețele sociale individual în alb.

• Culoare fundal: #ffffff

Setări pictograme

Reveniți la setările generale ale modulului și modificați culoarea pictogramei din fila design.

• Culoare pictogramă: # 141414

Frontieră

Aplicați câteva setări de colț rotunjit în setările de margine următoare.

• Toate colțurile: 100 px

Adăugați un modul buton la coloana 2

Adăugați o copie

În coloana 2, singurul modul de care avem nevoie este un modul buton. Adăugați o copie la alegere.

Aliniere buton

Schimbați alinierea modulului în continuare.

• Aliniere buton: dreapta

Setări buton

Apoi, stilizați butonul.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 12 px
• Culoarea textului butonului: #ffffff
• Culoarea fundalului butonului: # ff4700
• Lățimea chenarului butonului: 0 px
• Raza chenarului butonului: 0 px
• Distanța dintre litere și butoane: 2 px

• Buton Font: Prata
• Stilul fontului butonului: majuscule

Spațiere

Și completați setările butonului aplicând următoarele valori de umplere la setările de spațiere:

• Căptușeală superioară: 16 px
• Căptușeală inferioară: 16 px
• Căptușeală stângă: 24 px
• Căptușeală dreaptă: 24 px

Adăugați secțiunea 2

Culoare de fundal

Adăugați o altă secțiune chiar sub cea anterioară și utilizați următoarea culoare de fundal pentru aceasta:

• Culoare fundal: # fff4ef

Spațiere

Eliminați toate umpluturile implicite de sus și de jos din fila de proiectare următoare.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Adăugați rândul # 1

Structura coloanei

Continuați adăugând un rând nou folosind următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările de rând și modificați setările de dimensionare după cum urmează:

• Egalizați înălțimile coloanei: Da
• Lăţime:
  • Desktop: 80%
  • Tabletă și telefon: 95%
• Lățime maximă: 2580 px

Spațiere

Modificați și valorile de umplere în setările de spațiere.

• Căptușeală superioară: 5 px
• Căptușeală inferioară: 5 px
• Căptușeală stângă: 2%
• Garnitura dreapta: 2%

Setări coloana 2

Culoare de fundal

Apoi, deschideți setările coloanei 2 și aplicați o culoare de fundal numai pe tabletă și telefon.

• Desktop: /
• Tabletă și telefon: # f2e8e3

Spațiere

Adăugăm niște căptușeli de sus și de jos și pe dimensiuni mai mici de ecran.

• Căptușeală superioară:
  • Tabletă și telefon: 25 px
• Căptușeală inferioară:
  • Tabletă și telefon: 25 px

Adăugați un modul de meniu în coloana 1

Selectați Meniu

Apoi, vom adăuga un modul de meniu pe rând. Selectați un meniu la alegere.

Încărcați sigla

Încărcați o siglă în modulul de meniu.

Eliminați culoarea de fundal

Apoi, eliminați culoarea de fundal a meniului.

Setări text meniu

Treceți la fila de proiectare a modulului și stilizați textul meniului după cum urmează:

• Font meniu: Prata
• Culoare text meniu: # 111821
• Dimensiune text meniu: 18 px
• Înălțimea liniei meniului: 1.4em
• Alinierea textului: dreapta

Setări meniu derulant

Modificați și setările meniului derulant.

• Culoarea fundalului meniului derulant: # fff4ef
• Culoare linie meniu drop-down: # 191919
• Culoarea textului meniului drop-down: # 191919
• Culoarea fundalului meniului mobil: # fff4ef
• Culoarea textului meniului mobil: # 191919

Setări pictograme

Apoi, schimbați culorile pictogramei din setările pictogramelor.

• Culoare pictogramă coș de cumpărături: # 191919
• Culoare pictogramă de căutare: # 191919
• Culoare pictogramă meniu hamburger: # 191919

Dimensionare

Și completați setările modulului aplicând următoarele setări de dimensionare:

• Logo Lățime maximă: 50 px
• Lățime: 100%

3. Adăugați un formular de autentificare dropdown și faceți clic pe Funcționalitate

Adăugați Blurb Module în coloana 2

Adauga titlu

Acum că a fost construită baza antetului nostru, ne putem concentra pe crearea declanșatorului și a formularului drop-down de conectare. Primul lucru de care avem nevoie este un modul Blurb în coloana 2 a rândului nostru. Aici vom adăuga un titlu.

Selectați pictograma

Apoi, vom selecta o pictogramă.

Setări pictograme

Treceți la fila de proiectare a modulului și modificați setările pictogramei după cum urmează:

• Culoare pictogramă: #ffffff
• Pictogramă cerc: Da
• Culoarea cercului: # ff4700
• Plasare imagine / pictogramă: stânga

Setări text titlu

Apoi, stilizați textul titlului.

• Titlu Font: Lato
• Titlu Greutate font: greu
• Stilul fontului titlului: majuscule
• Dimensiune text titlu: 12 px
• Spațierea literelor de titlu: 3 px

Animaţie

De asemenea, eliminăm animația implicită a acestui modul din setările animației.

• Animație imagine / pictogramă: fără animație

Blurb Title CSS

Și vom adăuga o margine superioară la titlul blurb din fila avansată.

margin-top: 10px;

Poziţie

Nu în ultimul rând, vom repoziționa modulul în setările de poziție.

• Poziție: Absolută
• Locație: centru

Adăugați rândul # 2 la secțiunea # 2

Structura coloanei

Pentru a adăuga formularul de conectare, vom folosi un nou rând sub cel anterior, cu următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările de rând și modificați setările de dimensionare după cum urmează:

• Egalizați înălțimile coloanei: Da
• Lățime maximă: 2580 px

Spațiere

Modificați și valorile de umplere.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px
• Căptușeală stângă: 2%
• Garnitura dreapta: 2%

Adăugați modulul de conectare la coloana 2

Eliminați conținutul

Adăugați un modul de conectare la coloana 2. Asigurați-vă că casetele de conținut sunt goale.

Culoare de fundal

Schimbați culoarea de fundal în continuare.

• Culoare fundal: # ff4700

Setări câmpuri

Treceți la fila de proiectare și stilizați câmpurile.

• Culoare fundal câmpuri: rgba (0,0,0,0)
• Culoare text câmpuri: rgba (255,255,255,0,73)
• Câmpuri Stânga: 0px
• Câmpuri Căptușeală dreaptă: 0 px
• Fields Font: Lato
• Dimensiune text câmpuri: 16 px

• Înălțimea liniei câmpurilor: 1,8em
• Toate colțurile: 0 px
• Câmpuri Lățimea marginii inferioare: 1 px
• Câmpuri Culoare margine inferioară: #ffffff

Setări buton

Apoi, modificați setările butonului după cum urmează:

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 12 px
• Culoarea textului butonului: #ffffff
• Culoarea fundalului butonului: # 141414
• Lățimea chenarului butonului: 0 px
• Raza chenarului butonului: 0 px
• Distanța dintre litere și butoane: 2 px
• Buton Font: Prata

• Stilul fontului butonului: majuscule
• Căptușeală pentru butoane: 16 px
• Căptușeală pentru butoane: 16 px

Dimensionare

Asigurați-vă că și lățimea este „100%”.

• Lățime: 100%

Buton de autentificare CSS

Aplicați o margine superioară la caseta CSS din butonul de conectare din fila avansată.

margin-top: 30px;

Poziţie

Și repoziționați modulul în consecință:

• Poziție: Absolută
• Locație: dreapta sus
• Decalaj vertical: 1 px

Adăugați ID CSS la modulul Blurb din rândul # 1

Acum, că avem toate elementele de care avem nevoie, ne putem concentra asupra funcționalității de clic. Mai întâi, deschideți modulul Blurb și adăugați următorul ID CSS:

• ID CSS: divi-login-toggle

Adăugați ID CSS la modulul de conectare în rândul nr. 2

Deschideți modulul de conectare în continuare și aplicați următorul ID CSS:

• CSS ID: divi-login-form

Adăugați un modul de cod sub modulul de conectare

Apoi, adăugați un modul de cod chiar sub modulul de conectare.

Adăugați etichete stil și script

Pentru a crea funcționalitatea de clic, vom folosi câteva coduri CSS și JQuery. Pentru a ne pregăti pentru acel cod, vom adăuga etichete de stil (pentru codul CSS) și etichete de script (pentru codul JQuery).

Introduceți codul CSS între etichetele de stil

Plasați următoarele rânduri de cod CSS între etichetele de stil:

#divi-login-toggle {
cursor: pointer;    
}

#divi-login-form {
margin-top: -20px;
visibility: hidden;
opacity: 0;
  
-webkit-transition: all 0.2s ease !important;
-moz-transition: all 0.2s ease !important;
-o-transition: all 0.2s ease !important;
transition: all 0.2s ease !important;
}
  
.show-login-form {
visibility: visible !important;
margin-top: 0px !important;
opacity: 1 !important;
}

Inserați JQuery între etichetele de script

Și următorul cod între etichetele de script:

jQuery(document).ready(function($){

var loginForm =  $('#divi-login-form');

$('#divi-login-toggle').click(function() {

loginForm.toggleClass('show-login-form');

});
});

4. Salvați modificările Divi Theme Builder

Acum că totul este la locul său, singurul lucru rămas de făcut este să salvați toate modificările Divi Theme Builder și să vedeți rezultatul!

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Gânduri finale

În această postare, v-am arătat cum puteți deveni creativi cu antetul dvs. atunci când creați un site web de membru. Mai precis, v-am arătat cum să includeți un formular de autentificare dropdown care permite vizitatorilor dvs. să se conecteze la conturile lor fără a fi nevoie să accesați pagina de autentificare WordPress. Ați reușit să descărcați gratuit fișierul șablon antet JSON! Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.