Divi: Jak vytvořit stránku blogu s modulem Blog

Chcete vytvořit blogovou stránku s modulem Blog? de Divi?

Obvykle každý balíček rozložení Divi publikovaný na elegantní témata nabízí rozložení blogu, které vám pomůže vytvořit váš blog dostatečně rychle. Ale chtěli jste někdy vidět, jak si jednu z těchto stránek blogu sami vytvořit? 

V tomto článku uvidíme, jak vytvořit blogovou stránku s modulem Divi's Blog. Každé nastavení si projdeme krok za krokem.

Začněme!

přehled

Než začneme, podívejme se nejprve na přehled toho, co budeme tvořit.

Vytvořte novou stránku blogu

Vytvořte novou stránku

Nejprve si vytvoříme naši stránku. Na hlavním panelu WordPress klikněte na stránky > Add On.

Dejte stránce název, který vám dává smysl.

• Název stránky: Blog na Divi

Přepněte na Divi Builder

Klikněte na fialové tlačítko uprostřed stránky: Použijte nástroj Divi Builder .

Přidejte sekci pro název stránky blogu

Přizpůsobte sekci

Začneme prvním oddílem. Otevřete je parametry sekce .

Přejděte na Pozadí a změňte barvu na #f9f3fd. Zadejte Blog jako štítek správce. Zavřete nastavení sekce.

• Pozadí: #f9f3fd
• Admin Label: Blog

Vytvořte název stránky blogu

Poté přidáme a řádek pro titul. Vyberte zelenou ikonu a vyberte řádek s jedním sloupcem.

Poté přidejte a textový modul na lince.

Přizpůsobte modul Text nadpisu blogu

Otevřete je Nastavení textového modulu a vyberte H1. Přidejte název Náš blog.

• Písmo: Název 1
• Text: Náš blog

Pak přejděte naKarta Styl a nastavte zarovnání na Střed. Pro text nadpisu H1 vyberte jako písmo Kormorán Infant a nastavte ho tučně.

• Zarovnání textu: Na střed
• Text záhlaví: H1
• Písmo záhlaví: Cormorant Infant
• Soft Light Header: Tučný text

Nastavte Barva na #442854, Velikost na 130 pixelů a Výška čáry na 0,8 em.

• Barva: #442854
• Velikost textu na ploše: 130 pixelů
• Výška řádku: 0,8 em

Vytvořte nejnovější článek a sekci výzvy k akci

Naše sekce se skládá z nejnovějšího článku a e-mailu pro přihlášení. 

Přidejte nový řádek pod naším prvním řádkem a vyberte provedení sloupu 2/3 vlevo a 1/3 vpravo.

Otevřete je parametry linky kliknutím na ikonu ozubeného kola.

VybratKarta Styl, přejděte na vzdálenost a přidejte 0px k dolnímu vnitřnímu okraji. Zavřete Nastavení.

• Spodní vnitřní okraj: 0px

Přidejte a přizpůsobte modul doporučených příspěvků na blogu

Poté přidáme a blogový modul . Toto bude obsahovat náš poslední článek. Klikněte na šedou ikonu plus v levém sloupci našeho nového řádku a přidejte modul Blog.

Obsah

pod Obsah , zadejte 1 jako počet příspěvků.

• Počet pozic: 1

Prvky

Přejděte na Prvky a zrušte zaškrtnutí políčka Autor a stránkování. Zbytek necháme na výchozích hodnotách.

• Autor pořadu: ne
• Zobrazit stránkování: Ne

Dispozice

Poté vyberte Karta Styl a pro rozvržení zvolte Celá obrazovka a vypněte překrytí doporučeného obrázku.

• Model: Celá obrazovka
• Selected Image Overlay: Zakázáno

Název textu

Přejděte na Název textu . Vyberte H2 a vyberte Cormoran Infant. Vyberte Tučné a změňte barvu na #442854.

• Vložte nadpis tři: H2
• Název písma: Cormorant Infant
• Soft Light Title: Tučný text
• Barva textu nadpisu: #442854

Nastavte velikost písma na 30 pixelů. Změňte výšku řádku na 1.1 m.

• Velikost: 30 pixelů pro stolní počítač, 20 pixelů pro tablet, 18 pixelů pro telefon
• Výška titulního řádku: 1,1 em

Tělo textu

Poté přejděte dolů na hlavní text . Pro písmo vyberte Cabin, změňte barvu na #442854 a změňte výšku řádku na 1,8 em.

• Policejní sbor: Kabina
• Barva textu: #442854
• Výška linie těla: 1,8 em

Textová metadata

Poté přejděte dolů na Textová metadata . Nastavte parametry následovně:

• Písmo metadat: Cormorant Infant
• Metadata Tlumené světlo: Normální
• Styl kopírování metadat: Žádný
• Barva textu metadat: #442854
• Velikost textu metadat: Desktop 16px, Tablet 15px, Phone 14px
• Výška řádku metadat: 1,8 em

vzdálenost

Poté přejděte dolů na vzdálenost a změňte horní okraj na 0vw.

• Horní okraj: 0vw

Stínová krabička

Nakonec přejděte dolů na Stínová krabička a zakázat jej.

• Shadow Box: Zakázat

Přidat a upravit textový modul e-mailu blogu

Nyní se přesuneme do pravého sloupce a vytvořit výzvu k akci prostřednictvím e-mailu . Nejprve přidejte modul Text do pravého sloupce. Klikněte na šedou ikonu plus a vyhledejte text.

Obsah

Vyberte Nadpis 2 a zadejte text Přihlásit se k odběru našich nabídek.

• Písmo: Nadpis 2
• Text: Přihlaste se k odběru našich nabídek

Text záhlaví

pro texty v názvu vyberte Zarovnání na střed, vyberte H2, vyberte Kormoránští kojenci a nastavte na Tučné.

• Zarovnání textu: Na střed
• Text záhlaví: H2
• Písmo záhlaví: Cormorant Infant
• Záhlaví měkkého světla: Tučné

Změňte barvu na #442854, velikost na 32 pixelů a výšku řádku na 0,95 em.

• Barva textu záhlaví: #442854
• Velikost textu záhlaví: 32 pixelů
• Výška záhlaví: 0,95 em

vzdálenost

Nakonec přejděte dolů na vzdálenost a přidejte 10 pixelů k dolnímu okraji. Zavřete nastavení modulu Text.

• Dolní okraj: 10px

Přidejte a přizpůsobte modul Blog Email Optin

Pak jdeme vytvořit formulář e-mailem . Přidejte modul Email Optin pod modul Text v pravém sloupci.

Obsah

Nejprve odstraňte nadpis a hlavní text.

• Název: Žádný
• Hlavní text: žádný

Přejděte na Emailový účet a přidejte svého poskytovatele služeb.

Poté přejděte dolů na Pozadí a zrušte výběr barvy pozadí.

• Použít barvu pozadí: ne

Pole

Jděte do Karta Styl a změňte barvu pozadí polí na rgba(255,255,255,0) a barvu textu na #442854.

• Pole barev pozadí: rgba (255,255,255,0)
• Pole barev textu: #442854

Přejděte dolů na možnosti písma a změňte font na kabinový, velikost na 16px a výšku řádku na 1,8em.

• Pole písma: Kabina
• Pole velikosti textu: 16 pixelů
• Výška řádku pole: 1,8 em

Dále upravte zaoblený roh polí na 32 pixelů, šířku okraje na 2 pixely a změňte barvu okraje na #442854.

• Ovládací prvky Zaoblený obdélník: 32px
• Šířka polí: 2px
• Barevná pole ohraničení: #442854

knoflík

Přejděte na tlačítko a vyberte Použijte vlastní styly pro tlačítko . Změňte velikost na 18ps, barvu tlačítka na bílou a barvu pozadí tlačítka na #442854.

• Použít vlastní styly tlačítka: Ano
• Velikost textu tlačítka: 18 pixelů
• Barva textu tlačítka: #ffffff
• Tlačítko pozadí: #442854

Změňte poloměr ohraničení na 50 pixelů, písmo na Cormorant Infant a nastavte tloušťku tučně.

• Tlačítko s poloměrem ohraničení: 50 pixelů
• Tlačítko písma: Kormorán Infant
• Tlačítko Soft Light: Tučný text

Nakonec přidáme nějaké okraje. Zadejte 20 pixelů pro horní okraj, 12 pixelů pro horní a dolní odsazení a 32 pixelů pro odsazení vlevo a vpravo. Zavřete nastavení volby e-mailu.

• Tlačítko Horní okraj: 20 px
• Tlačítko horního a spodního polstrování: 12 px
• Polstrování levého a pravého tlačítka: 32px

Přidat nový řádek pro seznam blogových příspěvků

Teď jdeme vytvořit seznam položek stránky. Nejprve přidejte nový řádek s jedním sloupcem pod naši předchozí sekci.

Nastavení linky

Jít do Karta Styl a přidejte 0px k vnitřnímu okraji Vertex. Zavřete Nastavení linky.

• Vertex vnitřního okraje: 0px

Přidejte na svůj řádek modul Blog

Přidat blogový modul na svůj nový řádek kliknutím na šedou ikonu plus a kliknutím na Blog.

Úprava stylu zdroje příspěvků na blogu

Pojďme změnit zdroj stránky blogu.

Obsah zdroje blogu

Otevřete je Nastavení modulu blogu a zadejte 3 jako počet příspěvků. To vám umožní zvolit počet příspěvků, které se zobrazí na obrazovce.

Nižší číslo, například 3, nám umožňuje soustředit se na poslední příspěvky a zmenšit velikost stránky. To je dobrá volba, pokud nepřispíváte často nebo chcete, aby byla stránka čistší. Zobrazovat více příspěvků, například 6-9, je dobrý nápad, pokud se chcete zaměřit na tok blogu.

• Počet příspěvků: 3

Zadejte 1 pro offset. To říká Divi, aby začala s druhým blogovým příspěvkem, což nám brání v zobrazení stejného článku, který již byl zobrazen v blogovém příspěvku zobrazeném nad ním.

• Číslo post offsetu: 1

Prvky

Přejděte na Prvky . Povolit doporučený obrázek, datum, úryvek kategorií a stránkování. Zbytek deaktivujte.

• Zobrazit doporučený obrázek: Ano
• Data: Ano
• Kategorie: Ano
• Úryvek: Ano
• Stránkování: Ano

Pozadí

Přístup k Pozadí a nastavte barvu pozadí dlaždice mřížky na rgba (255,255,255,0)

• Barva pozadí dlaždice mřížky: rgba (255,255,255,0)

Rozložení a překrytí

Pak přejděte na Karta Styl . Nechte rozvržení nastavené na Mřížka. Pro blogový příspěvek uvedený nad tímto jsme zvolili rozvržení v plné šířce. Pro tento blogový zdroj použijeme rozložení mřížky, což je výchozí možnost. Zakázat překryvnou vrstvu doporučeného obrázku.

• Rozložení: Mřížka
• Selected Image Overlay: Zakázáno

Název textu

pro text nadpisu , vyberte H2. Vyberte Cormorant Infant, nastavte na Tučné a jako barvu zadejte #442854.

• Vložte nadpis tři: H2
• Název písma: Cormorant Infant
• Soft Light Title: Tučný text
• Barva textu nadpisu: #442854

Jako velikost textu zvolte 20px. Nastavte výšku řádku na 1,1 em.

• Velikost textu nadpisu: Plocha 20 pixelů
• Výška titulního řádku: 1,1 em

Tělo textu

Přejděte na Text těla a vyberte Cabin. Nastavte barvu na #442854.

• Policejní sbor: kabina
• Barva textu: #442854

Nastavte výšku řádku na 1,8 em.

• Výška řádku: 1,8 em

Textová metadata

Přejděte na Textová metadata a vyberte Kormorán Infant. Nastavte váhu na normální, styl na žádný a barvu na #442854.

• Písmo metadat: Cormorant Infant
• Metadata Tlumené světlo: Normální
• Styl kopírování metadat: Žádný
• Barva textu metadat: #442854

• Velikost textu metadat: desktop 16px, tablet 15px, telefon 14px
• Výška řádku metadat: 1,8 em

Stránkovací text

Nyní přejdeme k Počet na stránku . Pro písmo vyberte Cormorant Infant, vyberte Tučné a změňte barvu na #442854.

• Písmo Zobrazit stránkování: Kormorán Infant
• Zobrazit Paging Měkké světlo: Tučné
• Barva textu Zobrazit stránkování: #442854

vzdálenost

Poté přejdeme k vzdálenost a nahoře přidejte okraj 0vw. Tím se zabrání tomu, aby se náš modul překrýval s předchozím modulem.

• Horní okraj: 0vw

Hranice

Přejděte na Hranice a zadejte 0px pro všechny čtyři rohy. Tím získáme náš čtvercový tvar mapy.

• Rozložení mřížky Zaoblený obdélník: 0px

Stínová krabička

Nakonec přejděte dolů na Stín boxu a zakázat jej. Zavřete nastavení blogu. Sekce blogu je kompletní.

• Stínová schránka: žádná

Přidejte na stránku blogu novou sekci „Výzva k akci“.

Pak jdeme vytvořte sekci „Výzva k akci“. stránky. Tato část obsahuje obrázek na pozadí paralaxy na celou obrazovku, Kontakt a sociální následující odkazy.

Přidat novou sekci

Klikněte na modrou ikonu přidat novou pravidelnou sekci ve spodní části stránky.

• Sekce: Normální

Upravte styl sekce Výzva k akci

Otevřete je parametry sekce kliknutím na ikonu ozubeného kola.

Pozadí

Přejděte na Pozadí a vyberte kartu Obrázek. Klikněte na šedou ikonu označenou Obrázek na pozadí.

Vyberte si obrázek na celou obrazovku z knihovny médií. Vyberte možnost Použít efekt paralaxy a poté jako metodu paralaxy vyberte CSS.

• Obrázek na pozadí
• Použít paralaxový efekt: Ano
• Paralaxní metoda: CSS

Přejděte dolů na Štítek správce a do pole zadejte „Zápatí“. To vám pomůže udržet si přehled o sekcích.

• Admin Tag: Zápatí

Pak přejděte na Karta Styl.

• Vnitřní rozpětí: 10vw (nahoře a dole)

Přidat nový řádek

Klikněte na zelenou ikonu plus a přidat řádek do jednoho sloupce pro náš obsah.

dimenzování

Otevřete je parametry linky a přejděte na kartu Styl.

• Maximální šířka: 320 pixelů

Textový modul nadpisu

Naše sekce Výzva k akci je uvedena s názvem. Chcete-li to vytvořit, přidat textový modul na lince.

Přizpůsobte text nadpisu

Přidejte název a změňte písmo na Nadpis 3.

• Písmo: Nadpis 3
• Text: Vše o Divi

Text záhlaví

Jít do Karta Styl a přejděte na Text titulků . Vyberte střed pro zarovnání, vyberte H3, vyberte Kormorán Infant, nastavte na Tučné a jako barvu vyberte bílou.

• Zarovnání textu: Na střed
• Text záhlaví: H3
• Písmo záhlaví: Cormorant Infant
• Záhlaví měkkého světla: Tučné
• Barva textu záhlaví: #ffffff

• Velikost textu záhlaví: 42 pixelů pro stolní počítač, 20 pixelů pro tablet, 16 pixelů pro telefon
• Výška záhlaví: 1,1 em

vzdálenost

Nakonec přejděte dolů na vzdálenost a přidejte 10 pixelů k dolnímu okraji. Zavřete nastavení modulu.

• Dolní okraj: 10px

Textový modul pro adresu

Přidejte další modul Text pro vaši fyzickou adresu.

Upravte styl modulu Text fyzické adresy

Text adresy

Přidejte svou adresu jako text odstavce.

• Styl: Odstavec
• Text: Vaše adresa

Text odstavce

Poté přejděte na Text v Karta Styl a vyberte Kormorán Infant, polotučné, a nastavte jej na bílou.

• Písmo: Cormorant Infant
• Měkký světlý text: polotučný
• Barva textu Text: #ffffff

• Text Velikost textu: 28px pro stolní počítač, 20px pro tablet, 16px pro telefon
• Výška řádku textu: 1,2 em

Přidejte modul sledujte nás na sociálních sítích

Náš poslední modul je modul Sledujte nás na sociálních sítích . Přidejte jej na konec řádku.

Stylize Modul sledujte nás na sociálních sítích

Začneme s Karta Styl tentokrát. Vyberte Střed pro zarovnání modulu a změňte barvu ikony na #442854.

• Zarovnání modulu: Střed
• Barva ikony: #442854

Přejděte na Deskaa přidejte 23 pixelů pro zaoblené rohy.

• Zaoblený obdélník: 32px

Přidejte a přizpůsobte své sociální sítě

Nyní se vraťte k Záložka Obsah a přidejte všechny sociální sítě, které chcete zahrnout. Klikněte na šedou ikonu plus.

Otevřete je nastavení pro každou z vašich sociálních sítí , vyberte síť a přidejte odkaz na svůj účet. Nastavte barvu pozadí na #f9f3fd. Zavřete nastavení submodulu.

• Sociální síť: vaše volba
• Adresa URL odkazu na účet: váš odkaz
• Barva pozadí: #f9f3fd

Uložte stránku blogu a ukončete vizuální tvůrce

A konečně, uložit stránku v pravém dolním rohu a vyberte Ukončete Visual Builder v horní části stránky. Jste připraveni vidět svou práci.

Náhled stránky blogu

Zde jsou naše výsledky.

Stáhnout DIVI hned!!!

Proč investovat do čističky vzduchu?

Tak ! Toto je náš pohled na to, jak vytvořit blogovou stránku s Divi. 

Divi Builder usnadňuje vytváření zajímavých rozvržení a existuje několik způsobů, jak používat každý z modulů. Jak bylo v tomto tutoriálu prozkoumáno, je možné použít více verzí modulu Blog na stejné stránce k zobrazení zdroje blogu různými způsoby.

Pokud máte nějaké obavy nebo návrhy, najděte nás v sekci komentářů diskutovat o tom.

Můžete však také konzultovat naše zdroje, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.

Mezitím sdílejte tento článek na různých sociálních sítích.

...