Când vă creați antetul global, există o mulțime de lucruri pe care trebuie să le luați în considerare. Elementele pe care le puneți în antet ar trebui să vă ajute vizitatori pentru a naviga cu ușurință. Pentru a reduce timpul petrecut de oameni navigând, mulți designeri web optează pentru un antet superior fix, permițând vizitatori pentru a accesa imediat alte pagini sau publicații. Acest lucru este foarte util, dar atunci când creați un antet fix, o mare parte din înălțimea ferestrei dvs. de vizualizare vizitatori este ocupat, ceea ce permite mai puțin de cuprins pentru a se afișa deodată. Dacă nu ești pregătit să faci acest sacrificiu, știi că nu trebuie. Puteți beneficia de avantajele unui antet fix, permițând antetului dvs. general să dezvăluie când vizitatorii dvs. derulează în sus și să îl ascunde atunci când derulează în jos. Astăzi vă vom ghida prin ascunderea și dezvăluirea antetului dvs. global folosind Generatorul de teme Divi.

studiu

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

1. Accesați Divi Theme Builder și adăugați un nou șablon

Începeți accesând Divi Theme Builder.

Începeți crearea unui antet global

Acolo, faceți clic pe „Adăugați antet global” și selectați „Creare antet global”.

2. Începeți crearea unui antet global

Setări secțiune

Culoarea de fundal

În editorul de șabloane, veți observa o secțiune. Deschideți această secțiune și schimbați-i culoarea de fundal.

• Culoare fundal: #ffffff

dimensionarea

Accesați fila Design și atribuiți o lățime de 100% următoarei secțiuni.

• Lățime: 100%

spaţierea

Adăugați, de asemenea, o umplere personalizată și de jos.

• Căptușeală superioară: 2vw
• Garnitura de jos: 2vw

Cutie de umbră

De asemenea, vom aplica o umbră subtilă secțiunii noastre.

• Cutie de umbră Box Box: 50px
• Culoare umbră: rgba (0,0,0,0,08)

Cod CSS

Mai târziu, în acest tutorial, vom avea nevoie de un anumit cod personalizat pentru a avea loc efectul de derulare. Pentru a ne pregăti pentru acest lucru, adăugăm un ID CSS în secțiune.

• CSS ID: secțiunea globală de antet

Elementul principal

De asemenea, vom face din secțiune un antet fix prin adăugarea a două linii de cod CSS la elementul secțiunii principale.

position: fixed;top: 0;

Indicele Z

Acum, pentru a vă asigura că secțiunea noastră apare în partea de sus a paginii sau cuprins al postării, vom crește și indexul z în setările de vizibilitate.

• Indicele Z: 99999

Adăugați o linie nouă

Structura coloanei

După ce ați finalizat toate setările secțiunii, continuați să adăugați un nou rând la secțiune utilizând următoarea structură a coloanei:

dimensionarea

Fără a adăuga încă un modul, deschideți setările rândului și lăsați rândul să umple întreaga lățime a ecranului.

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

spaţierea

Ștergeți, de asemenea, toate captusirile implicite de sus și de jos.

• Garnitură superioară: 0px
• Garnitura de jos: 0px

Elementul principal

centrați-l cuprins a coloanei și permiteți coloanelor să rămână una lângă alta pe ecrane de dimensiuni mai mici, adăugând două linii de cod CSS la elementul principal al rândului.

display: flex;align-items: center;

Adăugați modulul de urmărire social media la coloana 2

Adăugați rețele sociale

Este timpul să adăugați module, începând cu un modul de urmărire a rețelelor sociale în coloana 1. Adăugați rețelele sociale pe care doriți să le afișați.

Resetați stiluri individuale de social media

Continuați prin resetarea stilurilor fiecărei rețele sociale la un nivel individual.

Adăugați un spațiu individual de rețea socială

De asemenea, va trebui să deschideți setările pentru fiecare rețea socială în mod individual și să adăugați umplutura inferioară în setările de spațiere.

• Garnitura de jos: 0.5vw

aliniere

După ce ați adăugat individual umplutura inferioară la fiecare rețea socială, reveniți la setările generale ale modului dvs. Comutați la fila de proiectare și schimbați alinierea modulului.

• Alinierea modulului: centru

Setări implicite ale pictogramei

De asemenea, modificați culoarea pictogramei din setările pictogramei.

• Culoare pictogramă: # 000000

Plasați cursorul pe setările pictogramei

Și schimbați culoarea pictogramei cu mouse-ul.

• Culoare pictogramă: # c2ab92

frontieră

Completați setările modulului adăugând un chenar de jos în setările de graniță.

• Lățimea marginii inferioare: 1px
• Culoarea marginii inferioare: # 000000

Adăugați un modul de meniu la coloana 2

Selectați meniul

Să trecem la coloana următoare! Adăugați un modul de meniu și selectați un meniu la alegere.

Descărcați logo-ul

Apoi încărcați un logo pe modul.

Eliminați culoarea de fundal

Și eliminați culoarea de fundal.

Dispoziţie

Apoi treceți la fila Proiectare și asigurați-vă că următoarele setări se aplică aspectului:

• Stil: Centrat
• Direcția meniului derulant: în jos

Text implicit din meniu

Continuați modificând setările textului meniului după cum urmează:

• Culoarea linkului activ: # c2ab92
• Font de meniu: Cormoran Garamond
• Culoarea textului: # 000000
• Dimensiunea textului meniului: 1vw (desktop), 2vw (tabletă), 3vw (telefon)

Treceți textul din meniu

Editați textul meniului în timpul rulării.

• Culoarea textului meniului: # c2ab92

Meniul de derulare

Apoi, schimbați culoarea liniei de meniu derulant în setările meniului derulant.

• Culoarea liniei derulante din meniu: # 000000

icoane

De asemenea, schimbăm culoarea pictogramei meniului hamburger din setările pictogramei.

• Culoarea pictogramei meniului Hamburger: # 000000

dimensionarea

Continuați modificând lățimea maximă a logo-ului pe diferite dimensiuni ale ecranului în setările de dimensionare.

• Lățimea maximă a logo-ului: 5vw (desktop), 10vw (tabletă), 13vw (telefon)

Meniu Link CSS

Și completați setările modulului adăugând două linii de cod CSS la linkul meniului modulului din fila avansată.

padding-bottom: 1vw;border-bottom: 1px solid #000;

Adăugați un modul text la coloana 3

Adăugați o copie

Să trecem la ultimul modul! Acolo singurul modul de care avem nevoie este un modul text.

Adăugați un link

Acest modul va servi drept CTA. Adăugați un link la alegere.

• URL-ul linkului modulului: #

Setări implicite ale textului

Treceți la fila de proiectare a modulului și modificați setările de text în consecință:

• Font text: Cormoran Garamond
• Culoarea textului: # 000000
• Dimensiunea textului: 1vw (desktop), 2vw (tabletă), 3vw (telefon)

Hover Parametri de text

Schimbați culoarea textului de la hover.

• Culoarea textului: # c2ab92

dimensionarea

Continuați prin modificarea parametrilor de dimensionare a modulului pe diferite dimensiuni de ecran.

• Lățime: 12vw (desktop), 18vw (tabletă), 22vw (telefon)
• Alinierea modulului: centru

spaţierea

Și adăugați niște umplutură de jos în setările de spațiere.

• Garnitura de jos: 0.5vw

frontieră

Completați parametrii modulului adăugând un chenar de jos.

• Lățimea marginii inferioare: 1px
• Culoarea marginii inferioare: # 000000

Adăugați un modul de cod la coloana 2

Introduceți codul JQuery și CSS

Odată ce ați stilat toate modurile din rând, este timpul să faceți efectul de dezvăluire / ascundere. Pentru a face acest lucru, va trebui să adăugăm cod personalizat la un modul de cod pe care îl vom plasa în coloana 2. Acest cod va funcționa pe orice secțiune pe care o adăugați, indiferent de modul în care vă proiectați antetul sau modulele. pe care îl utilizați, asigurați-vă că ați adăugat ID-ul CSS în secțiunea dvs. Plasați codul JQuery între etichetele de script și codul CSS între etichetele de stil așa cum se arată în ecranul de imprimare de mai jos.

jQuery(function($){ var topPosition = $(window).scrollTop(); $(window).scroll(function() {var scrollMovement = $(window).scrollTop();if(scrollMovement > topPosition) {$('#global-header-section').slideUp();} else {$('#global-header-section').slideDown();}topPosition = scrollMovement;}); });

main-content{margin-top: 7vw;}

3. Salvați modificările generatorului și afișați rezultatul

După ce ați completat antetul global, salvați toate modificările și vizualizați rezultatul pe dvs site-ul web!

studiu

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

Ultimele gânduri

În acest articol, v-am arătat cum să faceți ca antetul dvs. global să apară când derulați în sus și să îl ascundeți când derulați în jos. Acesta este un mod popular și eficient de a vă ajuta vizitatorii să navigheze ușor fără a prelua o parte din înălțimea ferestrei. De asemenea, puteți descărca gratuit fișierul 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.