Chtěli byste s Divi vytvořit pěknou průhlednou a lepící hlavičku?
Pokud jde o nastavení globální hlavičky pro vaše Webové stránky, existuje mnoho způsobů, jak k tomu přistupovat. Jedním z jemnějších přístupů je transparentní záhlaví.
Pokud se rozhodnete použít průhlednou hlavičku, ale potřebujete, aby byla při posouvání lepkavá, tento tutoriál si zamilujete. Přechod mezi průhledným a lepivým je snadný!
Pojďme.
přehled
Než se ponoříme do tutoriálu, pojďme se rychle podívat na výsledek.
Vytvořte novou šablonu globálního záhlaví
Přejděte na Divi > Theme Builder.
Sekce #1 Nastavení
Barva pozadí
Jakmile jste v editoru šablon, všimnete si sekce. Tato sekce bude věnována horní liště záhlaví, které si můžete všimnout v náhledu tohoto článku. Otevřete nastavení sekce a přidejte černou barvu pozadí.
- Pozadí: #000000
vzdálenost
Přejděte na kartu Styl řezu a ve výchozím nastavení odeberte všechny vnitřní okraje (nahoře a dole).
- Vertex vnitřního okraje: 0px
- Spodní vnitřní okraj: 0px
Přidat nový řádek
Struktura kolony
Pokračujte přidáním nového řádku pomocí následující struktury sloupců:
Přidejte do sloupce modul Text
Přidejte textový modul do sloupce řádku a zadejte zprávu podle svého výběru.
Nastavení textu
Přejděte na kartu Styl modulu a podle toho změňte nastavení textu:
- Písmo textu: Oswald
- Text Styl kopírování: TT
- Barva textu Text: #ffffff
- Text Velikost textu:
- Plocha: 19px
- Tablet: 18px
- Telefon: 16px
- Zarovnání textu: Na střed
Přidat oddíl # 2
vzdálenost
Hned pod první sekci přidejte další běžnou sekci. Tato sekce bude věnována našemu průhlednému menu, které se při rolování bude lepit.
Otevřete nastavení sekce a odeberte všechny vnitřní okraje (nahoře a dole) ve výchozím nastavení na kartě Styl.
- Vertex vnitřního okraje: 0px
- Spodní vnitřní okraj: 0px
Přidat nový řádek
Struktura kolony
Pokračujte přidáním nového řádku pomocí následující struktury sloupců:
Průhledná barva pozadí
Otevřete nastavení čáry a aplikujte na čáru zcela průhlednou barvu pozadí.
- Pozadí: rgba (255,255,255,0 XNUMX XNUMX)
dimenzování
Přejděte na kartu Styl čáry a změňte nastavení velikosti.
- Použít vlastní šířku okapu: Ano
- Rozteč sloupců: 1
- Maximální šířka: 100%
- Maximální šířka: 100%
vzdálenost
Poté přidejte vlastní vnitřní (levý a pravý) okraje.
- Levý vnitřní okraj: 10 %
- Zákon o vnitřní marži: 10 %
Stínová krabička
Dále naneste průhledný stín boxu. Později v tutoriálu použijeme tento stín krabice v lepkavém stavu s jinou barvou stínu.
- Síla rozostření rámečku: 50 pixelů
- Barva písma titulků: rgba (0,0,0,0)
Pozice
Abyste se ujistili, že se řádek objeví v horní části obsah stránky, s průhledným pozadím, použijeme absolutní pozici pro náš řádek v záložce Upřesnit.
- Pozice: Absolutní
- Umístění: Vlevo nahoře
Sloupec 2 Viditelnost
Skryjeme také druhý sloupec našeho řádku na tabletu a telefonu, abychom měli méně složitý design záhlaví na menších velikostech obrazovky.
Přidejte modul nabídky do sloupce 1
Vyberte nabídku
Nyní, když jsou naše nastavení řádků na místě, je čas přidat moduly, počínaje modulem nabídky ve sloupci 1. Vyberte nabídku podle svého výběru.
Stáhnout logo
Poté nahrajte logo.
Odstraňte barvu pozadí
Odstraňte také barvu pozadí z modulu.
Nastavení textu nabídky
Přejděte na kartu Styl modulu a podle toho změňte nastavení textu nabídky:
- Nabídka písem: Oswald
- Nabídka měkkého světla: Tučné
- Nabídka stylu kopírování: TT
- Barva textu menu: #efefef
- Velikost textu nabídky: 18px
- Zarovnání textu: vpravo
Nastavení rozevírací nabídky
Změňte také nastavení rozevírací nabídky.
- Barva řádku rozbalovací nabídky: rgba(0,0,0,0)
- Mobilní menu Barva pozadí: rgba (0,0,0,0,95)
Nastavení ikon
Dále změňte barvy ikon v nastavení ikon.
- Barva ikony košíku: #ffffff
- Barva ikony vyhledávání: #ffffff
- Barva ikony menu hamburger: #ffffff
Nastavení loga
Barvu našeho loga měníme také v nastavení loga změnou filtru inverze obrázku.
- Invertovat obrázek: 90 %
dimenzování
Dále našemu logu přiřadíme maximální výšku.
- Maximální šířka loga: 40 pixelů
vzdálenost
Dále přidáme horní a spodní výplň na malé obrazovky.
- Vrchol vnitřního okraje:
- Tablet a telefon: 10px
- Spodní vnitřní okraj:
- Tablet a telefon: 10px
Přidejte modul Tlačítko do sloupce 2
Přidej text k Buttonovi
Ve sloupci 2 je jediným modulem, který potřebujeme, modul Button. Přidejte text dle vlastního výběru.
Zarovnání tlačítka
Přejděte na kartu Styl modulu a změňte zarovnání tlačítka.
- Zarovnání tlačítek: vpravo
Nastavení tlačítek
Další tlačítko přizpůsobte.
- Použít vlastní styly pro tlačítko: Ano
- Velikost textu tlačítka: 16px
- Barva textu tlačítka: #ffffff
- Tlačítko pozadí: #ed4441
- Barva okraje tlačítka: #ed4441
- Tlačítko Poloměr okraje: 0 pixelů
- Mezera mezi písmeny tlačítka: 4px
- Písmo tlačítka: Oswald
- Tlačítko Soft Light: Tučný text
- Tlačítko kopírovat styl: TT
- Zobrazit ikonu tlačítka: Ano
- Barva ikony tlačítka: #1a1a1a
vzdálenost
A doplňte parametry modulu přidáním vlastních hodnot mezer.
- Horní okraj: -70px
- Horní a dolní vnitřní okraj: 25 px
Použijte vlastní lepkavé efekty
Udělejte sekci č. 2 lepivou
Nyní, když jsme položili základ pro naši hlavičku, je čas použít lepivý efekt! Chcete-li to provést, začněte otevřením nastavení ve druhé části a aplikujte následující pevná nastavení na kartu Upřesnit:
- Sticky Position: Stick to Top
- Posun vrcholu tyče: 0px
- Bottom Sticky Mimit: Žádný
- Odsazení od okolních lepivých prvků: ANO
- Výchozí a rychlé styly přechodu: ANO
Barva pozadí tyče
Nyní, když je povolena možnost Sticky, můžeme provést změny volby Sticky pro všechny prvky v sekci. Začneme tím, že otevřeme řádek obsahující naši nabídku a na lepící možnost použijeme bílou barvu pozadí.
- Barva pozadí: #FFFFFF
Lepivé rozestupy řádků
Dále upravíme hodnoty mezer funkce sticky řádku.
- Vertex vnitřního okraje: 0px
- Spodní vnitřní okraj: 0px
Sticky Row Shadow Box
Měníme také barvu stínu krabice v lepkavém stavu.
- Barva písma titulků: rgba (0,0,0,0.08)
Umístění lepivé linie
Dále vrátíme umístění řádku do relativního stavu v lepivém stavu.
- Pozice: Relativní
- Offset Počátek: vlevo nahoře
Nastavení textu nabídky přilepeného stavu
Dále změníme barvu textu nabídky na lepivý stav.
- Barva textu nabídky: #000000
Nastavení rozevírací nabídky v pevném stavu
S barvou pozadí mobilní nabídky v nastavení rozevírací nabídky.
- Mobilní menu, barva pozadí: #ffffff
Barvy ikon nabídky v lepkavém stavu
Také změňte barvy ikon v lepkavém stavu.
- Barva ikony košíku: #000000
- Barva ikony vyhledávání: #000000
- Barva ikony nabídky Hamburger: #000000
Filtr loga v lepkavém stavu
Dále odstraňte invertní filtr z obrázku loga v lepkavém stavu.
- Inverze obrázku: 0 %
Rozteč tlačítek v lepkavém stavu
A dokončete tutoriál odstraněním záporného horního okraje z tlačítka, když je v lepkavém stavu.
- Horní okraj: 0px
přehled
Nyní, když jsme prošli všemi kroky, pojďme se naposledy podívat na konečný výsledek.
Stáhnout DIVI hned!!!
Proč investovat do čističky vzduchu?
V tomto článku jsme vám ukázali, jak kombinovat konstruktor z témata of Divi s novými lepivými možnostmi. Konkrétně jsme vám ukázali, jak při posouvání přepnout z průhledného záhlaví na jiný styl lepivého záhlaví.
Tento přístup vám umožňuje sloučit design stránky s vaší nabídkou a zároveň zachovat pěkné lepivé záhlaví při posouvání.
Pokud se chcete o Divi dozvědět více, neváhejte navštívit náš katalog Divi tutoriály. Můžete se také poradit Jak vytvořit stránku Blog s modulem Divi Blog
Máte-li jakékoli dotazy nebo návrhy, neváhejte zanechat komentář v sekci komentáře níže.
Můžete však také konzultovat naše zdroje, Pokud potřebujete více prvků k realizaci projektů vytváření internetových stránek, podívejte se do našeho průvodce na internetu Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.
Ale mezitím, sdílejte tento článek na různých sociálních sítích.
...
