Divi tutorial: Jak používat Navigační modul v článcích

Než budete moci na svou stránku přidat modul Divi navigace v článku, musíte nejprve přejít do Divi Builderu. Jednou Divi téma nainstalované na vašem webu, 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 Použijte Visual Builder při procházení webu v popředí, pokud jste připojeni k hlavnímu panelu WordPress.

Jakmile zadáte Visual Builder, můžete kliknutím na šedé tlačítko plus přidat nový modul na svou stránku. Nové moduly lze přidávat pouze do řádků. Pokud začínáte novou stránku, nezapomeňte nejprve přidat na stránku řádek.

Vyhledejte navigační modul v seznamu modulů a kliknutím na něj jej přidejte na svou stránku. Seznam modulů je prohledávatelný, což znamená, že můžete také zadat slovo „post navigation“ a poté kliknout na Enter pro automatické vyhledání a přidání navigačního modulu. Jakmile je modul přidán, budete uvítáni seznamem 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í vlastních navigačních odkazů do dolní části příspěvku na blogu

Mít navigační odkazy na další a předchozí články ve spodní části článku je skvělý způsob, jak si udržet své Návštěvníci se zabývají vaším obsahem. V tomto příkladu vám ukážu, jak používat skutečné názvy nadpisů příspěvků pro vaše navigační odkazy namísto obecných názvů „předchozích“ a „následujících“. Také vám ukážu, jak přidat ohraničení kolem odkazů, aby měly větší efekt.

Začněme.

Pomocí vizuálního nástroje přidejte standardní sekci s rozložením celé šířky (1 sloupec) ve spodní části příspěvku. Poté za řádek přidejte navigační modul.

Aktualizujte nastavení navigace publikování následujícím způsobem:

Karta Obsah

Předchozí text odkazu:% title (tato proměnná vloží název článku)
Text následujícího odkazu:% title (tato proměnná vloží název článku)

Karta Návrh

Odkazy na písmo: PT Sans
Odkazy Velikost písma: 20px
Odkazy Barva textu: # 5e95c1
Použijte okraj: ANO
Barva ohraničení: # 5e95c1
Šířka hranice: 1px
Vlastní čalounění: 20px Top, 20px Right, 20px bottom, 20px Left

To je vše ! Nyní máte na navigačních odkazech názvy příspěvků

Možnosti obsahu navigačního modulu

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ě.

Text předchozího odkazu

Definujte vlastní text pro předchozí odkaz. K zahrnutí názvu článku můžete použít proměnnou% title. Výchozí nastavení ponechte prázdné.

Text následujícího odkazu

Definujte vlastní text pro následující odkaz. Pomocí proměnné% title můžete zahrnout název příspěvku. Výchozí nastavení ponechte prázdné.

Ve stejné kategorii

Zde můžete definovat, zda by předchozí a následující články měly být ve stejném termínu taxonomie jako aktuální článek.

Název vlastní taxonomie

Pokud používáte tento modul v projektu nebo článku, nechte tuto možnost nevyplněnou. Jinak zadejte název taxonomie, aby volba „Ve stejné kategorii“ fungovala správně.

Skrýt předchozí odkaz

Zde můžete zvolit, zda chcete skrýt nebo zobrazit předchozí odkaz.

Skrýt následující odkaz

Zde můžete zvolit, zda chcete skrýt nebo zobrazit následující odkaz.

Správce štítku

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 po navigaci

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.

Odkaz na písmo

Písmo textu odkazů 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í.

Velikost písma odkazu

Zde můžete upravit velikost textu odkazu. 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 odkazů

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 textu svých odkazů, vyberte pomocí této možnosti požadovanou barvu ve výběru barev.

Rozestup dopisů odkazů

Mezery mezi písmeny ovlivňují mezeru mezi jednotlivými písmeny. Pokud chcete zvětšit mezeru mezi každým písmenem v textu odkazů, 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 řady odkazů

Výška čáry ovlivňuje mezeru mezi jednotlivými řádky textu odkazu. Chcete-li zvětšit mezeru mezi jednotlivými řádky, upravte mezeru pomocí posuvníku rozsahu nebo do pole zadejte požadovanou velikost mezery. vstup 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.

Použijte okraj

Povolením této možnosti umístíte ohraničení kolem vašeho modulu. Toto ohraničení lze přizpůsobit pomocí následujících podmíněných parametrů.

Barva hranice

Tato možnost ovlivňuje barvu ohraničení. Vyberte vlastní barvu z výběru barev a použijte ji na svůj okraj.

Šířka hranice

Ve výchozím nastavení jsou ohraničení široká 1 pixel. Tuto hodnotu můžete zvýšit přetažením posuvníku rozsahu nebo zadáním vlastní hodnoty do vstupního pole vpravo od posuvníku. Podporovány jsou vlastní měrné jednotky, což znamená, že můžete změnit výchozí jednotku z „px“ na něco jiného, jako em, vh, vw atd.

Styl okraje

Okraje podporují osm různých stylů: plný, tečkovaný, tečkovaný, dvojitý, drážka, hřeben, překrytí a začátek. Vyberte požadovaný styl z rozevírací nabídky a použijte jej na svůj okraj.

Vlastní marže

Okraj je prostor přidaný na vnější stranu modulu, mezi modul a další prvek nahoře, dole nebo nalevo a napravo od něj. Na kteroukoli ze čtyř stran modulu můžete přidat vlastní hodnoty okrajů. Chcete-li odstranit vlastní okraj, odeberte přidanou hodnotu ze vstupního pole. Ve výchozím nastavení se tyto hodnoty měří v pixelech, ale do vstupních polí můžete zadat vlastní měrné jednotky.

Vlastní polstrování

Výplň je prostor přidaný uvnitř vašeho modulu mezi okraj modulu a jeho vnitřní prvky. Na kteroukoli ze čtyř stran modulu můžete přidat vlastní hodnoty výplně. Chcete-li odstranit vlastní okraj, odeberte přidanou hodnotu ze vstupního pole. Ve výchozím nastavení se tyto hodnoty měří v pixelech, ale do vstupních polí můžete zadat vlastní měrné jednotky.

Pokročilé možnosti pro navigační modul

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.

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 pro tento modul. Třídu CSS lze použít k vytvoření vlastního stylu CSS. Můžete přidat více tříd oddělených mezerou. Tyto třídy lze použít ve vašem podřízeném motivu Divi nebo ve vlastní šabloně stylů CSS, kterou přidáte na svou stránku nebo na svůj web pomocí možností motivu Divi nebo nastavení na stránce 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.

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]

Divi tutorial: Jak používat Navigační modul v článcích

Příklad použití: Přidání vlastních navigačních odkazů do dolní části příspěvku na blogu