Při vytváření globální hlavičky je třeba zvážit spoustu věcí. Prvky, které vložíte do záhlaví, by vám měly pomoci Návštěvníci pro snadnou navigaci. Aby se zkrátil čas, který lidé tráví procházením webu, mnoho webdesignérů volí pevnou horní hlavičku, která to umožňuje Návštěvníci pro okamžitý přístup k dalším stránkám nebo publikacím. To je opravdu praktické, ale při vytváření pevného záhlaví velkou část výšky vašeho výřezu Návštěvníci je zaneprázdněn, což umožňuje méně než obsah zobrazit najednou. Pokud nejste připraveni podstoupit tuto oběť, vězte, že nemusíte. Výhody pevného záhlaví můžete využít tím, že umožníte, aby vaše celkové záhlaví odhalilo, když se vaši návštěvníci posouvali nahoru, a skryli, když se posunou dolů. Dnes vás provedeme skrytím a odhalením vaší globální hlavičky pomocí Divi's Theme Builder.

přehled

Než se ponoříme do tutoriálu, pojďme se podívat na výsledek na různých velikostech obrazovky.

1. Jděte do Divi Theme Builder a přidejte novou šablonu

Začněte tím, že jdete do Divi Theme Builder.

Začněte vytvářet globální záhlaví

Tam klikněte na „Přidat globální hlavičku“ a vyberte „Vytvořit globální hlavičku“.

2. Začněte vytvářet globální záhlaví

Nastavení sekce

Barva pozadí

Uvnitř editoru šablon si všimnete sekce. Otevřete tuto sekci a změňte její barvu pozadí.

• Barva pozadí: #ffffff

dimenzování

Přejděte na kartu Návrh a přiřaďte 100% šířky další sekci.

• Šířka: 100%

vzdálenost

Přidejte také vlastní horní a dolní výplň.

• Horní výplň: 2vw
• Spodní výplň: 2vw

Stínová krabička

Na naši sekci také aplikujeme jemný odstín.

• Síla stínění stínu: 50px
• Barva stínu: rgba (0,0,0,0,08)

CSS ID

Později v tomto kurzu budeme potřebovat nějaký vlastní kód, aby došlo k efektu posouvání. Abychom se na to připravili, přidáme do sekce CSS ID.

• CSS ID: globální sekce záhlaví

Hlavní prvek

Sekce také uděláme pevné záhlaví přidáním dvou řádků kódu CSS k hlavnímu prvku sekce.

position: fixed;top: 0;

Z index

Nyní se ujistěte, že se naše sekce zobrazuje v horní části stránky nebo obsah příspěvku také zvýšíme z-index v nastavení viditelnosti.

• Z Index: 99999

Přidat nový řádek

Struktura sloupců

Po dokončení všech parametrů sekce pokračujte v přidávání nového řádku do sekce pomocí následující struktury sloupců:

dimenzování

Bez přidání modulu zatím otevřete nastavení řádku a nechte řádek vyplnit celou šířku obrazovky.

• Použít vlastní šířku okapu: Ano
• Šířka okapu: 1
• Vyrovnání výšek sloupců: Ano
• Šířka: 100%
• Maximální šířka: 100%

vzdálenost

Odstraňte také všechny výchozí výplně horní a dolní výplně.

• Horní výplň: 0px
• Spodní výplň: 0px

Hlavní prvek

vycentrujte to obsah sloupce a umožnit sloupcům zůstat vedle sebe na menších obrazovkách přidáním dvou řádků kódu CSS do hlavního prvku řádku.

display: flex;align-items: center;

Do sloupce 2 přidejte modul sledování sociálních médií

Přidejte sociální sítě

Je čas přidat moduly, počínaje modulem sledování sociálních médií ve sloupci 1. Přidejte sociální sítě, které chcete zobrazit.

Obnovte jednotlivé styly sociálních médií

Pokračujte resetováním stylů každé sociální sítě na individuální úroveň.

Přidejte individuální prostor sociální sítě

Budete také muset otevřít nastavení pro každou sociální síť samostatně a přidat polstrování v nastavení mezer.

• Spodní výplň: 0.5vw

zarovnání

Jakmile jednotlivě přidáte spodní výplň do každé sociální sítě, vraťte se zpět do obecného nastavení vašeho modu. Přepněte na kartu Návrh a změňte zarovnání modulu.

• Zarovnání modulu: střed

Výchozí nastavení ikon

Také změňte barvu ikony v nastavení ikon.

• Barva ikony: # 000000

Nastavení ikony kurzoru

A změňte barvu ikony přechodu.

• Barva ikony: # c2ab92

hraniční

Dokončete parametry modulu přidáním dolního okraje do parametrů hranice.

• Šířka dolního okraje: 1px
• Barva dolního okraje: # 000000

Přidejte modul nabídky do sloupce 2

Vyberte nabídku

Pojďme k dalšímu sloupci! Přidejte modul nabídky a vyberte nabídku podle vašeho výběru.

Stáhnout logo

Poté nahrajte logo do modulu.

Odstraňte barvu pozadí

A odstraňte barvu pozadí.

Dispozice

Poté přepněte na kartu Návrh a ujistěte se, že pro rozložení platí následující nastavení:

• Styl: Na střed
• Směr rozbalovací nabídky: dolů

Výchozí text nabídky

Pokračujte změnou nastavení textu nabídky následujícím způsobem:

• Barva aktivního odkazu: # c2ab92
• Písmo nabídky: Cormorant Garamond
• Barva textu: # 000000
• Velikost textu nabídky: 1vw (stolní), 2vw (tablet), 3vw (telefon)

Text nabídky kurzoru

Změňte text nabídky po najetí myší.

• Barva textu nabídky: # c2ab92

Rozbalovací nabídka

Poté změňte barvu rozbalovací nabídky v nastavení rozbalovací nabídky.

• Barva řádku z rozbalovací nabídky: # 000000

ikony

Měníme také barvu ikony nabídky hamburgerů v nastavení ikon.

• Barva ikony nabídky Hamburger: # 000000

dimenzování

Pokračujte změnou maximální šířky loga na různých velikostech obrazovky v nastavení velikosti.

• Maximální šířka loga: 5vw (stůl), 10vw (tablet), 13vw (telefon)

Nabídka propojení CSS

Dokončete nastavení modulu přidáním dvou řádků kódu CSS do odkazu nabídky modulu na kartě Upřesnit.

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

Přidejte textový sloupec do sloupce 3

Přidat kopii

Pojďme k poslednímu modulu! Jediným modulem, který potřebujeme, je textový modul.

Přidání odkazu

Tento modul bude sloužit jako CTA. Přidejte odkaz podle vašeho výběru.

• URL odkazu na modul: #

Výchozí nastavení textu

Přepněte na kartu návrhu modulu a odpovídajícím způsobem změňte nastavení textu:

• Písmo textu: Cormorant Garamond
• Barva textu: # 000000
• Velikost textu: 1vw (stolní), 2vw (tablet), 3vw (telefon)

Nastavení textového kurzoru myši

Změňte barvu textu na přechodu.

• Barva textu: # c2ab92

dimenzování

Pokračujte změnou parametrů dimenzování modulu na různých velikostech obrazovky.

• Šířka: 12vw (stolní), 18vw (tablet), 22vw (telefon)
• Zarovnání modulu: střed

vzdálenost

A v nastavení mezer přidejte nějaké spodní polstrování.

• Spodní výplň: 0.5vw

hraniční

Doplňte parametry modulu přidáním dolního okraje.

• Šířka dolního okraje: 1px
• Barva dolního okraje: # 000000

Přidejte sloupec kódu do sloupce 2

Vložte JQuery a CSS kód

Jakmile vytvoříte styl všech režimů v řádku, je čas provést efekt odhalení / skrytí. K tomu budeme muset přidat vlastní kód do modulu kódu, který umístíme do sloupce 2. Tento kód bude fungovat v jakékoli sekci, kterou přidáte, bez ohledu na to, jak navrhujete záhlaví nebo moduly. který používáte, ujistěte se, že jste do své sekce přidali ID CSS. Umístěte kód JQuery mezi značky skriptu a kód CSS mezi značky stylu, jak je znázorněno na obrazovce tisku níže.

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 modifikace generátoru a zobrazte výsledek

Jakmile dokončíte globální záhlaví, uložte všechny změny a zobrazte výsledek na svém Webové stránky!

přehled

Nyní, když jsme prošli všemi kroky, pojďme se konečně podívat, jak to vypadá na různých velikostech obrazovky.

Závěrečné myšlenky

V tomto článku jsme vám ukázali, jak nastavit, aby se vaše globální záhlaví zobrazovalo při posouvání nahoru a jak se skrývá při posouvání dolů. Jedná se o populární a efektivní způsob, jak pomoci návštěvníkům snadno se orientovat, aniž by zabrali část jejich výšky. Můžete si také stáhnout soubor JSON zdarma! Máte-li jakékoli dotazy nebo návrhy, neváhejte zanechat komentář v sekci komentáře níže.