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
- site-uri web 5 pentru utilizare restaurant tematic Divi
- Cum de a adăuga text pe un Divi produs WooCommerce
- Modificarea culorii meniului între paginile din Divi
- Caracteristici pe care nu le cunoașteți despre Divi
- Cum se creează un slider pe Divi
- Cum se editează un rol de utilizator pe 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:
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:
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 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:
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.
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 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:
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
- site-uri web 5 pentru utilizare restaurant tematic Divi
- Cum să adăugați text pe un produs Divi WooCommerce
- Modificarea culorii meniului între paginile Divi
- Cum să personalizați grilele unui blog cu Divi
- Cum de a utiliza rolul editor Divi pe WordPress
- Cum se creează un glisor Divi pe ecran complet
- Modificarea culorii meniurilor între paginile Divi
- Caracteristici pe care probabil nu le cunoașteți despre Divi
- Cum se utilizează Divi Builder pe WordPress
- Cum se utilizează modulul de defilare video Divi
- Cum se utilizează modulul Divi Builder Flip
- Cum să adăugați un modul de mărturie pe Divi Builder
- Cum se utilizează modulul de text Divi
- Cum se creează un slider pe Divi
- Cum se editează un rol de utilizator Divi
- Cum se utilizează modulul Divi Social Media
- Cum se utilizează modulul magazin pe tema WordPress Divi
- Cum se utilizează modulul bara laterală Divi
- Cum se utilizează modulul de prețuri pentru divi
- Cum se utilizează modulul de titlu al publicațiilor Divi
- Cum se adaugă un modul video de Divi
- Cum să utilizați modulul de navigare pentru articole
- Cum se utilizează modulul de căutare Divi
- Cum se utilizează modulul portofel Divi
- Cum se utilizează modulul persoană pe Divi Builder
- Cum se utilizează modulul portofel cu filtrul Divi
- Modul de utilizare a modulului glisant cu lățime întreagă
- Cum se utilizează modulul de imagine Divi Builder
- Modul de utilizare a modulelor de navigație full-width din Divi Builder
- Cum se utilizează modulul galerie de imagini
- Modul de utilizare a modulului de carduri cu dimensiuni multiple de la Divi Builder
- Cum să utilizați modulul de portofoliu Full Width Divi
- Cum se utilizează modulul antet de Divi pentru lățimea completă
- Cum se utilizează modulul Counter Modul Divi
- Cum se utilizează glisorul de articole pe Divi Builder
- Cum se utilizează modulul Divi Email Optin
Buna dimineata ! Știți dacă este posibil să modificați numărul de coloane ale acestui obiect Blog?
Aș dori ca fiecare card să fie afișat pe toată lățimea. MULȚUMIRI !
bonjour,
Am încercat să afișez postările de blog în „grilă” cu id-ul „grilă”, dar nu funcționează. Ma poti ajuta ?
Bonsoir,
Ne pare rău pentru răspunsul târziu.
Puteți reformula cererea dvs., vă rog?
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ă 🙂
Te implor. Vă mulțumim că ne-ați citit.
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”
bonjour,
Da, este posibil să schimbați acest element cu Divi.
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
bonjour,
Da este posibil.
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?
bonjour,
Nu, din păcate.
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
Bună 🙂 Pentru a schimba textul butonului „citește mai mult”, se întâmplă în Setări blog > Stil > Citește mai mult text. Puteți modifica tipografia și textul „citește mai mult”. Totuși, nu știu cum să fac un buton din el. Configurare bună!
Î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
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.
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:
Bună,
70 alte limbi.
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
Bonsoir,
Ne pare rău, dar sprijinul divi este limitat la tutorialele noastre. Contactați Eleganthemes SVP.
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
Buna ziua Julien,
Vă recomandăm să contactați echipa DIVI. Este mai convenabil în acest caz.
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