Moduli Divi's Blog ka një opsion të dobishëm të paraqitjes së rrjetit për postimet tuaja në blog. Modeli i rrjetës organizon postimet tuaja të blogut në kuti ose karta që i bëjnë postimet më të lehta për t'u parë në një ekran në krahasim me pamjen standarde.

Cilësimet e modulit Blog ju lejojnë të personalizoni modelin e përgjithshëm të rrjetit tuaj. Ju mund të bëni që të gjitha kartat tuaja të kenë të njëjtën ngjyrë të sfondit, fontin, kufijtë, etj. Sidoqoftë, opsionet e stilit janë të kufizuara në hartimin e rrjetit në tërësi, gjë që e bën të vështirë duke aplikuar dizajne të shumëfishta ose të ndryshme në hartat brenda rrjetit.

Sot do t'ju tregoj se si të synoni dhe aplikoni më shumë se një stil në kartat që përbëjnë rrjetin. blogun tuaj duke përdorur CSS të personalizuar. Unë do t'ju tregoj se si të aplikoni një stil të ndryshëm për njëra kartë tjetër, për të krijuar një efekt shahu. Unë do t'ju tregoj gjithashtu se si të stiloni çdo kartë ndryshe për rresht dhe do t'ju tregoj se si të synoni çdo kartë individuale.

Pra, këta janë 4 shembuj se si të personalizohet blogun tuaj, duke përfshirë disa efekte hover që mund të përdorni. Deri në fund të këtij tutoriali, do të jeni në gjendje të krijoni dizajne të mrekullueshme për blogun tuaj.

Mësime të tjera me temë Divi

Le të fillojë.

Konfigurimi i Layout Grid për blogun tuaj

Para se të filloni me hartimin e kartave të modulit të blogut, sigurohuni që të keni të paktën artikuj 12 të krijuar tashmë me një imazh në kuti.

Pasi të jenë krijuar mesazhet, krijoni një faqe të re. Në faqen tuaj të re, vendosni modulin e blogut në një kolonë me gjerësi të plotë në një pjesë standarde:

Konfigurimi i faqosjes së një blogu divi

Klikoni për të ndryshuar cilësimet e modulit Blog. Nën Parametrat e Përgjithshëm, ndryshoni cilësimet e mëposhtme:

  • Layout: Grid
  • Numri i artikujve: 12
  • Shfaq imazhin e paraqitur: PO
  • Button Lexo më shumë: ON

Konfigurimi i rrjetit Divi

Nën Custom CSS, futni "gridcard" në kutinë e tekstit ID CSS. Do të jetë një mënyrë që ne të personalizojmë vetëm këtë modul të blogut.

Kartela e rrjetit CSS divi

Ruaj ndryshimet tuaja

Si ta kuptojmë paraqitjen "Grid" për blogun

Tani që keni gridin tuaj në blog, është e rëndësishme të kuptoni strukturën e paraqitjes së rrjetit në mënyrë që të gjeni faqet e modulit të blogut që dëshironi të personalizoni.

Rrjeti i blogut është konfiguruar me një plan urbanistik me tre kolona. Më poshtë është një ilustrim i rrjetit të blogut me artikuj të blogut 12 të ndarë në tre kolona:

Prezantimi i paraqitjes së divi në rrjet

Kartat e biletave të blogut porositen nga lart poshtë në secilën prej kolonave. Pra, nëse doni t'u jepni atyre një numër, do të duhet të llogaritni 1 në 4 në secilën gjatësi nga lart poshtë.

Numëroni artikuj divi

Meqenëse e dini renditjen numerike të secilës kartë blog nën secilën kolonë, mund të identifikoni gjithashtu secilën kartë si numër tek ose çift si më poshtë:

Ndarja e numrave çift dhe tek

Dizajnet e Gridit të Mostra

Shembull n ° 1: Projektimi i një rrjeti "Checred"

Për këtë shembull të parë, unë do të synoj të gjitha kartat tek në modulin e blogut (kartat 1 dhe 3) në kolonën e parë duke u dhënë atyre një ngjyrë sfond gri të errët. Për ta bërë këtë, shkoni te "Divi options Options options" dhe shtoni CSS-në e mëposhtme në kutinë e tekstit të personalizuar CSS:

#gridcard .column: artikulli i parë i fëmijës: nth-child (çuditshëm) {background: #333; }

Këtu është një ndarje e asaj që ky kod bën:

#gridcard = ID-ja e të gjithë modulit të blogut

. column: first-child = zgjidh kolonën e parë në modulin e blogut

postimi: nth-child (i rastësishëm) = zgjedh të gjitha sendet (ose kartat) e çuditshme në kolonë

Duke i bashkuar të gjitha, kjo zgjedh kartat me numër të çuditshëm në kolonën e parë të modulit të blogut me ID-në "gridcard".

Pastaj shtoni tekstin tuaj të bardhë që do të shkojë në sfond të errët duke shtuar CSS-në e mëposhtme:

#gridcard .column: i pari-fëmijë artikull: n-fëmijë (i rastësishëm) .entry-title, #gridcard .column: i pari-fëmijë artikull: n-fëmijë (i rastësishëm) i postës e-meta, #gridcard .column: i pari-fëmijë Neni: n-fëmijë (i rastësishëm) a postës e-meta, #gridcard .column: i pari-fëmijë artikull: n-fëmijë (i rastësishëm) i postës e-content p {color: #ffffff; }

Ky kod synon të gjithë elementët e tekstit në kartat e modulit të blogut (përfshirë titullin, meta-të e postimit, lidhjet meta të postimit dhe përmbajtje të artikullit) dhe u jep ngjyrën e bardhë.

Këtu është rezultati:

Përshtatja e rrjetit divi tek

Hapi tjetër në krijimin e faqosjes sonë të damës është që të shënjestroni kartat me numër tek në kolonën e tretë dhe të aplikoni sfondin gri të errët dhe tekstin e bardhë ashtu si bëtë në kolonën e parë. Shtoni CSS-në e mëposhtme në kutinë e tekstit Custom CSS:

#gridcard. kolona: artikulli i fëmijës së fundit: fëmija i nëntë (tek) {background: # 333; } #gridcard. kolona: artikulli i fëmijës së fundit: fëmija i nëntë (tek). Titulli i hyrjes, #gridcard. kolona: artikulli i fëmijës së fundit: fëmija i nëntë (tek) .post-meta, #gridcard. kolona: e fundit- artikull për fëmijë: fëmija i nëntë (tek) .post-meta a, #gridcard. kolona: artikulli i fëmijës së fundit: fëmija i nëntë (tek) .post-content p {ngjyra: #ffffff; }

Ky kod synon kolonën "e fundit" (në këtë rast, kolona e tretë është kolona e fundit) me elementin e nofkës "fëmija i fundit".

Për kolonën e dytë (ose mes), shënjestro edhe kartat për të përfunduar efektin e damës. Për ta bërë këtë duhet të shtojmë CSS-në e mëposhtme:

#gridcard. kolona: nth-child (2) artikull: nth-child (madje) {background: # 333; } #gridcard. kolona: artikulli i fëmijës së nëntë: fëmija i nëntë (madje). titulli i hyrjes, #gridcard. kolona: artikulli i fëmijës së ntë (2): fëmija i nëntë (madje). post-meta, # kartela e rrjetit. kolona: artikulli i fëmijës së nëntë: fëmija i nëntë (madje) .post-meta a, #gridcard. kolona: artikulli i fëmijës së nëntë (2): fëmija i nëntë (madje). përmbajtja e postës p {ngjyra : #fff; }

Tani, shko të shikosh faqen e ditarit për të parë skedarin me shifër të kartave të modulit të Blog-it.

Paraqitja e ndarjes së rrjetës së tabelave

Shembull # 2: Shtimi i efekteve të rri pezull me paraqitjen me kuadrate

Pasi të dini se si të synoni kartat e modulit të blogut, mund të ndryshoni ndonjë nga elementët brenda kartës në mënyrë krijuese.

Për këtë shembull, unë do të përdor paraqitjen e tabelës dhe këtë herë do të ndryshoj imazhet e paraqitura nga harta gri të errëta në të zezë dhe të bardhë kur rri pezull mbi hartë. Dhe, unë do të bëj imazhet e faqes së parë të kartave të bardha më të ndritshme kur rri pezull mbi kartën. Për ta bërë këtë, shtoni CSS-në e mëposhtme në zonën e Custom CSS (sigurohuni që të çaktivizoni ose prerë kodin tjetër në mënyrë që të mos jetë i papajtueshëm me atë të ri):

#gridcard. kolona: artikulli i fëmijës së parë: fëmija i nëntë (tek), #gridcard. kolona: artikulli i fëmijës së fundit: fëmija i nëntë (tek), #gridcard. kolona: artikulli i fëmijës së ntë (2): artikulli i fëmijës së nëntë (madje) {sfondi: # 333; } #gridcard. kolona: artikulli i fëmijës së parë: fëmija i nëntë (tek). Titulli i hyrjes, #gridcard. kolona: artikulli i fëmijës së parë: fëmija i nëntë (tek) .post-meta, #gridcard. kolona: e para- artikulli i fëmijës: fëmija i nëntë (tek) .post-meta a, #gridcard. kolona: artikulli i fëmijës së parë: fëmija i nëntë (i çuditshëm). përmbajtja post-post, #gridcard. kolona: artikulli i fëmijës së fundit: fëmija i n-të (tek) .thirrja e titullit, #gridcard. kolona: artikulli i fëmijës së fundit: fëmija i nëntë (tek) .post-meta, #gridcard. kolona: artikulli i fëmijës së fundit: fëmija i nëntë (tek) .post-meta a , #gridcard. kolona: artikulli i fëmijës së fundit: fëmija i nëntë (i çuditshëm) .p përmbajtja postare, #gridcard. kolona: artikulli i fëmijës së ntë (2): fëmija i nëntë (çift). titulli i hyrjes, #gridcard. kolona: artikulli i fëmijës së nëntë: fëmija i nëntë (madje) .post-meta, #gridcard. kolona: nth-child (2) artikull: nth-child (madje) .post-meta a, #gridcard. kolona : nth-child (2) artikull: nth-child (madje) .post-content p {ngjyra: #fff; } #gridcard .kolona: nth-child (2) artikull: nth-child (çift): hover img, #gridcard. kolona: artikulli i fëmijës së parë: nth-child (tek): hover img, #gridcard. kolona: last -artikulli i fëmijës: fëmija i nëntë (i çuditshëm): hover img {-vegkit-filtri: shkalla e gri (2); filtri: shkalle gri (1); } #gridcard .kolona: nth-child (1) artikulli: nth-child (tek): hover img, #gridcard. kolona: artikulli i fëmijës së parë: nth-child (çift): hover img, #gridcard. kolona: last -artikulli i fëmijës: fëmija i nëntë (çift): hover img {-vegkit-filtri: shkëlqimi (2); filtri: shkëlqimi (1.5); }

Ju gjithashtu mund të shtoni një efekt përmbysjeje në karta, në mënyrë që kur të rrini pezull mbi kartat e bardha, ato të bëhen gri të errët dhe kur rrini pezull mbi kartonët gri të errët, ato të bëhen të bardha.

Shto CSS-në e mëposhtme përveç CSS më lart:

#gridcard .artikulli i kolonës, #gridcard. artikulli i kolonës img {-vebkit-tranzicion: të gjitha 0.8; -moz-tranzicion: të gjitha 0.8; tranzicioni: të gjitha 0.8; } #gridcard. kolona: artikulli i fëmijës së parë: fëmija i nëntë (tek): rri pezull, #gridcard. kolona: artikulli i fëmijës së fundit: fëmija i nëntë (tek): rri pezull, #gridcard. kolona: fëmija i nëntë (2) artikulli: fëmija i nëntë (madje): rri pezull {sfondi: #fff; } #gridcard. kolona: artikulli i fëmijës së parë: fëmija i nëntë (tek): rri pezull .thirrja e titullit, #gridcard. kolona: artikulli i fëmijës së parë: fëmija i nëntë (tek): rri pezull .post-meta, #gridcard. kolona: artikulli i fëmijës së parë: fëmija i nëntë (tek): rri pezull .post-meta a, #gridcard. kolona: artikulli i fëmijës së parë: fëmija i nëntë (tek): rri pezull. përmbajtja e postës p, #gridcard. kolona: Artikulli i fëmijës së fundit: fëmija i nëntë (tek): rri pezull. Titulli i hyrjes, #gridcard. kolona: artikulli i fëmijës së fundit: fëmija i nëntë (tek): rri pezull .post-meta, #gridcard. kolona: artikulli i fëmijës së fundit : fëmija i nëntë (tek): rri pezull .post-meta a, #gridcard. kolona: artikulli i fëmijës së fundit: fëmija i nëntë (tek): rri pezull .përmbajtja post, p. #gridcard. kolona: fëmija i nte (2) artikulli: fëmija i nëntë (madje): rri pezull .thirrja e titullit, #gridcard. kolona: nth-child (2) artikull: nth-child (madje): rri pezull .post-meta, #gridcard. kolona: nth-child ( 2) artikulli: fëmija i nëntë (çift): rri pezull .post-meta a, #gridcard. Kolona: nth-child (2) artikull: nth-child (çift): rri pezull .post-content p {ngjyra: # 333; } #gridcard. kolona: artikulli i fëmijës së parë: fëmija i nëntë (madje): rri pezull, #gridcard. kolona: artikulli i fëmijës së fundit: fëmija i nëntë (madje): rri pezull, #gridcard. kolona: fëmija i nëntë (2) artikulli: fëmija i nëntë (tek): rri pezull {sfondi: # 333; } #gridcard. kolona: artikulli i fëmijës së parë: fëmija i nëntë (çift): hover. Titulli i hyrjes, #gridcard. kolona: artikulli i fëmijës së parë: fëmija i nëntë (madje): hover .post-meta, #gridcard. kolona: artikulli i fëmijës së parë: fëmija i nëntë (madje): rri pezull .post-meta a, #gridcard. kolona: artikulli i fëmijës së parë: fëmija i n-të (madje): rri pezull .post me përmbajtje post, #gridcard. kolona: Artikulli i fëmijës së fundit: fëmija i nëntë (madje): rri pezull .thirrja e titullit, #gridcard. kolona: artikulli i fëmijës së fundit: fëmija i nëntë (madje): rri pezull .post-meta, #gridcard. kolona: artikulli i fëmijës së fundit : fëmija i nëntë (madje): rri pezull .post-meta a, #gridcard. kolona: artikulli i fëmijës së fundit: fëmija i nëntë (madje): rri pezull .post i përmbajtjes post, #gridcard. kolona: fëmija i nëntë (2) artikulli: fëmija i nëntë (tek): rri pezull. Titulli i hyrjes, #gridcard. kolona: nth-child (2) artikulli: nth-child (tek): hover .post-meta, #gridcard. kolona: nth-child ( 2) artikulli: fëmija i nëntë (tek): rri pezull .post-meta a, #gridcard. Kolona: nth-child (2) artikull: nth-child (tek): hover .post-content p {ngjyra: #fff; }

Tani shkoni të shihni efektin në blogun tuaj.

Përshtatja e rrjetave kur rri pezull divi

Shembull # 3: Personalizimi i kartave sipas linjave

Për shembullin e tretë, unë do të aplikoj të njëjtin sfond të errët dhe tekst të bardhë në kartat në çdo rresht tjetër (jo kolona). Për ta bërë këtë, duhet të synoni të gjitha kartat çift në secilën nga kolonat. Shkoni te "Divi → Options" të temës dhe sigurohuni që të çaktivizoni ose hiqni çdo kod të mëparshëm CSS që keni shtuar që nga fillimi i këtij udhëzimi. Pastaj shtoni CSS e mëposhtme:

Artikulli #gridcard: nth-child (madje) {background-color: # 333; } artikull #gridcard: nth-child (even) .ndry-title, artikull #gridcard: nth-child (madje). post-meta, #gridcard artikull: nth-child (madje) .post-meta a, #gridcard artikull : N-fëmijë (madje) .post-content p {ngjyra: #fff; }

Ja cili është rezultati:

Rezultati i konfigurimit sipas vijës divi

Shembull # 4: Hartimi i një harte specifike të rrjetit

Disa prej jush mund të dëshirojnë të zgjedhin një kartë specifike. Për ta bërë këtë, duhet të gjesh ID-në unike të sendit që i caktohet automatikisht secilës prej kartave të tua. Për këtë shembull, unë jam duke përdorur shfletuesin Chrome.

Shkoni te faqja që shfaq modulin tuaj të blogut dhe kliko me të djathtën në një nga kartat tuaja. Në kutinë e opsioneve që shfaqet, zgjidhni "Inspect" (disa shfletues mund të kenë "Inspect Element" ose diçka të ngjashme. Kjo do të vendosë dritaren e veglave të zhvilluesit që shfaq si html ashtu edhe css të faqes tuaj të internetit. Gjeni etiketën e artikullit që përfundon artikulli dhe vini re ID-në e artikullit që i është caktuar. Ky është zgjedhësi që duhet të përdorni për të synuar kartën tuaj individuale. Për shembullin tim, unë kam klikuar me të djathtën dhe klikuar mbi inspektuar për të gjetur ID-në "post-3466".

Si më poshtë:

Modifikimi i një artikulli të vetëm

Për të synuar vetëm këtë hartë në CSS për t'i dhënë një sfond gri me një font të bardhë, duhet të përdorni CSS-në e mëposhtme:

# post-3466 {sfondi: # 333333; } # post-3466 .hyrja-titull, # post-3466 .post-meta, # post-3466 .post-meta a, # post-3466 .post-content p {ngjyra: #fff; }

Tani harta ka atë stil specifik të aplikuar për të.

Kjo eshte e gjitha!

Mendimet e fundit

Këto janë vetëm disa shembuj të shumë stileve të ndryshme që mund të përmbushni duke përdorur këtë lloj shënjestrimi CSS të kartave të modulit Blog. Ju nuk keni pse të mbani të njëjtin stil për secilën letër. Ju mund t'i modeloni ato ashtu si dëshironi.

Nëse keni pyetje ose sugjerime, mos ngurroni të më sugjeroni mua.

[vc_row center_row=”po”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”i sheshtë” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]SHKARKO TEMËN DIVI [/vcex_button][/vc_colum][/vc_colum] /1″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=2&url=23065&tid40632=tutorials” target=”blank” layout=”expanded” align=”family” font ”Raleway” font_weight=”1″ style=”flat” custom_background=”#c700e” custom_hover_background=”#4226d8f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-NADLOGO”]DOW templates DIVI[/vcex_button][/vc_column][/vc_row]

Tutoriale të tjera Divi