In Divi there are 3 Blog Module Grids which are generated by default, and we can make it to show it in 4 or 5 columns. Try the following method to show 5 blog posts.
- Create a new section
- open the section setting
- assign a css id (say “customblog”)
- add ¼ + ¾ column structures in the section
- add blog module to the ¼ section in grid mode and leave empty ¾ section
- and add the given code to the custom css field of epanel
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#customblog .et_pb_column.et_pb_column_1_4 { width: 100%; } #customblog .et_pb_blog_grid .et_pb_post { float: left; margin-right: 1%; max-width: 19%; margin-bottom: 10px; } #customblog .et_pb_blog_grid .et_pb_post:nth-child(5n+1) { clear: both !important; } |
This will generate 5 columns in Divi Blog Module Grid.
You May Also Like
- Tested on Divi Version 2.5.8
Excellent. How about if I want a 3 column grid + a sidebar to the right?
Lollo,
I have the same question, did you figure it out?
Did anyone find a solution to this? Thanks!
How about if I want a 3 column grid + a sidebar to the right?
To achieve 3 columns with a sidebar, do the following:
1. add ¼ + ¼ + ¼ + ¼ column structures in the section
2. add blog module to the first column, leave 2nd and 3rd column blank then add sidebar to 4th column.
3. Paste the code below:
https://gist.github.com/ArchangelGabriel/799016a7f763ad1ce2b223d011f7d4e4
Thanks, these works.
However If you need to adjust this on mobile and tablet devices I say you wrap the CSS codes inside a media query that will only target desktop devices like @media only screen and (min-width:1200px){ // the code from https://gist.github.com/ArchangelGabriel/799016a7f763ad1ce2b223d011f7d4e4 goes here // }
default appearance of the blog module for mobile is already good so the custom codes need to be only applied in desktop devices or tablet devices.
Hello,
Sorry for the delay in reply as i was little busy with some of my other works.
Do you need any further help on this?
Hi,
We haven’t yet found a solution on this one.
Thanks!
Lollo
What I wanted was to do something like http://www.desiringgod.org/ but I couldn’t figure out the css to get a fourth collumn so I settled for http://www.milesfranklin.com/blog/ if you have a solution that would be fantastic!
Thank you! Great help.
Great article. But what about 4 columns grid blog?
@Masud
Hi,
Please try adding following css
#customblog .et_pb_column.et_pb_column_1_4 {
width: 100%;
}
#customblog .et_pb_blog_grid .et_pb_post {
float: left;
margin-right: 1%;
max-width: 24%;
margin-bottom: 10px;
}
#customblog .et_pb_blog_grid .et_pb_post:nth-child(4n+1) {
clear: both !important;
}
Thank you so much.
@Masud Rana
Glad to help you!! 🙂
I try adding following your css, but in mobile style, it’s fail. My site : http://www.dauduamientay.com
please help me, sorry for my english
#customblog .et_pb_column.et_pb_column_1_4 {
width: 100%;
}
#customblog .et_pb_blog_grid .et_pb_post {
float: left;
margin-right: 1%;
max-width: 24%;
margin-bottom: 10px;
}
#customblog .et_pb_blog_grid .et_pb_post:nth-child(4n+1) {
clear: both !important;
}
Hi @Nguyen Hang
I checked your site on mobile and it is looking fine for me. Is there anything else I can help you with?
Hi,
I have followed you instructions for a 4 column blog module.
I used the css you gave to masud, however, I only have 4 tiles showing per row. I reduced the max-width of #customblog to 20%, but the next tile still didn’t float to the row above.
Could you please offer advice?
Hi Dani,
Could you please share the url? It is little difficult to replicate the issue without checking it live.
Hi,
Sorry, I pasted it into the website field when I submitted my comment, but that doesn’t display it. It’s http://visionhall.com/test-custom-blog/
Please rmeove the previous soluttion and try adding this css for 5 cols
@media only screen and ( min-width: 981px ) {
.et_pb_column .et_pb_blog_grid[data-columns]::before { content: ‘4 .column.size-1of4’ !important;
}
.et_pb_column .column.size-1of4 {
width:19% !important;
margin-right:1%;
}}
Hi,
I have done as you suggested, but it still doesn’t work. I am running WordPress 4.6.1 and Divi 3.0.21, in case that affects any of your css?
Hi Elegant Enthusiast
Great solution.
All works fine when I have 5 or more posts in a blog category. But I have a category that has only one post and it reduces the size of the image. Please help?
I also have 2 other minor issues. I would like the images to be portrait based on 448 height and 299 width derivatives. And how to do I remove the except Protected: Name there is no except because this is a protected post.
Any help is greatly appreciated.
NOTE: – This is an adult site but not pronographic.
Thanks Darren
Hi,
This blog is great and helped me tremendously.
However I have a problem: My blogs are have Image content and images are not the same size. When I have default functionalitiy with three cloumns, rows don’t have fixed width and blogs are neatly stacked up. When I implement your code, all rows of blogs have fixed height and there are many white spaces.
Any idea what should I change to remove fixed row height?