Doriți să afișați pagina dvs. de blog DIVI ca o grilă cu mai multe coloane?
Modulul Blog al Divi poate afișa postări de blog într-un aspect pe lățime completă sau în grilă. Dacă alegeți aspectul grilei, numărul maxim de coloane pe care îl puteți avea este de trei.
În acest tutorial, cu doar câteva fragmente CSS, blogul tău se va transforma într-un aspect frumos al grilei cu mai multe coloane. În plus, coloanele vor fi netede și receptive pentru toate dimensiunile de browser, așa că nu trebuie să vă faceți griji cu privire la actualizarea acestor interogări media sau a setărilor de răspuns.
De asemenea, puteți consulta articolul nostru pentru a afla Cum se creează o pagină de blog cu modulul DIVI Blog.
studiu
Înainte de a intra în acest tutorial, să aruncăm o privire mai întâi la rezultatul pe care vrem să-l obținem.
Descărcați DIVI acum!!!
Configurarea unui modul Blog cu un aspect pe ecran complet
Modulul Blog DIVI poate fi folosit pentru a adăuga un blog oriunde pe dvs site-ul web. Cu adevărat, este ușor să creezi o pagină de blog în Divi. Tot ce trebuie să faceți este să adăugați un modul Blog pe pagină folosind Divi Builder.
Pentru acest tutorial, vom folosi un aspect de blog prestabilit dintr-unul dintre pachete de layout gratuite al DIVI care conține deja un modul Blog cu un stil de bază.
Pentru a încărca aspectul blogului prestabilit:
- Creați o pagină nouă din tabloul de bord WordPress
- Dați-i un nume relevant și faceți clic pe „Utilizați Divi Builder”
- Faceți clic pe „Alegeți aspectul”
- Introduceți în bara de căutare „Fashion Designer” și alegeți aspectul „Fashion Designer Blog Page”
- Asigurați-vă că alegeți Aspect blog și apoi faceți clic pe „Alegeți aspectul”
Odată ce aspectul se încarcă, găsiți modulul Blog folosit pentru a afișa postările de blog și deschideți setările.
Setați numărul de postări
În setările blogului, actualizați cuprins pentru a limita numărul de postări la 10. (Acest lucru este în principal din motive estetice, deoarece grila noastră va include în cele din urmă două rânduri de cinci postări pe blog.)
- Numar de posturi: 10
Selectați aspectul pe ecran complet
Deoarece ne vom așeza blogul în coloane folosind Grila CSS, trebuie să ne asigurăm că aspectul modulului Blog este „Ecran complet' (nu 'Grid'). Acest lucru va asigura că postările de blog sunt stivuite vertical, în ordinea lor normală a paginilor.
Pentru a schimba aspectul modulului Blog, deschideți setările modulului și sub fila Stil deschideți meniul drop-down Șablon și selectați Ecran complet .
Acum fiecare postare de blog se va întinde pe toată lățimea coloanei (sau a containerului părinte).
Să adăugăm o chenar la postările de blog. Actualizați opțiunile de chenar după cum urmează:
- Lățimea chenarului: 1px
- Culoare chenar: rgba (150,104,70,0.35)
Adăugarea unei clase CSS personalizate la modulul Blog
Pentru a viza în mod eficient acest anumit modul Blog (nu altul) cu CSS-ul nostru, trebuie să oferim modulului nostru o clasă CSS personalizată. Sub fila avansat, adăugați următoarea clasă CSS:
- Clasa CSS: et-blog-css-grid
Crearea aspectului cu mai multe coloane cu CSS Grid
Acum că modulul nostru Blog este configurat cu un aspect pe ecran complet, suntem gata să adăugăm CSS-ul nostru personalizat.
Vom insera un modul Cod sub modulul Blog pentru a adăuga CSS la pagină.
În caseta de introducere a codului, adăugați etichetele de stil necesare pentru a încheia orice cod CSS adăugat la o pagină.
În interiorul etichetelor de stil, inserați următorul fragment de cod CSS:
.et-blog-css-grid > div {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
Prima linie a CSS prezintă cuprins (sau module) sub formă de grilă.
display: grid;A doua linie a CSS definește modelul de coloană grilă.
grid-template-columns : repeat(auto-fill, minmax (200px, 1fr));Al treilea rând determină distanța dintre elementele grilei.
gap : 20px ;În acest moment, grila de răspuns cu cinci coloane este gata de funcționare. De fapt, dacă nu doriți să utilizați paginarea sau chenarele pentru postările de pe blog, vă puteți opri aici.
Iată rezultatul de până acum.
Personalizați elementele grilei
Apoi putem adăuga câteva linii de CSS care vizează elementele grilei, astfel încât acestea să fie aliniate la partea de sus a fiecărui rând și să aibă o umplutură.
.et-blog-css-grid .et_pb_post {
align-self: start;
padding: 15px;
}
S-a eliminat paginarea grilei
În prezent, dacă aveți paginarea activă pe modulul blog, aceasta va fi tratată ca ultimul element de grilă din grila CSS. Pentru a elimina complet paginarea din grilă, îi putem da o poziție absolută și o plasăm direct sub modulul blogului. Pentru a face acest lucru, adăugați următorul CSS:
.et-blog-css-grid > div > div {
width: 100%;
position: absolute;
bottom: 0;
transform: translate(0%, 150%);
}
Să vedem rezultatul până acum!
Sfat: ajustați dimensiunea tuturor imaginilor prezentate (sau a miniaturilor)
În acest moment, este posibil să observați inconsecvența în înălțimea imaginilor prezentate pe fiecare postare de blog. Dacă doriți ca toate să aibă aceeași înălțime, puteți utiliza și CSS suplimentar pentru a face asta.
.et-blog-css-grid .entry-featured-image-url {
padding-top: 56.25%;
}
.et-blog-css-grid .entry-featured-image-url img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
object-fit: cover;
}
Cu o marjă internă superioară de 56,25%, ar trebui să obținem un raport de aspect de 16:9 pentru toate imaginile noastre.
Simțiți-vă liber să ajustați umplutura pe containerul de imagine pentru a obține raportul de aspect pe care îl doriți pentru imaginea dvs.
Rezultat final
Și iată o previzualizare finală a modulului nostru Blog cu noile noastre coloane și grilă. Și după cum putem vedea, grila este complet receptivă.
Descărcați DIVI acum!!!
Concluzie
E gata ! V-am arătat în acest tutorial cum să vă aranjați postările de blog în coloane.
Am reușit să restructuram întregul modul Divi Blog într-un aspect fluid cu cinci coloane. Sper că acest lucru vă economisește timp și vă oferă mai multe opțiuni pentru a crea pagini frumoase de blog. De asemenea, puteți consulta Cum se creează o pagină de blog cu modulul Blog Divi
Vezi și resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
