Divi Blog modul ima mogućnost izgleda u obliku korisne mreže za vaše blogovske postove. Predložak rešetke objavljuje postove bloga u okvire ili mape koje pojednostavljuju vidljivost stavki na zaslonu u usporedbi sa standardnim prikazom.

Postavke modula Blog omogućuju vam prilagodbu ukupnog dizajna vaše mreže. Jednostavno možete učiniti da sve vaše kartice imaju istu boju pozadine, font, margine itd. Međutim, opcije stila ograničene su na dizajn mreže u cjelini, što otežava primjenom više ili različitih dizajna na karte unutar mreže.

Danas ću vam pokazati kako ciljati i primijeniti više od jednog stila na kartice koje čine mrežu. blog koristeći prilagođeni CSS. Pokazat ću vam kako primijeniti različite stilove na svaku drugu karticu kako biste stvorili efekt šahovnice. Također ću vam pokazati kako stilizirati svaku kartu drugačije po retku i pokazat ću vam kako ciljati svaku pojedinačnu kartu.

Dakle, ovo su 4 primjera kako prilagoditi blog, uključujući neke efekte lebdenja koje možete koristiti. Do kraja ovog vodiča moći ćete stvarati sjajne dizajne za blog.

Ostali vodiči o temi Divi

• 5 web stranice za restoran korištenja Divi temu
• Kako dodati tekst na WooCommerce proizvoda Divi
• Kako promijeniti boju izbornika između stranica Divi
• Značajke o kojima ne znate Divi
• Kako stvoriti klizač na Divi
• Kako urediti korisničku ulogu na Divi

Počnimo.

Konfiguriranje izgleda za vaš blog

Prije nego što počnete s dizajnom kartica bloga bloga, pobrinite se da imate barem 12 članaka koji su već stvoreni sa slikom u kutiji.

Jednom kada su vaše poruke kreirane, stvorite novu stranicu. Na svojoj novoj stranici u standardnom dijelu rasporedite blogovski modul u stupcu pune širine:

Kliknite za uređivanje postavki modula Blog. U odjeljku Opće postavke promijenite sljedeće postavke:

• Izgled: rešetka
• Broj članaka: 12
• Prikaži istaknutu sliku: DA
• Gumb Pročitajte više: ON

U okviru Prilagođeni CSS unesite "mrežnu karticu" u tekstni okvir CSS ID-a. To će biti način da personaliziramo samo ovaj modul bloga.

Spremite promjene

Kako razumjeti izgled "rešetke" za blog

Sada kada imate svoju mrežu bloga na mjestu, važno je razumjeti strukturu izgleda rešetke tako da možete pronaći karte modula bloga koje želite prilagoditi.

Rešetka bloga konfigurirana je s izgledom u tri stupca. Slijedi ilustracija mrežnog bloga s 12 člancima bloga podijeljenim u tri stupca:

Karte za blog blogove naručuju se od vrha do dna u svakom stupcu. Dakle, ako im želite dati broj, morat ćete brojati 1 do 4 na svakoj duljini od vrha do dna:

Budući da znate brojčani redoslijed svake kartice bloga ispod svakog stupca, svaku karticu također možete identificirati kao neparan ili paran broj, kako slijedi:

Primjer gridova dizajna

Primjer br. 1: Dizajn "karirane" mreže

Za ovaj prvi primjer ciljati ću sve neparne kartice u modulu bloga (kartice 1 i 3) u prvom stupcu dajući im tamno sivu boju pozadine. Da biste to učinili, idite na "Divi → Opcije teme" i dodajte sljedeći CSS u prilagođeni CSS tekstni okvir:

#gridcard .column: prvo-dijete članak: n-dijete (neparan) {background: #333; }

Evo pojedinosti o tome što ovaj kôd radi:

#gridcard = id cijelog modula bloga

. stupac: prvo dijete = odaberite prvi stupac u modulu bloga

post: nth-child (nepar) = odabire sve neparne stavke (ili kartice) u stupcu

Sve zajedno, ovo odabire neparne kartice u prvom stupcu modula bloga s ID-om "gridcard".

Zatim dodajte svoj bijeli tekst koji će prelaziti tamnu pozadinu dodavanjem sljedećeg CSS-a:

#gridcard .column: stavka prve djece: nth-child (odd) .entry-title, #gridcard .column: prvo dijete članak: n-dijete (neparan) .post-meta a, #gridcard. stup: prvo dijete }

Ovaj kôd cilja sve tekstualne elemente na karticama modula bloga (uključujući naslov, meta objave, meta veze objave i sadržaj članka) i daje im bijelu boju.

Evo rezultata:

Sljedeći korak u izradi rasporeda naše šahovske ploče je ciljanje neparnih karata na trećem stupcu i primjena tamno sive pozadine i bijelog teksta baš kao u prvom stupcu. Dodajte sljedeći CSS u tekstualni okvir Prilagođeni CSS:

#gridcard .column: članak o posljednjem djetetu: n-to dijete (neparno) {background: # 333; } #gridcard .column: članak posljednjeg djeteta: nth-child (neparno) .intry-title, #gridcard .column: last-child article: nth-child (neparno) .post-meta, #gridcard .column: last- podređeni članak: n-to-dijete (neparno) .post-meta a, # gridcard .kolona: posljednje-dijete članak: n-to-dijete (neparno) .post-sadržaj p {boja: #ffffff; }

Ovaj kôd cilja stupac "zadnji" (u ovom je slučaju treći stupac posljednji stupac) s elementom nadimka "last-child".

Za drugi stupac (ili medija), ciljajte čak kartice kako biste dovršili efekt šahovnice. Da bismo to učinili trebamo dodati sljedeći CSS:

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

Sada provjerite stranicu bloga da biste vidjeli izgled odjeljenja kartica modula bloga.

Primjer # 2: Dodavanje efekata lebdenja kariranim izgledom

Jednom kada znate kako ciljati kartice modula bloga, možete kreativno promijeniti bilo koji od elemenata na kartici.

U ovom primjeru upotrijebit ću raspored šahovnice, a ovaj put ću istaknute slike promijeniti iz tamno sive karte u crno-bijelu kada lebdim iznad karte. I, učinit ću da slike bijelih karata na naslovnici postanu svjetlije kada prelazim pokazivačem iznad kartice. Da biste to učinili, dodajte sljedeći CSS u područje Prilagođenog CSS-a (onemogućite ili izrežite drugi kôd tako da nije nekompatibilan s novim):

#gridcard .column: članak prvog djeteta: n-to dijete (neparno), #gridcard .column: članak posljednjeg djeteta: nth-child (neparno), #gridcard .column: nth-child (2) članak: nth-child (čak) {background: # 333; } #gridcard .column: članak prvog djeteta: n-to-dijete (neparno) .intry-title, #gridcard .column: članak prvog djeteta: nth-child (neparno) .post-meta, #gridcard .column: first- podređeni članak: n-to-dijete (neparno) .post-meta a, # gridcard .stupac: prvo-dijete članak: n-to-dijete (neparno) .post-sadržaj p, # gridcard .column: posljednje-dijete članak: nth-child (neparno) .entry-title, #gridcard .column: članak posljednjeg djeteta: nth-child (neparno) .post-meta, #gridcard .column: last-child article: nth-child (neparno) .post-meta a , #gridcard .column: članak posljednjeg djeteta: nth-child (neparno) .post-content p, #gridcard .column: nth-child (2) članak: nth-child (even) .entry-title, #gridcard. stupac: nth-child (2) članak: nth-child (even) .post-meta, #gridcard .column: nth-child (2) članak: nth-child (even) .post-meta a, #gridcard .column : nth-child (2) članak: nth-child (even) .post-content p {color: #fff; } #gridcard .column: nth-child (2) članak: nth-child (even): hover img, #gridcard .column: first-child article: nth-child (ak): hover img, #gridcard .column: last -dijete članak: n-to-dijete (neparno): hover img {-webkit-filter: sive boje (1); filter: sive boje (1); } #gridcard .column: nth-child (2) članak: nth-child (ak): hover img, #gridcard .column: first-child article: nth-child (even): hover img, #gridcard .column: last -dijete članak: n-to-dijete (čak): hover img {-webkit-filter: svjetlina (1.5); filtar: svjetlina (1.5); }

Također možete dodati efekt inverzije na kartice tako da kada zadržite pokazivač iznad bijelih karata postanu tamno sive, a kada zadržite pokazivač iznad tamno sivih karata postanu bijele.

Dodajte sljedeće CSS pored gornjeg CSS-a:

#gridcard .column article, #gridcard .column article img {-webkit-prijelaz: svih 0.8 s; -moz-prijelaz: svih 0.8s; prijelaz: svih 0.8 s; } #gridcard .column: članak prvog djeteta: nth-child (ak): hover, #gridcard .column: last-child article: nth-child (ak): hover, #gridcard .column: nth-child (2) članak: n-to-dijete (čak): hover {background: #fff; } #gridcard .column: članak prvog djeteta: n-to dijete (neparno): hover .entry-title, #gridcard .column: članak prvog djeteta: nth-child (ak): hover .post-meta, #gridcard. stupac: članak prvog djeteta: n-to dijete (neparno): hover .post-meta a, #gridcard .column: članak prvog djeteta: nth-child (neparno): hover .post-content p, #gridcard .column: članak posljednjeg djeteta: n-to dijete (neparno): hover .entry-title, #gridcard .column: članak posljednjeg djeteta: nth-child (neparno): hover .post-meta, #gridcard .column: članak posljednjeg djeteta : nth-child (ak): hover .post-meta a, #gridcard .column: last-child article: nth-child (ak): hover .post-content p, #gridcard .column: nth-child (2) članak: n-to-dijete (parno): hover .entry-naslov, # gridcard .column: nth-child (2) članak: nth-child (parno): hover .post-meta, #gridcard .column: nth-child ( 2) članak: n-to-dijete (parno): hover .post-meta a, #gridcard .column: nth-child (2) članak: n-to-dijete (parno): hover .post-content p {color: # 333; } #gridcard .column: članak prvog djeteta: nth-child (even): hover, #gridcard .column: last-child article: nth-child (even): hover, #gridcard .column: nth-child (2) članak: n-to dijete (neparno): hover {background: # 333; } #gridcard .column: članak prvog djeteta: nth-child (even): hover .entry-title, #gridcard .column: članak prvog djeteta: nth-child (even): hover .post-meta, #gridcard. stupac: članak prvog djeteta: nth-child (even): hover .post-meta a, #gridcard .column: članak prvog djeteta: nth-child (even): hover .post-content p, #gridcard .column: članak posljednjeg djeteta: nth-child (even): hover .entry-title, #gridcard .column: last-child article: nth-child (even): hover .post-meta, #gridcard .column: last-child članak : nth-child (even): hover .post-meta a, #gridcard .column: last-child article: nth-child (even): hover .post-content p, #gridcard .column: nth-child (2) članak: n-to-dijete (neparno): hover .entry-title, #gridcard .column: nth-child (2) članak: nth-child (neparno): hover .post-meta, #gridcard .column: nth-child ( 2) članak: n-to-dijete (neparno): hover .post-meta a, #gridcard .column: nth-child (2) članak: n-to-dijete (neparno): hover .post-content p {color: #fff; }

Idite sada vidjeti učinak na svom blogu.

Primjer # 3: prilagodba kartica po redcima

Za treći primjer primijenit ću istu tamnu pozadinu i bijeli tekst na kartice u svakom drugom retku (ne u stupcu). Da biste to učinili, morate ciljati sve parne karte u svakom od stupaca. Idite na “Divi → Opcije” teme i svakako onemogućite ili uklonite bilo koji prethodni CSS kôd koji ste dodali od početka ovog vodiča. Zatim dodajte sljedeći CSS:

#gridcard članak: n-to dijete (čak) {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 : n-to-dijete (čak) .post-content p {color: #fff; }

Evo što je rezultat:

Primjer # 4: Dizajn specifične mape rešetke

Neki od vas možda žele odabrati određenu karticu. Da biste to učinili, morate pronaći jedinstveni ID predmeta koji se automatski dodjeljuje svakoj od vaših kartica. U ovom primjeru koristim preglednik Chrome.

Idite na stranicu koja prikazuje vaš modul bloga i kliknite desnu tipku miša na jednu od svojih kartica. U okviru s opcijama koji se pojavi odaberite "Inspect" (Provjeri) (neki preglednici mogu imati "Inspect Item" ili nešto slično. To će primijeniti prozor Developer Tools koji prikazuje i html i css za vaš web stranicu. Pronađite oznaku članka koja obavija vaš članak i zapišite mu dodijeljeni ID članka. To je birač koji biste trebali koristiti za ciljanje vaše pojedinačne kartice. Za moj primjer imam kliknuli desnom tipkom i kliknuli pregledali kako bi pronašli id ​​"post-3466".

Kao što slijedi:

Da biste ciljali samo ovu karticu u CSS da biste dobili siva pozadina s bijelim fontom, morate upotrijebiti sljedeći 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; }

Na karti je primijenjen taj specifični stil.

To je sve!

Završne misli

Ovo je samo nekoliko primjera mnogih različitih stilova koje možete postići koristeći ovu vrstu CSS ciljanja kartica modula Blog. Više ne morate zadržati isti stil za svaku kartu. Možete ih dizajnirati kako god želite.

Ako imate bilo kakvih pitanja ili prijedloga, slobodno mi ih ponudite.

[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”]PREUZMI DIVI TEMU [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]PREUZMITE predlošci DIVI[/vcex_button][/vc_column][/vc_row]

Ostali Divi tutoriali

• 5 web stranice za restoran korištenja Divi temu
• Kako dodati tekst na proizvod Divi WooCommerce
• Kako promijeniti boju izbornika između Divi stranica
• Kako personalizirati rešetke bloga s Divi-jem
• Kako koristiti uređivač uloga Divija na WordPressu
• Kako stvoriti klizač Divi na cijelom zaslonu
• Kako promijeniti boju izbornika između Divi stranica
• Značajke koje vjerojatno ne znate o Divi-ju
• Kako koristiti Divi Builder na WordPressu
• Kako koristiti modul za pomicanje videozapisa Divi
• Kako koristiti modul Divi Builder Flip
• Kako dodati testimonijalni modul na Divi Builderu
• Kako koristiti tekstualni modul Divi
• Kako stvoriti klizač na Divi
• Kako urediti Divi korisničku ulogu
• Kako koristiti modul Divi Social Media
• Kako se koristi modul trgovine na temi WordPress Divi
• Kako koristiti modul Divi bočne trake
• Kako koristiti modul Divi Table Table
• Kako koristiti naslovni modul Divi publikacija
• Kako dodati video modul Divi
• Kako koristiti navigacijski modul članka
• Kako koristiti modul Divi pretraživanja
• Kako koristiti modul Divi wallet
• Kako koristiti modul osobe na Divi Builderu
• Kako koristiti modul lisnice pomoću Divi filtar
• Kako koristiti modul klizača pune širine
• Kako koristiti modul Divi Builder Image
• Kako koristiti navigacijski modul pune širine Divi Buildera
• Kako se koristi modul galerije slika
• Kako koristiti modul Divi Builder za cijelu širinu kartice
• Kako koristiti modul Divi punog širine portfelja
• Kako se koristi Divi zaglavni modul pune širine
• Kako koristiti modul Divi Counter
• Kako koristiti klizač članaka na Divi Builderu
• Kako koristiti modul Divi Email Optin