Modul Divi Blog má možnost rozvržení ve formě užitečné mřížky pro vaše blogové příspěvky. Šablona mřížky organizuje vaše blogové příspěvky do polí nebo map, které zjednodušují viditelnost položek na obrazovce ve srovnání se standardním zobrazením.

Nastavení modulu Blog umožňuje přizpůsobit celkový design vaší sítě. Můžete snadno nastavit, aby všechny vaše karty měly stejnou barvu pozadí, písmo, okraje atd. Možnosti stylingu jsou však omezeny na design mřížky jako celku, což ztěžuje použití více nebo různých návrhů na mapy v mřížce.

Dnes vám ukážu, jak zacílit a aplikovat více než jeden styl na karty, které tvoří mřížku. váš blog pomocí vlastního CSS. Ukážu vám, jak na každou kartu použít jiný styl, abyste vytvořili šachovnicový efekt. Ukážu vám také, jak stylizovat každou kartu jinak na řádek a ukážu vám, jak zacílit na libovolnou jednotlivou kartu.

Takže toto jsou 4 příklady, jak přizpůsobit váš blog, včetně některých efektů vznášení, které můžete použít. Na konci tohoto tutoriálu budete schopni vytvářet úžasné návrhy pro váš blog.

Další návody na téma Divi

• 5 webové stránky pro použití v hotelu Divi téma
• Jak přidat text na produktech Divi WooCommerce
• Jak změnit barvu nabídky mezi stránkami v programu Divi
• Funkce, které o Divi neznáte
• Jak vytvořit posuvník na Divi
• Jak upravit roli uživatele v Divi

Začněme.

Konfigurace rozvržení vašeho blogu

Než začnete s návrhem karet modulů blogu, ujistěte se, že máte alespoň v 12 článcích vytvořených s obrázkem v poli.

Po vytvoření zpráv vytvořte novou stránku. Na novou stránku nasaďte modul blogu do sloupce plné šířky ve standardní části:

Klepnutím upravte nastavení modulu Blog. V části Obecná nastavení změňte následující nastavení:

• Rozložení: mřížka
• Počet článků: 12
• Zobrazit vybraný obrázek: ANO
• Tlačítko Přečtěte si více: ON

V části Vlastní CSS zadejte do textového pole ID CSS „mřížku“. Bude to způsob, jak přizpůsobit pouze tento modul blogu.

Uložte změny

Jak porozumět rozložení „Mřížka“ pro blog

Nyní, když máte na svém blogu vytvořenou síť, je důležité pochopit strukturu rozvržení mřížky, abyste mohli najít mapy blogového modulu, který chcete přizpůsobit.

Mřížka blogu je konfigurována se třemi sloupci. Následuje obrázek mřížky blogů s články blogu 12 rozdělenými do tří sloupců:

Karty lístků blogu jsou v každém sloupci uspořádány shora dolů. Takže pokud jim chcete dát číslo, budete muset spočítat 1 až 4 na každé délce od shora dolů:

Jelikož znáte číselné pořadí každé karty blogu v každém sloupci, můžete také každou kartu identifikovat jako liché nebo sudé číslo následujícím způsobem:

Vzory brána Příklad

Příklad č. 1: Návrh „kostkované“ mřížky

U tohoto prvního příkladu zacílím na všechny liché karty v modulu blogu (karty 1 a 3) v prvním sloupci a poskytnu jim tmavě šedou barvu pozadí. Chcete-li to provést, přejděte do části „Divi → Možnosti motivu“ a do vlastního textového pole CSS přidejte následující CSS:

#gridcard .column: první dítě článek: nth-child (lichý) {background: #333; }

Zde je rozpis toho, co tento kód dělá:

#gridcard = ID celého modulu blogu

.column: first-child = vyberte první sloupec v modulu blogu

post: nth-child (liché) = vybere všechny liché položky (nebo karty) ve sloupci

Když to dáme dohromady, vybere se liché karty v prvním sloupci modulu blogu s ID „gridcard“.

Potom přidejte bílý text, který půjde na tmavém pozadí přidáním následujícího CSS:

#gridcard .column: první dítě článek: nth-child (lichý) .entry-title, #gridcard .column: první dítě článek: nth-child (lichý) .post-meta, #gridcard .column: první dítě Článek: nth-child (lichý) .post-meta a, #gridcard .column: první dítě článek: nth-child (lichý) .post obsahem p {color: #ffffff; }

Tento kód se zaměřuje na všechny textové prvky na kartách modulu blogu (včetně názvu, metas příspěvků, meta odkazů a obsah článku) a dává jim bílou barvu.

Zde je výsledek:

Dalším krokem při vytváření našeho šachovnicového rozvržení je zacílit na liché karty ve třetím sloupci a použít tmavě šedé pozadí a bílý text stejně jako v prvním sloupci. Do textového pole Vlastní CSS přidejte následující CSS:

#gridcard .column: last-child article: nth-child (odd) {background: # 333; } #gridcard .column: last-child article: nth-child (odd) .entry-title, #gridcard .column: last-child article: nth-child (odd) .post-meta, #gridcard .column: last- podřízený článek: nth-child (lichý). post-meta a, #gridcard .column: poslední podřízený článek: nth-child (lichý) .post-content p {color: #ffffff; }

Tento kód cílí na sloupec „poslední“ (v tomto případě je třetí sloupec posledním sloupcem) s prvkem přezdívky „poslední dítě“.

Pro druhý sloupec (nebo středně), zaměřte sudé karty k dokončení šachovnicového efektu. K tomu musíme přidat následující CSS:

#gridcard .column: nth-child (2) article: nth-child (even) {background: # 333; } #gridcard .column: nth-child (2) article: nth-child (even) .entry-title, #gridcard .column: nth-child (2) article: nth-child (even) .post-meta, # gridcard .column: nth-child (2) article: nth-child (even) .post-meta a, #gridcard .column: nth-child (2) article: nth-child (even). post-content p {color : #fff; }

Teď jít podívat na stránky blogu vidět rozložení šachovnicí Blog modulu karet.

Příklad č. 2: Přidání efektů přechodu pomocí kostkovaného rozložení

Jakmile budete vědět, jak cílit na karty modulu blogu, můžete kreativně změnit kterýkoli z prvků na kartě.

V tomto příkladu použiji rozložení šachovnice a tentokrát změním vybrané obrázky z tmavě šedých map na černé a bílé, když najedu nad mapu. A když se vznáším nad kartou, obrázky bílé karty na přední straně budou jasnější. Chcete-li to provést, přidejte do oblasti Vlastní CSS následující CSS (nezapomeňte deaktivovat nebo vyjmout druhý kód, aby nebyl nekompatibilní s novým):

#gridcard .column: článek prvního dítěte: nth-child (lichý), #gridcard .column: článek posledního dítěte: nth-child (lichý), #gridcard .column: nth-child (2) článek: nth-child (sudé) {pozadí: # 333; } #gridcard .column: first-child article: nth-child (odd) .entry-title, #gridcard .column: first-child article: nth-child (odd) .post-meta, #gridcard .column: first- podřízený článek: nth-child (lichý). post-meta a, #gridcard .column: first-child article: nth-child (odd) .post-content p, #gridcard .column: last-child article: nth-child (odd) .entry-title, #gridcard .column: článek posledního dítěte: nth-child (lichý) .post-meta, #gridcard .column: článek posledního dítěte: nth-child (lichý) .post-meta a , #gridcard .column: článek posledního dítěte: nth-child (lichý). post-content p, #gridcard .column: nth-child (2) article: nth-child (even) .entry-title, #gridcard. sloupec: nth-child (2) article: nth-child (even) .post-meta, #gridcard .column: nth-child (2) article: nth-child (even) .post-meta a, #gridcard .column : nth-child (2) article: nth-child (even) .post-content p {color: #fff; } #gridcard .column: nth-child (2) article: nth-child (even): hover img, #gridcard .column: first-child article: nth-child (odd): hover img, #gridcard .column: last -child článek: nth-child (odd): hover img {-webkit-filter: grayscale (1); filtr: stupně šedi (1); } #gridcard .column: nth-child (2) article: nth-child (odd): hover img, #gridcard .column: first-child article: nth-child (even): hover img, #gridcard .column: last -child článek: nth-child (even): hover img {-webkit-filter: Brightness (1.5); filtr: jas (1.5); }

Na karty můžete také přidat efekt překlopení, takže když umístíte ukazatel myši nad bílé karty, změní se na tmavě šedou, a když umístíte ukazatel myši na tmavě šedé karty, změní se na bílou.

Přidejte následující CSS a více CSS nad:

#gridcard .column article, #gridcard .column article img {-webkit-transition: vše 0.8 s; -moz-transition: všech 0.8 s; přechod: všech 0.8 s; } #gridcard .column: článek prvního dítěte: nth-child (liché): vznášet se, #gridcard .column: článek posledního dítěte: nth-child (liché): vznášet se, #gridcard .column: nth-child (2) article: nth-child (even): hover {background: #fff; } #gridcard .column: first-child article: nth-child (odd): hover .entry-title, #gridcard .column: first-child article: nth-child (odd): hover .post-meta, #gridcard. sloupec: článek prvního dítěte: n-dítě (liché): vznášet se. post-meta a, #gridcard. sloupec: článek prvního dítěte: n-dítě (liché): vznášet se .post-content p, #gridcard. sloupec: last-child article: nth-child (odd): hover .entry-title, #gridcard .column: last-child article: nth-child (odd): hover .post-meta, #gridcard .column: last-child article : nth-child (odd): hover .post-meta a, #gridcard .column: last-child article: nth-child (odd): hover .post-content p, #gridcard .column: nth-child (2) article: nth-child (even): hover .entry-title, #gridcard .column: nth-child (2) article: nth-child (even): hover .post-meta, #gridcard .column: nth-child ( 2) article: nth-child (even): hover .post-meta a, #gridcard .column: nth-child (2) article: nth-child (even): hover .post-content p {color: # 333; } #gridcard .column: článek prvního dítěte: nth-child (sudé): vznášet se, #gridcard .column: článek posledního dítěte: nth-child (sudé): hover, #gridcard .column: nth-child (2) article: nth-child (odd): hover {background: # 333; } #gridcard .column: first-child article: nth-child (even): hover .entry-title, #gridcard .column: first-child article: nth-child (even): hover .post-meta, #gridcard. sloupec: první podřízený článek: n-podřízené (sudé): vznášet se. post-meta a, #gridcard. sloupec: první podřízený článek: n-podřízené (sudé): vznášet se. post-obsah p, # gridcard. poslední podřízený článek: n-podřízený (sudý): vznášet se .entry-title, #gridcard .column: poslední podřízený článek: nth-podřízený (sudý): vznášet .post-meta, #gridcard .column: poslední podřízený článek : nth-child (even): hover .post-meta a, #gridcard .column: last-child article: nth-child (even): hover .post-content p, #gridcard .column: nth-child (2) article: nth-child (odd): hover .entry-title, #gridcard .column: nth-child (2) article: nth-child (odd): hover .post-meta, #gridcard .column: nth-child ( 2) article: nth-child (odd): hover .post-meta a, #gridcard .column: nth-child (2) article: nth-child (odd): hover .post-content p {color: #fff; }

Nyní se podívejte na účinek na váš blog.

Příklad č 3: Vlastní mapy liniemi

U třetího příkladu použiji stejné tmavé pozadí a bílý text na karty v každém druhém řádku (ne ve sloupci). Chcete-li to provést, musíte zacílit na všechny sudé karty v každém ze sloupců. Přejděte na téma „Divi → Možnosti“ motivu a nezapomeňte deaktivovat nebo odstranit jakýkoli předchozí kód CSS, který jste přidali od začátku tohoto tutoriálu. Pak přidejte následující CSS:

#gridcard article: nth-child (even) {background-color: # 333; } #gridcard article: nth-child (even) .entry-title, #gridcard article: nth-child (even) .post-meta, #gridcard article: nth-child (even) .post-meta a, #gridcard article : nth-child (even) .post-content p {color: #fff; }

Výsledek je následující:

Příklad # 4: Návrh konkrétní mapy mřížky

Někteří z vás možná budou chtít vybrat konkrétní kartu. Chcete-li to provést, musíte najít jedinečné ID položky, které je automaticky přiřazeno každé z vašich karet. V tomto příkladu používám prohlížeč Chrome.

Přejděte na stránku zobrazující váš modul blogu a klikněte pravým tlačítkem na jednu ze svých karet. V poli možností, které se zobrazí, vyberte „Zkontrolovat“ (některé prohlížeče mohou mít „Zkontrolovat položku“ nebo něco podobného. Tím se nasadí okno Nástroje pro vývojáře, které zobrazuje html i css pro váš webová stránka. Najděte značku článku, která obaluje váš článek, a zapište si přidělené ID článku. Toto je selektor, který byste měli použít k zacílení vaší jednotlivé karty. Pro můj příklad mám kliknete pravým tlačítkem a kliknete na inspekci, abyste našli ID „post-3466“.

Jak je uvedeno níže:

Cílit na tento CSS kartu, aby mu šedé pozadí s bílým písmem, je třeba použít následující CSS:

# post-3466 {pozadí: # 333333; } # post-3466 .entry-title, # post-3466 .post-meta, # post-3466 .post-meta a, # post-3466 .post-content p {color: #fff; }

Nyní má na mapu aplikován tento specifický styl.

To je vše!

Závěrečné myšlenky

Toto je jen několik příkladů z mnoha různých stylů, kterých můžete dosáhnout pomocí tohoto typu cílení CSS na kartách modulu Blog. Pro každou kartu již nemusíte zachovávat stejný styl. Můžete je navrhnout, jak chcete.

Máte-li jakékoli dotazy nebo připomínky, neváhejte a nabídnout jim ke mně.

[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

• 5 webové stránky pro použití v hotelu Divi téma
• Jak přidat text na produkt Divi WooCommerce
• Jak změnit barvu nabídky mezi stránkami Divi
• Jak přizpůsobit mřížky blogu s Divi
• Jak používat role Divi editor na WordPress
• Jak vytvořit posuvník Divi na celé obrazovce
• Jak změnit barvu nabídek mezi stránkami Divi
• Funkce, které pravděpodobně nevíte o Divi
• Jak používat Divi Builder na WordPress
• Jak používat modul posunu videa Divi
• Jak používat modul Divi Builder Flip
• Jak přidat zkušební modul na Divi Builder
• Jak používat textový modul Divi
• Jak vytvořit posuvník na Divi
• Jak upravit roli uživatele Divi
• Jak používat modul Divi Social Media
• Jak používat modul obchodu na téma WordPress Divi
• Jak používat modul bočního panelu Divi
• Jak používat modul tabulky ceny Divi
• Jak používat titulní modul publikací Divi
• Jak přidat video modul Divi
• Jak používat navigační modul článku
• Jak používat vyhledávací modul Divi
• Jak používat modul peněženky Divi
• Jak používat modul osob na nástroji Divi Builder
• Jak používat modul peněz s filtrem Divi
• Jak používat posuvný modul s plnou šířkou
• Jak používat modul obrazu Divi Builder
• Jak používat navigační modul plné šířky nástroje Divi Builder
• Jak používat modul galerie obrázků
• Jak používat modul karty Divi Builder Full-Width Card
• Jak používat portálový modul Divi s plnou šířkou
• Jak používat modul záhlaví Divi s plnou šířkou
• Jak používat počítací modul Divi
• Jak používat posuvník článků v Divi Builderu
• Jak používat modul Divi Email Optin