Cum să micșorați dimensiunea antetului global atunci când derulați cu Divi's Theme Builder

Când proiectați un antet global fix, vă recomandăm să micșorați înălțimea antetului atunci când vizitatorii dvs. derulează. Ajută la reducerea spațiului pe care îl ocupă antetul global în înălțimea ferestrei vizitatorilor. În acest tutorial, vă vom ghida prin procesul respectiv. Vom începe prin a construi meniul și apoi vom adăuga câteva coduri JQuery și CSS pentru a declanșa efectul. 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!

Abonați-vă la canalul nostru Youtube

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

Accesați Divi Theme Builder

Începeți accesând Divi Theme Builder.

Începeți să creați antet global

Apoi, faceți clic pe „Build Global Header” și selectați „Build Global Header”.

2. Începeți să creați antet global

Setări secțiune

Culoare de fundal

Odată ce vă aflați în editorul de șabloane, veți observa o secțiune. Deschideți secțiunea și schimbați culoarea de fundal în alb.

• Culoare fundal: #FFFFFF

Dimensionare

Treceți la fila de proiectare a modulului și modificați lățimea.

• Lățime: 100%

Spațiere

Modificați și căptușeala superioară și inferioară a secțiunii.

• Căptușeală superioară: 2vw
• Căptușeală inferioară: 2vw

Box Shadow

Și separați conținutul paginii de antetul global adăugând o umbră de casetă subtilă la secțiunea următoare.

• Puterea neclarității umbrei cutiei: 50 px
• Culoare umbră: rgba (0,0,0,0.13)

ID CSS

Apoi, adăugați un ID CSS la secțiune. Mai târziu, în tutorial, vom folosi acest ID CSS pentru a crea efectul de antet global care se micșorează pe scroll.

• CSS ID: secțiune-padding

Elementul principal

Treceți la fila avansată, accesați setările CSS personalizate și fixați secțiunea prin adăugarea a două linii de cod CSS la elementul principal al secțiunii.

position: fixed;
top: 0;

Indicele Z

Pentru a ne asigura că secțiunea rămâne în partea de sus a întregii pagini și a conținutului postării, vom mări și indexul secțiunii z.

• Indicele Z: 99999

Adăugați un rând nou

Structura coloanei

După ce ați completat setările coloanei, continuați adăugând un rând nou folosind următoarea structură a coloanei:

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și modificați dimensiunea în consecință:

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

Spațiere

Eliminați umplutura implicită de sus și de jos a rândului în continuare.

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

ID CSS

Apoi, accesați fila avansată și adăugați un ID CSS pe rând. Vom avea nevoie de acest ID CSS mai târziu în tutorial pentru a face efectul de micșorare să funcționeze.

• ID CSS: lățimea rândului

Elementul principal

Nu în ultimul rând, pentru a ne asigura că toate coloanele rămân unele lângă altele pe dimensiuni de ecran mai mici și pentru a centra tot conținutul coloanei, vom adăuga două linii de cod CSS la elementul principal al rândului.

display: flex;
align-items: center;

Adăugați modulul de imagine în coloana 1

Încărcați sigla

Este timpul să adăugați module, începând cu un modul de imagine în coloana 1. Încărcați un logo cu un fundal transparent.

Dimensionare

Modificați lățimea modulului în continuare.

• Lățime: 5vw (desktop), 9vw (tabletă), 13vw (telefon)

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

Selectați Meniu

Treceți la a doua coloană și introduceți un modul de meniu. Selectați un meniu la alegere.

Eliminați culoarea de fundal

Eliminați culoarea de fundal a modulului în continuare.

Aspect

Treceți la fila de proiectare a modulului și schimbați și aspectul.

• Stil: Centrat
• Direcția meniului drop-down: în jos

Text de meniu

Apoi, deschideți setările pentru textul meniului și efectuați câteva modificări.

• Font de meniu: Rubik
• Culoare text meniu: # 000000
• Dimensiunea textului meniului: 0.9vw (Desktop), 2vw (tabletă), 3vw (telefon)

Meniul derulant

Modificați și setările meniului drop-down.

• Culoarea fundalului meniului derulant: #ffffff
• Culoare linie meniu derulant: # 2970fa

Icoane

Și completați setările modulului schimbând culoarea pictogramei meniului hamburger din setările pictogramei.

• Culoare pictogramă meniu hamburger: # 2970fa

Adăugați un modul buton la coloana 3

Adăugați o copie

Treceți la următoarea și ultima coloană. Adăugați un modul buton cu o copie la alegere.

Aliniere

Schimbați alinierea modulului în continuare.

• Aliniere buton: dreapta

Setări buton

Stilează butonul în consecință:

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

• Raza chenarului butonului: 0 px
• Distanța dintre litere și butoane: 1 px
• Buton Font: Rubik
• Stilul fontului butonului: majuscule

Spațiere

Și adăugați câteva valori de umplere personalizate pe diferite dimensiuni de ecran.

• Căptușeală superioară: 0,8vw (desktop), 1,8vw (tabletă), 2,5vw (telefon)
• Căptușeală inferioară: 0,8vw (desktop), 1,8vw (tabletă), 2,5vw (telefon)
• Căptușeală stângă: 1,5vw (desktop), 3vw (tabletă), 4vw (telefon)
• Căptușeală dreaptă: 1,5vw (desktop), 3vw (tabletă), 4vw (telefon)

Box Shadow

Completați setările modulului adăugând o umbră de casetă subtilă.

• Box Shadow Vertical Position: 20 px
• Puterea neclarității umbrei cutiei: 30 px
• Culoare umbră: rgba (41.112.250,0.2)

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

Introduceți codul JQuery și CSS

Următoarea și ultima parte a acestui tutorial gestionează efectul de micșorare, utilizând cele două ID-uri CSS pe care le-am atribuit secțiunii și rândului nostru. Adăugați un modul de cod în coloana 2 cu următoarele linii de cod JQuery și CSS. Asigurați-vă că ați pus codul JQuery între etichetele de script și codul CSS între etichetele de stil.

jQuery(function($){
  $(window).scroll(function() {
      if ($(document).scrollTop() > 50) {
        $('#section-padding').addClass('reduce-section-padding');
        $('#row-width').addClass('increase-row-width');
    } else {
       $('#section-padding').removeClass('reduce-section-padding');
       $('#section-padding').addClass('slow-transition');
       $('#row-width').removeClass('increase-row-width');
       $('#row-width').addClass('slow-transition');
    }
  });
});

.reduce-section-padding {
transition: all 0.9s ease-out 0s;
padding-top: 0px !important;
padding-bottom: 0px !important;
}

.increase-row-width {
transition: all 0.9s ease-out 0s;
width: 100% !important;
}

.slow-transition {
transition: all 0.9s ease-out 0s;
}

#main-content {
margin-top: 5vw;
}

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

După ce ați adăugat codul, puteți salva toate modificările pe care le-ați făcut la antetul global și puteți vizualiza rezultatul pe site-ul dvs. web!

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 acest post, v-am arătat cum să creați un antet global care se micșorează folosind Divi's Theme Builder. Anteturile micșorate sunt o modalitate excelentă de a economisi spațiu pe înălțimea vizualizării vizitatorului. Am recreat designul de la zero și am adăugat câteva coduri personalizate personalizate pentru a declanșa efectul de micșorare. Ați putut 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!

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.