Modul "Posuvník článků" nebo Posuvník příspěvků na WordPress téma Divi vám umožňuje na domovské stránce charakteristickým způsobem zobrazovat články dle vašeho výběru. Na mnoha blozích se tento typ modulu obecně používá k zobrazení doporučených článků. Můžete to ale využít jinak a zobrazit například návrhy článků.

Jak přidat modul posuvníku článku do Divi Builderu

Než budete moci na stránku přidat modul pro posouvání článků, musíte nejprve přeskočit na Divi Builder. Jakmile Divi téma nainstalované na vašem webu, všimnete si a bouton Použijte nástroj Divi Builder nad vydavatelem pokaždé, když 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.

Divi stavitel

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.

articles.png kurzor

Vyhledejte modul „Posunout posuvníky“ 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é napsat slovo „Post Cursors“ a poté kliknout na „Enter“ pro automatické vyhledání a přidání modulu Post Cusors! 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í: Posílejte posuvníky (články) pro zobrazení posledních

V tomto příkladu přidám posuvník příspěvků, aby se v horní části stránky blogu zobrazily tři poslední příspěvky. Každý snímek zobrazuje vybraný obrázek příspěvku jako obrázek na pozadí, název příspěvku a meta příspěvku a tlačítko Číst více.

příklad blogu divi.jpg

Pomocí nástroje Visual Builder přidejte novou standardní sekci v horní části stránky blogu s řádkem s plnou šířkou (1 sloupec). Poté vložte modul Posuvník do nového řádku.

vytvoření nového sloupce divi.png

V části Nastavení kurzoru aktualizujte následující možnosti:

Možnosti obsahu

Počet zpráv: 3

Možnosti návrhu

Písmo záhlaví: Záhlaví Roboto (Capitals) Velikost písma: 50px Barva textu záhlaví: # edef5d Rozteč písmen záhlaví: 1px Velikost písma těla: 16 Tělo Písmeno mezery: 1px Výška řádku těla: 1.4em Meta písmo: Open Sans, Kurzíva, velká písmena Meta velikost písma: 18px Meta barva textu: #cccccc Meta výška řádku: 2em Použijte vlastní styly pro tlačítko: ANO Velikost textu: 26px Tlačítko Barva textu: # edef5d Šířka tlačítka: 0px Ikona tlačítka:> Zobrazit pouze ikonu

Příklad tlačítka divi.jpg

Uložte nastavení

A je to!

příklad blogu v akci divi.gif

Modul posuvníku článku s možnostmi obsahu

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

volba obsahu kurzor divi modul posuvník článků.png

Počet položek (počet příspěvků)

V posuvníku vyberte počet položek, které chcete zobrazit.

Zahrnout kategorie

Vyberte kategorie, které chcete do posuvníku zahrnout.

Pořadí podle

Zde můžete upravit pořadí, ve kterém se články zobrazují.

Text tlačítka

Definujte text, který se zobrazí na tlačítku „Číst více“. ponechat prázdné pro výchozí nastavení (Přečíst více)

Zobrazení obsahu

Zobrazením celého obsahu se vaše příspěvky v posuvníku nezkrátí. Displej úryvku zobrazuje pouze text úryvku.

Pokud je definován, použijte výňatek z článku

Tuto možnost vypněte, pokud chcete přeskočit ručně definované úryvky a stále je automaticky generovat.

Délka automatického extrakce

Definujte délku automaticky generovaných extraktů. Ponechat prázdné pro výchozí nastavení (270)

Zobrazit šipky

Toto nastavení aktivuje a deaktivuje navigační šipky.

Zobrazit ovládací prvky

Toto nastavení povolí a zakáže kruhová tlačítka ve spodní části kurzoru.

Zobrazit tlačítko Více

Toto nastavení povolí a zakáže tlačítko Číst více.

Zobrazit zprávu Meta

Toto nastavení povolí a zakáže sekci metadat.

Zobrazit vybraný obrázek

Toto nastavení zapíná a vypíná obraz vybraný v posuvníku.

Obrázek umístění

Vyberte, jak chcete na obrázcích zobrazit vybraný obrázek

Barva pozadí

Pomocí nástroje pro výběr barvy vyberte barvu pozadí pro tento modul.

Obrázek na pozadí

Nahrajte požadovaný obrázek nebo zadejte adresu URL obrázku, který chcete použít jako pozadí pro posuvník.

Pozice obrázku na pozadí

Vyberte umístění CSS obrázku pozadí pro každý snímek.

Velikost obrázku na pozadí

Vyberte velikost obrázku pozadí CSS použitou pro každý snímek.

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 modulu posuvníku

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.

design možnost divi articles.png

Odstraňte vnitřní stín

Tím se ve výchozím nastavení odstraní vnitřní stín CSS aplikovaný na všechny snímky.

Použijte překrytí pozadí

Je-li tato možnost povolena, přidá se vlastní barva překrytí nad obrázek pozadí a za obsah posuvníku.

Barva překryvného pozadí

Pomocí nástroje pro výběr barvy vyberte barvu pozadí.

Použijte překryvný text

Pokud je tato možnost povolena, přidá se za text kurzoru barva pozadí, aby byla čitelnější na obrázcích pozadí.

Poloměr překrytí hranice textu

Poloměr ohraničení ovlivňuje zaoblení rohů oblasti překrytí textu. Ve výchozím nastavení mají rohy mírně zaoblený okraj 3 pixelů. Tuto hodnotu můžete snížit na 0, abyste vytvořili obdélníkový rámeček, nebo zvýšit hodnotu, aby byly rohy ještě více zaoblené.

Modul překrytí Divi

Použijte efekt Paralaxy

Povolením této možnosti získáte obrázky na pozadí při posouvání pevnou pozici.

Paralaxa

Zde můžete nastavit metodu použitou pro efekt paralaxy - CSS nebo True Parallax.

Vlastní barevné šipky

Když podržíte ukazatel myši nad modulem posuvníku, zobrazí se šipky, které návštěvníkovi umožní procházet jednotlivé snímky. Ve výchozím nastavení tyto šipky dědí barvu hlavního textu snímku. Pomocí tohoto nastavení však můžete pro tyto šipky definovat vlastní barvu.

Dot Nav Custom Color

V každém kurzoru se pod obsahem kurzoru objevují položky navigace po bodech. Tyto prvky umožňují uživateli navigovat kurzorem. Pomocí nástroje pro výběr barev v tomto nastavení můžete definovat vlastní barvu, která se použije pro tyto prvky.

Barva textu

Zde si můžete vybrat, zda je váš text světlý nebo tmavý. Pokud máte snímek s tmavým pozadím, zvolte světlý text. jestli ty
mít jasné pozadí, používat tmavý text.

Posuvník meta modulu sekce diviPísmo záhlaví

Písmo textu záhlaví 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é upravit pomocí možností tučně, kurzíva, velká a velká písmena a podtržení.

Velikost písma záhlaví

Zde můžete upravit velikost textu záhlaví. Tažením posuvníku rozsahu můžete zvětšit nebo zmenšit velikost textu nebo přímo zadat požadovanou hodnotu 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 záhlaví

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 záhlaví, vyberte pomocí této možnosti požadovanou barvu ve výběru barev.

Mezery v záhlaví

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 textu záhlaví, 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 řádku záhlaví

Výška řádku ovlivňuje mezeru mezi každým řádkem textu záhlaví. Chcete-li zvětšit mezeru mezi každým řádkem, upravte mezeru pomocí posuvníku rozsahu nebo zadejte požadovanou velikost mezery do vstupní pole 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.

Body font

Písmo těla 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é upravit pomocí možností tučně, kurzíva, velká a velká písmena a podtržení.

Velikost písma těla

Zde můžete upravit velikost textu. Tažením posuvníku rozsahu můžete zvětšit nebo zmenšit velikost textu nebo přímo zadat požadovanou hodnotu 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 těla

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

Rozestup tělových písmen

Mezery mezi písmeny ovlivňují mezeru mezi jednotlivými písmeny. Chcete-li zvětšit mezeru mezi jednotlivými písmeny v 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 linie těla

Výška řádku ovlivňuje mezeru mezi každým řádkem textu v těle 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.

Meta policie

Písmo meta textu 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á písmena a podtržení.

Velikost písma meta

Zde můžete upravit velikost meta textu. Tažením posuvníku rozsahu můžete zvětšit nebo zmenšit velikost textu nebo přímo zadat požadovanou hodnotu 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 Meta

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

Rozpětí mezi písmeny

Mezery mezi písmeny ovlivňují mezeru mezi jednotlivými písmeny. Chcete-li zvětšit mezeru mezi každým písmenem meta-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 meta linky

Výška řádku ovlivňuje mezeru mezi jednotlivými řádky meta-textu. Chcete-li zvětšit mezeru mezi jednotlivými řádky, 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.

Horní polstrování

Tento parametr řídí vnitřní prostor mezi horní částí modulu a textovým obsahem v modulu. Chcete-li tento prostor zvětšit nebo zmenšit, zadejte zde požadovanou hodnotu. Chcete-li například zmenšit prostor a celkovou velikost kurzoru, můžete zadat hodnotu 100 pixelů. Můžete také zadat procentuální hodnotu, například 10%, aby byla výška dynamičtější.

Spodní výplň

Tento parametr řídí vnitřní prostor mezi spodní částí modulu a textovým obsahem v modulu. Pokud chcete tento prostor zvětšit nebo zmenšit, zadejte zde požadovanou hodnotu. Chcete-li například zmenšit prostor a celkovou velikost kurzoru, můžete zadat hodnotu 100 pixelů. Můžete také zadat procentuální hodnotu, například 10%, aby byla výška dynamičtější.

Použijte vlastní tlačítkaPro tlačítko použijte vlastní styly

Povolení této možnosti odhalí různá nastavení přizpůsobení tlačítek, která můžete použít ke změně vzhledu tlačítka vašeho modulu.

Velikost textu tlačítka

Toto nastavení lze použít ke zvětšení nebo zmenšení velikosti textu v tlačítku. Tlačítko se přizpůsobuje, jak se zvětšuje a zmenšuje velikost textu.

Barva textu tlačítka

Ve výchozím nastavení přijímají tlačítka barvu zvýraznění motivu, jak je definována v nástroji Customizer Theme. Tato možnost umožňuje přiřadit vlastní barvu textu tlačítku tohoto modulu. Vyberte svou vlastní barvu pomocí nástroje pro výběr barvy a změňte barvu tlačítka.

Barva pozadí tlačítka

Ve výchozím nastavení mají tlačítka průhlednou barvu pozadí. To lze změnit výběrem požadované barvy pozadí z výběru barev.

Šířka okraje tlačítka

Všechna tlačítka Divi mají ve výchozím nastavení ohraničení 2px. Toto ohraničení lze pomocí tohoto nastavení zvýšit nebo snížit. Okraje lze odstranit zadáním hodnoty 0.

Barva ohraničení tlačítek

Ve výchozím nastavení okraje tlačítek převezmou akcentní barvu motivu, jak je definována v nástroji Customizer Theme. Tato možnost umožňuje přiřadit vlastní barvu ohraničení tlačítku tohoto modulu. Vyberte svou vlastní barvu pomocí nástroje pro výběr barvy a změňte barvu ohraničení tlačítka.

Okraj okraje tlačítka

Poloměr ohraničení ovlivňuje zaoblení rohů vašich tlačítek. Ve výchozím nastavení mají tlačítka v Divi malý poloměr ohraničení, který zaobluje rohy o 3 pixely. Tuto hodnotu můžete snížit na 0, abyste vytvořili čtvercové tlačítko, nebo ji výrazně zvýšit, abyste vytvořili tlačítka s kruhovými okraji.

Rozestup písmen na tlačítku

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 textu tlačítka, 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.

Policejní tlačítko

Písmo textu tlačítka 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í.

Přidejte ikonu tlačítka

Zakázáno, toto nastavení odstraní ikony z vašeho tlačítka. Ve výchozím nastavení všechna tlačítka Divi zobrazují na ukazateli ikonu šipky.

Ikona tlačítka

Pokud jsou ikony povoleny, můžete pomocí tohoto nastavení vybrat, která ikona se ve vašem tlačítku použije. Divi má na výběr různé ikony.

Tlačítko barevné ikony

Úpravou tohoto nastavení změníte barvu ikony, která se zobrazí na vašem tlačítku. Ve výchozím nastavení je barva ikony stejná jako barva textu tlačítka, ale toto nastavení vám umožňuje upravit barvu nezávisle.

Tlačítko pro umístění ikony

Můžete zvolit zobrazení ikony tlačítka vlevo nebo vpravo od tlačítka.

Zobrazit pouze ikonu při najetí myší na tlačítko

Ve výchozím nastavení se ikony tlačítek zobrazují pouze při najetí myší. Pokud chcete, aby se ikona vždy zobrazovala, vypněte toto nastavení.

Tlačítko Barva textu na ukazatel myši

Když na tlačítko najedete myší návštěvníka, použije se tato barva. Barva se změní od základní barvy definované v předchozím nastavení.

Podržte tlačítko barvy pozadí

Když na tlačítko najedete myší návštěvníka, použije se tato barva. Barva se změní od základní barvy definované v předchozím nastavení.

Tlačítko hranice Hover Border

Když na tlačítko najedete myší návštěvníka, použije se tato barva. Barva se změní od základní barvy definované v předchozím nastavení.

Tlačítko Hover Border Radius

Když na tlačítko najedete myší návštěvníka, použije se tato hodnota. Hodnota se změní od základní hodnoty definované v předchozím nastavení.

Tlačítko pro oddálení poznámek

Když na tlačítko najedete myší návštěvníka, použije se tato hodnota. Hodnota se změní od základní hodnoty definované v předchozím nastavení.

Pokročilé možnosti Post Slider

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.

kurzorový modul

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.

Posuvný modul článku DiviAutomatická animace

Chcete-li, aby se kurzor automaticky posunul, aniž by musel návštěvník kliknout na další tlačítko, povolte tuto možnost a podle potřeby nastavte rychlost otáčení níže.

Rychlost automatické animace (v ms)

Zde můžete určit, jak rychle kurzor mizí mezi jednotlivými snímky, pokud je výše povolena možnost „Automaticky animovat“. Čím vyšší číslo, tím delší pauza mezi každou rotací.

Pokračujte automatickým posunutím na ukazatel myši

Zapnutím této funkce bude umožněno pokračovat v automatickém posuvu myši.

Skrýt obsah v mobilu

Jak se velikost obrazovky v mobilních zařízeních zmenšuje, stává se nemovitost na obrazovce cennější. Někdy je dobré vypnout některé méně důležité prvky kurzoru, abyste zmenšili velikost kurzoru a zvýšili jeho čitelnost. Povolení tohoto nastavení skryje textový obsah kurzoru v mobilu.

Skrýt CTA v mobilu

Jak se velikost obrazovky v mobilních zařízeních zmenšuje, stává se nemovitost na obrazovce cennější. Někdy je dobré vypnout některé méně důležité prvky kurzoru, abyste zmenšili velikost kurzoru a zvýšili jeho čitelnost. Povolením tohoto nastavení skryjete tlačítka volání výzvy k akci na mobilním telefonu.

Zobrazit obrázek / video na mobilu

Jak se velikost obrazovky v mobilních zařízeních zmenšuje, stává se nemovitost na obrazovce cennější. Někdy je dobré vypnout některé méně důležité prvky kurzoru, abyste zmenšili velikost kurzoru a zvýšili jeho čitelnost. Povolení tohoto nastavení zobrazí snímky snímků a videa na mobilních zařízeních (ve výchozím nastavení jsou deaktivovány).

deaktivace

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