Modul Divi's Full Width Menu umožňuje umístit navigační nabídku kamkoli na stránku. To by mohlo být použito k přidání nabídky druhé stránky na stránku, nebo by to mohlo být použito ve spojení s funkcí Prázdná stránka k přesunutí hlavní navigace do dolní části stránky. Můžete například přesunout nabídku pod svou první sekci, aby vyhovovala lidem s velkým úvodním obrázkem. To v zásadě umožňuje vaší navigaci v záhlaví pohybovat se po stránce pomocí nástroje pro tvorbu!

Celá nabídka menu diviJak na stránku přidat modul nabídky na celou obrazovku

Než budete moci na svou stránku přidat modul nabídky v plné šířce, musíte nejprve přejít do Divi Builderu. Jednou Divi téma nainstalovaný na vašem Webové stránky, všimnete si tlačítka Použijte nástroj Divi Builder nad editorem příspěvků, kdykoli vytvoříte novou stránku. Kliknutím na toto tlačítko aktivujete Divi Builder a získáte přístup ke všem modulům Divi Builder. Poté klikněte na tlačítko Použijte Visual Builder pro spuštění generátoru ve vizuálním režimu. Můžete také kliknout na tlačítko Povolit Visual Builder když si prohlížíte své Webové stránky v popředí, pokud jste přihlášeni do svého řídicího panelu WordPress.

Používání divi builderu

Jakmile zadáte Visual Builder, můžete kliknutím na šedé tlačítko plus přidat nový modul na svou stránku. Nové moduly s plnou šířkou lze přidat pouze do sekcí s plnou šířkou. Pokud spouštíte novou stránku, nezapomeňte nejprve přidat na stránku sekci s plnou šířkou. Máme několik skvělých návodů, jak používat prvky sekce Divi.

full width menu.png

Vyhledejte modul nabídky s plnou šířkou v seznamu modulů a kliknutím na něj jej přidejte na svou stránku. Seznam modulů lze prohledávat, což znamená, že můžete také zadat slovo „Nabídka s plnou šířkou“ nebo „nabídka s plnou šířkou“ (v závislosti na verzi) a poté kliknout na Enter pro automatické vyhledávání a přidání modulu nabídky s plnou šířkou ! Po přidání modulu vás uvítá seznam možností modulu. Tyto možnosti jsou rozděleny do tří hlavních skupin: Obsah , Design et pokročilý .

Příklad použití: Přidání nabídky Fullwidth pod záhlaví stránky

V tomto příkladu vám ukážu, jak přidat nabídku celé šířky v části záhlaví stránky.

Zde je příklad:

příklad menu fullwidth divi.jpg

Jelikož tato nová nabídka na celou stránku nahradí výchozí hlavní navigační nabídku, je nutné vybrat prázdnou šablonu stránky, aby se kromě nabídky na celou šířku v horní části stránky neobjevila výchozí navigační nabídka. že přidám.

Chcete-li upravit šablonu stránky, přejděte do editoru stránky a vyberte šablonu „prázdná stránka“ v oblasti Atributy stránky na pravém postranním panelu.

atribut stránky.png

Protože tento modul zobrazí nabídku, která již existuje, je důležité, abyste ji již vytvořili, než ji přidáte do modulu nabídky na celou šířku.

Příklad menu wordpress.jpg

Jakmile vytvoříte nabídku, pomocí vizuálního nástroje přidejte sekci Fullwidth těsně pod sekci záhlaví stránky. Poté do sekce přidejte modul nabídky o celé šířce.

přidejte nabídku s celou šířkou pod title.jpg

Aktualizujte nastavení nabídky Fullwidth následujícím způsobem:

Možnosti obsahu

Nabídka: [vyberte nabídku, která má být v modulu použita] Kontext: # 333333

Možnosti návrhu

Barva textu: Světlá Orientace textu: Středové písmo písma: Nabídka Roboto Velikost písma: 20px

A je to!

Trik : Možnosti zobrazení na kartě Upřesnit můžete použít ke skrytí této nabídky v mobilních zařízeních a zobrazení jiné nabídky nad záhlaví, aby uživatelé mobilních zařízení mohli zobrazit nabídku bez nutnosti posouvat stránku dolů .

Výsledek menu divi.jpg

Možnosti obsahu nabídky Fullwidth

Na kartě obsah najdete všechny prvky obsahu modulu, například text, obrázky a ikony. Vše, co ovládá co ve vašem modulu se vždy najde na této kartě.

fullwidth-menu-section content.png

Menu

Vyberte nabídku, kterou chcete v modulu použít. Pomocí této stránky můžete vytvořit nová menu Vystoupení> Nabídky ze svého panelu WordPress. Pokaždé, když vytvoříte novou nabídku, bude ji možné vybrat z této rozevírací nabídky.

Barva pozadí

Ve výchozím nastavení má modul nabídky bílou barvu pozadí. Pokud chcete pro pozadí nabídky použít jinou barvu, můžete ji zde vybrat pomocí nástroje pro výběr barev.

Barva pozadí rozevírací nabídky

Ve výchozím nastavení dělí rozbalovací nabídky v modulu nabídky barvu pozadí definovanou v předchozím nastavení. Pokud chcete, aby vaše rozevírací nabídky měly svou vlastní barvu, můžete pomocí tohoto nastavení zvolit vlastní barvu.

Barva pozadí mobilní nabídky

Na mobilu je modul nabídky transformován do jiného designu a lépe přizpůsoben pro mobily. Barvu pozadí mobilní rozevírací nabídky můžete ovládat nezávisle na jeho protějšku na ploše.

Štítek správy

Tím se změní štítek modulu v konstruktoru pro snadnou identifikaci. Když použijete pohled WireFrame ve Visual Builderu, tyto popisky se zobrazí v bloku modulu rozhraní Divi Builder.

Možnosti návrhu v plné šířce

Na kartě Návrh najdete všechny možnosti stylingu modulu, například písma, barvy, velikost a mezery. Toto je karta, kterou použijete ke změně vzhledu vašeho modulu. Každý modul Divi má dlouhý seznam nastavení designu, pomocí kterého můžete cokoli změnit.

sekci návrh modulu menu fullwidth.png

Otevřete podnabídky

Ve výchozím nastavení se všechna podnabídky otevírají jako rozevírací nabídka pod lištou hlavní nabídky. Pokud umístíte nabídku do dolní části stránky a v nabídce jsou dlouhé rozevírací nabídky, můžete je otevřít nad modulem nabídky, aby nabídka nepřesahovala okno prohlížeče.

Vytvořte odkazy v nabídce celé šířky

Ve výchozím nastavení jsou odkazy na nejvyšší úroveň s modulem nabídky umístěny do vaší výchozí šířky obsahu. Chcete-li toto omezení odstranit a nechat své odkazy spouštět celou šířku stránky, počínaje zcela vlevo na obrazovce, můžete tuto možnost povolit.

Barva rozbalovací nabídky

V rozevíracích nabídkách jsou odkazy odděleny řádkem 1 pixel. Chcete-li upravit barvu tohoto řádku, můžete si vybrat vlastní barvu pomocí nástroje pro výběr barev v tomto nastavení.

Barva textu

Zde si můžete vybrat hodnotu svého textu. Pokud pracujete na tmavém pozadí, měl by být váš text zapnutý. Pokud pracujete na světlém pozadí, měl by být váš text tmavý.

Textová orientace

Tím se řídí způsob zarovnání textu v modulu. Můžete si vybrat mezi levou, pravou a středovou.

Aktivní barva odkazu

Barvy aktivních odkazů jsou zvýrazněny v modulu nabídky, aby se uživateli zobrazilo jejich aktuální umístění. Pomocí tohoto nastavení můžete změnit barvu zvýraznění použitou pro tyto aktivní odkazy.

Barva textu rozbalovací nabídky

Ve výchozím nastavení text v rozevíracích nabídkách modulu zdědí barvu textu hlavní nabídky. Možná však budete chtít tuto barvu změnit, pokud jste definovali vlastní barvu pozadí rozevírací nabídky.

Barva textu nabídky pro mobilní zařízení

Ve výchozím nastavení text v rozevíracích nabídkách modulu zdědí barvu textu hlavní nabídky. Možná však budete chtít tuto barvu změnit, pokud jste nastavili vlastní barvu pozadí mobilní nabídky.

Písmo nabídky

Písmo písma nabídky můžete změnit výběrem požadovaného písma z rozevírací nabídky. Divi přichází s desítkami skvělých písem využívajících písma Google. Ve výchozím nastavení používá Divi písmo Open Sans pro veškerý text na vaší stránce. Styl textu můžete také přizpůsobit pomocí možností tučně, kurzíva, velká a velká písmena a podtržení.

Menu velikosti písma

Zde můžete upravit velikost písma nabídky. Tažením posuvníku rozsahu můžete zvětšit nebo zmenšit velikost textu nebo přímo zadat hodnotu požadované velikosti textu do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Barva textu nabídky

Ve výchozím nastavení se všechny barvy textu v souboru Divi zobrazují v bílé nebo tmavě šedé barvě. Pokud chcete změnit barvu digitálního textu, vyberte pomocí této možnosti požadovanou barvu ve výběru barev.

Rozteč písmen nabídky

Mezery mezi písmeny ovlivňují mezeru mezi jednotlivými písmeny. Chcete-li zvětšit mezeru mezi každým písmenem v číselném textu, upravte mezeru pomocí posuvníku rozsahu nebo zadejte požadovanou velikost mezery do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Výška linky nabídky

Výška řádku ovlivňuje mezeru mezi každým řádkem číselného textu. Chcete-li zvětšit mezeru mezi každým řádkem, upravte mezeru pomocí posuvníku rozsahu nebo do vstupního pole zadejte požadovanou velikost mezery. umístěný napravo od kurzoru. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Rozšířené možnosti nabídky pro celou šířku pásma

Na kartě Upřesnit najdete možnosti, které by zkušenější weboví designéři mohli považovat za užitečné, například vlastní atributy CSS a HTML. Zde můžete použít vlastní CSS na kterýkoli z mnoha prvků modulu. Na modul můžete také použít vlastní třídy a ID CSS, které lze použít k přizpůsobení modulu v souboru style.css vašeho podřízeného motivu.

modul modulu fullwidth rozšířená sekce divi.png

CSS ID

Zadejte volitelné ID CSS, které chcete použít pro tento modul. ID lze použít k vytvoření vlastního stylu CSS nebo k propojení s konkrétními částmi vaší stránky.

CSS třídy

Zadejte volitelné třídy CSS, které chcete pro tento modul použít. Třídu CSS lze použít k vytvoření vlastních stylů CSS. Můžete přidat více tříd oddělených mezerou. Tyto třídy lze použít v podřízeném motivu Divi nebo ve vlastní šabloně stylů CSS, kterou přidáte na svou stránku nebo web. Webové stránky pomocí možností motivu Divi nebo nastavení stránky Divi Builder.

Vlastní CSS

Vlastní CSS lze také použít na modul a na libovolné interní součásti modulu. V sekci Vlastní CSS najdete textové pole, kde můžete přidat vlastní šablony stylů CSS přímo ke každému prvku. Položky CSS v tomto nastavení jsou již zabaleny do značek stylů. Stačí tedy zadat pravidla CSS oddělená středníky.

Animace rozbalovací nabídky

Můžete si vybrat mezi různými animacemi, které se použijí, když je povolena rozevírací nabídka. Ve výchozím nastavení je animace nastavena na slábnutí, ale vy ji změníte na: rozbalit, přetáhnout nebo převrátit.

viditelnost

Tato možnost umožňuje ovládat zařízení, na kterých se váš modul zobrazuje. Můžete se rozhodnout deaktivovat svůj modul na tabletech, chytrých telefonech nebo stolních počítačích jednotlivě. To je užitečné, pokud chcete použít různé mody na různých zařízeních, nebo pokud chcete zjednodušit mobilní design odstraněním určitých prvků ze stránky.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]STÁHNOUT TÉMA DIVI [/vcex_button][/vc_column=][vc_column /1″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=2&url=23065&tid40632=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”1″ style=”flat” custom_background=”#c700e” custom_hover_background=”#4226d8f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]STAŽTE SI TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Ostatní výukové programy Divi