The Divi Blog module effectively allows you to create beautiful and engaging blog page for your website. One of the features is the ability to display images/post thumbnails and text in a grid layout. However, by default, the text content is not vertically aligned with the image. This can make your blog posts look unprofessional and disorganized.
This article will show you how to vertically align the text content with the image in the Divi Blog module (in grid style).
How to Make Text Content Vertically Align with Image in Divi Blog Module (Grid Layout)
Adding Custom CSS
Making text content vertically align with post thumbnails in the Divi Blog module is easy. The only one you need to do is add the simple CSS snippet to your Divi Theme Options.
On your WordPress dashboard, go to Divi -> Theme Options. Once you enter the Divi Theme Options page, navigate to the General tab -> Custom CSS section.
Copy the CSS snippet below and paste it into the Custom CSS field.
/*the blog's featured image should not have negative margins*/ .et_pb_image_container { margin: 0px; } /*increase the distance between each blog article*/ .et_pb_blog_grid .et_pb_post { padding: 20px; }
The Code Explanation:
.et_pb_image_container
This class is used to select the featured images on the Blog module.
margin: 0px
There will be no space between the .et_pb_image_container
element (featured images) and its surrounding element (text content).
.et_pb_blog_grid .et_pb_post
These classes are used to select each blog post in a grid layout.
padding: 20px
There will be 20 pixels of space between each blog post in the grid layout. You can replace the padding value with what you prefer.
Once you add the CSS snippet into the Custom CSS field, apply the changes by clicking the Save Changes button.
That’s it. You can create or open your page with a Blog module to see the result.
A little note. Adding the above CSS snippet to Theme Options means applying the snippet to the entire website. In this case, every Blog module will have the same style (text content vertically align with post thumbnail). If you want to apply the CSS snippet to a specific page, you can use the Code module instead. Make sure to place the snippet between the <style></style>
tag. Example:
The Bottom Line
This article shows how easily you can align the text content vertically with the featured images in the Divi Blog module (grid layout). By replacing the element’s classes, you can use the same method (adding custom CSS) to vertically align text content with images in other Divi modules.
If you often create WordPress websites with Divi, you can use Divi Cloud for time efficiency. You can store your Divi assets (layouts, theme builder templates, code snippets, etc.) in the cloud and access any website you create.