A Divi Blog modul elrendezési lehetőséget kínál hasznos rács formájában a blogbejegyzéseihez. A rácssablon a blogbejegyzéseket dobozokba vagy térképekbe rendezi, amelyek megkönnyítik az elemek képernyőn történő láthatóságát a normál nézethez képest.

A Blog modul beállításai lehetővé teszik a hálózat általános kialakításának testreszabását. Könnyedén megkönnyítheti az összes kártya azonos háttérszínét, betűkészletét, margóját stb. több vagy különböző kialakítás alkalmazása a rácson belüli térképekre.

Ma megmutatom, hogyan lehet több stílust megcélozni és alkalmazni a rácsot alkotó kártyákon. a blogod egyéni CSS használatával. Megmutatom, hogyan alkalmazzunk különböző stílusokat egymás kártyáira, hogy sakktábla hatást keltsünk. Azt is megmutatom, hogyan kell az egyes kártyákat soronként eltérően stílusozni, és megmutatom, hogyan célozhat meg egy adott kártyát.

Tehát ez 4 példa a testreszabásra a blogod, beleértve néhány használható lebegtetési effektust. Ennek az oktatóanyagnak a végére fantasztikus terveket készíthet a blogod.

Egyéb útmutatók a Divi témáról

• 5 weboldalak éttermi felhasználásra Divi téma
• Szöveg hozzáadása a WooCommerce termék Divi
• Hogyan változtathatja meg a menü színét a Divi oldalak között?
• Jellemzők, amelyeket nem ismer a Divi-ről
• Hogyan lehet létrehozni egy csúszkát a Divi-n
• Felhasználói szerepkör szerkesztése a Divin

Kezdjük.

Konfiguráció elrendezés Rács a blog

Mielőtt elkezdené a blogmodulok tervezését, győződjön meg arról, hogy legalább a 12 cikkeket már létrehozta-e egy kép a dobozban.

Miután létrehozta az üzenetét, hozzon létre egy új oldalt. Az új oldalon helyezze el a blogmodult egy teljes szélességű oszlopban egy szabványos részben:

Kattintson a Blog modul beállításainak szerkesztéséhez. Az Általános beállítások alatt módosítsa a következő beállításokat:

• Layout: Rács (rács)
• Cikkek száma: 12
• Kiemelt kép megjelenítése: IGEN
• Gomb Bővebben: ON

Az Egyéni CSS alatt írja be a "rácskártyát" a CSS azonosító szövegmezőbe. Ez lehetővé teszi számunkra, hogy csak ezt a blogmodult személyre szabjuk.

Mentse a változtatásokat

Hogyan lehet megérteni a blog "Rács" elrendezését

Most, hogy a blog rács a helyén, akkor fontos, hogy megértsük a szerkezet az elrendezés a rács, hogy akkor keresse térképeket a blog modul szeretné szabni.

A blogrács három oszlopos elrendezéssel van konfigurálva. Az alábbiakban bemutatjuk a blográcsot az 12 blogcikkekkel, három oszlopba osztva:

A blog jegykártyákat minden oszlopból fentről lefelé rendezik. Tehát, ha számot szeretne adni számukra, akkor az 1-t 4-ig kell számolnia mindegyik hosszon felülről lefelé:

Mivel ismeri az egyes blogkártyák numerikus sorrendjét az oszlopok alatt, az egyes kártyákat páratlan vagy páros számként is azonosíthatja az alábbiak szerint:

Designs kapu példa

1. példa: "Kockás" rács kialakítása

Ebben az első példában a blog modul összes páratlan kártyáját (1. és 3. kártya) fogom megcélozni az első oszlopban, sötétszürke háttérszínt adva nekik. Ehhez lépjen a "Divi → Témaopciók" elemre, és adja hozzá a következő CSS-t az egyéni CSS szövegmezőbe:

#gridcard .column: első gyermek cikk: n-ed gyermek (páratlan) {background: #333; }

Itt egy bontását, amit ez a kód nem:

#gridcard = a teljes blogmodul azonosítója

. oszlop: első gyermek = válassza ki a blog modul első oszlopát

post: nth-child (furcsa) = az összes páratlan elemet (vagy kártyát) kiválasztja az oszlopban

Az egészet összerakva ez kiválasztja a páratlan számú kártyákat a blogmodul első oszlopában, az azonosító "rácskártya".

Ezután add meg a fehér szöveg, hogy megy a sötét háttér hozzá a következő CSS:

#gridcard .column: first-child cikket: n-ed gyermek (páratlan) .entry-cím, #gridcard .column: first-child cikket: n-ed gyermek (páratlan) .POST-meta, #gridcard .column: first-child cikk: n-ed gyermek (páratlan) .post-meta egy, #gridcard .column: first-child cikket: n-ed gyermek (páratlan) .POST-tartalmat {color: #ffffff; }

Ez a kód megcélozza a blogmodul kártyáinak összes szöveges elemét (beleértve a címet, a bejegyzés metait, a bejegyzés metahivatkozásait és tartalom cikk) és fehér színt ad nekik.

Itt van az eredmény:

A kockás elrendezés létrehozásának következő lépése az, hogy megcélozza a páratlan számú kártyákat a harmadik oszlopban, és a sötétszürke hátteret és a fehér szöveget ugyanúgy alkalmazza, mint az első oszlopban. Adja hozzá a következő CSS-t az Egyéni CSS mezőbe:

#gridcard .column: last-child cikk: nth-child (páratlan) {háttér: # 333; } #gridcard .column: last-child cikk: nth-child (páratlan) .entry-title, #gridcard .column: last-child cikk: nth-child (páratlan) .post-meta, #gridcard .column: last- gyermekcikk: nth-child (páratlan) .post-meta a, #gridcard. oszlop: last-child cikk: nth-child (páratlan) .post-content p {color: #ffffff; }

Ez a kód az "utolsó" oszlopot célozza (ebben az esetben a harmadik oszlop az utolsó oszlop) a "last-child" becenévvel.

A második oszlophoz (vagy közepes), még a kártyákat is megcélozza az ellenőrző tábla hatásának elérése érdekében. Ehhez hozzá kell adnunk a következő CSS-t:

#gridcard .oszlop: n -edik-gyermek (2) cikk: n-edik-gyerek (páros) {háttér: # 333; } #gridcard .column: nth-child (2) cikk: 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; }

Most menj, nézd meg a blog oldalt a sakktábla elrendezést a blog modul kártyákat.

2. példa: Lebegő effektusok hozzáadása a kockás elrendezéshez

Miután tudta, hogyan kell megcélozni a blogmodul kártyákat, kreatívan szerkesztheti a kártya bármely elemét.

Ebben a példában az ellenőrző tábla elrendezését fogom használni, és ezúttal a kiemelt képeket sötétszürke térképekről fekete-fehérre változtatom, amikor a térkép felett lebeg. És a fehér kártyák címlapjának képeit világosabbá teszem, amikor a kártya felett lebegek. Ehhez vegye fel a következő CSS-t az Egyéni CSS területre (feltétlenül tiltsa le vagy vágja le a másik kódot, hogy az ne legyen összeférhetetlen az új kóddal):

#gridcard .column: első gyermek cikk: nth-child (páratlan), #gridcard .column: last-child cikk: nth-child (páratlan), #gridcard .column: nth-child (2) cikk: nth-child (páros) {háttér: # 333; } #gridcard .column: első gyermek cikk: nth-child (páratlan) .entry-title, #gridcard .column: első gyermek cikk: nth-child (páratlan) .post-meta, #gridcard. oszlop: first- gyermekcikk: nth-child (páratlan) .post-meta a, #gridcard. oszlop: first-child cikk: nth-child (páratlan) .post-content p, #gridcard .column: last-child cikk: nth-child (páratlan) .entry-title, #gridcard .column: last-child article: nth-child (páratlan) .post-meta, #gridcard .column: last-child article: n -edik gyermek (páratlan) .post-meta a , #gridcard .column: last-child cikk: nth-child (páratlan) .post-content p, #gridcard .column: nth-child (2) article: nth-child (even) .entry-title, #gridcard. oszlop: nth-child (2) cikk: nth-child (even) .post-meta, #gridcard .column: nth-child (2) article: nth-child (even) .post-meta a, #gridcard .column : nth-child (2) cikk: nth-child (even) .post-content p {color: #fff; } #gridcard .column: nth-child (2) cikk: nth-child (even): lebegés img, #gridcard .column: first-child cikk: nth-child (páratlan): hover img, #gridcard .column: last -gyerekcikk: n-dik gyermek (páratlan): lebegés img {-webkit-filter: szürkeárnyalatos (1); szűrő: szürkeárnyalatos (1); } #gridcard .column: nth-child (2) cikk: nth-child (páratlan): hover img, #gridcard .column: first-child article: nth-child (even): hover img, #gridcard .column: last -gyerekcikk: n-dik gyermek (páros): lebegés img {-webkit-szűrő: fényerő (1.5); szűrő: fényerő (1.5); }

Inverziós effektust is hozzáadhat a kártyákhoz, így amikor a fehér kártyák fölé viszi az egérmutatót, azok sötétszürke színűvé válnak, amikor pedig a sötétszürke kártyák fölé mutatunk, azok fehérré válnak.

Adjuk hozzá a következő CSS és CSS felett:

#gridcard .column cikk, #gridcard .column cikk img {-webkit-transit: mind a 0.8; -moz-átmenet: mind a 0.8; átmenet: mind a 0.8; } #gridcard .column: első gyermek cikk: nth-child (páratlan): lebeg, #gridcard. oszlop: last-last cikk: nth-child (páratlan): lebeg, #gridcard. oszlop: nth-child (2) cikk: n -edik gyermek (páros): lebegés {háttér: #fff; } #gridcard .column: első gyermek cikk: nth-child (páratlan): lebegés .entry-title, #gridcard. oszlop: first-child cikk: nth-child (páratlan): lebegés .post-meta, #gridcard. oszlop: első gyermek cikk: n. gyermek (páratlan): lebegés .post-meta a, #gridcard. oszlop: első gyermek cikk: nth-child (páratlan): lebegés .post-content p, #gridcard. oszlop: last-last cikk: nth-child (páratlan): lebegés .entry-title, #gridcard. oszlop: last-child cikk: nth-child (páratlan): lebegés .post-meta, #gridcard. oszlop: last-child cikk : nth-child (páratlan): lebeg..-meta a, #gridcard. oszlop: last-child cikk: n-child (páratlan): hover .post-content p, # gridcard. oszlop: nth-child (2) cikk: n-dik gyerek (páros): lebegés .entry-title, #gridcard .oszlop: nth-child (2) cikk: nth-child (páros): lebegés .post-meta, #gridcard .oszlop: nth-child ( 2) cikk: n-dik gyermek (páros): lebegés .post-meta a, #gridcard .oszlop: n-dik gyermek (2) cikk: n-dik gyerek (páros): lebegés .post-tartalom p {color: # 333; } #gridcard .column: első gyermek cikk: nth-child (páros): lebeg, #gridcard .column: last-child cikk: nth-child (even): lebeg, #gridcard .column: nth-child (2) cikk: n -edik gyermek (páratlan): lebeg {háttér: # 333; } #gridcard .column: első gyermek cikk: nth-child (páros): lebegés .entry-title, #gridcard .column: first-child cikk: nth-child (even): lebegés .post-meta, #gridcard. oszlop: első gyermek cikk: n. gyermek (páros): lebegés .post-meta a, #gridcard. oszlop: első gyermek cikk: nth-child (páros): lebegés .post-content p, #gridcard. oszlop: last-last cikk: nth-child (even): lebegés .entry-title, #gridcard .column: last-child cikk: nth-child (even): lebegés .post-meta, #gridcard .column: last-child cikk : n-dik gyerek (páros): lebegés .post-meta a, #gridcard. oszlop: last-child cikk: nth-child (páros): lebegés .post-content p, # gridcard. oszlop: nth-child (2) cikk: n-dik gyermek (páratlan): lebeg .egér-cím, #gridcard .oszlop: n-dik-gyermek (2) cikk: n-dik-gyermek (páratlan): lebegő .post-meta, #rácskártya .oszlop: n-dik-gyermek 2) cikk: n -edik-gyermek (páratlan): lebegjen .post-meta a, #gridcard .oszlop: n -edik-gyermek (2) cikk: n-edik gyermek (páratlan): lebegjen .post-tartalom p {szín: #fff; }

Most nézze meg a hatását a blogján.

Example # 3: Customize térképek vonalak

A harmadik példában ugyanazt a sötét hátteret és fehér szöveget alkalmazom a kártyákra minden második sorban (nem oszlopban). Ehhez meg kell céloznia az oszlopok összes páros kártyáját. Lépjen a téma „Divi → Opciók” részéhez, és feltétlenül tiltsa le vagy távolítsa el az összes korábbi CSS-kódot, amelyet az oktatóanyag kezdete óta adott hozzá. Ezután adja hozzá a következő CSS-t:

#gridcard cikk: n-dik gyermek (páros) {háttér-szín: # 333; } #gridcard cikk: nth-child (even) .entry-title, #gridcard cikk: nth-child (even) .post-meta, #gridcard cikk: nth-child (even) .post-meta a, #gridcard cikk : n -edik gyermek (páros) .post-content p {color: #fff; }

Íme az eredmény:

Példa # 4: Egyedi rácstérkép megtervezése

Néhányan közülük érdemes egy adott kártyát választani. Ehhez meg kell találnia az egyedi elemazonosítót, amelyet automatikusan az egyes kártyáihoz rendelnek. Ebben a példában a Chrome böngészőt használom.

Lépjen a blogmodult megjelenítő oldalra, és kattintson jobb gombbal az egyik kártyájára. A megjelenő opciók mezőben válassza az "Ellenőrzés" lehetőséget (egyes böngészőkben lehet "Elem ellenőrzése" vagy valami hasonló. Ez telepíti a Fejlesztői eszközök ablakot, amely megjeleníti a html és a cs weboldal. Keresse meg azt a cikkcímkét, amely beburkolja a cikkét, és írja le a hozzá rendelt cikkazonosítót. Ezt a választót kell használnia az egyéni kártya megcélzásához. Példaként jobb gombbal és rákattintva megvizsgálta, hogy megtalálja a "post-3466" azonosítót.

Az alábbiak szerint:

Ahhoz, hogy a cél a CSS-kártya, hogy adjon neki egy szürke háttér fehér font, akkor kell használni a következő CSS:

# post-3466 {háttér: # 333333; } # post-3466 .entry-title, # post-3466 .post-meta, # post-3466 .post-meta a, # post-3466 .post-content p {color: #fff; }

Most a térkép alkalmazza azt a különleges stílust.

Ez minden!

Utolsó gondolatok

Ez csak néhány példa azokra a sokféle stílusra, amelyeket a Blog modul kártyák ilyen típusú CSS célzásával el lehet érni. Már nem kell minden kártyához ugyanazt a stílust tartania. Tervezheti őket, ahogy akarja.

Ha bármilyen kérdése vagy javaslata van, bátran ajánlani nekem.

[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”]DIVI TÉMA LETÖLTÉSE [/vcex_button][/vc_column][vc_colum /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”]LETÖLTÉS TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Egyéb Divi oktatóanyagok

• 5 weboldalak éttermi felhasználásra Divi téma
• Hogyan lehet szöveget hozzáadni a Divi WooCommerce termékhez?
• Hogyan változtathatja meg a menü színét a Divi oldalak között
• Hogyan lehet személyre szabni egy blog rácsát a Divi-vel
• Hogyan kell használni a szerepe Divi szerkesztő WordPress
• Hogyan készítsünk teljes képernyős Divi csúszkát?
• Hogyan változtathatja meg a menük színét a Divi oldalak között
• Funkciók, amelyeket valószínűleg nem ismer a Divi-ről
• A Divi Builder használata a WordPress-en
• Hogyan használjuk a Divi video scrolling modult
• A Divi Builder Flip modul használatának módja
• Hogyan adhatunk hozzá egy beszámolót a Divi Builderhez
• A Divi szövegmodul használata
• Hogyan lehet létrehozni egy csúszkát a Divi-n
• A Divi felhasználói szerepkör szerkesztése
• A Divi Social Media használata
• Hogyan lehet használni az üzlet modult a WordPress Divi témában?
• A Divi oldalsáv moduljának használata
• A Divi áratábla modul használatának módja
• A Divi kiadványok címmoduljának használata
• Hogyan adhatunk hozzá egy Divi video modult
• A cikk navigációs moduljának használata
• A Divi keresőmodul használata
• A Divi pénztárca moduljának használata
• A személyi modul használata a Divi Builder-en
• A pénztárca moduljának használata a Divi szűrővel
• A teljes szélességű csúszka modul használata
• A Divi Builder képmodul használata
• A Divi Builder teljes szélességű navigációs moduljának használata
• A képgaléria modul használata
• A Divi Builder teljes szélességű kártya moduljának használata
• A Divi teljes szélességű portfólió moduljának használata
• A Divi teljes szélességű fejléc moduljának használata
• A Divi számláló modul használata
• Hogyan lehet használni a Divi Builder cikkcsúszkáját?
• A Divi Email Optin modul használata