S Divi jsou i blogy modulem a váš „blog“ můžete umístit kamkoli na svůj Webové stránky a v různých formátech. Moduly blogu a postranního panelu můžete kombinovat a vytvářet klasické návrhy blogu. Pomocí modulu blogu a postranního panelu lze vytvořit 1 sloupec, 2 sloupce nebo 3 sloupce.

Jak přidat blogový modul na vaši stránku

Než budete moci přidat modul blogu na svou stránku, musíte nejprve otevřít Divi Builder. 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 můžete aktivovat Divi Builder, který vám umožní 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 když si prohlížíte své Webové stránky upstream, pokud jste přihlášeni do svého řídicího panelu WordPress.

Po zadání do Visual Builderu můžete kliknutím na šedé tlačítko plus přidat na stránku nový modul. 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. Máme skvělé návody k používání prvků lignes a sekce podle Divi.

Vyhledejte modul blogu 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 „blog“ a poté kliknout na Enter pro automatické vyhledání a přidání modulu blogu! 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ý .

Pouzdro modulu blogu s rozložením mřížky ve specializované sekci s pravým postranním panelem

V tomto příkladu přidám modul blogu na stránku blogu. Tato stránka blogu má úplnou záhlaví s vyhledávacím modulem níže. Pod vyhledávací modul přidám specializovanou sekci s modulem blogu na levé straně a částí postranního panelu na pravé straně. Postranní panel vpravo obsahuje widget nedávného příspěvku, modul pro přihlášení k e-mailu a modul osoby.

Takto vypadá ukázková stránka.

Modul blogu je v mřížce na levé straně speciální sekce.

Začněme.

Pomocí vizuálního nástroje vytvořte specializovanou sekci s následujícím rozvržením:

Zobrazí se výzva k přidání sloupce nebo dvouřadého řádku pro levou stranu. Vyberte řádek 1 sloupec.

Poté přidejte blogový modul do řádku.

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

Možnosti obsahu

Počet příspěvků: 6
Další informace Tlačítko: ZAP
Zobrazit stránkování: NE
Barva pozadí mřížky: #ffffff

Možnosti návrhu

Rozložení: mřížka
Použijte Dropshadow: ON
Barevná ikona překrytí: #ffffff
Barva překryvného ukazatele myši: záhlaví rgba (224,153,0,0.51)
policie:
Záhlaví velikosti písma: 21px
Barva textu záhlaví: # 333333
Mezery mezi písmeny: 1px
Výška řádku záhlaví: 1.2 em
Hranice: ANO
Barva okraje: # f0f0f0
Šířka hranice: 1px
Styl okraje: Pevný

Pokročilé možnosti

Vlastní CSS (tlačítko Číst více):

barva: # e09900;
sledovací blok;
text-align: center;
horní okraj: 10px;
hranice: 1px solid # ccc;
polstrování: 5px;
Transformace textu: kapitalizujte;
rozteč písmen: 1px;

Rozšířené vlastní tlačítko CSS pro tlačítko Číst více vytváří vlastní vzhled, který odpovídá designu.

V pravém postranním panelu rozložení specializované sekce budete muset přidat modul postranního panelu, který vloží widget posledních příspěvků. Níže budete muset přidat modul Email Optin. A pak v části Email Optin musíte přidat modul Person s informacemi o autorovi.

A je to!

Možnosti obsahu blogu

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 zobrazí tato karta.

Číslo položky (počet položek)

Nastavte počet zpráv, které chcete zobrazit. Pro vše, co se v tomto modulu objeví, budete muset mít zprávy.

Vyberte kategorie, které chcete zahrnout do příspěvku. Zde se zobrazí všechny kategorie zpráv, které jste vytvořili, abyste je mohli vybrat / zrušit výběr.

Kategorie zahrnuty

Vyberte kategorie, které chcete do zdroje zahrnout.

Formát metadat

Zde nastavte formát data, který chcete zobrazovat ve svých příspěvcích na blogu. Výchozí rozložení je formát M j, Y (6. ledna 2014). Viz WordPress codex ve formátech data pro více možností.

Obsah

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

Offset number

Vyberte počet zpráv, které chcete vyrovnat. Pokud například kompenzujete 3 příspěvky, první tři příspěvky ve vašem zdroji blogů se nezobrazí.

Zobrazit vybraný obrázek

Tato volba umožňuje vybrat, zda chcete v modulu blogu zobrazovat miniatury.

Přečtěte si další tlačítko

Zde můžete nastavit, zda se má po úryvku zobrazit odkaz „přečíst více“.

Zobrazit autora

Vyberte, zda chcete zobrazit autora každého příspěvku na blogu v poli metadat příspěvku pod názvem příspěvku.

Zobrazit datum

Zvolte, zda chcete zobrazit datum, kdy byl každý článek vytvořen, v poli Meta položky pod názvem zprávy.

Zobrazit kategorie

Zvolte, zda se mají zobrazovat kategorie příspěvků v oblasti metadat příspěvků pod názvem publikace.

Zobrazit počet komentářů

Zvolte, zda chcete zobrazit počet komentářů v poli metadat příspěvku pod názvem příspěvku.

Zobrazení stránkování

Vyberte, zda chcete pro tento zdroj zobrazit stránkování. Chcete-li povolit číslované stránkování, budete muset nainstalovat modul plug-in WP Page Navi .

Štítek správy

Tím se změní štítek modulu v generátoru pro snadnou identifikaci. Při použití pohledu WireFrame ve Visual Builderu se tyto štítky objeví v bloku modulu rozhraní Divi Builder.

Možnosti návrhu blogu

Na kartě Návrh najdete všechny možnosti stylingu modulu, například písma, barvy, velikost a mezery. Tato karta umožňuje upravit vzhled vašeho modulu. Každý modul Divi má dlouhý seznam nastavení designu, pomocí kterého můžete vyladit téměř cokoli.

Dispozice

Můžete se rozhodnout zobrazit své příspěvky na blogu v mřížce nebo v rozložení na celou šířku.

Překrývá obraz

Pokud je tato možnost povolena, zobrazí se barva a ikona překrytí, když návštěvník umístí kurzor na vybraný obrázek zprávy.

Barva ikony překrytí

Zde můžete nastavit vlastní barvu ikony překrytí.

Krytí barvy krytu

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

Hover Icon Picker

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

Barva textu

Si váš blog je umístěn na světlém pozadí, barva textu by měla být nastavena na „Tmavý“. Vízum ano váš blog je umístěn na tmavém pozadí, barva textu by měla být nastavena na „Světlý“.

Písmo záhlaví

Písmo 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 úžasný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. Můžete také přizpůsobit styl textu pomocí možností tučně, kurzíva, velká a podtržená.

Velikost písma záhlaví

Zde můžete upravit velikost textu záhlaví. Posunutím posuvníku intervalu můžete zvětšit nebo zmenšit velikost textu, nebo můžete 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“ podle své 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 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 textu záhlaví, upravte mezeru pomocí posuvníku intervalu 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“ podle své 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“ podle své 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 úžasný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. Můžete také přizpůsobit styl textu pomocí možností tučně, kurzíva, velká a podtržená.

Velikost písma těla

Zde můžete upravit velikost textu. Posunutím posuvníku intervalu můžete zvětšit nebo zmenšit velikost textu, nebo můžete 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“ podle své 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 každým písmenem textu, upravte mezeru pomocí posuvníku intervalu 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“ podle své velikosti a změnit typ jednotky.

Výška linie těla

Výška řádku ovlivňuje mezeru mezi každým řádkem hlavního textu. Chcete-li zvětšit mezeru mezi jednotlivými řádky, upravte mezeru pomocí posuvníku intervalu 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“ podle své velikosti a změnit typ jednotky.

Metas písmo

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 úžasný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 podtržená.

Velikost písma Metas

Zde můžete upravit velikost meta textu. Posunutím posuvníku intervalu můžete zvětšit nebo zmenšit velikost textu nebo můžete 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“ podle své velikosti a změnit typ jednotky.

Barva textu pro meta

Ve výchozím nastavení se všechny barvy textu v souboru Divi zobrazují v bílé nebo tmavě šedé barvě. Chcete-li změnit barvu meta textu, vyberte pomocí této možnosti preferovanou barvu ve výběru barev.

Mezery mezi meta 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 intervalu 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“ podle své velikosti a změnit typ jednotky.

Výška meta linky

Výška řádku ovlivňuje mezeru mezi každým řádkem v meta-textu. Chcete-li zvětšit mezeru mezi každým řádkem, upravte mezeru pomocí posuvníku rozsahu nebo zadejte do pole požadovanou mezeru napravo od kurzoru. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ podle své 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. Podporované vlastní měrné jednotky, což znamená, že můžete změnit výchozí jednotku z „px“ na něco jiného, ​​např. Em, vh, vw atd.

Styl okraje

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

Pokročilé možnosti blogu

Na kartě Upřesnit najdete možnosti, které mohou zkušenější weboví designéři 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, 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 ve vašem Divi téma Child nebo ve vlastním CSS, které přidáte na svou stránku nebo web pomocí Divi Theme Options nebo Divi Builder Page Settings.

Vlastní CSS

Vlastní CSS lze také použít na modul a kterýkoli z interních prvků modulu. V sekci Vlastní CSS najdete textové pole, kde můžete přidat CSS přímo ke každému prvku. Položky CSS v tomto nastavení jsou již vloženy do značek stylů. Musíte 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é moduly na různých zařízeních nebo pokud chcete zjednodušit mobilní design odstraněním určitých prvků ze stránky.

To je pro tento tutoriál vše.