By default, the Divi Theme Blog Grid is limited to three columns. Bummer. Let’s add another for this look:

divi blog grid

This is easy with a minor theme tweak and the addition of a CSS Snippet.

Firstly, assuming you are in the Blog Module and have selected Grid for your blog style, click the Advanced tab and add the class: cu-blog as seen below:

divi theme blog class

Save your work, then head over to: Appearance >>> Customize >>> Additional CSS. Add this CSS Snippet:

.cu-blog .et_pb_salvattore_content[data-columns]::before {
content: '4 .column.size-1of4' !important;
}
@media only screen and ( min-width: 981px ) {
.cu-blog .column.size-1of4 {
   width: 24%!important;
   margin-right: 1%;
}
}

Of course, you can play around with my values above to achieve your desired results – width, columns, etc.

Additionally, the Divi Blog Grid Module displays as Mosaic rather than uniform heights as in my example image above. To “fix” this, head over to my earlier tutorial: Divi Theme Blog Grid

That’s all, folks! If you need assistance, just call The WordPress Guy!

Share This