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
Dobré ráno ! Viete, či je možné upraviť počet stĺpcov tohto objektu blogu?
Chcel by som, aby bola každá karta zobrazená v celej šírke. VĎAKA !
Dobrý deň,
Snažil som sa zobraziť blogové príspevky v „mriežke“ s id „gridcard“, ale nefunguje to. Môžeš mi pomôcť ?
Bonsoir,
Ospravedlňujeme sa za neskoré odpoveď.
Môžete prosím preformulovať svoju požiadavku?
Dobrý deň,
Som naozaj začiatočník, ale vďaka online tutoriálom sa mi podarilo vytvoriť pekný blog.
Naozaj ďakujem za tento, pretože som musel len skopírovať kódy a všetko prebehlo bezchybne, som výsledkom potešený.
Ešte raz vďaka, pekný deň 🙂
Prosím ťa. Ďakujeme, že ste si nás prečítali.
Bonsoir,
blog DIVI, vedľa mena autora, umiestňuje predložku „od“ (napr. od Stefana). Zaujímalo by ma, či je možné zmeniť nastavenie na „de“
Dobrý deň,
Áno, pomocou Divi je možné tento prvok zmeniť.
Dobrý deň, Thierry
Super tutorial
Zaujímalo by ma, či je možné zväčšiť veľkosť zobrazeného obrázka
Chcel by som použiť tento štýl na môj blog
ďakujem
Dobrý deň,
Áno je to možné.
Dobrý deň,
Ako môžem optimalizovať toto rozloženie pre mobil (tablet)? Nemám Schabrettmuster, ale rôzne farby pre každý blogový príspevok, v konkrétnom poradí. To sa samozrejme zmení, keď ideme na mobil, a farby už nebudú spojené so správnymi príspevkami ...
Máte tu niekto nápad?
Dobrý deň,
No bohužiaľ.
Dobrý deň,
Vďaka za tento článok! Tiež by som chcel upraviť „prečítať viac“ v dolnej časti článkov.
Mohli by ste nám poskytnúť príklady kódu CSS, ak chcete zmeniť text a napríklad ho vložiť do pekného centrovaného tlačidla?
Ďakujem vám.
Sophie
Ahoj 🙂 Ak chcete zmeniť text tlačidla „čítať viac“, môžete tak urobiť v Nastavenia blogu > Štýl > Čítať viac textu. Typografiu a text "čítať ďalej" môžete upraviť. Neviem však z toho spraviť gombík. Dobré nastavenie!
Pripomienky v CSS personalizado, por ejemplo:
#gridcard .Column: prvé dieťa umenie: nth-child (impar) {background: #333; }
da error como el seigue: Očakáva sa FUNCTION alebo IDENT za dvojbodkou na riadku 1, col 18
pozdravy
Bonsoir,
Náš blog je automaticky preložený z francúzštiny. Preto vás pozývam, aby ste si vybrali francúzsky jazyk v jazykovej miniaplikácii umiestnenej na hornom paneli nášho blogu a zobrazí sa správny kód CSS.
používané escribió a artículo zlé escrito, debería ser: artículo del primer hijo: nie arte del primer hijo:
Máte nesprávne napísaný článok, mal by to byť: článok prvého dieťaťa: nie prvotriedne umenie:
Ahoj,
70 ostatné jazyky.
haló
Ďakujem za článok. Mám prezentáciu v mriežke (téma Divi). Mám miniatúry (fotografie) na prezentáciu článkov, na druhej strane po kliknutí na prístup k článku sa obrázok na začiatku článku zobrazí vo veľkom. článok. Existuje spôsob, ako dosiahnuť rovnakú veľkosť ako miniatúra alebo ju odstrániť zo zobrazenia príspevku.
ďakujem
patrik
Bonsoir,
Ospravedlňujeme sa, ale naša podpora divi je obmedzená na naše výukové programy. Obráťte sa na spoločnosť Eleganthemes SVP.
Bonjourn, skvelý článok
Skúšam tu šťastie, niekedy sme okolo predmetu prechádzali celé týždne bez toho, aby sme našli odpoveď, keď ten istý predmet dáva ostatným zmysel.
Hľadám preto riešenie, aby som mohol vytvoriť poštovú mriežku, ktorá bude zložená iba z vizuálov, ale rôznych výšok, aby som bol presnejší, aby každý druhý vizuál mal dvojnásobnú výšku ako vizuál vedľa neho.
Nápad?
Julian
Dobrý deň, Julian,
Odporúčam vám obrátiť sa na tím DIVI. V tomto prípade je to pohodlnejšie.
Skvelý návod! Budem testovať CA o tomto víkende na mojich stránkach.
máte riešenie na odstránenie extraktov v sietí?
Ďakujem vám
Sofhy