Prilikom izrade globalnog zaglavlja potrebno je uzeti u obzir mnogo stvari. Elementi koje ste stavili u svoje zaglavlje trebali bi vam pomoći posjetitelji za lako snalaženje. Kako bi smanjili vrijeme koje ljudi provode pregledavajući, mnogi web dizajneri odlučuju se za fiksno gornje zaglavlje, što omogućuje posjetitelji za trenutni pristup drugim stranicama ili publikacijama. Ovo je stvarno zgodno, ali kada stvarate fiksno zaglavlje, veći dio visine vašeg okvira za prikaz posjetitelji je zauzet, što dopušta manje od sadržaj prikazati odjednom. Ako niste spremni podnijeti ovu žrtvu, znajte da ne morate. Možete iskoristiti prednosti fiksnog zaglavlja dopuštajući da vaše cjelokupno zaglavlje otkrije kada se vaši posjetitelji pomiču prema gore i sakrije ga kada se pomiču prema dolje. Danas ćemo vas voditi kroz skrivanje i otkrivanje vašeg globalnog zaglavlja pomoću Divi's Theme Builder.

pregled

Prije nego što uđemo u tutorial, pogledajmo rezultat na različitim veličinama zaslona.

1. Idite na Divi Builder tema i dodajte novi predložak

Započnite odlaskom do Divi Builder tema.

Počnite stvarati globalno zaglavlje

Tamo kliknite "Dodaj globalno zaglavlje" i odaberite "Stvorite globalno zaglavlje".

2. Počnite stvarati globalno zaglavlje

Postavke odjeljka

Boja pozadine

Unutar uređivača predloška primijetit ćete odjeljak. Otvorite ovaj odjeljak i promijenite njegovu boju pozadine.

• Boja pozadine: #ffffff

dimenzioniranje

Idite na karticu dizajn i sljedećem odjeljku dodijelite širinu od 100%.

• Širina: 100%

razmak

Također dodajte prilagođene gornje i donje obloge.

• Gornja obloga: 2vw
• Donja obloga: 2vw

Kutija sjena

Također ćemo na naš odjeljak primijeniti suptilnu nijansu.

• Jačina zamagljivanja sjene okvira: 50px
• Boja sjene: rgba (0,0,0,0,08)

CSS ID

Kasnije u ovom vodiču trebat će nam prilagođeni kôd da bi se pojavio efekt pomicanja. Da bismo se pripremili za to, u odjeljak dodajemo CSS ID.

• CSS ID: odjeljak globalnog zaglavlja

Glavni element

Također ćemo odjeljak učiniti fiksnim zaglavljem dodavanjem dva retka CSS koda glavnom elementu odjeljka.

position: fixed;top: 0;

Z indeks

Sada da bismo bili sigurni da se naš odjeljak pojavljuje na vrhu stranice ili sadržaj objave također ćemo povećati z-index u postavkama vidljivosti.

• Z indeks: 99999

Dodajte novi redak

Struktura stupaca

Nakon što završite sve parametre odjeljka, nastavite dodavati novi redak odjeljku koristeći sljedeću strukturu stupaca:

dimenzioniranje

Bez dodavanja modula, otvorite postavke retka i pustite da redak ispuni cijelu širinu zaslona.

• Koristite prilagođenu širinu oluka: Da
• Širina oluka: 1
• Izjednačite visine stupaca: Da
• Širina: 100%
• Maks. Širina: 100%

razmak

Također uklonite sve zadane gornje i donje obloge.

• Gornja obloga: 0px
• Donja obloga: 0px

Glavni element

Centrirajte ga sadržaj stupca i omogućite da stupci ostanu jedan pored drugog na manjim veličinama zaslona dodavanjem dva retka CSS koda u glavni element retka.

display: flex;align-items: center;

Dodajte modul za praćenje društvenih medija u stupac 2

Dodajte društvene mreže

Vrijeme je za dodavanje modula, počevši od modula za praćenje društvenih mreža u stupcu 1. Dodajte društvene mreže koje želite prikazati.

Poništite pojedine stilove društvenih medija

Nastavite resetiranjem stilova svake društvene mreže na pojedinačnu razinu.

Dodajte pojedinačni prostor društvene mreže

Također ćete trebati otvoriti postavke za svaku društvenu mrežu pojedinačno i dodati dodavanje dna u postavke razmaka.

• Donja obloga: 0.5vw

poravnanje

Nakon što ste pojedinačno dodali donji oblog svakoj društvenoj mreži, vratite se na opće postavke vašeg moda. Prebacite se na karticu dizajn i promijenite poravnanje modula.

• Usklađivanje modula: centar

Zadane postavke ikone

Također promijenite boju ikone u postavkama ikone.

• Boja ikone: # 000000

Postavke ikone lebdenja

I promijenite boju ikone lebdenja.

• Boja ikone: # c2ab92

granica

Ispunite parametre modula dodavanjem donje granice u parametrima obruba.

• Širina donje granice: 1px
• Boja donjeg obruba: # 000000

Dodajte modul izbornika u stupac 2

Odaberite izbornik

Krenimo na sljedeću kolonu! Dodajte modul izbornika i odaberite izbornik po vašem izboru.

Preuzmite logotip

Zatim umetnite logotip u modul.

Uklonite boju pozadine

I uklonite boju pozadine.

raspored

Zatim se prebacite na karticu Dizajn i pobrinite se da se sljedeće postavke primjenjuju na izgled:

• Stil: u središtu
• Smjer padajućeg izbornika: dolje

Zadani tekst izbornika

Nastavite tako da promijenite postavke teksta izbornika na sljedeći način:

• Boja aktivne veze: # c2ab92
• Font menija: Cormorant Garamond
• Boja teksta: # 000000
• Veličina teksta izbornika: 1vw (desktop), 2vw (tablet), 3vw (telefon)

Zadržite pokazivač miša tekst

Promijenite tekst izbornika na pokazivaču miša.

• Boja teksta izbornika: # c2ab92

Padajući izbornik

Zatim promijenite boju linije padajućeg izbornika u postavkama padajućeg izbornika.

• Boja linije padajućeg izbornika: # 000000

ikone

Također mijenjamo boju ikone izbornika hamburgera u postavkama ikone.

• Boja ikone izbornika hamburgera: # 000000

dimenzioniranje

Nastavite mijenjanjem maksimalne širine logotipa na različitim veličinama zaslona u postavkama veličine.

• Maksimalna širina logotipa: 5vw (stol), 10vw (tablet), 13vw (telefon)

CSS izbornik veze

I dovršite postavke modula dodavanjem dva retka CSS koda na vezu izbornika modula na naprednoj kartici.

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

Dodajte tekstualni modul u stupac 3

Dodajte kopiju

Prijeđimo na zadnji modul! Tamo je jedini modul koji nam treba tekstualni modul.

Dodaj link

Ovaj će modul služiti kao CTA. Dodajte vezu po vašem izboru.

• URL veze modula: #

Zadane postavke teksta

Prebacite se na karticu dizajna modula i u skladu s tim promijenite postavke teksta:

• Font teksta: Cormorant Garamond
• Boja teksta: # 000000
• Veličina teksta: 1vw (desktop), 2vw (tablet), 3vw (telefon)

Postavite pokazivač miša putem postavki

Promijenite boju teksta nakon zadržanja.

• Boja teksta: # c2ab92

dimenzioniranje

Nastavite mijenjanjem parametara veličine modula na različitim veličinama zaslona.

• Širina: 12vw (desktop), 18vw (tablet), 22vw (telefon)
• Usklađivanje modula: centar

razmak

I dodajte malo donjeg obloga u postavkama razmaka.

• Donja obloga: 0.5vw

granica

Ispunite parametre modula dodavanjem donje granice.

• Širina donje granice: 1px
• Boja donjeg obruba: # 000000

Dodajte kodni modul u stupac 2

Umetnite JQuery i CSS kôd

Nakon što stilizirate sve modove u redu, vrijeme je da učinite otkrivanje / skrivanje efekta. Da bismo to učinili, trebat ćemo dodati prilagođeni kôd modulu koda koji ćemo smjestiti u stupac 2. Ovaj kôd će raditi u bilo kojem odjeljku koji dodate bez obzira na to kako dizajnirate zaglavlje ili module. koju koristite, samo provjerite jeste li dodali CSS ID u svoj odjeljak. Postavite JQuery kôd između oznaka skripte i CSS koda između oznaka stila, kao što je prikazano na donjem zaslonu za ispis.

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. Spremite izmjene generatora i prikažite rezultat

Nakon što dovršite globalno zaglavlje, spremite sve promjene i pogledajte rezultat na svom web stranica!

pregled

Sad kad smo prošli sve korake, pogledajmo konačno kako to izgleda na različitim veličinama zaslona.

Završne misli

U ovom smo članku pokazali kako se vaše globalno zaglavlje pojavljuje pri pomicanju prema gore i skriva pri pomicanju prema dolje. Ovo je popularan i učinkovit način da posjetiteljima olakšate navigaciju bez zauzimanja dijela visine prozora. Također možete besplatno preuzeti datoteku JSON! Ako imate pitanja ili prijedloge, slobodno ostavite komentar u odjeljku za komentare u nastavku.