Chcete vytvořit vertikální navigační nabídku tak, aby v DIVI zobrazovala více položek v popředí?
Vertikální navigační nabídky mohou být užitečné pro některé webové stránky, které potřebují více položek nabídky v popředí. Horizontální nabídky mohou být složité, aby se vešly všechny potřebné odkazy na nabídky, zejména na menších šířkách prohlížeče.
V tomto tutoriálu vám ukážeme, jak vytvořit vertikální navigační nabídku pomocí Divi Theme Builder.
To vám poskytne více prostoru pro předvedení položek nabídky WordPress.
Začněme!
přehled
Zde je rychlý pohled na design, který vytvoříme v tomto tutoriálu.
Pojďme na tutoriál.
Vytvoření nového globálního záhlaví
Pro tento tutoriál vytvoříme vertikální navigační nabídku v globálním záhlaví pomocí Divi's theme builder
Chcete-li začít, přejděte na hlavní panel WordPress a přejděte na Divi > Theme Builder.
Poté klikněte na oblast "Přidat globální záhlaví". šablona webových stránek výchozí a z rozevíracího seznamu vyberte možnost "Sestavit globální záhlaví".
Čtěte také: Jak vytvořit globální záhlaví pomocí Theme Builder v DIVI
Návrh rozvržení svislé části
V editoru globálního rozložení záhlaví otevřete běžná nastavení sekce, která již existují, a aktualizujte následující.
- Maximální šířka: 300 pixelů
- Výška: 100vh
- Vnitřní okraj: 4vh nahoře, 0px dole
Pokračujte v přizpůsobení přidáním stínového pole následovně:
- Shadow box: viz snímek obrazovky
- Vertikální poloha stínu rámečku: 0px
- Síla rozostření rámečku: 20 pixelů
- Síla rozprostření stínu rámečku: -10px
- Barva stínu: rgba (0,0,0,0.3)
Abyste zajistili, že vertikální navigační nabídka zůstane viditelná na levé straně, když uživatel posouvá, aktualizujte záložku Upřesnit na pevnou pozici a aktualizujte z-index následovně:
- Pevná stanice
- Z-index: 9999
Chcete-li zajistit, že uvidíme navigaci podnabídky, která se bude rozšiřovat mimo sekci, přidejte do hlavního prvku následující vlastní CSS:
overflow: visible !important;
Vaše sekce bude nyní ve svislém rozložení na levé straně šablony.
Navrhněte vertikální menu
Po zavedení sekce jsme připraveni navrhnout vertikální nabídku. K tomu použijeme modul nabídky s vlastním CSS, abychom přizpůsobili navigaci tak, aby se zobrazovala vertikálně.
Použijeme také jednotku délky vh, aby se nabídka dobře přizpůsobila různým výškám prohlížeče.
Přidání řádku
Chcete-li začít, přidejte řádek do sloupce v sekci.
Dále aktualizujte parametry linky následovně:
Velikost a rozteč
- Použít vlastní šířku okapu: ANO
- Rozteč sloupců: 1
- Maximální šířka: 100%
- Maximální šířka: 80%
- Vnitřní okraj: 3vh nahoře, 3vh dole
Hranice
- Šířka okraje: 1px
- Barva ohraničení: #eeeeee
Přidán modul menu
Do řádku s jedním sloupcem přidejte nový modul nabídky.
Vyberte nabídku, kterou chcete zobrazit na kartě Obsah.
Poté přidejte své logo webové stránky jak obsah dynamické pod tlačítkem Logo.
Na kartě Styl aktualizujte následující:
- Styl: Střed
- Nabídka písem: Nunito Sans
- Barva textu nabídky: #535b7c
- Velikost textu nabídky: 18px (počítač), 14px (tablet a telefon)
- Výška řádku menu: 2 em
- Barva rozbalovacího řádku: #535b7c
- Rozbalovací nabídka Barva aktivního odkazu: #535b7c
- Barva ikony košíku: #535b7c
- Barva ikony vyhledávání: #535b7c
- Barva ikony nabídky Hamburger: #535b7c
- Vnitřní okraj: 2vh nahoře, 2vh dole
Přidáno vlastní CSS pro nabídku
Nabídka potřebuje vlastní CSS, aby dosáhla vertikální navigace, kterou chceme dosáhnout. Chcete-li začít, přejděte na kartu Upřesnit a do odkazu na nabídku a loga nabídky přidejte následující vlastní CSS.
Odkaz na nabídku CSS (počítač):
width: 100%;
padding: 1vh 15px;
background: #f8f8f8;
border-radius: 3px;
border: 1px solid #eeeeee;
Odkaz na nabídku CSS (tablet):
width: auto;
border:none;
Menu CSS logo:
margin-bottom: 20px;
Dále přidejte vlastní třídu CSS do modulu Menu následovně:
CSS třída: et-vert-menu
Tato třída bude použita k zacílení této konkrétní nabídky v našem externím vlastním CSS, které přidáme pomocí modulu Kód.
Přidání vlastního CSS pomocí modulu Kód
Pod modulem Menu přidejte modul Kód.
Poté vložte následující kód do oblasti kódu (nezapomeňte jej umístit mezi značky stylu):
/* MenudeNavigation Style Vertical*/
.et-vert-menu .et_pb_menu__menu>nav>ul {
flex-direction: column;
margin-left: 0px!important;
margin-right: 0px!important;
width: 100%;
}
.et-vert-menu .et_pb_menu__menu>nav>ul>li {
margin: 10px0!important;
}
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul li {
display:block!important;
padding: 0px!important;
}
.et-vert-menu .et_pb_menu__menu>nav>ul ul {
padding: 0px!important;
top: 0px!important;
}
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul {
left:calc(100%- 1px) !important;
top:0px!important;
}
.et-vert-menu .et-menu .menu-item-has-children>a:first-child:after {
content: "5"!important; /*change arrow icon for submenu*/
right: 20px!important;
}
.et-vert-menu .nav li ul {
left: calc(100%- 1px) !important; /*align submenu to the right of menu link*/
}
@media alland (min-width: 981px) {
.et-vert-menu .et_pb_menu__menu, .et-vert-menu .et_pb_menu__menu>nav {
width: 100%; /*width of the vertical navigation menu*/
}
/*Adjust the width of the main content and footer area to make room for the fixed vertical header*/
#et-main-area {
width: calc(100%- 300px);
margin-left: 300px;
}
}
Navrhněte sociální média následovat tlačítko a ikony
Nyní, když je nabídka kompletní, můžeme přidat tlačítko a některá sociální média následovat odkazy pro dokončení vertikálního záhlaví.
Přidání řádku
Přidejte nový řádek o jeden sloupec pod aktuální řádek.
Přidání tlačítka
Poté přidejte na řádek modul Button.
Aktualizujte nastavení tlačítka následovně:
- Zarovnání tlačítek: střed
- Použít vlastní styly pro tlačítko: ANO
- Velikost textu tlačítka: 18px (počítač), 14px (tablet a telefon)
- Barva textu tlačítka: #ffffff
- Barva pozadí tlačítka: #535b7c
- Šířka okraje tlačítka: 0 pixelů
Dále přejděte na kartu Upřesnit a do hlavního prvku vložte následující vlastní CSS:
Hlavní prvek CSS (počítač)
display:block;
width: 100%;
Hlavní prvek CSS (tablet)
display:inherit;
Přidány ikony sledování sociálních médií
Pod tlačítko přidejte modul Sledujte nás na sociálních sítích.
Na kartě přidejte požadované sociální sítě obsah.
Na kartě Styl aktualizujte následující:
- Zarovnání modulu: Střed
- Barva ikony: #535b7c
Poté otevřete nastavení pro každou ze sociálních sítí a odstraňte barvu pozadí.
Poté přidejte malý horní okraj následovně:
- Marže: 3vh Peak
Aktualizujte parametry linky
Po dokončení ikon sledování sociálních médií otevřete Nastavení linky a upravte následující:
- Použít vlastní šířku okapu: ANO
- Rozteč sloupců: 1
- Vnitřní okraj: 3vh nahoře, 0px dole
Uložit rozložení a šablonu
Po dokončení uložte rozvržení a šablonu.
Konečný výsledek
Zde je konečný výsledek na živé stránce.
Stáhnout DIVI hned!!!
Proč investovat do čističky vzduchu?
Zde zobrazené vertikální navigační menu má pevnou pozici. Pokud však potřebujete více místa pro další položky nabídky nebo obsah, můžete změnit pozici sekce na absolutní
Nastavení vertikální sekce také otevírá dveře k vytváření vlastních postranních panelů.
Pokud máte nějaké obavy nebo návrhy, najděte nás v sekci komentářů diskutovat o tom.
Můžete však také konzultovat naše zdroje, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.
Mezitím sdílejte tento článek na různých sociálních sítích.
...
