Cum să creați un antet Sticky cu opțiunile Sticky ale lui Divi

Modul în care folosim Divi Theme Builder la configurarea unui site web ne-a accelerat fluxul de lucru și a făcut totul mai ușor. Deși am reușit să creăm anteturi personalizate încă din prima zi, de când a apărut Divi Theme Builder, un lucru a fost solicitat continuu, care este posibilitatea de a crea un antet lipicios fără a utiliza cod suplimentar. Cu noile opțiuni lipicioase Divi, crearea unui antet lipicios a devenit mai ușor ca niciodată. Setările lipicioase oferite de Divi vă vor ajuta fără efort să transformați orice element de design lipicios și să atribuiți stiluri personalizate unei stări lipicioase, ceea ce are ca rezultat un design infinit și posibilități de experiență a utilizatorului.

În acest tutorial, vă vom arăta cum să creați un antet lipicios care conține următoarele:

• Antetul pe care îl creăm are o bară de antet de sus + o bară de meniu
• Întoarcem secțiunea care conține bara de meniu lipicioasă când treceți pe lângă ea, de îndată ce reveniți în partea de sus, bara de antet apare din nou
• Schimbăm stilurile de design ale secțiunii lipicioase (și ale elementelor sale) odată ce secțiunea este transformată lipicioasă

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. Construirea structurii elementului de antet într-un nou șablon de antet

Creați un nou șablon global de antet

Accesați Divi Theme Builder și începeți să construiți un nou antet global sau personalizat.

Secțiunea # 1 Setări

Fundal de gradient

Odată ajuns în editorul de șabloane, vom începe prin a construi structura elementelor din antetul nostru. În partea a doua a acestui tutorial, ne vom concentra pe aplicarea diferitelor setări lipicioase pentru a finaliza designul antetului lipicios. În editorul de șabloane, veți observa o secțiune. Deschideți acea secțiune și aplicați un fundal de gradient.

• Culoare 1: # ffba60
• Culoare 2: # ffd6a0
• Direcția gradientului: 90 grade
• Poziția inițială: 50%
• Poziție finală: 50%

Spațiere

Eliminați toate umpluturile implicite de sus și de jos în continuare.

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

Adăugați un rând nou

Structura coloanei

Pentru a crea bara noastră de antet de sus, vom adăuga un nou rând în secțiunea noastră 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
• Lățime: 95%
• Lățime maximă: 2580 px

Spațiere

Adăugați și câteva căptușeli personalizate de sus și de jos.

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

Element principal CSS

Și pentru a ne asigura că coloanele rămân unele lângă altele pe dimensiuni de ecran mai mici, vom adăuga o linie de cod CSS la elementul principal al rândului în fila avansată.

display: flex;

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

Adăugați rețele sociale la alegere

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 împreună cu linkurile corespunzătoare.

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

Continuați eliminând fiecare dintre culorile de fundal ale rețelei sociale în mod individual.

Setări pictograme

Apoi, reveniți la setările generale ale modulului și schimbați culoarea pictogramei din fila design.

• Culoare pictogramă: # 26333a

Spațiere

Adăugați și o marjă de sus.

• Marja superioară: 5 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.

Adăugați un link

Adăugați un link în continuare.

Aliniere buton

Apoi, treceți la fila de proiectare și schimbați alinierea butonului.

• Aliniere buton: dreapta

Setări buton

Stilăm și butonul.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 14 px
• Culoarea textului butonului: # 26333a
• Lățimea chenarului butonului: 2 px
• Culoarea chenarului butonului: # 26333a
• Raza chenarului butonului: 0 px

• Distanța dintre litere și butoane: 4 px
• Buton Font Greutate: Bold
• Stilul fontului butonului: majuscule
• Buton Afișare: Da

Spațiere

Și vom finaliza setările modulului adăugând niște umpluturi de sus și de jos la setările de spațiere.

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

Adăugați secțiunea 2

Fundal de gradient

Adăugați o altă secțiune obișnuită chiar sub cea anterioară. Această secțiune va fi dedicată meniului nostru și va deveni lipicioasă în a doua parte a acestui tutorial. După ce ați adăugat secțiunea, aplicați un fundal de gradient.

• Culoare 1: #ffffff
• Culoarea 2: # f7f7f7
• Tipul gradientului: liniar
• Direcția gradientului: 90 grade
• Poziția inițială: 25%
• Poziție finală: 25%

Spațiere

Treceți la fila de proiectare a secțiunii și eliminați toate umpluturile implicite de sus și de jos.

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

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou la secțiune utilizând următoarea structură de coloane:

Dimensionare

Treceți la fila de proiectare a rândului și modificați setările de dimensionare după cum urmează:

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Lățime maximă: 2580 px

Spațiere

Eliminați toate umpluturile implicite de sus și de jos în continuare.

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

Adăugați modulul de meniu în coloană

Selectați Meniu

Apoi, adăugați un modul de meniu în coloana rândului și selectați un meniu dinamic la alegere.

Încărcați sigla

Încărcați o siglă în continuare.

Eliminați culoarea de fundal

Apoi, eliminați culoarea de fundal albă implicită a modulului.

Setări text meniu

Treceți la fila de proiectare și stilizați și setările textului meniului.

• Greutate font meniu: îndrăzneț
• Culoare text meniu: # 002d4c
• Dimensiune text meniu: 15 px
• Spațiere scrisori meniu: 4 px
• Alinierea textului: dreapta

Setări text din meniul drop-down

Apoi, faceți câteva modificări la setările meniului derulant.

• Culoarea fundalului meniului derulant: #ffffff
• Culoare linie meniu derulant: # 002d4c

Setări pictograme

Împreună cu setările de pictograme.

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

Dimensionare

Și completați setările modulului adăugând o înălțime maximă a logo-ului la setările de dimensionare.

• Logo Înălțime maximă: 60 px

2. Aplicați efecte personalizate lipicioase

Întoarceți secțiunea 2 lipicioasă

Acum că am creat structura elementelor din antetul nostru, este timpul să transformăm cea de-a doua secțiune lipicioasă și să schimbăm stilul de design al acesteia și al elementelor sale într-o stare lipicioasă. Deschideți setările celei de-a doua secțiuni și treceți la fila avansată. Acolo, accesați setările efectelor de derulare și aplicați următoarele opțiuni lipicioase:

• Poziție lipicioasă: lipiți-vă de sus
• Decalaj superior lipicios: 0 px
• Limita inferioară lipicioasă: Niciuna
• Decalaj de la elementele lipicioase înconjurătoare: Da
• Stiluri implicite de tranziție și lipicioase: Da

Schimbați fundalul de gradient al secțiunii în stare lipicioasă

Acum că secțiunea noastră a fost transformată lipicioasă, va apărea o opțiune suplimentară în secțiunile, rândurile și setările modulului; opțiunea lipicioasă. Când faceți clic pe această pictogramă, veți putea crea un stil alternativ pentru elementul pe care l-ați selectat în timp ce se află într-o stare lipicioasă. Vom combina câteva dintre aceste setări de design lipicios pentru a personaliza aspectul antetului nostru lipicios pe scroll. Începeți accesând setările de fundal ale celei de-a doua secțiuni și aplicați următorul fundal de gradient lipicios:

• Culoare 1: # 26333a
• Culoare 2: # 1e272f

Întindeți rândul în stare lipicioasă

Apoi, vom deschide rândul care conține modulul de meniu și vom modifica lățimea într-o stare lipicioasă.

• Lățime: 95%

Îndepărtați căptușeala rândurilor în stare lipicioasă

Îndepărtăm și căptușeala superioară și inferioară a rândului nostru.

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

Schimbați culoarea textului meniului în stare lipicioasă

Apoi, vom schimba culoarea textului meniului într-o stare lipicioasă.

• Culoare text meniu: # ffbd68

Schimbați culorile pictogramei meniului în stare lipicioasă

Împreună cu culorile pictogramei.

• Culoare pictogramă coș de cumpărături: #ffffff
• Caută pictograma Culoare: #ffffff
• Culoare pictogramă meniu hamburger: #ffffff

Eliminați înălțimea logo-ului în stare lipicioasă

Și nu în ultimul rând, vom schimba înălțimea maximă a logo-ului la zero într-o stare lipicioasă. Acest lucru va elimina sigla din antetul nostru în întregime după ce setările lipicioase ale secțiunii sunt activate. Asta e! Asigurați-vă că salvați toate modificările Divi Theme Builder odată ce ați finalizat designul antetului și îl previzualizați pe site-ul dvs. web.

• Logo Înălțime maximă: 0 px

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 să creați un antet lipicios folosind Divi's Theme Builder și opțiuni lipicioase. De îndată ce secțiunea care conține meniul nostru devine lipicioasă, aplicăm și stiluri personalizate. Aceste opțiuni sunt făcute posibile de noile opțiuni lipicioase Divi care vă oferă nenumărate posibilități de a îmbunătăți experiența utilizatorului și designul pe care îl creați. Ați putut descărca gratuit și șablonul global de antet! 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.