Chcete vytvořit globální záhlaví s modulem Full Screen Menu v Divi?
Záhlaví je jedním z nejdůležitějších prvků každého Webové stránky a je v srdci User Experience. Navigační nabídka dává vašim uživatelům představu o tom, co mohou očekávat, že na vás najdou Webové stránky a pomáhá jim najít informace, které potřebují.
Kromě toho může být sekundární panel nabídek ideálním místem pro zvýraznění výzvy k akci nebo k akci podporovat nabídka. Nemluvě o tom, že hlavička je jednou z nejdůležitějších částí vašeho Webové stránky, protože se obvykle objevuje na každé stránce. Je to skvělá příležitost předvést svou značku a vytvořit záhlaví, které je konzistentní s designem zbytku vašeho webu.
Možnosti Divi Theme Builder vám umožňují vytvořit vlastní globální záhlaví a přizpůsobit vzhled modulů záhlaví a menu na celém webu.
V tomto tutoriálu vám ukážeme, jak vytvořit globální záhlaví pomocí modulu nabídky Divi na celé obrazovce.
Začněme!
přehled
Zde je náhled globální hlavičky, kterou budeme navrhovat.
Otevřete nástroj pro tvorbu motivů
Vzhledem k tomu, že v tomto příkladu vytváříme globální záhlaví, přejděte na „Tvůrce motivů“, který najdete v nabídce Divi WordPress. Vyberte Přidat globální záhlaví a poté vyberte Vytvořit globální záhlaví.
Vytvořte sekundární panel nabídek
Když poprvé otevřete globální rozložení záhlaví, je předinstalované s běžnou sekcí. Upravíme to tak, aby to byl náš sekundární panel nabídek, který bude sedět nad naší nabídkou po celé šířce a bude obsahovat text výzvy k akci a tlačítko.
Nejprve otevřete nastavení sekce a přidejte barvu pozadí.
- Pozadí: #92A8A1
Dále okraj sekce.
- Vertex vnitřního okraje: 0px
- Spodní vnitřní okraj: 0px
Nyní vložte řádek. V tomto příkladu použijeme rozložení zobrazené níže.
V nastavení řádků v části Velikost na kartě Styl harmonizujte výšky sloupců.
- Harmonizovat výšky sloupců: ANO
Dále nastavte horní a dolní okraj následovně:
- Horní vnitřní okraj: 5 pixelů
- Spodní vnitřní okraj: 5px
Protože chceme, aby byly naše sekundární prvky záhlaví zarovnány svisle, přidáme do prvku hlavního řádku nějaké vlastní CSS.
1.
align-items:center;
Nyní, když je naše linka nakonfigurována, můžeme vložit moduly pro naši obsah. Nejprve vložte textový modul na levou stranu.
Upravit obsah textu. Toto je ideální místo pro zařazení výzvy k akci nebo k akci podporovat nabídka.
- Text: "Připojte se k našemu seznamu adresátů a získejte 10% slevu na svou objednávku!" »
Přejděte na kartu Styl modulu Text a upravte parametry následovně:
- Písmo „Text“: Poppins
- „Text“ Tlumené světlo: Střední
- Barva textu "Text": #FFFFFF
Dále přidejte modul Tlačítko vpravo.
Přidat text tlačítka.
- Text: "Získejte bezplatnou cenovou nabídku"
Na kartě Styl zarovnejte tlačítko na střed.
- Zarovnání tlačítek: Střed
Nyní upravíme vzhled tlačítka.
- Použít vlastní styly pro tlačítko: Ano
- Velikost textu tlačítka: 14px
- Barva textu tlačítka: #FFFFFF
- Tlačítko pozadí: #2F5349
- Tlačítko Šířka okraje: 0px
- Tlačítko s poloměrem ohraničení: 50 pixelů
- Mezera mezi písmeny tlačítka: 1px
- Písmo tlačítka: Poppins
Přidejte modul nabídky na celou obrazovku
Nyní, když je navrženo sekundární menu, můžeme přejít do hlavního menu. Menu sestavíme pomocí modulu Full Screen Menu. Přidejte do globálního záhlaví novou sekci Celá obrazovka.
Vyberte a vložte modul nabídky na celou obrazovku
Dále přizpůsobíme nastavení nabídky Celá obrazovka.
- Barva aktivního odkazu: #2F5349
- Nabídka písem: Poppins
- Nabídka tlumeného světla: Polotučné
- Nabídka stylu kopírování: TT
- Barva textu nabídky: #000000
- Barva textu nabídky po najetí myší: #2F5349
- Velikost textu nabídky: 15px
- Mezera mezi písmeny nabídky: 2px
Změňte barvu ikony nabídky hamburgeru na černou.
- Barva ikony nabídky Hamburger: #000000
Než přidáme logo do naší nabídky, změňme možnosti velikosti. Použijeme vestavěné responzivní možnosti Divi k nastavení jiné maximální výšky pro PC a mobil.
- Maximální výška loga na PC: 3vw
- Maximální výška loga na mobilu: 6vw
Nyní přidejte své logo do nabídky na celou obrazovku.
Nakonec chceme, aby hlavní nabídka zůstala v horní části obrazovky, když uživatel procházel webem, takže k tomu použijeme vestavěná lepkavá nastavení Divi.
- Sticky Position: Stick nahoře
Tím je náš globální návrh záhlaví kompletní.
Vytvořte novou stránku s předdefinovaným rozložením
Chcete-li vidět záhlaví a nabídku v plné šířce v akci, vytvořte novou stránku s předdefinovaným rozložením z knihovny Divi. Pro tento příklad použijeme domovskou stránku Flooring z balíčku uspořádání podlaží.
Přidejte na svůj web novou stránku a pojmenujte ji a poté vyberte možnost Použít Divi Builder.
V tomto příkladu používáme předem připravené rozvržení z knihovny Divi, takže vyberte Vybrat rozvržení.
Najděte a vyberte rozvržení „Domovská stránka podlahy“.
Chcete-li přidat rozvržení na stránku, vyberte možnost „Vybrat rozvržení“.
Nyní je design hotový!
Konečný výsledek
Proč investovat do čističky vzduchu?
Jak jsme řekli výše, záhlaví a navigační nabídka jsou jádrem uživatelské zkušenosti vašeho webu. Nyní jste viděli, jak snadné je navrhnout ohromující celkovou hlavičku s modulem Divi "Nabídka na celou obrazovku".
Naštěstí vám Divi's theme builder dává kontrolu nad každým aspektem nabídky a záhlaví vašeho webu a pomocí několika kliknutí můžete vytvářet zcela vlastní a jedinečné návrhy.
Použili jste globální možnosti záhlaví Divi k přizpůsobení záhlaví a navigační nabídky? Řekněte nám, co si myslíte v komentářích!
