Cum să vă animați antetul global cu Divi

Antetul dvs. este una dintre cele mai importante părți ale site-ului dvs. web. Vă conectează paginile, postările și îndemnurile. Este, de asemenea, unul dintre lucrurile pe care vizitatorii dvs. le caută automat, astfel încât să nu piardă timpul găsind ceea ce caută. Dacă căutați o modalitate de a vă sublinia antetul, vă veți bucura de această postare. Vă vom arăta cum să vă animați antetul global personalizat folosind Divi's Theme Builder. Posibilitățile sunt nelimitate, dar vă vom arăta două exemple de animație cu care puteți începe imediat. Veți putea descărca gratuit fișierele JSON!

Să ajungem la asta.

previzualizare

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

Exemplul nr. 1

Desktop

Mobil

Exemplul nr. 2

Desktop

Mobil

Descărcați gratuit antetul global animat

Pentru a pune mâna pe antetul global animat gratuit, mai întâi va trebui 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!

Abonați-vă la canalul nostru Youtube

1. Accesați Divi Theme Builder și începeți să creați antet global

Accesați Divi Theme Builder

Începeți accesând Divi Theme Builder în backend-ul WordPress.

Construiți Header Global From Scratch

Faceți clic pe „Add Global Header” și continuați selectând „Build Global Header”.

2. Construiți proiectarea globală a blocurilor de antet

Setări secțiune

Spațiere

Odată ce vă aflați în editorul de șabloane, puteți începe să creați antetul global. Ne asigurăm că avem un design de tip „bloc”, astfel încât să putem adăuga, mai târziu, animații la două containere diferite; coloana + modul. Deschideți secțiunea pe care o puteți observa în editorul de șabloane și eliminați toate umpluturile implicite de sus și de jos.

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

Box Shadow

Adăugați o umbră de cutie în continuare.

• Puterea neclarității umbrei cutiei: 80 px
• Culoare umbră: rgba (13,60,216,0,24)

Indicele Z

Și asigurați-vă că măriți și indexul z al secțiunii în fila avansată. Acest lucru se va asigura că conținutul global al antetului va apărea deasupra întregului conținut de pagină / postare.

• Indicele Z: 99999

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

Fără a adăuga încă module, deschideți setările rândului și permiteți rândului să ocupe întreaga lățime a ecranului.

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Egalizați înălțimile coloanei: Da
• Lățime: 100%
• Lățime maximă: 100%

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

Vizibilitate

Asigurați-vă că setați deversările rândului la „vizibile”.

• Overflow orizontal: vizibil
• Overflow vertical: vizibil

Setări coloană (toate cele trei)

Culoare de fundal

După ce ați completat setările rândului, va trebui să stilizați și coloanele. Deschideți fiecare dintre coloane și schimbați culoarea de fundal în consecință:

• Coloana 1 Culoare fundal: #efefef
• Coloana 2 Culoare fundal: # ffcb0f
• Coloana 3 Culoare fundal: # 2848ff

Spațiere

Adăugați niște umpluturi personalizate, de sus și de jos, la fiecare coloană.

• Căptușeală superioară: 0,5vw (desktop), 1vw (tabletă și telefon)
• Căptușeală inferioară: 0,5vw (desktop), 1vw (tabletă și telefon)

Elementul principal

Și pentru a ne asigura că întregul conținut al coloanei este centrat vertical, vom adăuga trei linii de cod CSS la elementul principal al fiecărei coloane.

display: flex;
flex-direction: column;
justify-content: center;

Coloana 1 Index Z

Nu în ultimul rând, deschideți setările coloanei 1 și măriți indexul z în setările de vizibilitate.

• Indicele Z: 10

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

Selectați Meniu

Este timpul să adăugați module, începând cu un modul de meniu în coloana 1. Selectați un meniu la alegere.

Încărcați sigla

Încărcați logo-ul dvs. în continuare.

Eliminați fundalul

Continuați eliminând culoarea de fundal a modulului.

Aspect

Treceți la fila de proiectare și asigurați-vă că următoarele setări se aplică aspectului:

• Stil: aliniat la stânga
• Direcția meniului drop-down: în jos

Setări text meniu

Stilizați setările de text în continuare:

• Font de meniu: Montserrat
• Culoare text meniu: # 000000
• Dimensiune text meniu: 0,7vw (Desktop), 2vw (tabletă), 3vw (telefon)

Setări meniu derulant

Împreună cu setările meniului derulant.

• Culoare linie meniu derulant: #ffffff

Setări pictograme

Și schimbați și culoarea pictogramei meniului hamburger.

• Culoare pictogramă meniu hamburger: # 2848ff

Dimensionare

Continuați prin modificarea lățimii maxime a logo-ului pe diferite dimensiuni ale ecranului.

• Lățimea maximă a siglei: 6vw (desktop), 9vw (tabletă), 13vw (telefon)

Spațiere

Și completați setările modulului adăugând niște margini stânga și dreapta.

• Marja stângă: 2vw
• Marja dreaptă: 2vw

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

Introduceți codul CSS pentru receptivitatea VW

Acum, în modulul de meniu, am folosit unitatea de lățime a ferestrei pentru dimensiunea textului și valorile de spațiere. Am făcut acest lucru pentru a ne asigura că puteți plasa până la 8 elemente de meniu pe diferite dimensiuni ale ecranului desktop, fără ca acesta să se împartă în două linii. Va trebui să ne asigurăm că spațiul dintre elementele de meniu este creat și cu unitatea vw. Pentru aceasta, vom adăuga un modul de cod în coloana 1 și vom introduce următoarele linii de cod CSS:

<style>
.et-menu>li {
padding-left: 1vw !important;
padding-right: 1vw !important;
}
</style>

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

Adăugați rețele sociale

În coloana următoare, vom avea nevoie de un modul de urmărire pe rețelele sociale. Adăugați rețelele sociale la alegere.

Resetați individual stilurile de rețea socială

Continuați resetând setările fiecărei rețele.

Aliniere

Completați setările modulului modificând alinierea modulului.

• Alinierea modulului: centru

Adăugați un modul buton la coloana 3

Adăugați o copie

Treceți la următoarea și ultima coloană. Acolo, vom avea nevoie doar de un modul buton. Adăugați o copie la alegere.

Aliniere

Treceți la fila de proiectare și schimbați alinierea butonului.

• Aliniere buton: centru

Setări buton

Completați setările modulului stilizând butonul.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 1vw (desktop), 1,2vw (tabletă), 2vw (telefon)
• Culoarea textului butonului: #ffffff
• Lățimea chenarului butonului: 0 px

• Raza chenarului butonului: 0 px
• Buton Font: Montserrat
• Buton Font Greutate: Ultra Bold
• Stilul fontului butonului: majuscule

3. Adăugați animație de potrivire la elemente

Global Header Animation Combo # 1

Coloana 1 Animație

Acum că am construit antetul global, este timpul să adăugați animațiile! Pentru a recrea prima animație, deschideți setările coloanei 1 și adăugați următoarea animație:

• Stil de animație: Zoom
• Direcția animației: sus
• Animație Opacitate de pornire: 100%

Coloana 2 Animație

Adăugați următoarele setări de animație în coloana 2 următoare:

• Stil de animație: Zoom
• Direcția animației: Jos
• Întârziere animație: 500 ms
• Animație Opacitate de pornire: 100%

Coloana 3 Animație

Completați setările coloanei atribuind următoarea animație coloanei 3:

• Stil de animație: Zoom
• Direcția animației: sus
• Întârziere animație: 1000 ms
• Animație Opacitate de pornire: 100%

Animații modul (toate cele trei module)

După ce ați finalizat setările coloanei, deschideți fiecare dintre module în mod individual și utilizați următoarea animație pentru acestea:

• Stil de animație: Fade
• Întârziere animație: 1500 ms

Combo global de animație antet # 2

Coloana 1 Animație

Doriți să recreați în schimb al doilea set de animație? Deschideți setările coloanei 1 și adăugați următoarea animație:

• Stil de animație: Slide
• Direcția animației: sus
• Animație Opacitate de pornire: 100%

Coloana 2 Animație

Utilizați următoarele setări de animație pentru coloana 2 următoare:

• Stil de animație: Slide
• Direcția animației: sus
• Întârziere animație: 500 ms
• Animație Opacitate de pornire: 100%

Coloana 3 Animație

Și completați setările coloanei aplicând următoarele setări de animație la coloana 3:

• Stil de animație: Slide
• Direcția animației: sus
• Întârziere animație: 1000 ms
• Animație Opacitate de pornire: 100%

Animații modul (toate cele trei module)

Apoi, deschideți fiecare modul individual și adăugați următoarea animație:

• Stil de animație: Slide
• Direcția animației: Jos
• Întârziere animație: 1500 ms

4. Salvați modificările constructorului și vedeți rezultatul

După ce ați completat setările de animație, puteți salva antetul global, ieși din Theme Builder și vizualiza rezultatul pe site-ul dvs. web!

previzualizare

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

Exemplul nr. 1

Desktop

Mobil

Exemplul nr. 2

Desktop

Mobil

Gânduri finale

În acest tutorial, v-am arătat cum să vă animați antetul global folosind opțiunile încorporate ale Divi și Theme Builder. Acesta este un mod excelent de a atrage atenția asupra antetului site-ului dvs. web. Cu opțiunile de animație încorporate ale Divi, posibilitățile sunt nelimitate. Pentru a vă ajuta să începeți, v-am arătat două exemple diferite. Ați putut descărca gratuit fișierele JSON!

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.