Divi has so many powerful tools at your finger-tips when you are whipping up an amazing design concept. But occasionally, you’ll come across some limitations. One of the limitations that I encountered with the Blog module is that you can’t adjust the spacing between the featured image and title of a blog post in the blog module display. For me, I found the default spacing a tad too wide.
In order to fix this, you’ll need to apply a little CSS. The beauty of this is that once you get it set up with CSS, you’ll not have to think about it again, even as new blog posts are added.
In this super short tutorial, I’m going to be walking you through the steps to applying CSS to the blog module so you can have full control over the spacing between the featured image and the title for each post in the blog module. You’ll be able to adjust you Divi blog module spacing in no time!
Steps for Adjusting the Spacing Between the Featured Image and the Title in Divi’s Blog Module
Step 1. Open up the Settings for the Divi Blog module
Go to the module settings for the Blog Module by clicking the gear icon.
Step 2. Select the Advanced tab

Once you are in the Blog settings, click the Advanced tab to the right.
Step 3. Select the Custom CSS drop down

When you arrive to the Advanced area, select the “Custom CSS” drop down.
Step 4. Select the Free-Form CSS tab

When you arrive in the Custom CSS area, make sure the “Free-Form CSS” tab is selected.
Step 5. Add your CSS to the Free-Form CSS field

Here is the CSS you’ll want to add:
selector .et_pb_blog_grid .et_pb_image_container, a.entry-featured-image-url {
margin-bottom: 15px !important;
}
For the value entered in for the margin-bottom property, feel free to play around and adjust until the spacing is just how you want it. I experimented a bit, and for this particular blog, I felt 20px was the best.




And that’s it! Like I mentioned before, once you have the CSS in place for your blog, you won’t have to do anything again as new posts are added.
I hope you found this tutorial on how to adjust the Divi blog module spacing helpful. If you have any questions about this tutorial, feel free to leave a comment below or send me a message. Happy blogging!
0 Comments