Dëshironi të shfaqni faqen tuaj të blogut DIVI si një rrjet me shumë kolona?
Moduli Divi's Blog mund të shfaqë postimet e blogut në një plan urbanistik me gjerësi të plotë ose në rrjet. Nëse zgjidhni paraqitjen e rrjetit, numri maksimal i kolonave që mund të keni është tre.
Në këtë tutorial, me vetëm disa fragmente CSS, blogun tuaj do të kthehet në një plan urbanistik të bukur me shumë kolona. Plus, kolonat do të jenë të lëmuara dhe të përgjegjshme në të gjitha madhësitë e shfletuesit, kështu që nuk duhet të shqetësoheni për përditësimin e atyre pyetjeve të medias ose cilësimeve të përgjegjshme.
Ju gjithashtu mund të konsultoni artikullin tonë për të ditur Si të krijoni një faqe blogu me modulin DIVI Blog.
studim
Përpara se të hidhemi në këtë tutorial, le të hedhim një vështrim në rezultatin që duam të arrijmë.
Shkarkoni DIVI tani!!!
Konfigurimi i një moduli Blog me një plan urbanistik në ekran të plotë
Moduli i Blog DIVI mund të përdoret për të shtuar një blog kudo në tuaj Site Web. Me të vërtetë e bën të lehtë krijimin e një faqe blogu në Divi. Gjithçka që duhet të bëni është të shtoni një modul Blog në faqe duke përdorur Divi Builder.
Për këtë tutorial, ne do të përdorim një plan urbanistik të parapërgatitur nga një prej tyre paketat e paraqitjes falas i DIVI i cili tashmë përmban një modul Blog me një stil bazë.
Për të ngarkuar paraqitjen e parapërgatitur të blogut:
- Krijoni një faqe të re nga pulti i WordPress
- Jepni një emër përkatës dhe klikoni në 'Përdor Divi Builder'
- Klikoni në "Zgjidhni paraqitjen"
- Shkruani në shiritin e kërkimit 'Fashion Designer' dhe zgjidhni paraqitjen 'Fashion Designer Blog Page'
- Sigurohuni që të zgjidhni paraqitjen e blogut dhe më pas klikoni në "Zgjidhni paraqitjen"
Pasi të ngarkohet faqosja, gjeni modulin Blog që përdoret për të shfaqur postimet e blogut dhe hapni cilësimet.
Cakto numrin e postimeve
Në cilësimet e blogut, përditësoni përmbajtje për të kufizuar numrin e postimeve në 10. (Kjo është kryesisht për arsye estetike, pasi rrjeti ynë përfundimisht do të përfshijë dy rreshta me pesë postime në blog.)
- Numri i pozicioneve: 10
Zgjidhni paraqitjen e ekranit të plotë
Meqenëse ne do të shtrojmë blogun tonë në kolona duke përdorur CSS Grid, duhet të sigurohemi që faqosja e modulit Blog është 'Ekrani i plotë' (jo 'Rrjeti'). Kjo do të sigurojë që postimet e blogut të grumbullohen vertikalisht në rendin e tyre normal të faqeve.
Për të ndryshuar paraqitjen e modulit Blog, hapni cilësimet e modulit dhe nën skedën Style hapni menunë rënëse Modeli dhe zgjidhni Ekrani i plotë .
Tani çdo postim në blog do të përfshijë gjerësinë e plotë të kolonës (ose kontejnerit prind).
Le të shtojmë një kufi në postimet në blog. Përditësoni opsionet e kufirit si më poshtë:
- Gjerësia e kufirit: 1 px
- Ngjyra e kufirit: rgba (150,104,70,0.35)
Shtimi i një klase të personalizuar CSS në modulin Blog
Në mënyrë që të synojmë në mënyrë efektive këtë modul të veçantë Blog (jo një tjetër) me CSS-në tonë, ne duhet t'i japim modulit tonë një klasë të personalizuar CSS. Nën skedën e avancuar, shtoni klasën e mëposhtme CSS:
- Klasa CSS: et-blog-css-grid
Krijimi i paraqitjes me shumë kolona me CSS Grid
Tani që moduli ynë i Blog-ut është konfiguruar me një plan urbanistik me ekran të plotë, ne jemi gati të shtojmë CSS-në tonë të personalizuar.
Ne do të fusim një modul Kodi nën modulin Blog për të shtuar CSS në faqe.
Në kutinë e futjes së kodit, shtoni etiketat e nevojshme të stilit për të mbështjellë çdo kod CSS të shtuar në një faqe.
Brenda etiketave të stilit, ngjitni fragmentin e mëposhtëm të kodit CSS:
.et-blog-css-grid > div {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
Rreshti i parë i CSS paraqet përmbajtje (ose module) në formë rrjeti.
display: grid;Rreshti i dytë i CSS përcakton modelin e kolonës së rrjetit.
grid-template-columns : repeat(auto-fill, minmax (200px, 1fr));Rreshti i tretë përcakton hapësirën midis artikujve të rrjetit.
gap : 20px ;Në këtë pikë, rrjeti i përgjegjshëm me pesë kolona është gati për të shkuar. Në fakt, nëse nuk dëshironi të përdorni faqet ose kufijtë për postimet tuaja në blog, mund të ndaleni këtu.
Këtu është rezultati i deritanishëm.
Personalizo artikujt e rrjetit
Më pas mund të shtojmë disa rreshta CSS që synojnë elementët e rrjetit në mënyrë që ato të jenë të rreshtuara në krye të çdo rreshti dhe të kenë pak mbushje.
.et-blog-css-grid .et_pb_post {
align-self: start;
padding: 15px;
}
U hoq faqet e rrjetit
Aktualisht, nëse keni faqezim aktiv në modulin e blogut, ai do të trajtohet si elementi i fundit i rrjetit në rrjetin CSS. Për të hequr plotësisht faqetimin nga rrjeti, mund t'i japim një pozicion absolut dhe ta vendosim direkt poshtë modulit të blogut. Për ta bërë këtë, shtoni CSS-në e mëposhtme:
.et-blog-css-grid > div > div {
width: 100%;
position: absolute;
bottom: 0;
transform: translate(0%, 150%);
}
Le të shohim rezultatin deri tani!
Këshillë: rregulloni madhësinë e të gjitha imazheve të paraqitura (ose miniaturave)
Në këtë pikë, mund të vini re mospërputhjen në lartësinë e imazheve të paraqitura në çdo postim në blog. Nëse dëshironi që të gjithë të kenë të njëjtën lartësi, mund të përdorni gjithashtu CSS shtesë për ta bërë këtë.
.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;
}
Me një diferencë të lartë të brendshme prej 56,25%, ne duhet të marrim një raport pamjeje prej 16:9 për të gjitha imazhet tona.
Mos ngurroni të rregulloni mbushjen në kontejnerin e imazhit për të marrë raportin e pamjes që dëshironi për imazhin tuaj.
Rezultati përfundimtar
Dhe këtu është një vrojtim përfundimtar i modulit tonë Blog me kolonat dhe rrjetin tonë të ri. Dhe siç mund ta shohim, rrjeti është plotësisht i përgjegjshëm.
Shkarkoni DIVI tani!!!
Përfundim
Ajo është bërë ! Ne ju kemi treguar në këtë tutorial se si t'i rregulloni postimet tuaja në blog në kolona.
Ne ishim në gjendje të ristrukturonim të gjithë modulin Divi Blog në një plan urbanistik të lëngshëm me pesë kolona. Shpresojmë që kjo t'ju kursejë kohë dhe t'ju japë më shumë mundësi për të krijuar faqe të bukura në blog. Ju gjithashtu mund të konsultoheni Si të krijoni një faqe Blog me modulin Divi's Blog
Shih gjithashtu burimet tona, nëse keni nevojë për më shumë elemente për të realizuar projektet tuaja të krijimit të faqeve në Internet, duke u konsultuar me udhëzuesin tonë për Krijimi i blogut të WordPress ose atë më Divi: tema më e mirë e WordPress të të gjitha kohërave.
Por në ndërkohë, ndajeni këtë artikull në rrjetet tuaja të ndryshme sociale.
