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

Divi Builder comes with a module called Blog which is intended to display blog posts on your website. You can use the module when creating a custom homepage, custom category page, or other pages where you need to display the blog posts. When adding a Blog module to a page, you can style it up to make it more compelling. Unfortunately, the styling options offered by Divi Builder for the Blog module 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 the layout is set 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.

You can the code snippet above to Divi Cloud if you often create new WordPress websites with Divi. You can then access the code on any website you build with Divi. This way, you can save lots of time.