Kur krijoni kokën tuaj globale, ka shumë gjëra që duhet të merrni parasysh. Elementet që vendosni në kokën tuaj duhet t'ju ndihmojnë vizitorët për të lundruar lehtë. Për të reduktuar kohën që njerëzit shpenzojnë duke shfletuar, shumë dizajnerë ueb zgjedhin një titull të lartë të fiksuar, duke e lejuar atë vizitorët për të aksesuar menjëherë faqet ose publikimet e tjera. Kjo është me të vërtetë e dobishme, por kur krijoni një kokë fikse, pjesa më e madhe e lartësisë së pamjes suaj vizitorët është i zënë, gjë që lejon më pak se përmbajtje për të shfaqur menjëherë. Nëse nuk jeni gati ta bëni këtë sakrificë, dijeni se nuk keni pse ta bëni këtë. Ju mund të korrni përfitimet e një titulli fiks duke lejuar që titulli juaj i përgjithshëm të zbulojë kur vizitorët tuaj lëvizin lart dhe e fshehin atë kur lëvizin poshtë. Sot ne do t'ju udhëzojmë në fshehjen dhe zbulimin e kokës tuaj globale duke përdorur Divi's Theme Builder.

studim

Para se të zhyteni në tutorial, le të hedhim një vështrim në rezultatin në madhësi të ndryshme të ekranit.

1. Shkoni tek Divi Theme Builder dhe shtoni një model të ri

Filloni duke shkuar tek Ndërtuesi i Temave Divi.

Filloni të krijoni një kokë globale

Aty, kliko në "Shto një kokë globale" dhe zgjedh "Krijoni një kokë globale".

2. Filloni të krijoni një kokë globale

Cilësimet e seksionit

Ngjyra e sfondit

Brenda redaktuesit të modelit, do të vini re një seksion. Hapni këtë seksion dhe ndryshoni ngjyrën e sfondit.

• Ngjyra e sfondit: #ffffff

sizing

Shkoni në skedën e dizajnit dhe caktoni gjerësi 100% në seksionin tuaj të ardhshëm.

• Gjerësia: 100%

ndarje

Shtoni gjithashtu mbushjen me porosi të sipërme dhe të poshtme.

• Mbushja e sipërme: 2vw
• Mbushja e poshtme: 2vw

Kuti me hije

Ne gjithashtu do të aplikojmë një hije delikate në seksionin tonë.

• Fuqia e turbullimit të hijes së kutisë: 50px
• Ngjyra e hijes: rgba (0,0,0,0,08)

ID CSS

Më vonë në këtë manual, do të na duhet një kod i personalizuar që të ndodhë efekti i lëvizjes. Për t'u përgatitur për këtë, ne shtojmë një ID të CSS në seksion.

• CSS ID: seksioni global i kokës

Elementi kryesor

Ne gjithashtu do ta bëjmë seksionin një kokë fikse duke shtuar dy rreshta të kodit CSS në elementin kryesor të seksionit.

position: fixed;top: 0;

Indeksi Z

Tani për t'u siguruar që seksioni ynë të shfaqet në krye të faqes ose përmbajtje të postimit, ne gjithashtu do të rrisim indeksin z në cilësimet e dukshmërisë.

• Indeksi Z: 99999

Shto një rresht të ri

Struktura e kolonës

Pasi të keni mbaruar të gjithë parametrat e seksionit, vazhdoni të shtoni një rresht të ri në seksion duke përdorur strukturën e kolonës së mëposhtme:

sizing

Pa shtuar akoma një modul, hapni cilësimet e rreshtit dhe lini që rreshti të mbushë tërë gjerësinë e ekranit.

• Përdorni një gjerësi të ulluqeve me porosi: Po
• Gjerësia e zorrës së trashë: 1
• Barazoni lartësitë e kolonave: Po
• Gjerësia: 100%
• Gjerësia maksimale: 100%

ndarje

Gjithashtu hiqni të gjithë mbushjen e paracaktuar të sipërme dhe të poshtme.

• Mbushja e sipërme: 0px
• Mbushja e poshtme: 0px

Elementi kryesor

në qendër atë përmbajtje të kolonës dhe lejoni që kolonat të qëndrojnë krah për krah në madhësi më të vogla të ekranit duke shtuar dy rreshta të kodit CSS në elementin kryesor të rreshtit.

display: flex;align-items: center;

Shtoni modulin e përcjelljes së mediave sociale në kolonën 2

Shtoni rrjetet sociale

Timeshtë koha për të shtuar module, duke filluar me një modul të ndjekjes së mediave sociale në kolonën 1. Shtoni rrjetet sociale që dëshironi të shfaqni.

Rivendosni stilet individuale të mediave sociale

Vazhdoni duke rivendosur stilet e secilit rrjet social në një nivel individual.

Shtoni një hapësirë ​​individuale të rrjetit social

Ju gjithashtu do të duhet të hapni cilësimet për secilin rrjet social individualisht dhe të shtoni mbushjen e poshtme në cilësimet e hapësirës.

• Mbushja e poshtme: 0.5vw

radhitje

Pasi të keni shtuar individualisht mbushjen e poshtme në secilin rrjet social, kthehuni te cilësimet e përgjithshme të modit tuaj. Kaloni në skedën e dizajnit dhe ndryshoni shtrirjen e modulit.

• Shtrirja e modulit: qendra

Cilësimet e parazgjedhura të ikonës

Gjithashtu ndryshoni ngjyrën e ikonës në cilësimet e ikonës.

• Ngjyra e ikonës: # 000000

Cilësimet e ikonës së rri pezull

Dhe ndryshoni ngjyrën e ikonës së rri pezull.

• Ngjyra e ikonës: # c2ab92

kufi

Plotësoni parametrat e modulit duke shtuar një kufi më të ulët në parametrat e kufirit.

• Gjerësia e poshtme e kufirit: 1px
• Ngjyra e poshtme e kufirit: # 000000

Shtoni një modul menuje në kolonën 2

Zgjidhni menunë

Le të kalojmë në kolonën tjetër! Shtoni një modul të menusë dhe zgjidhni një menu sipas zgjedhjes suaj.

Shkarko logon

Pastaj ngarkoni një logo në modul.

Hiq ngjyrën e sfondit

Dhe hiqni ngjyrën e sfondit.

natyrë

Pastaj kaloni në skedën Design dhe sigurohuni që cilësimet e mëposhtme të zbatohen për paraqitjen:

• Stili: në qendër
• Drejtimi i menusë që lëshohet: poshtë

Tekst i paracaktuar i menusë

Vazhdoni duke ndryshuar cilësimet e tekstit të menusë si më poshtë:

• Ngjyra e lidhjes aktive: # c2ab92
• Font menu: Cormorant Garamond
• Ngjyra e tekstit: # 000000
• Madhësia e tekstit të menusë: 1vw (desktop), 2vw (tabletë), 3vw (telefon)

Teksti i menusë rri pezull

Ndryshoni tekstin e menusë në rri pezull.

• Ngjyra e tekstit të menusë: # c2ab92

Menyja e lëshimit

Pastaj ndryshoni ngjyrën e linjës së menusë rënëse në cilësimet e menusë drop-down.

• Ngjyra e rreshtit të menusë që lëshohet: # 000000

icons

Po ashtu po ndryshojmë ngjyrën e ikonës së menusë së hamburgerit në cilësimet e ikonës.

• Ngjyra e ikonës së menusë Hamburger: # 000000

sizing

Vazhdoni duke ndryshuar gjerësinë maksimale të logos në madhësi të ndryshme të ekranit në cilësimet e madhësisë.

• Gjerësia maksimale e logos: 5vw (tavolinë), 10vw (tabletë), 13vw (telefon)

Menyja e lidhjeve CSS

Dhe plotësoni cilësimet e modulit duke shtuar dy rreshta të kodit CSS në lidhjen e menysë së modulit në skedën e përparuar.

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

Shtoni një modul teksti në kolonën 3

Shto një kopje

Le të kalojmë në modulin e fundit! Aty i vetmi modul që na duhet është një modul teksti.

Shto një lidhje

Ky modul do të shërbejë si CTA. Shtoni një lidhje të zgjedhjes suaj.

• URL e lidhjes së modulit: #

Cilësimet e paracaktuar të tekstit

Kaloni në skedën e dizajnit të modulit dhe ndryshoni rregullimet e tekstit në përputhje me rrethanat:

• Font font: Tekst Garorm
• Ngjyra e tekstit: # 000000
• Madhësia e tekstit: 1vw (desktop), 2vw (tabletë), 3vw (telefon)

Vendosni cilësimet e tekstit

Ndryshoni ngjyrën e tekstit në rri pezull.

• Ngjyra e tekstit: # c2ab92

sizing

Vazhdoni duke ndryshuar parametrat e madhësisë së modulit në madhësi të ndryshme të ekranit.

• Gjerësia: 12vw (desktop), 18vw (tabletë), 22vw (telefon)
• Shtrirja e modulit: qendra

ndarje

Dhe shtoni disa mbushje fundore në cilësimet e ndarjes.

• Mbushja e poshtme: 0.5vw

kufi

Plotësoni parametrat e modulit duke shtuar një kufi më të ulët.

• Gjerësia e poshtme e kufirit: 1px
• Ngjyra e poshtme e kufirit: # 000000

Shtoni një modul kodi në kolonën 2

Vendosni kodin JQuery dhe CSS

Pasi të keni stiluar të gjitha modet në rresht, është koha të bëni efektin e zbulimit / fshehjes. Për ta bërë këtë do të duhet të shtojmë një kod të personalizuar në një modul kodi që do ta vendosim në kolonën 2. Ky kod do të funksionojë në çdo seksion që shtoni, pavarësisht se si e hartoni kokën tuaj ose modulet. që po përdorni, thjesht sigurohuni që keni shtuar ID-në e CSS-së në seksionin tuaj. Vendosni kodin JQuery midis etiketave të shkrimit dhe kodit CSS midis etiketave të stilit siç tregohet në ekranin e shtypur më poshtë.

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. Ruani modifikimet e gjeneratorit dhe shfaqni rezultatin

Pasi të keni përfunduar kokën globale, ruani të gjitha ndryshimet dhe shikoni rezultatin në tuaj Site Web!

studim

Tani që kemi kaluar të gjithë hapat, le të hedhim një vështrim përfundimtar se si duket në madhësi të ndryshme të ekranit.

Mendimet e fundit

Në këtë artikull, ne ju kemi treguar se si ta bëni kokën tuaj globale të shfaqet kur lëvizni lart dhe ta fshehni atë kur lëvizni poshtë. Kjo është një mënyrë popullore dhe efektive për të ndihmuar vizitorët tuaj të lundrojnë lehtë pa marrë një pjesë të lartësisë së dritares së tyre. Ju gjithashtu mund të shkarkoni skedarin JSON falas! Nëse keni ndonjë pyetje ose sugjerim, mos ngurroni të lini një koment në seksionin e komenteve më poshtë.