Cum să schimbați antetul Divi cu altul pe scroll

Antetul dvs. rămâne inevitabil unul dintre cele mai importante elemente ale site-ului dvs. web. Acesta influențează procesul de navigare al vizitatorilor și le permite să găsească ceea ce caută într-o clipă. Acum, dacă căutați o modalitate de a schimba antetul Divi pe scroll cu altul, vă veți bucura de această postare. Vă vom arăta exact cum să o scoateți cu ajutorul constructorului de teme Divi, elementelor încorporate și un cod suplimentar. De asemenea, ne asigurăm că există un spațiu de substituent generat automat pentru antet în partea de sus a paginii. 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 antet Swivi Divi

Pentru a pune mâna pe șablonul de antet Divi de swap gratuit, 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. 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 din backend-ul site-ului dvs. WordPress și faceți clic pe „Adăugați un antet global”.

Construiți antet global

Apoi, faceți clic pe „Build Global Header” pentru a fi redirecționat către editorul de șabloane.

2. Creați ambele anteturi în aceeași secțiune

Modificați secțiunea

Dimensionare

Odată ajuns în editorul de șabloane, veți observa o secțiune. Deschideți setările secțiunii și asigurați-vă că lățimea secțiunii este „100%”.

• Lățime: 100%

Spațiere

Apoi, accesați setările de spațiere ș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

Folosim și o umbră de cutie subtilă.

• Box Shadow Vertical Position: 15 px
• Culoare umbră: rgba (0,0,0,0.06)

Poziţie

Nu în ultimul rând, vom face ca secțiunea să rămână în centrul de sus al paginii noastre folosind setările de poziție din fila avansată.

• Poziție: Fix
• Locație: Centrul de sus

Adăugați antetul rândului nr. 1

Structura coloanei

Ambele anteturi pe care le vom crea vor face parte din aceeași secțiune. Vom folosi un rând separat pentru fiecare antet. Adăugați primul antet de rând folosind următoarea structură de coloane:

Culoare de fundal

Fără a adăuga încă module, deschideți setările rândurilor și schimbați culoarea de fundal.

• Culoare fundal: # 000000

Dimensionare

Modificați și setările de dimensionare.

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

Spațiere

Apoi, accesați setările de spațiere și eliminați toate umpluturile implicite de sus și de jos.

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

Elementul principal

Completați setările rândului adăugând două linii de cod CSS la elementul principal al rândului. Acest cod CSS ne va ajuta să aliniez tot conținutul coloanei.

display: flex;
align-items: center;

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

Incarca imaginea

Este timpul să adăugați module, începând cu un modul de imagine în coloana 1. Încărcați o siglă la alegere.

Aliniere

Schimbați alinierea modulului în continuare.

• Aliniere imagine: centru

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

Selectați Meniu

În a doua coloană, singurul modul de care avem nevoie este 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 și schimbați aspectul în consecință:

• Stil: Centrat

Setări text meniu

Apoi, faceți câteva modificări la setările de text din meniu.

• Font meniu: Roboto
• Greutate font meniu: îndrăzneț
• Culoarea textului meniului: #ffffff (Desktop), # 000000 (Tabletă și telefon)
• Dimensiune text meniu: 18 px

Setări text din meniul drop-down

Apoi, vom schimba culoarea liniei meniului drop-down din setările textului meniului drop-down.

• Culoare linie meniu derulant: # 000000

Setări pictograme

De asemenea, schimbăm culoarea pictogramei meniului hamburger.

• Culoare pictogramă meniu hamburger: #ffffff

Spațiere

Completați setările modulului adăugând câteva umpluturi personalizate la stânga și la dreapta pe dimensiuni mai mici ale ecranului.

• Căptușeală stângă: 30 px (numai tabletă și telefon)
• Căptușeală dreaptă: 30 px (numai tabletă și telefon)

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

Adăugați rețele sociale la alegere

În ultima coloană, singurul modul de care avem nevoie este un modul Social Follow Follow. Adăugați rețelele sociale la alegere.

Culoarea de fundal a rețelei sociale individuale

Apoi, deschideți fiecare rețea socială individual și schimbați culoarea de fundal în alb.

• Culoare fundal: #FFFFFF

Aliniere

Reveniți la setările generale ale modulului și modificați alinierea modulului.

• Alinierea modulului: centru

Setări pictograme

Modificați și culoarea pictogramei.

• Culoare pictogramă: # 0042c9

Frontieră

Și completați setările modulului adăugând o rază de margine.

• Toate colțurile: 100 px

Adăugați antetul rândului 2

Structura coloanei

La al doilea antet! Adăugați 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: 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

Elementul principal

Apoi, aliniați tot conținutul coloanei utilizând două linii de cod CSS în elementul principal al rândului.

display: flex;
align-items: center;

Coloana 3 Culoare fundal

Și completați setările rândului deschizând setările coloanei 3 și folosind o culoare de fundal.

• Culoare fundal: # 0042c9

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

Incarca imaginea

În coloana 1, singurul modul de care avem nevoie este un modul de imagine. Încărcați un logo la alegere.

Aliniere

Schimbați alinierea imaginii modulului în continuare.

• Aliniere imagine: centru

Clonați modulul de meniu și plasați în coloana 2 din antetul rândului 2

Clonați modulul de meniu utilizat în rândul anterior și plasați duplicatul în coloana din mijlocul celui de-al doilea rând.

Modificați setările de text din meniu

Deschideți modulul de meniu duplicat și modificați culoarea textului meniului.

• Culoarea textului meniului: # 0042c9

Modificați setările de text din meniul drop-down

Modificați și setările de text din meniul drop-down.

• Culoare linie meniu derulant: # ffc21d

Modificați setările pictogramei

Completați setările modulului de meniu modificând culoarea pictogramei meniului hamburger.

• Culoare pictogramă meniu hamburger: # 0042c9

Adăugați un modul buton la coloana 3

Adăugați o copie

În ultima coloană a rândului, singurul modul de care avem nevoie este un modul buton. Introduceți o copie la alegere.

Aliniere

Modificați alinierea butonului în continuare.

• Aliniere buton: centru

Setări buton

Apoi, stilizați butonul după cum urmează:

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

• Buton Font: Roboto
• Buton Font Greutate: Bold

Spațiere

Și finalizați setările modulului adăugând câteva umpluturi personalizate pe diferite dimensiuni de ecran.

• Căptușeală superioară: 33 px (desktop), 35 px (tabletă), 38 px (telefon)
• Căptușeală inferioară: 33 px (desktop), 35 px (tabletă), 38 px (telefon)

2. Adăugați clase CSS

Secțiune

După ce ați adăugat și stilat toate modulele, este timpul să adăugați clasele CSS pe care le vom folosi în codul nostru JQuery. Mai întâi, deschideți setările secțiunii și utilizați următoarea clasă CSS:

• Clasa CSS: secțiunea antet

Antetul rândului # 1

Apoi, deschideți antetul primului rând și utilizați următoarea clasă CSS:

• Clasa CSS: header-1

Antetul rândului 2

Deschideți și al doilea rând. Folosiți următoarea clasă CSS pentru aceasta:

• Clasa CSS: header-2

3. Adăugați codul JQuery și CSS

Adăugați modulul de cod la a treia coloană a primului rând

Odată ce toate clasele CSS sunt la locul lor, este timpul să adăugați codul. Adăugați un nou modul de cod oriunde doriți în secțiunea dvs. Îl plasăm în a treia coloană din primul rând.

Adăugați cod JQuery (între etichete de script)

Apoi, adăugați următoarele linii de cod CSS între etichetele de script, după cum puteți vedea în ecranul de imprimare de mai jos:

jQuery(function($){
    
var firstHeader = $('.header-1');
var secondHeader = $('.header-2');
var headerSection = $('.header-section');
  
headerSection.wrap('<div class="header-placeholder"></div>');
var headerWrap = $('.header-placeholder');
  
var headerHeight = firstHeader.outerHeight();
headerWrap.css('height', headerHeight);  

  
secondHeader.hide();
 
$(window).scroll(function() {
  
    var topPosition = $(window).scrollTop();
  
    if (topPosition >= 400) {
          firstHeader.slideUp();
          secondHeader.slideDown();
    }
  
    if (topPosition == 0) {
          secondHeader.slideUp();
          firstHeader.slideDown();
    }
  
});      
});

Adăugați cod CSS (între etichetele de stil)

Adăugați și următorul cod CSS între etichetele de stil :

.et_mobile_menu {
margin-top: 20px;
width: 300%;
margin-left: -100%;
}

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

În acest moment, singurul lucru rămas de făcut este să salvați toate modificările constructorului de teme și să vizualizați 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 această postare, v-am arătat cum să schimbați antetul Divi cu altul pe scroll folosind generatorul de teme Divi, elementele Divi și câteva coduri JQuery și CSS suplimentare. De asemenea, am generat automat un spațiu în partea de sus a containerului paginii, care împiedică antetul fix să se suprapună pe conținutul paginii. Ați reușit să descărcați gratuit fișierul JSON șablon antet Divi! 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.