Modul Divi Blog má možnosť rozloženia vo forme užitočnej mriežky pre vaše blogové príspevky. Šablóna mriežky organizuje vaše blogové príspevky do polí alebo máp, ktoré v porovnaní so štandardným zobrazením zjednodušujú viditeľnosť položiek na obrazovke.

Nastavenia modulu Blog vám umožňujú prispôsobiť celkový dizajn vašej siete. Môžete ľahko nastaviť, aby všetky vaše karty mali rovnakú farbu pozadia, písmo, okraje atď. Možnosti štýlu sú však obmedzené na vzhľad mriežky ako celku, čo sťažuje použitie viacerých alebo rôznych návrhov na mapy v mriežke.

Dnes vám ukážem, ako zacieliť a aplikovať viac ako jeden štýl na karty, ktoré tvoria mriežku. váš blog pomocou vlastného CSS. Ukážem vám, ako na každú kartu použiť iný štýl, aby ste vytvorili šachovnicový efekt. Ukážem vám tiež, ako naštylizovať každú kartu inak na riadok a ukážem vám, ako zacieliť na každú individuálnu kartu.

Toto sú teda 4 príklady, ako sa prispôsobiť váš blog, vrátane niektorých efektov vznášania, ktoré môžete použiť. Na konci tohto tutoriálu budete môcť vytvárať úžasné návrhy pre váš blog.

Ďalšie návody na tému Divi

• 5 webové stránky pre použitie v hoteli Divi tému
• Ako pridať text na produktoch Divi WooCommerce
• Ako zmeniť farbu ponuky medzi stránkami v programe Divi
• Funkcie, ktoré o Divi neviete
• Ako vytvoriť posúvač na Divi
• Ako upraviť rolu používateľa v Divi

Začnime.

Konfigurácia Layout Grid pre váš blog

Predtým, ako začnete s návrhom kariet blogových modulov, uistite sa, že máte v rámčeku už vytvorené aspoň 12 články s obrázkom.

Po vytvorení správ vytvorte novú stránku. Na svojej novej stránke nasaďte blogový modul na stĺpec plnej šírky v štandardnej časti:

Kliknite a upravte nastavenia modulu Blog. V časti Všeobecné nastavenia zmeňte nasledujúce nastavenia:

• Dispozícia: Tabuľka (mriežka)
• Počet článkov: 12
• Zobraziť odporúčaný obrázok: ÁNO
• Tlačidlo Prečítajte si viac: ON

V časti Vlastné CSS zadajte do textového poľa ID CSS „mriežku“. Bude to pre nás spôsob, ako prispôsobiť iba tento modul blogu.

uložte zmeny

Ako porozumieť rozloženiu „Mriežka“ pre blog

Teraz, keď máte svoj blog mriežku na mieste, je dôležité pochopiť štruktúru usporiadania siete, takže si môžete nájsť mapy modulu blogu, ktorú chcete upraviť.

Mriežka blogu je nakonfigurovaná s tromi stĺpcami. Nasleduje ilustrácia mriežky blogu s článkami blogu 12 rozdelenými do troch stĺpcov:

Karty lístkov blogu sú usporiadané zhora nadol v každom zo stĺpcov. Ak im teda chcete prideliť číslo, budete musieť spočítať 1 až 4 na každej dĺžke od zhora nadol:

Pretože poznáte číselné poradie každej karty blogu v každom stĺpci, môžete každú kartu identifikovať ako nepárne alebo párne číslo aj takto:

Vzory brána Príklad

Príklad č. 1: Návrh mriežky „kockovaný“

V tomto prvom príklade zacielim na všetky nepárne karty v module blogu (karty 1 a 3) v prvom stĺpci a poskytnem im tmavošedú farbu pozadia. Ak to chcete urobiť, prejdite na „Divi → Možnosti témy“ a do vlastného textového poľa CSS pridajte nasledujúce CSS:

#gridcard .column: prvé dieťa článok: nth-child (nepárny) {background: #333; }

Tu je rozpis toho, čo tento kód robí:

#gridcard = ID celého modulu blogu

.column: first-child = vyberte prvý stĺpec v blogovom module

post: nth-child (nepárne) = vyberie všetky nepárne položky (alebo karty) v stĺpci

Keď to dáme dohromady, vyberie sa nepárne očíslované karty v prvom stĺpci modulu blogu s ID „gridcard“.

Potom pridajte biely text, ktorý pôjde na tmavom pozadí pridaním nasledujúceho CSS:

#gridcard .column: prvé dieťa článok: nth-child (nepárny) .entry-title, #gridcard .column: prvé dieťa článok: nth-child (nepárny) .post-meta, #gridcard .column: prvé dieťa Článok: nth-child (nepárny) .post-meta a, #gridcard .column: prvé dieťa článok: nth-child (nepárny) .post obsahom p {color: #FFFFFF; }

Tento kód sa zameriava na všetky textové prvky na kartách modulu blogu (vrátane nadpisu, metasúborov príspevkov, metaodkazov príspevkov a obsah článku) a dáva im bielu farbu.

Tu je výsledok:

Ďalším krokom pri vytváraní nášho rozloženia šachovnice je zacielenie na nepárne očíslované karty v treťom stĺpci a použitie tmavošedého pozadia a bieleho textu rovnako ako v prvom stĺpci. Do textového poľa Vlastné CSS pridajte nasledujúci CSS:

#gridcard .column: last-child article: nth-child (nepárny) {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- podriadený článok: n-dieťa (nepárne) .post-meta a, #gridcard .stĺpec: článok pre posledné dieťa: n -te dieťa (nepárne) .post-obsah p {color: #ffffff; }

Tento kód je zacielený na posledný stĺpec (v tomto prípade je tretí stĺpec posledným stĺpcom) s prvkom prezývky „posledné dieťa“.

Pre druhý stĺpec (alebo stredne), cieľové párne karty dokončia šachovnicový efekt. Aby sme to dosiahli, musíme pridať nasledujúce 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; }

Teraz ísť pozrieť na stránky blogu vidieť rozloženie šachovnicou Blog modulu kariet s.

Príklad č. 2: Pridanie efektov umiestnenia kurzora na kockované rozloženie

Keď viete, ako zamerať karty modulu blogu, môžete kreatívne zmeniť ktorýkoľvek z prvkov na karte.

V tomto príklade použijem rozloženie šachovnice a tentokrát zmením zobrazené obrázky z tmavošedých máp na čiernobiele, keď umiestnim kurzor myši na mapu. A ukážem, aby obrázky bielych kariet na prednej strane boli jasnejšie, keď umiestnite kurzor myši na kartu. Za týmto účelom pridajte do oblasti Vlastné CSS nasledujúce CSS (nezabudnite deaktivovať alebo vystrihnúť druhý kód, aby nebol nekompatibilný s novým):

#gridcard .column: článok prvého dieťaťa: n-dieťa (nepárne), #gridcard .column: článok posledného dieťaťa: nth-child (nepárne), #gridcard .column: nth-dieťa (2) článok: n-dieťa (párne) {pozadie: # 333; } #gridcard .column: článok prvého dieťaťa: n-dieťa (nepárne). vstupný názov, #gridcard .column: článok prvého dieťaťa: n-dieťa (nepárne). post-meta, #gridcard .column: prvý- podriadený článok: n-dieťa (nepárne) .post-meta a, #gridcard .stĺpec: článok pre prvé dieťa: n -te dieťa (nepárne) .post-content p, #gridcard .column: článok pre posledné dieťa: n-dieťa (nepárne) .entry-title, #gridcard .column: článok posledného dieťaťa: n-dieťa (nepárne) .post-meta, #gridcard .column: článok posledného dieťaťa: n-dieťa (nepárne) .post-meta a , #gridcard .column: článok posledného dieťaťa: nth-child (nepárne). post-content p, #gridcard .column: nth-child (2) article: nth-child (even) .entry-title, #gridcard. stĺpec: 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 -detský článok: n -te dieťa (nepárne): vznášať sa img {-webkit-filter: odtiene šedej (1); filter: odtiene sivej (1); } #gridcard .column: nth-child (2) article: nth-child (nepárne): hover img, #gridcard .column: first-child article: nth-child (even): hover img, #gridcard .column: last -detský článok: nth-child (párne): hover img {-webkit-filter: jas (1.5); filter: jas (1.5); }

Na karty môžete tiež pridať inverzný efekt, takže keď umiestnite kurzor myši na biele karty, zmení ich farba na tmavošedú.

Pridajte nasledujúci CSS a viac CSS nad:

#gridcard .column article, #gridcard .column article img {-webkit-transition: všetko 0.8 s; -moz-prechod: všetkých 0.8 s; prechod: všetkých 0.8 s; } #gridcard .column: článok prvého dieťaťa: nth-child (nepárne): hover, #gridcard .column: článok posledného dieťaťa: nth-child (nepárne): hover, #gridcard .column: nth-child (2) článok: n -te dieťa (párne): hover {background: #fff; } #gridcard .column: článok prvého dieťaťa: n-dieťa (nepárne): vznášať .entry-title, #gridcard .column: článok prvého dieťaťa: n-dieťa (nepárne): hover .post-meta, #grcardcard. stĺpec: článok prvého dieťaťa: n-dieťa (nepárne): vznášať sa .post-meta a, #gridcard .stĺpec: článok prvého dieťaťa: n-dieťa (nepárne): vznášať .post-content p, #gridcard .stĺpec: článok posledného dieťaťa: n-dieťa (nepárne): vznášať .entry-title, #gridcard .column: článok posledného dieťaťa: nth-dieťa (nepárne): hover .post-meta, #gridcard .column: článok posledného dieťaťa : nth-child (odd): hover .post-meta a, #gridcard .column: last-child article: nth-child (odd): hover .post-content p, #gridcard .column: nth-child (2) článok: n-dieťa (párne): vznášať sa .entry-title, #gridcard .column: nth-child (2) článok: nth-dieťa (párne): 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ánok prvého dieťaťa: nth-child (párne): vznášať sa, #gridcard .column: článok posledného dieťaťa: nth-child (párne): vznášať sa, #gridcard .column: nth-child (2) článok: n -te dieťa (nepárne): vznášať sa {pozadie: # 333; } #gridcard .column: first-child article: nth-child (even): hover .entry-title, #gridcard .column: first-child article: nth-child (even): hover .post-meta, #gridcard. stĺpec: článok prvého dieťaťa: n-dieťa (párne): vznášať sa .post-meta a, #gridcard .stĺpec: článok prvého dieťaťa: n-dieťa (párne): vznášať .post-obsah p, #gridcard .stĺpec: článok posledného dieťaťa: n-dieťa (párne): vznášať .entry-title, #gridcard .column: článok posledného dieťaťa: nth-dieťa (párne): hover .post-meta, #gridcard .column: článok posledného dieťaťa : nth-child (even): hover .post-meta a, #gridcard .column: last-child article: nth-child (even): hover .post-content p, #gridcard .column: nth-child (2) článok: n-dieťa (nepárne): vznášať .entry-title, #gridcard .column: nth-child (2) článok: n-dieťa (nepárne): hover .post-meta, #gridcard .column: nth-child ( 2) článok: n-dieťa (nepárne): vznášať sa .post-meta a, #gridcard .column: n-dieťa (2) článok: n-dieťa (nepárne): vznášať .post-obsah p {color: #fff; }

Teraz sa choďte pozrieť na efekt na vašom blogu.

Príklad č 3: Vlastné mapy líniami

V treťom príklade použijem na karty v každom druhom riadku (nie stĺpci) rovnaké tmavé pozadie a biely text. Aby ste to dosiahli, musíte zacieliť na všetky párne karty v každom zo stĺpcov. Prejdite na tému „Divi → Možnosti“ a uistite sa, že ste deaktivovali alebo odstránili akýkoľvek predchádzajúci kód CSS, ktorý ste pridali od začiatku tohto tutoriálu. Potom pridajte nasledujúce 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; }

Tu je výsledok:

Príklad # 4: Navrhovanie konkrétnej mriežkovej mapy

Niektorí z vás možno budú chcieť zvoliť konkrétnu kartu. Aby ste to dosiahli, musíte nájsť jedinečné ID položky, ktoré sa automaticky priradí každej z vašich kariet. V tomto príklade používam prehliadač Chrome.

Prejdite na stránku zobrazujúcu váš modul blogu a kliknite pravým tlačidlom myši na jednu zo svojich kariet. V zobrazenom poli možností vyberte možnosť „Skontrolovať“ (niektoré prehliadače môžu mať položku „Skontrolovať položku“ alebo niečo podobné. Týmto sa nasadí okno nástrojov pre vývojárov, ktoré zobrazuje html aj css pre váš web. webová stránka. Vyhľadajte značku článku, ktorá zabaľuje váš článok, a zapíšte si pridelené ID článku. Toto je selektor, pomocou ktorého by ste mali zacieliť svoju individuálnu kartu. Pre môj príklad mám klikli pravým tlačidlom myši a klikli na kontrolované položky, aby našli id ​​"post-3466".

Ako je uvedené nižšie:

Cieliť na tento CSS kartu, aby mu sivé pozadie s bielym písmom, je potrebné použiť nasledujúce CSS:

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

Teraz má na mape tento špecifický štýl aplikovaný.

To je všetko!

záverečné myšlienky

Tu je iba niekoľko príkladov z mnohých rôznych štýlov, ktoré môžete dosiahnuť použitím tohto typu zacielenia na CSS na kartách modulu Blog. Už nemusíte dodržiavať rovnaký štýl pre každú kartu. Môžete si ich navrhnúť, ako chcete.

Ak máte akékoľvek otázky alebo pripomienky, neváhajte a ponúknuť im ku mne.

[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”]STIAHNUŤ TÉMU DIVI [/vcex_button][/vc_column=][vc_column width] /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”]STIAHNUŤ TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Ďalšie výukové programy spoločnosti Divi

• 5 webové stránky pre použitie v hoteli Divi tému
• Ako pridať text na produktoch Divi WooCommerce
• Ako zmeniť farbu ponuky medzi stránkami Divi
• Ako si prispôsobiť mriežky blogu s Divi
• Ako používať role Divi editor na WordPress
• Ako vytvoriť posuvník Divi na celej obrazovke
• Ako zmeniť farbu ponúk medzi stránkami Divi
• Funkcie, ktoré pravdepodobne neviete o Divi
• Ako používať Divi Builder na WordPress
• Ako používať modul posúvania videa Divi
• Ako používať modul Divi Builder Flip
• Ako pridať modul posudkov na Divi Builder
• Ako používať textový modul Divi
• Ako vytvoriť posúvač na Divi
• Ako upraviť rolu používateľa Divi
• Ako používať modul Divi Social Media
• Ako používať modul obchodu na tému WordPress Divi
• Ako používať modul bočného panela Divi
• Ako používať modul tabuľky cien Divi
• Ako používať titulný modul publikácií Divi
• Ako pridať video modul Divi
• Ako používať navigačný modul článku
• Ako používať vyhľadávací modul Divi
• Ako používať modul peňaľenky Divi
• Ako používať osobný modul na nástroji Divi Builder
• Ako používať modul peňaženky s filtrom Divi
• Ako používať posuvný modul s plnou šírkou
• Ako používať modul obrazu Divi Builder
• Ako používať navigačný modul v celej šírke nástroja Divi Builder
• Ako používať modul galérie obrázkov
• Ako používať modul kariet Divi Builder s plnou šírkou
• Ako používať portálový modul Divi s plnou šírkou
• Ako používať modul záhlavia Divi s plnou šírkou
• Ako používať počítací modul Divi
• Ako používať posúvač článkov v aplikácii Divi Builder
• Ako používať modul Divi Email Optin