Cum să vă dezvăluiți antetul global în timp ce derulați în sus și ascundeți în timp ce derulați în jos cu Divi

Publicat: 2019-12-11

Când vă creați antetul global, trebuie să țineți cont de multe lucruri. Elementele pe care le plasați în antet trebuie să vă ajute vizitatorii să navigheze cu ușurință. Pentru a reduce timpul petrecut de navigare, mulți designeri web optează pentru un antet fix fix, permițând vizitatorilor să meargă imediat la alte pagini sau postări. Este foarte convenabil, dar când creați un antet fix, o mare parte din înălțimea vizualizării vizitatorilor dvs. este preluată, permițând să apară mai puțin conținut simultan. Dacă nu ești dispus să faci acel sacrificiu, știi că nu trebuie. Puteți beneficia de avantajele unui antet fix, permițându-vă antetului global să dezvăluie când vizitatorii dvs. derulează în sus și să-l ascundă când derulează în jos. Astăzi, vă vom ghida prin ascunderea și dezvăluirea antetului global folosind Divi's Theme Builder. 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

dezvăluie antetul global

Mobil

dezvăluie antetul global

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.

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 adăugați un șablon nou

Accesați Divi Theme Builder

Începeți accesând Divi Theme Builder.

dezvăluie antetul global

Începeți să creați antet global

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

dezvăluie antetul global

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

Setări secțiune

Culoare de fundal

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

Culoare fundal: #ffffff

dezvăluie antetul global

Dimensionare

Treceți la fila de proiectare și atribuiți o lățime de 100% secțiunii dvs. în continuare.

Lățime: 100%

dezvăluie antetul global

Spațiere

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

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

dezvăluie antetul global

Box Shadow

Vom aplica o umbră de casetă subtilă și secțiunii noastre.

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

dezvăluie antetul global

ID CSS

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

CSS ID: global-header-section

dezvăluie antetul global

Elementul principal

De asemenea, vom transforma secțiunea într-un cap fix prin adăugarea a două linii de cod CSS la elementul principal al secțiunii.

position: fixed;
top: 0;

dezvăluie antetul global

Indicele Z

Acum, pentru a ne asigura că secțiunea noastră apare în partea de sus a întregii pagini sau a conținutului postării, vom crește și indexul z în setările de vizibilitate.

Indicele Z: 99999

dezvăluie antetul global

Adăugați un rând nou

Structura coloanei

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

dezvăluie antetul global

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%

dezvăluie antetul global

Spațiere

Eliminați și toate umpluturile implicite, de sus și de jos.

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

dezvăluie antetul global

Elementul principal

Centrați conținutul coloanei și permiteți coloanelor să rămână una lângă alta pe dimensiuni mai mici ale ecranului adăugând două linii de cod CSS la elementul principal al rândului.

display: flex;
align-items: center;

dezvăluie antetul global

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

Adăugați rețele sociale

Este timpul să adăugați module, începând cu un modul Social Media Follow din coloana 1. Adăugați rețelele sociale pe care doriți să le afișați.

dezvăluie antetul global

Resetați stilurile de rețea socială individuale

Continuați resetând stilurile fiecărei rețele sociale la nivel individual.

dezvăluie antetul global

Adăugați spațierea individuală a rețelelor sociale

Va trebui să deschideți și setările fiecărei rețele sociale individual și să adăugați o căptușeală inferioară în setările de spațiere.

Căptușeală inferioară: 0,5vw

dezvăluie antetul global

Aliniere

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

Alinierea modulului: centru

dezvăluie antetul global

Setări implicite pentru pictograme

Schimbați și culoarea pictogramei în setările pictogramei.

Culoare pictogramă: # 000000

dezvăluie antetul global

Plasați cursorul pe setările pictogramei

Și modificați culoarea pictogramei la cursor.

Culoare pictogramă: # c2ab92

dezvăluie antetul global

Frontieră

Completați setările modulului adăugând o margine de jos în setările de margine.

Lățimea marginii inferioare: 1 px
Culoare margine inferioară: # 000000

dezvăluie antetul global

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

Selectați Meniu

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

dezvăluie antetul global

Încărcați sigla

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

dezvăluie antetul global

Eliminați culoarea de fundal

Și eliminați culoarea de fundal.

dezvăluie antetul global

Aspect

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

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

dezvăluie antetul global

Text de meniu implicit

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

Culoare link activ: # c2ab92
Font meniu: Cormoran Garamond
Culoarea textului: # 000000
Dimensiune text meniu: 1vw (desktop), 2vw (tabletă), 3vw (telefon)

dezvăluie antetul global

Plasați cursorul pe meniul Text

Modificați textul meniului la cursor.

Culoare text meniu: # c2ab92

dezvăluie antetul global

Meniul derulant

Apoi, modificați culoarea liniei meniului drop-down din setările meniului drop-down.

Culoare linie meniu derulant: # 000000

dezvăluie antetul global

Icoane

Schimbăm culoarea pictogramei meniului hamburger și în setările pictogramelor.

Culoare pictogramă meniu hamburger: # 000000

dezvăluie antetul global

Dimensionare

Continuați prin modificarea lățimii maxime a logo-ului pe diferite dimensiuni ale ecranului în setările de dimensionare.

Lățimea maximă a siglei: 5vw (desktop), 10vw (tabletă), 13vw (telefon)

dezvăluie antetul global

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;

dezvăluie antetul global

Adăugați un modul de text în coloana 3

Adăugați o copie

Până la ultimul modul! Acolo, singurul modul de care avem nevoie este un modul de text.

dezvăluie antetul global

Adăugați un link

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

Adresă URL a modulului: #

dezvăluie antetul global

Setări implicite pentru text

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

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

dezvăluie antetul global

Plasați cursorul pe Setări text

Schimbați culoarea textului la cursor.

Culoarea textului: # c2ab92

dezvăluie antetul global

Dimensionare

Continuați modificând setările de dimensionare ale modulului pe diferite dimensiuni de ecran.

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

dezvăluie antetul global

Spațiere

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

Căptușeală inferioară: 0,5vw

dezvăluie antetul global

Frontieră

Completați setările modulului adăugând o margine inferioară.

Lățimea marginii inferioare: 1 px
Culoare margine inferioară: # 000000

dezvăluie antetul global

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

Introduceți codul JQuery și CSS

Odată ce ați stilat toate modulele din rând, este timpul să faceți efectul revelare / ascundere. Pentru a face acest lucru, va trebui să adăugăm un 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 ce module utilizați, doar 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 = 0;


$(window).scroll(function() {

    var scrollMovement = $(window).scrollTop();
  
    if (topPosition < 200 ){
    }
    else{
    if(scrollMovement > topPosition) {
          $('#global-header-section').removeClass('show-header');
          $('#global-header-section').addClass('hide-header');
    } else {
          $('#global-header-section').removeClass('hide-header');
          $('#global-header-section').addClass('show-header');
    }
    }
    topPosition = scrollMovement;
});  
  
});

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

.hide-header {
opacity: 0;
margin-top: -200px !important;
}

.show-header {
opacity: 1;
margin-top: 0px !important;
}

#global-header-section {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}

dezvăluie antetul global

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

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

dezvăluie antetul global

previzualizare

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

Desktop

dezvăluie antetul global

Mobil

dezvăluie antetul global

Gânduri finale

În această postare, v-am arătat cum să faceți ca antetul dvs. global să apară în timp ce derulați în sus și să vă ascundeți în timp ce 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. 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.