Želite li svoju DIVI blog stranicu prikazati kao mrežu s više stupaca?
Divi's Blog modul može prikazati postove na blogu u punoj širini ili rešetkastom rasporedu. Ako odaberete raspored rešetke, maksimalan broj stupaca koji možete imati je tri.
U ovom vodiču, uz samo nekoliko CSS isječaka, blog pretvorit će se u prekrasan raspored mreže s više stupaca. Osim toga, stupci će biti glatki i responzivni u svim veličinama preglednika, tako da ne morate brinuti o ažuriranju tih medijskih upita ili responzivnih postavki.
Također možete pogledati naš članak da biste saznali Kako napraviti blog stranicu s modulom DIVI Blog.
pregled
Prije nego skočimo na ovaj vodič, prvo pogledajmo rezultat koji želimo postići.
Preuzmite DIVI sada!!!
Konfiguriranje blog modula s prikazom preko cijelog zaslona
Modul DIVI Blog može se koristiti za dodavanje bloga bilo gdje na vašem web stranica. Stvarno olakšava stvaranje blog stranice u Diviju. Sve što trebate učiniti je dodati blog modul na stranicu koristeći Divi Builder.
Za ovaj vodič koristit ćemo unaprijed izrađeni izgled bloga s jednog od besplatni paketi izgleda DIVI-ja koji već sadrži modul Blog s osnovnim stilom.
Za učitavanje unaprijed napravljenog izgleda bloga:
- Izradite novu stranicu s WordPress nadzorne ploče
- Dajte mu relevantan naziv i kliknite na "Koristi Divi Builder"
- Kliknite na "Odaberi izgled"
- U traku za pretraživanje upišite 'Fashion Designer' i odaberite izgled 'Fashion Designer Blog Page'
- Provjerite jeste li odabrali izgled bloga, a zatim kliknite na "Odaberi izgled"
Nakon što se izgled učita, pronađite modul Blog koji se koristi za prikaz postova na blogu i otvorite postavke.
Postavite broj postova
U postavkama bloga ažurirajte sadržaj da ograničite broj postova na 10. (Ovo je uglavnom iz estetskih razloga, jer će naša mreža na kraju uključivati dva reda od pet postova na blogu.)
- Broj pozicija: 10
Odaberite izgled preko cijelog zaslona
Budući da ćemo svoj blog postavljati u stupce koristeći CSS Grid, moramo osigurati da je izgled modula Blog 'Cijeli zaslon' (ne 'Mreža'). Ovo će osigurati da su postovi na blogu složeni okomito u uobičajenom redoslijedu stranica.
Za promjenu izgleda modula Blog, otvorite postavke modula i pod karticom Stil otvorite padajući izbornik Predložak i odaberite Cijeli zaslon .
Sada će svaki post na blogu obuhvaćati punu širinu stupca (ili nadređenog spremnika).
Dodajmo obrub postovima na blogu. Ažurirajte opcije obruba na sljedeći način:
- Širina obruba: 1px
- Boja obruba: rgba (150,104,70,0.35)
Dodavanje prilagođene CSS klase modulu Blog
Kako bismo učinkovito ciljali ovaj određeni modul Bloga (ne neki drugi) s našim CSS-om, moramo našem modulu dati prilagođenu CSS klasu. Pod naprednom karticom dodajte sljedeću CSS klasu:
- CSS klasa: et-blog-css-grid
Stvaranje izgleda s više stupaca pomoću CSS mreže
Sada kada je naš blog modul postavljen s prikazom preko cijelog zaslona, spremni smo dodati svoj prilagođeni CSS.
Umetnut ćemo modul Code ispod modula Blog kako bismo dodali CSS na stranicu.
U okvir za unos koda dodajte potrebne oznake stila za omotavanje bilo kojeg CSS koda dodanog na stranicu.
Unutar oznaka stila zalijepite sljedeći isječak CSS koda:
.et-blog-css-grid > div {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
Prvi redak CSS-a predstavlja sadržaj (ili modula) u obliku mreže.
display: grid;Drugi redak CSS-a definira model stupca mreže.
grid-template-columns : repeat(auto-fill, minmax (200px, 1fr));Treći red određuje razmak između stavki mreže.
gap : 20px ;U ovom je trenutku responzivna rešetka s pet stupaca spremna za rad. Zapravo, ako ne želite koristiti stranice ili obrube za svoje postove na blogu, možete stati ovdje.
Evo dosadašnjeg rezultata.
Prilagodite stavke mreže
Zatim možemo dodati nekoliko redaka CSS-a koji ciljaju na elemente rešetke tako da budu poravnati s vrhom svakog retka i imaju malo ispune.
.et-blog-css-grid .et_pb_post {
align-self: start;
padding: 15px;
}
Uklonjena paginacija mreže
Trenutačno, ako imate aktivnu paginaciju na modulu bloga, ona će se tretirati kao zadnji element rešetke u CSS rešetki. Kako bismo u potpunosti uklonili paginaciju s mreže, možemo joj dati apsolutnu poziciju i postaviti je izravno ispod modula bloga. Da biste to učinili, dodajte sljedeći CSS:
.et-blog-css-grid > div > div {
width: 100%;
position: absolute;
bottom: 0;
transform: translate(0%, 150%);
}
Pogledajmo dosadašnji rezultat!
Savjet: prilagodite veličinu svih istaknutih slika (ili minijatura)
U ovom trenutku možete primijetiti nedosljednost u visini slika prikazanih na svakom postu na blogu. Ako želite da svi budu iste visine, za to možete koristiti i dodatni CSS.
.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;
}
Uz gornju unutarnju marginu od 56,25%, trebali bismo dobiti omjer slike od 16:9 za sve naše slike.
Slobodno prilagodite ispunu na spremniku slike kako biste dobili željeni omjer slike.
Konačni rezultat
A ovdje je konačni pregled našeg blog modula s našim novim stupcima i rešetkom. I kao što vidimo, mreža je potpuno responzivna.
Preuzmite DIVI sada!!!
Zaključak
Učinjeno je ! Pokazali smo vam u ovom vodiču kako svoje postove na blogu rasporediti u stupce.
Uspjeli smo restrukturirati cijeli Divi Blog modul u fluidan izgled s pet stupaca. Nadamo se da vam ovo štedi vrijeme i daje vam više mogućnosti za stvaranje prekrasnih stranica bloga. Također se možete konzultirati Kako stvoriti blog stranicu s Divi blog modulom
Vidi također naši resursi, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem na internetu Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.
Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.
