Modulul Divi Blog are o opțiune de layout sub forma unei grile utile pentru postările dvs. de blog. Șablonul de grilă organizează postările de pe blog în căsuțe sau hărți care simplifică vizibilitatea articolelor de pe ecran în comparație cu vizualizarea standard.

Setările modulului Blog vă permit să personalizați designul general al rețelei. Puteți face cu ușurință toate cărțile dvs. să aibă aceeași culoare de fundal, font, margini etc. Cu toate acestea, opțiunile de stil sunt limitate la designul grilei în ansamblu, ceea ce îl face dificil. aplicând modele multiple sau diferite pe hărțile din cadrul grilei.

Astăzi vă voi arăta cum să vizați și să aplicați mai mult de un stil la cărțile care alcătuiesc grila. blogul tău folosind CSS personalizat. Vă voi arăta cum să aplicați un stil diferit unul altuia card, pentru a crea un efect de șah. De asemenea, vă voi arăta cum să stilați fiecare card diferit pe rând și vă voi arăta cum să vizați orice card individual.

Deci acestea sunt 4 exemple despre cum să personalizați blogul tău, inclusiv unele efecte de hover pe care le puteți utiliza. Până la sfârșitul acestui tutorial, veți putea crea modele minunate pentru blogul tău.

Alte tutoriale pe tema Divi

Să începem.

Configurarea aspectului pentru blogul dvs.

Înainte de a începe cu designul cardurilor modulului blog, asigurați-vă că aveți cel puțin 12 articole deja create cu o imagine în casetă.

După ce mesajele dvs. au fost create, creați o nouă pagină. Pe noua pagină, implementați modulul de blog pe o coloană cu lățime întreagă într-o parte standard:

Configurarea aspectului unui blog divi

Faceți clic pentru a edita setările modulului Blog. În Setări generale, modificați următoarele setări:

  • Layout: Grilă
  • Număr de articole: 12
  • Afișați imaginea prezentată: DA
  • Buton Citiți mai multe: ON

Configurarea grilei Divi

Sub CSS personalizat, introduceți „grilă” în caseta de text CSS ID. Va fi o modalitate pentru noi de a personaliza doar acest modul de blog.

Gridcard css divi

Salvați modificările

Cum să înțelegeți aspectul „Grilă” pentru blog

Acum, dacă aveți grila blogului în locul dvs., este important să înțelegeți structura layout-ului rețelei astfel încât să puteți localiza hărțile modulului de blog pe care doriți să-l personalizați.

Grila de blog este configurată cu un aspect de trei coloane. Următoarea este o ilustrare a grilei de blog cu articole de blog 12 împărțite în trei coloane:

Prezentarea aspectului grilei divi

Cardurile de bilete de blog sunt ordonate de sus în jos în fiecare dintre coloane. Deci, dacă doriți să le dați un număr, va trebui să numărați de la 1 la 4 pe fiecare lungime de sus în jos:

Numără articole divi

Deoarece cunoașteți ordinea numerică a fiecărei cărți de blog sub fiecare coloană, puteți identifica, de asemenea, fiecare carte ca număr impar sau par, după cum urmează:

Număr par și impar divi

Desenează un exemplu de rețea

Exemplul nr. 1: Proiectarea unei grile "Checkered"

Pentru acest prim exemplu, voi viza toate cărțile ciudate din modulul blogului (cărțile 1 și 3) din prima coloană, oferindu-le o culoare de fundal gri închis. Pentru a face acest lucru, accesați „Divi → Opțiuni temă” și adăugați următorul CSS în caseta de text CSS personalizată:

#gridcard .column: articolul primul copil: nth-child (nui adevărat) {background: #333; }

Iată o detaliere a ceea ce face acest cod:

#gridcard = ID-ul întregului modul de blog

.column: first-child = selectați prima coloană din modulul blog

post: nth-child (impar) = selectează toate articolele (sau cărțile) impare din coloană

Punând totul împreună, acest lucru selectează cărțile cu număr impar din prima coloană a modulului blogului cu ID-ul „grilă”.

Apoi, adăugați textul alb care va trece peste fondul închis prin adăugarea următorului CSS:

#gridcard. coloana: elementul primul copil: nth-child (nui adevărat) .entry-title, #gridcard .column: first-child articol: n-copil (ciudat) .post-meta a, #gridcard. coloana: primul copil }

Acest cod vizează toate elementele de text din cardurile modulelor de blog (inclusiv titlul, meta-urile postării, link-urile meta postărilor și cuprins a articolului) și le dă culoarea albă.

Iată rezultatul:

Personalizarea grilei divi ciudate

Următorul pas în crearea aspectului nostru de tablă este de a viza cărțile numerotate impare din a treia coloană și de a aplica fundalul gri închis și textul alb, așa cum ați făcut în prima coloană. Adăugați următorul CSS în caseta de text Custom CSS:

#gridcard .column: ultimul articol copil: nth-child (impar) {background: # 333; } #gridcard .column: ultimul articol copil: nth-child (impare) .entry-title, #gridcard .column: ultimul articol copil: nth-child (impar) .post-meta, #gridcard .column: last- articol copil: nth-child (impare) .post-meta a, #gridcard .column: ultimul articol copil: nth-child (impare) .post-content p {color: #ffffff; }

Acest cod vizează „ultima” coloană (în acest caz, a treia coloană este ultima coloană) cu elementul de poreclă „ultimul copil”.

Pentru a doua coloană (sau mediu), vizează chiar și cărțile pentru a finaliza efectul de tablă. Pentru a face acest lucru, trebuie să adăugăm următoarele CSS:

#gridcard .column: nth-child (2) articol: nth-child (par) {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; }

Acum, verificați pagina de blog pentru a vedea schema de bord a hărților modulului blogului.

Dispunerea divi a grilei de tablă

Exemplul nr. 2: Adăugarea efectelor Hover cu aspectul cu carouri

După ce știți cum să vizați cardurile modulului blogului, puteți schimba creativ oricare dintre elementele din card.

Pentru acest exemplu, voi folosi aspectul de tablă de șah și de data aceasta voi schimba imaginile prezentate de la hărți gri închis la alb-negru atunci când treceți peste hartă. Și, voi face ca imaginile de pe prima pagină ale cărților albe să fie mai luminoase atunci când treceți peste carte. Pentru a face acest lucru, adăugați următorul CSS în zona CSS personalizată (asigurați-vă că dezactivați sau tăiați celălalt cod, astfel încât să nu fie incompatibil cu cel nou):

#gridcard .column: primul articol copil: n-copil (impar), #gridcard .column: ultimul articol copil: nth-child (impar), #gridcard .column: nth-child (2) articol: nth-child (chiar) {fundal: # 333; } #gridcard .column: primul articol copil: nth-child (impar) .entry-title, #gridcard .column: first-child article: nth-child (impar) .post-meta, #gridcard .column: first- articol copil: n-copil (impar) .post-meta a, #gridcard .column: primul copil articol: nth-copil (impar) .post-content p, #gridcard .column: ultimul articol copil: nth-child (ciudat) .entry-title, #gridcard .column: ultimul articol copil: nth-child (impar) .post-meta, #gridcard .column: ultimul copil articol: nth-child (impar) .post-meta a , #gridcard .column: ultimul articol copil: nth-child (impar) .post-content p, #gridcard .column: nth-child (2) articol: nth-child (pare) .entry-title, #gridcard. coloana: 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) articol: 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 (impar): hover img, #gridcard .column: last -articul copilului: nth-child (impar): hover img {-webkit-filter: greyscale (1); filtru: în tonuri de gri (1); } #gridcard .column: nth-child (2) article: nth-child (impar): hover img, #gridcard .column: first-child article: nth-child (even): hover img, #gridcard .column: last -articol copil: n-copil (par): hover img {-webkit-filter: luminozitate (1.5); filtru: luminozitate (1.5); }

De asemenea, puteți adăuga un efect de inversiune pe cărți, astfel încât atunci când treceți peste cărțile albe să devină gri închis, iar când treceți peste cărțile gri închis să devină albe.

Adăugați următoarele CSS în plus față de CSS de mai sus:

#gridcard .column article, #gridcard .column article img {-webkit-transition: all 0.8s; -moz-tranziție: toate 0.8s; tranziție: toate 0.8s; } #gridcard .column: primul articol copil: nth-child (impare): hover, #gridcard .column: ultimul articol copil: nth-child (impar): hover, #gridcard .column: nth-child (2) articol: al n-lea-copil (par): plasați {fundal: #fff; } #gridcard .column: primul articol copil: nth-child (impare): hover .entry-title, #gridcard .column: primul articol child: nth-child (impar): hover .post-meta, #gridcard. coloana: primul articol copil: al n-lea copil (impar): hover .post-meta a, #gridcard .column: primul articol copil: nth-child (impar): hover .post-content p, #gridcard .column: articol ultimul copil: al nul-copil (impare): hover .entry-title, #gridcard .column: ultimul articol copil: nth-child (impar): hover .post-meta, #gridcard .column: ultimul articol : nth-child (impar): hover .post-meta a, #gridcard .column: ultimul articol copil: nth-child (impar): hover .post-content p, #gridcard .column: nth-child (2) articol: nth-child (even): hover .entry-title, #gridcard .column: nth-child (2) article: nth-child (even): hover .post-meta, #gridcard .column: nth-child ( 2) articol: nth-child (even): hover .post-meta a, #gridcard .column: nth-child (2) article: nth-child (even): hover .post-content p {color: # 333; } #gridcard .column: primul articol copil: nth-child (even): hover, #gridcard .column: ultimul articol child: nth-child (even): hover, #gridcard .column: nth-child (2) articol: al n-lea-copil (impar): plasați {fundal: # 333; } #gridcard .column: primul articol copil: nth-child (even): hover .entry-title, #gridcard .column: first-child article: nth-child (even): hover .post-meta, #gridcard. coloană: primul articol copil: al nul-copil (par): hover .post-meta a, #gridcard .column: primul articol copil: nth-child (par): hover .post-content p, #gridcard .column: articol ultimul copil: al nul-copil (par): hover .entry-title, #gridcard .column: ultimul articol copil: nth-child (par): hover .post-meta, #gridcard .column: ultimul articol : nth-child (even): hover .post-meta a, #gridcard .column: ultimul articol copil: nth-child (even): hover .post-content p, #gridcard .column: nth-child (2) articol: nth-child (impar): hover .entry-title, #gridcard .column: nth-child (2) articol: nth-child (impar): hover .post-meta, #gridcard .column: nth-child ( 2) articol: nth-child (impar): hover .post-meta a, #gridcard .column: nth-child (2) articol: nth-child (impar): hover .post-content p {color: #fff; }

Acum, vedeți efectul pe blogul dvs.

Personalizarea grilelor atunci când plasați divi

Exemplu # 3: personalizarea cardurilor pe rânduri

Pentru cel de-al treilea exemplu, voi aplica același fundal întunecat și text alb cărților din toate celelalte rânduri (nu coloana). Pentru a face acest lucru, trebuie să vizați toate cărțile egale din fiecare dintre coloane. Mergeți la „Divi → Opțiuni” a temei și asigurați-vă că dezactivați sau eliminați orice cod CSS anterior pe care l-ați adăugat de la începutul acestui tutorial. Apoi adăugați următorul CSS:

#articula grila: al n-lea copil (par) {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; }

Iată care este rezultatul:

Rezultatul configurației după linia Divi

Exemplul # 4: Proiectarea unei hărți de grilă specifice

Unii dintre voi ar putea dori să aleagă un anumit card. Pentru a face acest lucru, trebuie să găsiți ID-ul unic al articolului care este atribuit automat fiecărei cărți. Pentru acest exemplu, folosesc browserul Chrome.

Accesați pagina care afișează modulul blogului dvs. și faceți clic dreapta pe una dintre cărțile dvs. În caseta de opțiuni care apare, selectați „Inspectați” (unele browsere pot avea „Inspectare element” sau ceva similar. Aceasta va implementa fereastra Instrumente pentru dezvoltatori care afișează atât html, cât și css pentru pagină web. Găsiți eticheta articolului care înfășoară articolul dvs. și notați ID-ul articolului care i-a fost atribuit. Acesta este selectorul pe care ar trebui să îl utilizați pentru a viza cardul dvs. individual. De exemplu, am faceți clic dreapta și faceți clic inspectat pentru a găsi id-ul „post-3466”.

Ca mai jos:

Modificarea unui singur articol

Pentru a viza numai această carte în CSS pentru a da un fundal gri cu un font alb, trebuie să utilizați următorul 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; }

Acum, harta are acel stil specific care i-a fost aplicat.

Asta e tot!

Ultimele gânduri

Acestea sunt doar câteva exemple ale multor stiluri diferite pe care le puteți realiza folosind acest tip de direcționare CSS a cardurilor de module Blog. Nu mai trebuie să păstrați același stil pentru fiecare carte. Le puteți proiecta oricum doriți.

Dacă aveți întrebări sau sugestii, nu ezitați să le oferiți acestora.

[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”]DESCĂRCĂ TEMA DIVI [/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”]DESCARCĂ ȘABLOANELOR DIVI[/vcex_button][/vc_column][/vc_row]

Alte tutoriale Divi