How to Display Blog Posts in a List Style in Divi Builder

Divi Builder comes with a module called Blog which is aimed at displaying blog posts on your website. When adding a Blog module to a page, you can style it up to make it more compelling.

Unfortunately, the styling options the module has are limited enough. You can’t, for instance, set the module to display the blog posts in a list style.

If you want to display blog posts in a list style, this article will show you how.

How to Display Blog Posts in a List Style in Divi Builder

There are probably some Divi Builder extensions out there that you can use to display blog posts in a list style. But since most Divi Builder extensions are not free, you need to spend extra money. This article will show you the free solution: by adding custom CSS.

First, prepare a section — as well as a row — you want to add the Blog module to. Once they are ready, add the Blog module by clicking the grey plus icon on the canvas area.

On the Blog settings panel (which appears right after you add the Blog module), go to the Design tab and open the Layout block. Make sure to set the layout to Fullwidth.

Next, go to the Advanced tab and open the CSS ID & Classes block. Paste the CSS id left-blog-image to the CSS Class field.

Close the settings panel. Before doing so, make sure to click the green checklist icon on the bottom-right corner to apply the changes.

The next step, add the Code module beneath the Blog module (make sure to add the Code module to the same column as the Blog module). Paste the following code to the Code field on the Text block under the Content tab.

The CSS code:

<style>
@media (min-width: 981px) {
  .left-blog-image .et_pb_post .entry-featured-image-url {
    float: left;
    width: 100%;
    max-width: 150px;
    margin: 0 20px 30px 0;
}
  .left-blog-image .et_pb_post {
    margin-bottom: 20px !important;
  }
}
</style>

You can modify the code above according to your needs. To set the image (thumbnail) size, you can replace the value on the max-width property. To set the space between the image and the text, you can replace the value on the margin property.

If you want to set the excerpt length, you can open the Blog settings panel. You can set the excerpt length on the Excerpt Length option on the Content block under the Content tab.

If you often create new WordPress websites with Divi, you can save the code snippet above to Divi Cloud in order to be able to access it on any website you build with Divi. This way, you can save lots of time.

The Bottom Line

The Blog module of Divi is aimed at displaying content on your website. While it is primarily used to display blog posts, you can also use it to display other content types. From page to custom post type.

The built-in styling options that the Blog module offers are limited, though. There is no option to display content in a list style by default. So, you need to add custom CSS to achieve it.