Treci la conținutul principal

Cum să personalizați grilele unui blog cu Divi

Divi: cea mai ușoară temă WordPress de utilizat

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. [Recomandat]

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

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

Elementor vă permite să creați cu ușurință orice design de site web cu un aspect profesionist. Nu mai plătiți scump pentru ceea ce puteți face singur. [Gratuit]

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

Iată rezultatul:

Personalizarea grilei divi ciudate

Căutați cele mai bune teme și pluginuri WordPress?

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]

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:

Creați ușor magazinul dvs. online

Descărcați gratuit WooCommerce, cele mai bune pluginuri de e-commerce pentru a vă vinde produsele fizice și digitale pe WordPress. [Recomandat]

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.

Alte tutoriale Divi

Acest articol conține comentarii 20

  1. bonjour,
    Sunt cu adevărat un începător, dar, datorită tutorialelor online, reușesc să construiesc un blog frumos.
    Într-adevăr, mulțumesc pentru asta pentru că a trebuit doar să copiez codurile și totul a decurs fără cusur, sunt încântat de rezultat.
    Mulțumesc din nou, să ai o zi frumoasă 🙂

  2. Bonsoir,
    blogul DIVI, lângă numele autorului, plasează prepoziția „de” (de ex. Stefano). Aș dori să știu dacă este posibil să-l schimbați în „de”

  3. Bună ziua Thierry
    Super tutorial
    Aș dori să știu dacă este posibil să măriți dimensiunea imaginii prezentate
    Aș dori să aplic acest stil blogului meu
    mulțumesc

  4. bonjour,
    Cum pot optimiza acest aspect pentru mobil (tabletă)? Nu am un Schabrettmuster ci culori diferite pentru fiecare postare pe blog, într-o ordine specifică. Desigur, asta se schimbă atunci când treceți la telefonul mobil și culorile nu mai sunt asociate cu postările potrivite ...
    Are cineva o idee aici?

  5. bonjour,

    Mulțumim pentru acest articol! Aș dori să modific și „citiți mai multe” din partea de jos a articolelor.
    Ne puteți da exemple de cod CSS pentru a schimba textul și pentru al pune, de exemplu, într-un buton centrat?

    Mulțumesc.
    Sophie

  6. În CSS personalizado, poe ejemplo:
    #gridcard .Column: arta primului copil: nth-child (impar) {background: #333; }

    da error como el seigue: Ați așteptat o FUNCȚIE sau IDENT după colon la linia 1, col 18

    În ceea ce priveşte

    1. Bonsoir,

      Blogul nostru este tradus automat din franceză. Prin urmare, vă invit să alegeți limba franceză în widgetul de limbă situat în bara de sus a blogului nostru și va fi afișat codul CSS corect.

    2. used escribió an artículo evil escrito, debería ser: artículo del primer hijo: nu arte del primer hijo:

      Ați scris greșit articolul, acesta ar trebui să fie: articolul primul copil: nu arta primului copil:

  7. bonjour
    Mulțumesc pentru articol. Am o prezentare în grilă (Tema Divi) Am miniaturi (fotografii) pentru prezentarea articolelor, pe de altă parte când fac clic pentru a avea acces la articol, imaginea este afișată în mare la începutul 'articol. Există vreo modalitate de a face aceeași dimensiune ca miniatura sau de a o șterge din vizualizarea postării.
    mulțumesc
    Patrick

  8. Bonjourn, super-articol
    Îmi încerc norocul aici, uneori am ocolit un subiect săptămâni întregi fără să găsim răspunsul atunci când același subiect are sens pentru alții.

    Prin urmare, caut soluția pentru a configura o grilă de postare, compusă doar din imagini, dar cu înălțimi diferite, pentru a fi mai explicit, că una din două imagini are dublul înălțimii imaginii de lângă ea.

    O idee?

    Julien

  9. Super toto! Voi testa acest weekend pentru site-ul meu.
    aveți o soluție pentru a elimina extractele din grile?
    Vă mulțumesc pentru tine
    Sofhy

Lasă un comentariu

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate *

Acest site folosește Akismet pentru a reduce nedorite. Aflați mai multe despre modul în care sunt utilizate datele dvs. de comentarii.

Inapoi in top