Pri vytváraní globálnej hlavičky je potrebné zvážiť veľa vecí. Prvky, ktoré vložíte do hlavičky, by vám mali pomôcť Návštevníci ľahko navigovať. Aby sa skrátil čas, ktorý ľudia strávia prehliadaním, mnohí webdizajnéri sa rozhodnú pre pevnú hornú hlavičku, ktorá to umožňuje Návštevníci pre okamžitý prístup k iným stránkam alebo publikáciám. To je naozaj praktické, ale pri vytváraní pevnej hlavičky veľkú časť výšky vášho výrezu Návštevníci je zaneprázdnený, čo umožňuje menej ako obsah zobraziť naraz. Ak nie ste pripravení urobiť túto obeť, vedzte, že nemusíte. Výhody pevnej hlavičky môžete využiť tak, že umožníte svojej celkovej hlavičke odhaliť, keď sa vaši návštevníci posunú nahor, a skryť ju, keď sa posunú nadol. Dnes vás prevedieme skrytím a odhalením vašej globálnej hlavičky pomocou Divi's Theme Builder.

prehľad

Predtým, ako sa ponoríme do tutoriálu, pozrime sa na výsledok v rôznych veľkostiach obrazovky.

1. Prejdite do Divi Theme Builder a pridajte novú šablónu

Začnite tým, že pôjdete do Divi Theme Builder.

Začnite vytvárať globálnu hlavičku

Tam kliknite na „Pridať globálnu hlavičku“ a vyberte „Vytvoriť globálnu hlavičku“.

2. Začnite vytvárať globálnu hlavičku

Nastavenia sekcií

Farba pozadia

V editore šablón si môžete všimnúť sekciu. Otvorte túto časť a zmeňte jej farbu pozadia.

• Farba pozadia: #ffffff

dimenzovanie

Prejdite na kartu dizajn a svojej nasledujúcej sekcii priraďte 100% šírku.

• Šírka: 100%

vzdialenosť

Pridajte tiež vlastné horné a dolné čalúnenie.

• Vrchná vypchávka: 2vw
• Spodné čalúnenie: 2vw

Tieňová skrinka

Na našu sekciu tiež aplikujeme jemný odtieň.

• Sila rozostrenia tieňa škatule: 50px
• Farba tieňa: rgba (0,0,0,0,08)

CSS ID

Ďalej v tomto výučbe budeme potrebovať nejaký vlastný kód, aby sa mohol vyskytnúť efekt rolovania. Aby sme sa na to pripravili, pridáme do sekcie ID CSS.

• ID CSS: globálna sekcia hlavičky

Hlavný prvok

Sekciu tiež urobíme pevnou hlavičkou pridaním dvoch riadkov kódu CSS k hlavnému prvku sekcie.

position: fixed;top: 0;

Z index

Teraz sa uistite, že sa naša sekcia zobrazuje v hornej časti stránky alebo obsah príspevku zvýšime aj z-index v nastaveniach viditeľnosti.

• Z Index: 99999

Pridať nový riadok

Štruktúra stĺpcov

Po dokončení všetkých parametrov sekcie pokračujte v pridávaní nového riadku do sekcie pomocou nasledujúcej štruktúry stĺpcov:

dimenzovanie

Bez pridania modulu ešte otvorte nastavenia riadkov a nechajte riadok vyplniť celú šírku obrazovky.

• Použite vlastnú šírku odkvapov: Áno
• Šírka odkvapov: 1
• Vyrovnajte výšky stĺpcov: Áno
• Šírka: 100%
• Maximálna šírka: 100%

vzdialenosť

Odstráňte tiež všetky predvolené vrchné a spodné čalúnenie.

• Horná vypchávka: 0px
• Spodné čalúnenie: 0px

Hlavný prvok

vycentrujte to obsah stĺpca a umožniť, aby stĺpce zostali vedľa seba na menších obrazovkách pridaním dvoch riadkov kódu CSS do hlavného prvku riadka.

display: flex;align-items: center;

Pridajte modul sledovania sociálnych médií do stĺpca 2

Pridajte sociálne siete

Je čas pridať moduly, počnúc modulom sledovania sociálnych médií v stĺpci 1. Pridajte sociálne siete, ktoré chcete zobraziť.

Obnovte jednotlivé štýly sociálnych médií

Pokračujte obnovením štýlov každej sociálnej siete na individuálnu úroveň.

Pridajte samostatný priestor sociálnej siete

Budete tiež musieť otvoriť nastavenia pre každú sociálnu sieť zvlášť a pridať polstrovanie v dolnej časti v nastaveniach medzery.

• Spodné čalúnenie: 0.5vw

zarovnanie

Po individuálnom pridaní dolnej výplne do každej sociálnej siete sa vráťte späť do všeobecných nastavení vášho módu. Prepnite na kartu návrh a zmeňte zarovnanie modulu.

• Zarovnanie modulu: stred

Predvolené nastavenie ikony

V nastaveniach ikon tiež zmeňte farbu ikony.

• Farba ikony: # 000000

Nastavenia ikony umiestnenia kurzora myši

A zmeňte farbu ikony umiestnenia kurzora myši.

• Farba ikony: # c2ab92

hraničné

Dokončite parametre modulu pridaním dolného okraja do parametrov okraja.

• Šírka dolného okraja: 1px
• Farba dolného okraja: # 000000

Pridajte modul ponuky do stĺpca 2

Vyberte ponuku

Prejdime k ďalšiemu stĺpcu! Pridajte modul ponuky a vyberte ponuku podľa vášho výberu.

Stiahnite si logo

Potom do modulu odovzdajte logo.

Odstrániť farbu pozadia

A odstrániť farbu pozadia.

dispozície

Potom prepnite na kartu Návrh a uistite sa, že pre rozloženie platia nasledujúce nastavenia:

• Štýl: Vycentrovaný
• Smer rozbaľovacej ponuky: nadol

Predvolený text ponuky

Pokračujte zmenou nastavení textu ponuky nasledovne:

• Farba aktívneho odkazu: # c2ab92
• Písmo ponuky: Cormorant Garamond
• Farba textu: # 000000
• Veľkosť textu ponuky: 1vw (počítač), 2vw (tablet), 3vw (telefón)

Umiestnite kurzor myši na text ponuky

Zmeňte text ponuky po umiestnení kurzora myši.

• Farba textu ponuky: # c2ab92

Rozbaľovacia ponuka

Potom zmeňte farbu rozbaľovacej ponuky v nastaveniach rozbaľovacej ponuky.

• Farba riadku rozbaľovacej ponuky: # 000000

ikony

Meníme tiež farbu ikony ponuky hamburgerov v nastaveniach ikon.

• Farba ikony ponuky Hamburger: # 000000

dimenzovanie

Pokračujte zmenou maximálnej šírky loga na rôznych veľkostiach obrazovky v nastaveniach veľkosti.

• Maximálna šírka loga: 5 Vw (stôl), 10 VW (tablet), 13 VW (telefón)

Menu prepojenia CSS

A dokončite nastavenia modulu pridaním dvoch riadkov kódu CSS do odkazu na ponuku modulu na rozšírenej karte.

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

Pridajte textový stĺpec do stĺpca 3

Pridajte kópiu

Prejdime k poslednému modulu! Jediný modul, ktorý potrebujeme, je textový modul.

pridanie odkazu

Tento modul bude slúžiť ako CTA. Pridajte odkaz podľa vášho výberu.

• URL odkazu na modul: #

Predvolené nastavenia textu

Prepnite na kartu návrhu modulu a podľa toho zmeňte nastavenie textu:

• Písmo textu: Cormorant Garamond
• Farba textu: # 000000
• Veľkosť textu: 1vw (počítač), 2vw (tablet), 3vw (telefón)

Nastavenia textového umiestnenia kurzora

Zmeňte farbu textu pri umiestnení kurzora myši.

• Farba textu: # c2ab92

dimenzovanie

Pokračujte zmenou parametrov dimenzovania modulu na rôznych veľkostiach obrazovky.

• Šírka: 12vw (počítač), 18vw (tablet), 22vw (telefón)
• Zarovnanie modulu: stred

vzdialenosť

A v nastaveniach rozstupov pridajte nejaké spodné polstrovanie.

• Spodné čalúnenie: 0.5vw

hraničné

Dokončite parametre modulu pridaním dolného okraja.

• Šírka dolného okraja: 1px
• Farba dolného okraja: # 000000

Pridajte stĺpec kódu do stĺpca 2

Vložte kód JQuery a CSS

Keď ste navrhli všetky mody v rade, je čas uskutočniť efekt odhalenia / skrytia. Aby sme to dosiahli, budeme musieť pridať vlastný kód do modulu kódu, ktorý umiestnime do stĺpca 2. Tento kód bude fungovať v ktorejkoľvek sekcii, ktorú pridáte, bez ohľadu na to, ako si navrhnete hlavičku alebo moduly. ktorý používate, len sa uistite, že ste do svojej sekcie pridali ID CSS. Vložte kód JQuery medzi značky skriptu a kód CSS medzi značky štýlu, ako je to znázornené na tlačovej obrazovke nižšie.

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. Uložte zmeny generátora a zobrazte výsledok

Po dokončení globálnej hlavičky uložte všetky zmeny a zobrazte výsledok na svojom webové stránky!

prehľad

Teraz, keď sme prešli všetkými krokmi, poďme sa konečne pozrieť na to, ako to vyzerá na rôznych veľkostiach obrazovky.

záverečné myšlienky

V tomto článku sme si ukázali, ako nastaviť, aby sa vaše globálne hlavičky zobrazovali pri posúvaní nahor a ako sa skryjú pri posúvaní nadol. Toto je populárny a efektívny spôsob, ako pomôcť svojim návštevníkom ľahko sa orientovať bez toho, aby zabrali časť svojej výšky okna. Môžete si tiež zadarmo stiahnuť súbor JSON! Ak máte akékoľvek otázky alebo návrhy, neváhajte zanechať komentár v sekcii komentárov nižšie.