Potřebujete vytvořit globální záhlaví pro váš webové stránky s Divi?
Všude na vašem webu se zobrazí globální záhlaví Webové stránky, pokud jste stránce nebo příspěvku nepřiřadili jiné záhlaví.
Začněme!
přehled
Zde je náhled globální hlavičky, kterou budeme navrhovat.
Nakonfigurujte si hlavní nabídku
Začněte vytvořením nabídky v nastavení vzhledu vašeho webu WordPress.
Otevřete možnost Theme Builder pod Divi
V možnostech Divi téma, klikněte na Tvůrce motivů. Jakmile tam budete, všimnete si a šablona webových stránek výchozí.
Přidejte a vytvořte globální záhlaví
Le šablona webových stránek výchozí je místo, kde můžete začít vytvářet vlastní globální záhlaví, globální tělo a globální zápatí. Klikněte na "Přidat globální záhlaví" a pokračujte kliknutím na "Vytvořit globální záhlaví" pro zahájení procesu.
Nastavení sekce
dimenzování
Otevřete nastavení sekce, které najdete na stránce, v záložce Styl změňte rozměry na různých velikostech obrazovky.
- Maximální šířka: 100 %
- Maximální šířka: 1280px (pro PC a tablet), 100% (pro mobil)
vzdálenost
Odstraňte všechny horní a spodní vnitřní okraje
- Vertex vnitřního okraje: 0px
- Spodní vnitřní okraj: 0px
Hranice
Nyní přidejte poloměr okraje do levého a pravého dolního rohu sekce.
- Vlevo dole: 50px
- Vpravo dole: 50px
Stínová krabička
Přidejme také jemný box stín.
- Síla rozostření rámečku: 60 pixelů
- Barva písma titulků: rgba(0,0,0,0.13)
viditelnost
- Horizontální přetečení: Viditelné
- Vertikální přetečení: Viditelné
Věnujte záhlaví nový řádek
Nyní, když jsme dokončili obecná nastavení sekce, můžeme začít přidávat řádky. Celkem budeme potřebovat dva řádky; jeden, který je vyhrazen pro záhlaví a jeden, který umožňuje zobrazení položek nabídky. Začneme záhlavím přidáním nového řádku pomocí následující struktury sloupců:
Nastavení linky
Nastavení pozadí
Bez přidání jakýchkoli modulů na čáru otevřete nastavení čáry a změňte barvu pozadí.
- Pozadí: #38383F
dimenzování
Poté upravte parametry velikosti čáry.
- Použít vlastní šířku okapu: ANO
- Rozteč sloupců: 1
- Maximální šířka: 100 %
- Maximální šířka: 100 %
Zobrazení
Nyní se ujistěte, že se sloupce zobrazují vedle sebe na menších obrazovkách přidáním tohoto řádku kódu CSS do prvku hlavního řádku.
01
display: flex;
Přidejte modul obrázku do sloupce 1
Stáhnout logo
Jakmile dokončíte nastavení řádku, je čas začít přidávat moduly. Přidejte obrázkový modul do sloupce 1 a nahrajte své logo.
zarovnání
Přejděte na kartu Styl a zarovnejte obrázek doleva.
dimenzování
Změňte také šířku modulu.
vzdálenost
Přidejte také vlastní hodnoty okrajů.
Do sloupce 2 přidejte modul sledování sociálních médií
Přidejte sociální sítě
Pojďme k druhému sloupci. Tam budeme potřebovat modul pro sledování sociálních sítí. Přidejte sociální sítě podle svého výběru. Můžete přidat tolik sociálních médií, kolik chcete.
Barva pozadí sociální sítě
Dále otevřete každou sociální síť jednotlivě a změňte barvu pozadí na zcela průhlednou barvu.
- Barva pozadí: rgba (0,0,0,0)
zarovnání
Vraťte se k normálnímu nastavení modulu a poté změňte úplné zarovnání modulu.
ikona
Změňte také nastavení ikon.
- Barva ikony: #FFFFFF
- Použít vlastní velikost ikony: Ano
- Velikost písma ikony: 16px (PC a tablet), 12px (telefon)
vzdálenost
Přidejte horní okraj.
Přidejte modul Button do sloupce 3
Přejděte do třetího sloupce a přidejte modul Tlačítko obsahující text podle vašeho výběru.
zarovnání
Změňte zarovnání tlačítka na kartě Styl.
Nastavení tlačítka
Upravte nastavení tlačítka následovně:
- Použít vlastní styly tlačítka: Ano
- Velikost textu tlačítka: 12px (počítač), 10px (tablet), 8px (telefon)
- Barva textu tlačítka: #ffffff
- Tlačítko pozadí: #ffae25
- Šířka okraje tlačítka: 0 pixelů
- Tlačítko Poloměr okraje: 0 pixelů
- Rozteč písmen tlačítka: 5 px (počítač), 3 px (tablet a telefon)
- Tlačítko písma: Otevřít Žádné
- Tlačítko Soft Light: Tučný text
- Styl tlačítka kopírování: TT
vzdálenost
Přizpůsobte hodnoty okrajů.
Věnujte nový řádek panelu nabídek
Jakmile vyplníte řádek věnovaný globální hlavičce, můžete přidat další řádek hned pod něj.
Nastavení linky
dimenzování
Bez přidání jakýchkoli modulů otevřete nastavení čáry a změňte nastavení velikosti na kartě Styl.
vzdálenost
Poté odstraňte všechny spodní a horní okraje.
Přidejte do sloupce modul nabídky
Vyberte Nabídka
Dále přidejte do sloupce modul Menu a vyberte nabídku, kterou jste vytvořili v první části tohoto kurzu.
Dispozice
Přejděte na kartu Styl a změňte nastavení rozvržení následovně:
Připojení
Změňte také barvu aktivního odkazu na kartě Styl.
- Barva aktivního odkazu: #ffae25
Rozbalovací nabídka
Udělejte totéž pro barvu čáry rozbalovací nabídky v nastavení rozbalovací nabídky.
- Barva rozbalovacího řádku: #ffae25
ikona
- Barva ikony menu hamburger: #ffae25
Text menu
S nastavením textu nabídky.
- Písmo menu: Prata
- Barva textu nabídky: #000000
Aby záhlaví a panel nabídek zůstaly nahoře
Otevřete nastavení sekce
Jakmile dokončíte druhý řádek, vše, co musíte udělat, je zajistit, aby sekce zůstala v horní části našich stránek a příspěvků. K tomu znovu otevřeme nastavení sekce.
Přidejte vlastní CSS do hlavního prvku
Dále přejdeme na záložku Advanced a do hlavního prvku sekce přidáme pár řádků kódu CSS.
01
position: fixed;02
top: 0;03
left: 0;04
right: 0;
Uložte možnosti globálního záhlaví a tvůrce motivů
Jakmile dokončíte celý návrh globálního záhlaví, nezapomeňte návrh uložit, než opustíte rozložení šablony. Jakmile skončíte s rozvržením šablony, uložte všechny změny v nástroji pro tvorbu motivů a máte hotovo!
přehled
Nyní, když jsme prošli všemi kroky, pojďme se naposledy podívat na výsledek.
Proč investovat do čističky vzduchu?
V tomto článku jsme vám ukázali, jak vytvořit vlastní globální záhlaví pomocí nového tvůrce motivů Divi. Tento tutoriál ukazuje, jak snadné je vytvořit krásné záhlaví a aplikovat je na celý váš Webové stránky nebo konkrétní vlastní typy příspěvků.
Doufáme, že vám pomůže při přizpůsobení vašeho webu pomocí Theme Builder.
Pokud máte nějaké dotazy nebo návrhy, zanechte nám prosím komentář v sekce komentářů níže.
...
