Do you use Divi on your WordPress blog? That’s great. One of the advantages of using Divi is that you don’t need to install many plugins to add certain features on your website. Its built-in page builder — Divi Builder — comes with handy modules to create contact form to post feed. Speaking of post feed, the module you can use is called the Blog module.
Not only you can use the Blog module of Divi to display default content of WordPress such as pages and posts, but you can also use it to display custom post types, regardless of the plugin you use to create them. On the Blog module itself, you can enable content elements like featured image, post title, post excerpt, and post meta. And of course, you can also apply some settings to style up the Blog module.
Setting the Gap Between Text Elements in Divi Blog Module
While there are plenty of styling options you can apply to style up the Blog module of Divi. There is one thing you can’t do: to set the gap between text elements.
As mentioned above, you can enable the content elements on the Blog module. From featured image/post thumbnail, post title, post excerpt, to post meta. By default, these elements are stacked with the following order:
- Featured image
- Post title
- Post meta
- Post excerpt
Although Divi offers no built-in setting option to set the gap between text elements (post title, post meta, and post excerpt), you can achieve it via custom CSS. To do so, first, open the Blog module settings panel. Once the panel opens, go to the Advanced tab and open the Custom CSS block.
Scroll down and you will find three fields dedicated to placing the CSS code of the text elements of the Blog module.
- Title: To place the CSS code of post title
- Body: To place the CSS code of the post excerpt
- Post Meta: To place the CSS code of the post meta
To set the gap itself, you can use either the
margin-bottom CSS property or
margin-top CSS property. You can then set the value you want. For instance, if you want to set a 5px gap between the post title and post meta, you can either type
margin-bottom:5px; on the Title field or
margin-top:5px; on the Post Meta field. Similarly, if you want to add a 5px gap between the post meta and post excerpt, you can type either
margin-bottom:5px; on the Post Meta field or
margin-top:5px; on the Body field.