Dokumentace pluginu Divi Builder

Jak přidat, nakonfigurovat a přizpůsobit modul blogu Divi.

S Divi jsou i blogy modulem a váš „blog“ může být umístěn kdekoli na vašich webových stránkách a v různých formátech. Moduly blogu a postranního panelu můžete kombinovat a vytvářet tak klasické blogové designy. Pomocí modulů blogu a postranního panelu lze vytvořit 1 sloupec, 2 sloupce nebo 3 sloupce blogu.

Podívejte se na živou ukázku tohoto modulu

Jak přidat modul blogu na stránku

Než budete moci přidat modul blogu na stránku, musíte nejprve přejít do nástroje Divi Builder. Po instalaci motivu Divi na váš web si při každém vytváření nové stránky všimnete nad editorem příspěvků tlačítka Použít Divi Builder. Kliknutím na toto tlačítko zapnete nástroj Divi Builder a získáte přístup ke všem modulům nástroje Divi Builder. Dále klikněte na tlačítko Použít vizuální sestavovač, čímž spustíte sestavovač ve vizuálním režimu. Pokud jste přihlášeni k ovládacímu panelu WordPressu, můžete na tlačítko Použít Visual Builder kliknout také při procházení webových stránek na přední straně.

Po vstupu do nástroje Visual Builder můžete kliknutím na šedé tlačítko plus přidat na stránku nový modul. Nové moduly lze přidávat pouze uvnitř Řádků. Pokud zakládáte novou stránku, nezapomeňte do ní nejprve přidat řádek. Máme několik skvělých návodů, jak používat prvky řádků a sekcí Divi.

Najděte modul blogu v seznamu modulů a kliknutím na něj jej přidejte na stránku. V seznamu modulů lze vyhledávat, což znamená, že můžete také zadat slovo „blog“ a poté kliknout na enter, čímž se automaticky vyhledá a přidá modul blogu! Po přidání modulu se zobrazí seznam možností modulu. Tyto možnosti jsou rozděleny do tří hlavních skupin: Obsah, Design a Pokročilé.

Příklad použití: Příklad použití: Přidání modulu blogu s rozvržením mřížky do speciální sekce s pravým postranním panelem

Pro tento příklad přidám modul blogu na stránku blogu. Tato stránka blogu má záhlaví na celou šířku a pod ním modul vyhledávání. Pod vyhledávací modul přidám speciální sekci s modulem Blog na levé straně a sekci s postranním panelem na pravé straně. V postranním panelu vpravo je widget posledních příspěvků, modul Email Optin a modul Osoba.

Tady vypadá ukázková stránka.

Všimněte si, že modul Blog je v rozložení mřížky na levé straně specializované sekce.

Pustíme se do toho.

Pomocí vizuálního builderu přidejte sekci Speciality s následujícím rozložením:

Budete vyzváni, abyste na levou stranu přidali buď 1 sloupec, nebo 2 sloupce. Zvolte řádek s 1 sloupcem.

Poté do řádku přidejte modul Blog.

Aktualizujte nastavení blogu takto:

Možnosti obsahu

Počet příspěvků: 6
Tlačítko Číst dál:
Zobrazit stránkování: Ne
Barva pozadí dlaždic mřížky:

Možnosti designu

Rozvržení: #ffffff

Rozvržení:

Možnosti designu

Rozvržení Mřížka
Použít kapkový stín: Barva překryvné ikony: Zapnuto
Barva překryvné ikony: #ffffff
Barva překryvné ikony: rgba(224,153,0,0.51)
Číslo záhlaví: Barva textu záhlaví: Výchozí
Velikost písma záhlaví: 21px
Barva textu záhlaví: Rozteč písmen v záhlaví: #333333
Rozteč písmen v záhlaví: Výška řádku záhlaví: 1,2em
Použití rámečku: 1px
Výška řádku záhlaví: 1,2em
Použití rámečku:

Pokročilé možnosti

Vlastní CSS (tlačítko Read More):

Pokročilé vlastní CSS pro tlačítko Read More vytvoří vlastní vzhled, který se dobře hodí k designu.

V pravé části postranního panelu v rozvržení Speciální sekce budete muset přidat modul postranního panelu, který vytáhne widget posledních příspěvků. Pod něj bude třeba přidat modul Email Optin. A pak pod Email Optin musíte přidat modul Osoba s informacemi o autorovi.

To je vše!

Možnosti obsahu blogu

V záložce Obsah najdete všechny prvky obsahu modulu, jako je text, obrázky a ikony. Vše, co řídí, co se ve vašem modulu zobrazí, najdete vždy na této kartě.

Počet příspěvků

Definujte počet příspěvků, které chcete zobrazit. Aby se uvnitř tohoto modulu něco zobrazilo, musíte mít vytvořené příspěvky.

Vyberte kategorie, které chcete zahrnout do kanálu příspěvků. Všechny kategorie příspěvků, které jste vytvořili, se zde zobrazí, abyste je mohli vybrat/odebrat.

Vložené kategorie

Vyberte, které kategorie chcete zahrnout do feedu.

Metaformát data

Definujte zde formát data, který chcete zobrazit u příspěvků na blogu. Výchozí rozložení je formát M j, Y (6. ledna 2014) Další možnosti najdete v Kodexu WordPressu o formátech data.

Obsah

Zobrazení celého obsahu nezkrátí vaše příspěvky na indexové stránce. Při zobrazení úryvku se zobrazí pouze text úryvku.

Číslo posunu

Zvolte, o kolik příspěvků chcete posunout. Pokud například provedete odsazení o 3 příspěvky, nebudou se zobrazovat první tři příspěvky v kanálu blogu.

Zobrazit doporučený obrázek

Tato možnost umožňuje zvolit, zda chcete, aby se v modulu blogu zobrazovaly náhledy obrázků.

Tlačítko Číst více

Zde můžete určit, zda se má za úryvkem zobrazit odkaz „číst více“, nebo ne.

Zobrazit autora

Zvolte, zda chcete zobrazit autora každého blogového příspěvku v oblasti meta pod názvem příspěvku.

Zobrazit datum

Zvolte, zda chcete zobrazit datum, kdy byl každý příspěvek vytvořen, v rámci oblasti meta příspěvku pod názvem příspěvku.

Zobrazit kategorie

Zvolte, zda chcete zobrazit kategorie příspěvků v rámci oblasti meta příspěvku pod názvem příspěvku.

Zobrazit počet komentářů

Zvolte, zda chcete zobrazit počet komentářů v rámci oblasti meta příspěvku pod názvem příspěvku.

Zobrazit stránkování

Zvolte, zda chcete zobrazit stránkování tohoto kanálu. Chcete-li povolit číslované stránkování, musíte si nainstalovat zásuvný modul WP Page Navi.

Admin Label

Tímto změníte označení modulu v sestavovači pro snadnější identifikaci. Při použití zobrazení WireFrame ve Visual Builderu se tyto popisky zobrazí v bloku modulu v rozhraní Divi Builderu.

Možnosti návrhu modulu

Na kartě návrhu najdete všechny možnosti stylování modulu, jako jsou písma, barvy, velikost a rozestupy. Na této kartě budete měnit vzhled modulu. Každý modul Divi má dlouhý seznam nastavení vzhledu, pomocí kterých můžete změnit téměř cokoli.

Rozložení

Můžete si vybrat, zda chcete příspěvky blogu zobrazovat v mřížce, nebo v rozvržení na celou šířku.

Překrytí doporučeného obrázku

Pokud je povoleno, zobrazí se barva překrytí a ikona, když návštěvník najede na doporučený obrázek příspěvku.

Barva překryvné ikony

Zde můžete definovat vlastní barvu překryvné ikony.

Barva překryvného obrázku

Zde můžete definovat vlastní barvu překryvného obrázku.

Hover Icon Picker

Zde můžete definovat vlastní ikonu pro překrytí.

Text Color

Pokud je váš blog umístěn na světlém pozadí, barva textu by měla být nastavena na „Dark“. A naopak, pokud je váš blog umístěn na tmavém pozadí, měla by být Barva textu nastavena na „Světlá“.

Písmo záhlaví

Písmo textu záhlaví můžete změnit výběrem požadovaného písma z rozbalovací nabídky. Divi přichází s desítkami skvělých písem poháněných službou Google Fonts. Ve výchozím nastavení používá Divi pro veškerý text na stránce písmo Open Sans. Styl textu můžete také přizpůsobit pomocí možností tučné písmo, kurzíva, 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 můžete zadat požadovanou hodnotu velikosti textu přímo do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že za hodnotu velikosti můžete zadat „px“ nebo „em“ a změnit tak typ jednotky.

Barva textu záhlaví

Ve výchozím nastavení se všechny barvy textu v Divi zobrazí jako bílá nebo tmavě šedá. Pokud chcete změnit barvu textu záhlaví, vyberte požadovanou barvu z nabídky barev pomocí této možnosti.

Rozteč písmen záhlaví

Rozteč písmen ovlivňuje mezeru mezi jednotlivými písmeny. Pokud chcete zvětšit mezeru mezi jednotlivými písmeny v textu záhlaví, použijte k úpravě mezery posuvník 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 za hodnotu velikosti můžete zadat „px“ nebo „em“ a změnit tak její typ.

Výška řádku záhlaví

Výška řádku ovlivňuje mezeru mezi jednotlivými řádky textu záhlaví Pokud chcete zvětšit mezeru mezi jednotlivými řádky, použijte posuvník rozsahu pro úpravu mezery 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 za hodnotu velikosti můžete zadat „px“ nebo „em“ a změnit tak typ její jednotky.

Písmo těla

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

Velikost písma těla

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

Barva textu těla

Ve výchozím nastavení se všechny barvy textu v Divi zobrazí jako bílá nebo tmavě šedá. Pokud chcete změnit barvu textu těla, vyberte požadovanou barvu z nabídky barev pomocí této možnosti.

Rozteč písmen těla

Rozteč písmen ovlivňuje mezeru mezi jednotlivými písmeny. Pokud chcete zvětšit mezeru mezi jednotlivými písmeny v textu těla, použijte posuvník rozsahu pro nastavení mezery 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 za hodnotu velikosti můžete zadat „px“ nebo „em“ a změnit tak typ jednotky.

Výška řádku těla

Výška řádku ovlivňuje mezeru mezi jednotlivými řádky textu těla Pokud chcete zvětšit mezeru mezi jednotlivými řádky, použijte posuvník rozsahu pro úpravu mezery nebo zadejte požadovanou velikost mezery do vstupního pole napravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že za hodnotu velikosti můžete zadat „px“ nebo „em“ a změnit tak typ jednotky.

Písmo meta textu

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

Velikost písma meta

Zde můžete upravit velikost svého meta textu. Tažením posuvníku rozsahu můžete zvětšit nebo zmenšit velikost textu nebo můžete zadat požadovanou hodnotu velikosti textu přímo do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že za hodnotu velikosti můžete zadat „px“ nebo „em“ a změnit tak typ jednotky.

Barva meta textu

Ve výchozím nastavení se všechny barvy textu v Divi zobrazí jako bílá nebo tmavě šedá. Pokud chcete změnit barvu svého metatextu, vyberte požadovanou barvu z nabídky barev pomocí této možnosti.

MetaRozteč písmen

Rozteč písmen ovlivňuje mezeru mezi jednotlivými písmeny. Pokud chcete zvětšit mezeru mezi jednotlivými písmeny v meta textu, použijte k úpravě mezery posuvník 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 za hodnotu velikosti zadat „px“ nebo „em“ a změnit tak typ jednotky.

Výška řádku meta

Výška řádku ovlivňuje mezeru mezi jednotlivými řádky vašeho meta textu Pokud byste chtěli zvětšit mezeru mezi jednotlivými řádky, použijte posuvník rozsahu pro úpravu mezery 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 za hodnotu velikosti můžete zadat „px“ nebo „em“ a změnit tak typ jednotky.

Použít rámeček

Zapnutím této možnosti se kolem modulu umístí rámeček. Tento rámeček lze přizpůsobit pomocí následujících podmíněných nastavení.

Barva rámečku

Tato volba ovlivňuje barvu vašeho rámečku. Zvolte vlastní barvu z výběru barev a použijte ji na svůj rámeček.

Šířka rámečku

Ve výchozím nastavení mají rámečky šířku 1 pixel. Tuto hodnotu můžete zvětšit přetažením posuvníku rozsahu nebo zadáním vlastní hodnoty do vstupního pole napravo od posuvníku. Podporovány jsou vlastní měrné jednotky, což znamená, že výchozí jednotku „px“ můžete změnit na jinou, například em, vh, vw atd.

Styl ohraničení

Ohraničení podporuje osm různých stylů, včetně: plného, tečkovaného, čárkovaného, dvojitého, drážkového, hřebenového, vkládaného a vybíhajícího. Z rozbalovací nabídky vyberte požadovaný styl a aplikujte jej na rámeček.

Rozšířené možnosti blogu

Na kartě Rozšířené možnosti najdete možnosti, které se mohou hodit zkušenějším webdesignérům, například vlastní atributy CSS a HTML. Zde můžete použít vlastní CSS na některý 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 rámci souboru style.css vašeho podřízeného motivu.

CSS ID

Zadejte volitelné ID CSS, které se má pro tento modul použít. ID lze použít k vytvoření vlastního stylování CSS nebo k vytvoření odkazů na konkrétní části stránky.

Třída CSS

Zadejte volitelné třídy CSS, které se mají pro tento modul použít. Třídu CSS lze použít k vytvoření vlastního stylování CSS. Můžete přidat více tříd oddělených mezerou. Tyto třídy lze použít v dceřiném tématu Divi nebo v rámci vlastního CSS, které přidáte na stránku nebo web pomocí možností tématu Divi nebo nastavení stránky Divi Builder.

Vlastní CSS

Vlastní CSS lze také použít na modul a libovolné vnitřní prvky modulu. V části Vlastní CSS najdete textové pole, do kterého můžete přidat vlastní CSS přímo ke každému prvku. CSS vložené do těchto nastavení jsou již zabaleny do značek stylů, takže stačí zadat pouze pravidla CSS oddělená středníky.

Viditelnost

Tato možnost vám umožňuje řídit, na kterých zařízeních se váš modul zobrazí. Můžete si zvolit, zda chcete modul zakázat jednotlivě na tabletech, chytrých telefonech nebo stolních počítačích. To je užitečné, pokud chcete na různých zařízeních používat různé moduly nebo pokud chcete zjednodušit mobilní design tím, že ze stránky odstraníte určité prvky.

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.