Divi: cea mai bună temă WordPress din toate timpurile!

mai mult Descărcări 901.000, Divi este cea mai populară temă WordPress din lume. Este completă, ușor de folosit și are mai mult de șabloane gratuite 62.

Modulul Blog al Divi are o opțiune utilă de aspect al grilei pentru postările de blog. Modelul grilă organizează postările dvs. de blog în casete sau carduri care facilitează vizualizarea postărilor pe un 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 multe stiluri cărților care alcătuiesc grila blogului dvs. utilizând CSS personalizat. Vă voi arăta cum să aplicați un stil diferit reciproc, pentru a crea un efect de șah. De asemenea, vă voi arăta cum să stilizați fiecare carte diferit pe fiecare rând și să vă arăt cum să vizați orice carte individuală.

Așadar, este vorba de exemple 4 despre modul în care vă puteți personaliza blogul, inclusiv unele efecte pasive pe care le puteți utiliza. La sfârșitul acestui tutorial, veți putea crea modele minunate pentru blogul dvs.

Alte tutoriale pe Divi temă

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:

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

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.

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:

Creați cu ușurință site-ul dvs. web cu Elementor

Elementor vă permite să creați Ușor și Gratuit orice site web sau design de blog cu aspect profesional. Nu mai plătiți mult pentru un site web pe care îl puteți face singur.

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:

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ă:

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 text din cardurile modulului blogului (inclusiv titlul, metasele articolului, meta-linkurile articolului și conținutul articolului) și le atribuie culoarea albă.

Iată rezultatul:

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”.

Descoperiți cele mai bune instrumente pentru site-ul dvs

Descărcați cele mai bune pluginuri și teme WordPress pe Envato și creați cu ușurință site-ul dvs. Web. Deja mai mult de descărcări 49.720.000. [EXCLUSIV]

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.

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.

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:

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 cardurile dvs. În caseta de opțiuni care apare, selectați „Inspectați” (unele browsere pot avea „Inspectați elementul” sau ceva similar. OUTILS instrument de dezvoltare care afișează atât codul HTML, cât și CSS ale paginii dvs. web. Găsiți eticheta articolului care include 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 vă viza cardul individual. Pentru exemplul meu, am făcut clic dreapta și am făcut clic pe inspectat pentru a găsi ID-ul „post-3466”.

Ca mai jos:

Peste 11 milioane de instrumente de descărcat

Envato Elements oferă cele mai bune resurse pentru a crea și dezvolta toate aspectele site-ului dvs. Veți găsi milioane de șabloane WordPress, grafice, resurse audio și multe altele. Perfect pentru incepatori.

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 = "da"] [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"] DESCARCĂ TEMA DIVI [/ vcex_button] [/ width»_column_column] » 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" =" TEMP D FA-DOWNLOAD DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Alte tutoriale Divi

%d bloggerilor le place această pagină: