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.
Summary
The Blog module of Divi is a module aimed at displaying content on your WordPress website. You can use the module to display blog posts, pages, to custom post types. Some built-in styling options are available to decorate elements like texts and images. One setting option that is not available is the option to set the gap between text elements like post title, post meta, to post excerpt.
Until the built-in setting option to set gap between text elements is available, you can use custom CSS to achieve what you want, as we have just elaborated above.
