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
Dobré ráno ! Víte, zda je možné upravit počet sloupců tohoto objektu blogu?
Chtěl bych, aby se každá mapa zobrazovala v plné šířce. DÍK !
Dobrý den,
Snažil jsem se zobrazit příspěvky blogu v „mřížce“ s ID „gridcard“, ale nefunguje to. Můžeš mi pomoci ?
Bonsoir,
Omlouváme se za pozdní odpověď.
Můžete svou žádost přeformulovat?
Dobrý den,
Jsem opravdu začátečník, ale díky online tutoriálům se mi podaří vytvořit pěkný blog.
Opravdu děkuji za tento, protože jsem musel zkopírovat kódy a všechno proběhlo bezchybně, jsem s výsledkem potěšen.
Ještě jednou díky, přeji hezký den 🙂
Prosím tě. Děkujeme, že jste nás přečetli.
Bonsoir,
blog DIVI, vedle jména autora, umístí předložku „of“ (např. Stefano). Chtěl bych vědět, jestli je možné to změnit na „de“
Dobrý den,
Ano, je možné tento prvek změnit pomocí Divi.
Dobrý den, Thierry
Super tutorial
Chtěl bych vědět, jestli je možné zvětšit velikost uváděného obrázku
Chci použít tento styl na můj blog
děkuji
Dobrý den,
Ano, je to možné.
Dobrý den,
Jak mohu optimalizovat toto rozložení pro mobilní zařízení (tablet)? Nemám Schabrettmuster, ale různé barvy pro každý blogový příspěvek, v určitém pořadí. To se samozřejmě změní, když přepnete na mobilní zařízení a barvy již nebudou spojeny se správnými příspěvky ...
Má tu někdo nápad?
Dobrý den,
Bohužel ne.
Dobrý den,
Díky za tento článek! Také bych chtěl upravit „přečíst více“ ve spodní části článků.
Mohli byste nám dát příklady kódu CSS, abychom změnili text a vložili jej například do pěkného středového tlačítka?
En vous remerciant.
Sophie
Ahoj 🙂 Chcete-li změnit text tlačítka „číst více“, můžete to provést v Nastavení blogu > Styl > Přečíst další text. Typografii a text "číst dále" můžete upravit. Nevím však, jak z toho udělat tlačítko. Dobré nastavení!
V CSS personalizado se vkládá zpráva,
#gridcard .Column: první-dětské umění: nth-child (impar) {background: #333; }
da error como el seigue: Očekáváno FUNCTION nebo IDENT po dvojtečce na řádku 1, col 18
pozdravy
Bonsoir,
Náš blog je automaticky přeložen z francouzštiny. Proto vás vyzývám k výběru francouzského jazyka v jazykovém widgetu umístěném na horním panelu našeho blogu a zobrazí se správný kód CSS.
usted escribió a artículo zlé escrito, debería ser: artículo del primé hijo: no arte del primer hijo:
Máte nesprávně napsaný článek, měl by být: článek první dítě: ne první dětské umění:
Dobrý den,
Jiné jazyky 70.
Haló
Díky za článek. Mám mřížkovou prezentaci (téma Divi) Mám miniatury (fotografie) pro prezentaci článků, na druhou stranu, když kliknu, abych měl přístup k článku, obrázek se zobrazí na začátku 'článek. Existuje způsob, jak vytvořit stejnou velikost jako miniaturu nebo ji odstranit ze zobrazení příspěvku.
děkuji
Patrik
Bonsoir,
Je nám líto, ale naše podpora divi je omezena na naše výukové programy. Kontaktujte společnost Eleganthemes SVP.
Bonjourn, super článek
Zkouším své štěstí zde, někdy jsme několik týdnů obcházeli téma, aniž bychom našli odpověď, když stejný předmět dává ostatním smysl.
Hledám proto řešení, abych vytvořil post-grid, složený pouze z vizuálů, ale různých výšek, abych byl přesnější, že jeden ze dvou vizuálů má dvojnásobnou výšku vizuálu vedle něj.
Nápad?
Julian
Dobrý den, Julien,
Doporučuji kontaktovat tým DIVI. V tomto případě je to pohodlnější.
Skvělý návod! Budu testovat CA o tomto víkendu na mých stránkách.
máte řešení k odstranění extraktů v sítí?
Děkuji vám
Sofhy