Divi tutorial: Ako používať navigačný modul v článkoch

Pred pridaním modulu Divi na navigáciu v článku na svoju stránku musíte najskôr prejsť do nástroja Divi Builder. Raz Divi téma nainštalovaný na vašom webe, všimnete si tlačidlo Použite nástroj Divi Builder nad editorom príspevkov vždy, keď vytvoríte novú stránku. Kliknutím na toto tlačidlo aktivujete program Divi Builder a získate prístup ku všetkým modulom Divi Builder. Potom kliknite na tlačidlo Použite Visual Builder na spustenie generátora vo vizuálnom režime. Môžete tiež kliknúť na tlačidlo Použite Visual Builder pri prehliadaní webových stránok v popredí, ak ste pripojení k dashboardu WordPress.

Po zadaní nástroja Visual Builder môžete kliknutím na sivé tlačidlo plus pridať na svoju stránku nový modul. Nové moduly je možné pridávať iba do riadkov. Ak začínate novú stránku, nezabudnite najskôr na svoju stránku pridať riadok.

Vyhľadajte navigačný modul v zozname modulov a kliknutím naň ho pridajte na svoju stránku. Zoznam modulov je prehľadateľný, čo znamená, že môžete tiež napísať slovo „post navigation“ a potom kliknúť na Enter, aby ste automaticky našli a pridali navigačný modul. Po pridaní modulu vás privíta zoznam možností modulu. Tieto možnosti sú rozdelené do troch hlavných skupín: Obsah , Koncepcia et pokročilý .

Príklad prípadu použitia: Pridanie vlastných navigačných odkazov do dolnej časti blogového príspevku

Ak máte v spodnej časti článku navigačné odkazy na ďalšie a predchádzajúce články, je to skvelý spôsob, ako si zachovať svoje Návštevníci zapojené do vášho obsahu. V tomto príklade vám ukážem, ako použiť skutočné názvy nadpisov príspevkov pre vaše navigačné odkazy namiesto všeobecných názvov „predchádzajúci“ a „nasledujúci“. Tiež vám ukážem, ako pridať orámovanie okolo odkazov, aby mali väčší efekt.

Začnime.

Pomocou vizuálneho nástroja na pridanie štandardnej sekcie s rozložením na celú šírku (1 stĺpec) v dolnej časti príspevku. Potom za riadok pridajte navigačný modul.

Aktualizujte nastavenia publikovania navigácie takto:

Karta Obsah

Text predchádzajúceho odkazu:% title (táto premenná vloží názov článku)
Text nasledujúceho odkazu:% title (táto premenná vloží názov článku)

Karta Návrh

Odkazy na písmo: PT Sans
Odkazy Veľkosť písma: 20px
Odkazy Farba textu: # 5e95c1
Použite okraj: YES
Farba ohraničenia: # 5e95c1
Šírka ohraničenia: 1px
Vlastné čalúnenie: 20px hore, 20px vpravo, 20px dole, 20px vľavo

To je všetko ! Teraz máte v navigačných odkazoch názvy príspevkov

Možnosti obsahu pre navigačný modul

Na karte Obsah nájdete všetky obsahové prvky modulu, napríklad text, obrázky a ikony. Všetko, čo ovláda čo vo vašom module sa vždy nájde na tejto karte.

Text predchádzajúceho odkazu

Definujte vlastný text pre predchádzajúci odkaz. Na zahrnutie názvu článku môžete použiť premennú% title. Predvolené nastavenie nechajte prázdne.

Text nasledujúceho odkazu

Definujte vlastný text pre nasledujúci odkaz. Na zahrnutie názvu príspevku môžete použiť premennú% title. Predvolené nastavenie nechajte prázdne.

V rovnakej kategórii

Tu môžete definovať, či má byť predchádzajúci a nasledujúci článok v rovnakom termíne taxonómie ako aktuálny článok.

Názov colnej taxonómie

Ak používate tento modul na projekte alebo článku, nechajte túto voľbu prázdnu. V opačnom prípade zadajte názov taxonómie pre možnosť „V rovnakej kategórii“, aby fungovala správne.

Skryť predchádzajúci odkaz

Tu môžete zvoliť, či chcete skryť alebo zobraziť predchádzajúci odkaz.

Skryť nasledujúci odkaz

Tu môžete zvoliť, či chcete skryť alebo zobraziť nasledujúci odkaz.

Správcovská značka

Toto zmení štítok modulu v konštruktore na ľahšiu identifikáciu. Keď použijete zobrazenie WireFrame v programe Visual Builder, tieto štítky sa zobrazia v bloku modulu rozhrania Divi Builder.

Dizajnové možnosti po navigácii

Na karte Dizajn nájdete všetky možnosti štýlov modulu, ako sú písma, farby, veľkosť a medzery. Toto je karta, ktorú použijete na zmenu vzhľadu vášho modulu. Každý modul Divi má dlhý zoznam nastavení dizajnu, pomocou ktorých môžete čokoľvek meniť.

Odkaz na písmo

Písmo textu svojich odkazov môžete zmeniť výberom požadovaného písma v rozbaľovacej ponuke. Divi prichádza s desiatkami skvelých typov písma, ktoré používajú písma Google. Divi predvolene používa pre všetok text na svojej stránke písmo Open Sans. Štýl textu môžete tiež prispôsobiť pomocou možností tučné písmo, kurzíva, veľké písmená a podčiarknutie.

Veľkosť písma odkazu

Tu môžete upraviť veľkosť textu odkazu. Posunutím posúvača rozsahu môžete zväčšiť alebo zmenšiť veľkosť textu alebo priamo zadať požadovanú hodnotu veľkosti textu do vstupného poľa vpravo od posúvača. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od hodnoty svojej veľkosti.

Farba textu odkazov

V predvolenom nastavení sa všetky farby textu v Divi zobrazujú ako biele alebo tmavošedé. Ak chcete zmeniť farbu textu svojich odkazov, vyberte pomocou tejto možnosti požadovanú farbu vo výbere farieb.

Rozmiestnenie odkazov

Medzery medzi písmenami ovplyvňujú medzeru medzi jednotlivými písmenami. Ak chcete zväčšiť medzeru medzi jednotlivými písmenami v texte odkazov, upravte medzeru pomocou jazdca rozsahu alebo do vstupného poľa vpravo od jazdca zadajte požadovanú veľkosť medzery. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od hodnoty svojej veľkosti.

Výška linky

Výška riadku ovplyvňuje medzeru medzi každým riadkom textu odkazu. Ak chcete zväčšiť medzeru medzi každým riadkom, upravte medzeru pomocou posúvača rozsahu alebo do poľa zadajte požadovanú veľkosť medzery. napravo od kurzora. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od hodnoty svojej veľkosti.

Použite okraj

Povolenie tejto možnosti umiestni orámovanie okolo vášho modulu. Túto hranicu je možné prispôsobiť pomocou nasledujúcich podmienených parametrov.

Farba hranice

Táto možnosť ovplyvňuje farbu vášho orámovania. Vyberte vlastnú farbu z výberu farieb a použite ju na svoje orámovanie.

Šírka hranice

V predvolenom nastavení sú okraje široké 1 pixel. Túto hodnotu môžete zvýšiť presunutím jazdca rozsahu alebo zadaním vlastnej hodnoty do vstupného poľa vpravo od jazdca. Podporované vlastné merné jednotky, čo znamená, že môžete zmeniť predvolenú jednotku z „px“ na inú, napríklad em, vh, vw atď.

Štýl hraníc

Okraje podporujú osem rôznych štýlov: plný, bodkovaný, bodkovaný, dvojitý, drážka, hrebeň, prekrytie a štart. Z rozbaľovacej ponuky vyberte požadovaný štýl a aplikujte ho na svoje orámovanie.

Vlastná marža

Okraj je priestor pridaný k vonkajšej strane modulu, medzi modul a nasledujúci prvok nad, pod alebo naľavo a napravo od neho. Na ktorúkoľvek zo štyroch strán modulu môžete pridať vlastné hodnoty okrajov. Ak chcete odstrániť vlastný okraj, odstráňte pridanú hodnotu zo vstupného poľa. Predvolene sa tieto hodnoty merajú v pixeloch, ale do vstupných polí môžete zadať vlastné jednotky merania.

Vlastné čalúnenie

Výplň je priestor pridaný do vášho modulu medzi okrajom modulu a jeho vnútornými prvkami. Na ktorúkoľvek zo štyroch strán modulu môžete pridať vlastné hodnoty výplne. Ak chcete odstrániť vlastný okraj, odstráňte pridanú hodnotu zo vstupného poľa. Predvolene sa tieto hodnoty merajú v pixeloch, ale do vstupných polí môžete zadať vlastné jednotky merania.

Rozšírené možnosti pre navigačný modul

Na karte rozšírené nájdete možnosti, ktoré by sa mohli hodiť skúsenejším webovým dizajnérom, napríklad vlastné atribúty CSS a HTML. Tu môžete použiť vlastné CSS na ktorýkoľvek z mnohých prvkov modulu. Na modul môžete tiež použiť vlastné triedy a identifikátory CSS, ktoré sa dajú použiť na prispôsobenie modulu v súbore style.css vašej detskej témy.

CSS ID

Zadajte voliteľné ID CSS, ktoré sa použije pre tento modul. ID je možné použiť na vytvorenie vlastného štýlu CSS alebo na prepojenie s konkrétnymi sekciami vašej stránky.

Triedu CSS

Zadajte voliteľné triedy CSS, ktoré sa majú použiť pre tento modul. Na vytvorenie vlastného štýlu CSS je možné použiť triedu CSS. Môžete pridať viac tried oddelených medzerou. Tieto triedy môžete použiť vo svojej podradenej téme Divi alebo vo vlastnej šablóne štýlov CSS, ktorú pridáte na svoju stránku alebo na svoj web pomocou možností témy Divi alebo nastavení na stránke Divi Builder.

Vlastné CSS

Vlastné CSS je možné použiť aj na modul a na ktorékoľvek z jeho vnútorných častí. V sekcii Vlastné CSS nájdete textové pole, kde môžete priamo do každého prvku pridať vlastné šablóny štýlov CSS. Záznamy CSS v týchto nastaveniach sú už zabalené v značkách štýlov. Stačí teda zadať pravidlá CSS oddelené bodkočiarkami.

viditeľnosť

Táto možnosť vám umožňuje ovládať zariadenia, na ktorých sa modul zobrazuje. Môžete sa rozhodnúť deaktivovať svoj modul na tabletoch, smartfónoch alebo stolových počítačoch jednotlivo. To je užitočné, ak chcete používať rôzne módy na rôznych zariadeniach alebo ak chcete zjednodušiť mobilný dizajn odstránením určitých prvkov zo 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”]STIAHNUŤ TÉMU DIVI [/vcex_button][/vc_column=][vc_column width] /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”]STIAHNUŤ TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Divi tutorial: Ako používať navigačný modul v článkoch

Príklad prípadu použitia: Pridanie vlastných navigačných odkazov do dolnej časti blogového príspevku