Chcete svou stránku blogu DIVI zobrazit jako mřížku s více sloupci?
Modul Divi's Blog může zobrazovat blogové příspěvky v plné šířce nebo v mřížkovém rozložení. Pokud zvolíte rozložení mřížky, můžete mít maximálně tři sloupce.
V tomto tutoriálu s několika úryvky CSS váš blog se změní na krásné rozvržení mřížky s více sloupci. Navíc budou sloupce plynulé a reagující ve všech velikostech prohlížečů, takže se nemusíte starat o aktualizaci těchto dotazů na média nebo nastavení odezvy.
Chcete-li vědět, můžete se také podívat do našeho článku Jak vytvořit stránku blogu s modulem DIVI Blog.
přehled
Než se pustíme do tohoto tutoriálu, podívejme se nejprve na výsledek, kterého chceme dosáhnout.
Stáhněte si DIVI hned teď!!!
Konfigurace modulu Blog s rozložením na celou obrazovku
Modul Blog DIVI lze použít k přidání blogu kdekoli na vašem počítači Webové stránky. Opravdu to usnadňuje vytvoření stránky blogu v Divi. Jediné, co musíte udělat, je přidat na stránku modul Blog pomocí Divi Builderu.
V tomto tutoriálu použijeme předem vytvořené rozložení blogu z jednoho z bezplatné balíčky rozložení of DIVI, který již obsahuje modul Blog se základním stylem.
Chcete-li načíst předem připravené rozložení blogu:
- Vytvořte novou stránku z řídicího panelu WordPress
- Zadejte mu relevantní název a klikněte na „Použít Divi Builder“
- Klikněte na „Vybrat rozložení“
- Do vyhledávacího pole zadejte „Fashion Designer“ a zvolte rozvržení „Fashion Designer Blog Page“
- Ujistěte se, že jste zvolili rozložení blogu a poté klikněte na „Vybrat rozložení“
Jakmile se rozvržení načte, najděte modul Blog používaný k zobrazení blogových příspěvků a otevřete nastavení.
Nastavte počet příspěvků
V nastavení blogu aktualizujte obsah omezit počet příspěvků na 10. (Je to hlavně z estetických důvodů, protože naše mřížka bude nakonec obsahovat dvě řady po pěti blogových příspěvcích.)
- Počet pozic: 10
Vyberte rozvržení na celou obrazovku
Protože budeme náš blog rozkládat do sloupců pomocí CSS Grid, musíme se ujistit, že rozložení modulu Blog je „Celá obrazovka“ (nikoli „Mřížka“). Tím zajistíte, že příspěvky na blogu budou uspořádány svisle v normálním pořadí stránek.
Chcete-li změnit rozvržení modulu Blog, otevřete nastavení modulu a na kartě Styl otevřete rozevírací nabídku Šablona a vyberte možnost Celá obrazovka .
Nyní bude každý blogový příspěvek zabírat celou šířku sloupce (nebo nadřazeného kontejneru).
Přidáme ohraničení blogových příspěvků. Aktualizujte možnosti ohraničení následovně:
- Šířka okraje: 1px
- Barva ohraničení: rgba (150,104,70,0.35)
Přidání vlastní třídy CSS do modulu Blog
Abychom mohli efektivně zacílit tento konkrétní modul blogu (nikoli jiný) pomocí našeho CSS, musíme našemu modulu dát vlastní třídu CSS. Na kartě Upřesnit přidejte následující třídu CSS:
- CSS třída: et-blog-css-grid
Vytvoření vícesloupcového rozvržení pomocí CSS Grid
Nyní, když je náš modul Blog nastaven s rozložením na celou obrazovku, jsme připraveni přidat vlastní CSS.
Pod modul Blog vložíme modul Kód pro přidání CSS na stránku.
Do pole pro zadání kódu přidejte potřebné značky stylu, abyste zalomili jakýkoli kód CSS přidaný na stránku.
Do značek stylu vložte následující fragment kódu CSS:
.et-blog-css-grid > div {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
První řádek CSS představuje obsah (nebo moduly) ve formě mřížky.
display: grid;Druhý řádek CSS definuje model sloupce mřížky.
grid-template-columns : repeat(auto-fill, minmax (200px, 1fr));Třetí řádek určuje rozestupy mezi položkami mřížky.
gap : 20px ;V tomto okamžiku je pětisloupcová responzivní mřížka připravena k použití. Ve skutečnosti, pokud nechcete pro své blogové příspěvky používat stránkování nebo ohraničení, můžete se zastavit zde.
Zde je zatím výsledek.
Přizpůsobte položky mřížky
Poté můžeme přidat několik řádků CSS, které cílí na prvky mřížky tak, aby byly zarovnány k horní části každého řádku a měly nějaké odsazení.
.et-blog-css-grid .et_pb_post {
align-self: start;
padding: 15px;
}
Odstraněno stránkování mřížky
V současné době, pokud máte stránkování aktivní v modulu blogu, bude považováno za poslední prvek mřížky v mřížce CSS. Pro úplné odstranění stránkování z mřížky mu můžeme dát absolutní pozici a umístit ho přímo pod modul blogu. Chcete-li to provést, přidejte následující CSS:
.et-blog-css-grid > div > div {
width: 100%;
position: absolute;
bottom: 0;
transform: translate(0%, 150%);
}
Pojďme se zatím podívat na výsledek!
Tip: Upravte velikost všech doporučených obrázků (nebo miniatur)
V tomto okamžiku si můžete všimnout nekonzistence ve výšce obrázků uváděných v každém příspěvku na blogu. Pokud chcete, aby byly všechny stejně vysoké, můžete k tomu také použít další CSS.
.et-blog-css-grid .entry-featured-image-url {
padding-top: 56.25%;
}
.et-blog-css-grid .entry-featured-image-url img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
object-fit: cover;
}
S horním vnitřním okrajem 56,25 % bychom měli získat poměr stran 16:9 pro všechny naše obrázky.
Neváhejte a upravte výplň na kontejneru obrázku, abyste získali poměr stran, který chcete pro obrázek.
Konečný výsledek
A zde je poslední náhled našeho modulu Blog s našimi novými sloupci a mřížkou. A jak vidíme, mřížka je plně citlivá.
Stáhněte si DIVI hned teď!!!
Proč investovat do čističky vzduchu?
Hotovo ! V tomto tutoriálu jsme vám ukázali, jak uspořádat příspěvky na blogu do sloupců.
Podařilo se nám restrukturalizovat celý modul Divi Blog do plynulého rozvržení s pěti sloupci. Doufám, že vám to ušetří čas a poskytne vám více možností, jak vytvořit krásné stránky blogu. Můžete se také poradit Jak vytvořit stránku blogu s modulem Divi's Blog
Viz také 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.
