Not currently accepting new projects | Click here to join the waitlist!

Boutique Web Design Services for Las Vegas Small Businesses and Beyond

Las Vegas Boutique Web Design Services

How to Adjust Divi Blog Module Spacing

by | Design & Development

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

How to adjust the spacing between the feature image and title in the Divi blog module - Step 1. 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

How to adjust the spacing between the feature image and title in the Divi blog module - Step 3. Select the Custom CSS tab

When you arrive to the Advanced area, select the “Custom CSS” drop down.

Step 4. Select the Free-Form CSS tab

How to adjust the spacing between the feature image and title in the Divi blog module - Step 4. Make sure you are in 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

How to adjust the spacing between the feature image and title in the Divi blog module - Step 5. Add your CSS

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.

How to adjust the spacing between the feature image and title in the Divi blog module - The default spacing between the featured image and title of the Divi blog module
Default spacing between featured image and title
50 px margin-bottom
10px margin-bottom
How to adjust the spacing between the feature image and title in the Divi blog module - 20px spacing between the featured image and title of the Divi blog module
20px margin-bottom

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

Submit a Comment

Your email address will not be published. Required fields are marked *

About the Author

Vivian is the owner, designer, and developer behind Desert Rose Design & Photo Co., a web design and website marketing business based in Las Vegas, NV. In addition to honing a decades-old passion for crafting websites, she enjoys creating helpful content for small business owners.

Helpful Articles for Small Businesses

Do I Need a Website?: Signs Your Small Business Needs One

Do I Need a Website?: Signs Your Small Business Needs One

If you read my article "Why Have a Website?: 8 Benefits of Having One", you already understand the many advantages of having a website as a small business owner. However, this article digs deeper into the question of whether you yourself actually need a website. Every...

Best Stock Photo Websites for 2025: Paid & Free Stock Images

Best Stock Photo Websites for 2025: Paid & Free Stock Images

As a small business owner, getting your website looking and functioning its best is of utmost importance. Honestly, having the right imagery can make or break your website. I recommend using professional, high-quality images either through your own product and/or...

How to Verify Domain Ownership on Google Search Console

How to Verify Domain Ownership on Google Search Console

One big mistake that some small business owners make is thinking that once their website is up and running, they are all done. Nothing could be further from the truth! Post-launch, small business owners should continuously be analyzing their website performance and...