Želite li svoju stranicu DIVI bloga prikazati kao mrežu sa više kolona?
Divi-ov Blog modul može prikazati blog postove u punoj širini ili rasporedu mreže. Ako odaberete raspored mreže, maksimalan broj stupaca koji možete imati je tri.
U ovom vodiču, sa samo nekoliko CSS isječaka, tvoj blog će se pretvoriti u prekrasan raspored mreže sa više kolona. Osim toga, kolone će biti glatke i osjetljive na sve veličine pretraživača, 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 kreirati stranicu bloga sa DIVI Blog modulom.
pregled
Prije nego krenemo u ovaj tutorijal, hajde da prvo pogledamo rezultat koji želimo postići.
Preuzmite DIVI sada!!!
Konfigurisanje blog modula sa izgledom preko celog ekrana
DIVI-jev Blog modul se može koristiti za dodavanje bloga bilo gdje na vašem site Web. Stvarno olakšava kreiranje blog stranice u Diviju. Sve što treba da uradite je da dodate blog modul na stranicu koristeći Divi Builder.
Za ovaj tutorijal koristit ćemo unaprijed napravljen izgled bloga iz jednog od besplatni paketi izgleda DIVI-ja koji već sadrži blog modul sa osnovnim stilom.
Za učitavanje unaprijed napravljenog izgleda bloga:
- Kreirajte novu stranicu sa WordPress kontrolne table
- Dajte mu relevantno ime i kliknite na 'Koristi Divi Builder'
- Kliknite na "Odaberi izgled"
- U traku za pretraživanje upišite 'Modni dizajner' i odaberite izgled 'Stranica bloga modnog dizajnera'
- Obavezno odaberite 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žaja ograničiti 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 cijelog ekrana
Pošto ćemo naš blog postaviti u kolone koristeći CSS Grid, moramo se uveriti da je izgled modula Blog 'Cijeli ekran' (ne 'Mreža'). Ovo će osigurati da su blog postovi naslagani okomito u uobičajenom redoslijedu stranica.
Da promijenite izgled modula Blog, otvorite postavke modula i ispod kartice Stil otvorite padajući meni Šablon i odaberite Cijeli ekran .
Sada će svaki blog post obuhvatiti punu širinu kolone (ili roditeljskog kontejnera).
Dodajmo ivicu blog postovima. Ažurirajte opcije obruba na sljedeći način:
- Širina ivice: 1px
- Boja ivice: rgba (150,104,70,0.35)
Dodavanje prilagođene CSS klase modulu Blog
Da bismo efikasno ciljali ovaj određeni blog modul (a ne drugi) sa našim CSS-om, moramo našem modulu dati prilagođenu CSS klasu. Na kartici napredno dodajte sljedeću CSS klasu:
- CSS klasa: et-blog-css-grid
Kreiranje izgleda sa više kolona pomoću CSS Grid-a
Sada kada je naš blog modul postavljen sa izgledom preko celog ekrana, spremni smo da dodamo naš prilagođeni CSS.
Ubacićemo modul Code ispod modula Blog da bismo dodali CSS na stranicu.
U polje za unos koda dodajte potrebne oznake stila za premotavanje 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 red CSS-a predstavlja sadržaja (ili modula) u obliku mreže.
display: grid;Druga linija 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 trenutku, mreža sa pet stupaca je spremna za rad. U stvari, ako ne želite da koristite paginaciju ili ivice za svoje postove na blogu, možete stati ovdje.
Evo dosadašnjeg rezultata.
Prilagodite stavke mreže
Zatim možemo dodati nekoliko redova CSS-a koji ciljaju na elemente mreže tako da budu poravnati na vrh svakog reda i imaju neki padding.
.et-blog-css-grid .et_pb_post {
align-self: start;
padding: 15px;
}
Uklonjena paginacija mreže
Trenutno, ako imate aktivnu paginaciju na blog modulu, ona će se tretirati kao posljednji element mreže u CSS mreži. Da bismo u potpunosti uklonili paginaciju iz mreže, možemo joj dati apsolutnu poziciju i postaviti je direktno 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%);
}
Da vidimo rezultat do sada!
Savjet: prilagodite veličinu svih istaknutih slika (ili sličica)
U ovom trenutku možete primijetiti nedosljednost u visini slika prikazanih na svakom blogu. Ako želite da svi budu iste visine, možete koristiti i dodatni CSS da to učinite.
.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;
}
Sa gornjom unutrašnjom marginom od 56,25%, trebali bismo dobiti omjer širine i visine od 16:9 za sve naše slike.
Slobodno prilagodite padding na kontejneru za slike kako biste dobili omjer širine i visine slike koji želite.
Konačni rezultat
A evo konačnog pregleda našeg blog modula sa našim novim kolonama i mrežom. I kao što možemo vidjeti, mreža je u potpunosti osjetljiva.
Preuzmite DIVI sada!!!
zaključak
Urađeno je! Pokazali smo vam u ovom vodiču kako da uredite svoje postove na blogu u kolonama.
Bili smo u mogućnosti da restrukturiramo cijeli modul Divi Bloga u fluidan raspored od pet kolona. Nadamo se da će vam ovo uštedjeti vrijeme i dati vam više opcija za kreiranje prekrasnih stranica bloga. Takođe možete konsultovati Kako kreirati stranicu bloga sa Divi's Blog modulom
Vidi takođe naši resursi, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem o Izrada bloga WordPress ili onaj on Divi: najbolja WordPress tema svih vremena.
Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.
