How to Create Blog Post Carousel in Divi (Step-by-Step)

Want to show you blogs in an interactive carousel format in Divi?

Although Divi doesn’t have a built-in option for this, you can achieve it using the Divi Blog Carousel module by DiviGear.

In this guide, we will show you how to create blog post carousel in Divi in 6 simple steps.

Preview of Our Created Blog Post Carousel

Take a quick look at the blog post carousel we are going to build with Divi Blog Carousel module:

Required Setup

• Divi theme is installed and activated.
• Divi Blog Carousel is installed and activated.

Step 1: Create Your Blog Posts

Start by creating the blog posts you want to feature in your carousel. For a consistent design, make sure each post includes elements like a featured image and text content.

Note: If necessary, check the WordPress guide on creating a blog post.

Step 2: Adjust Row Settings

Once your blog posts are ready, it’s time to configure the carousel layout. Start by adding a section and a row, then adjust the row settings as follows:

• Click on the row settings icon.
• Navigate to the Design tab and update the Sizing settings:
  • Width: 89%
  • Max Width: 89%

• Go to the Advanced tab, click on CSS ID & Classes, and enter the following class in the CSS Class field:

“ et_pb_row_fullwidth”

Step 3: Insert Divi Blog Carousel Module

With the row configured, it’s time to add the carousel module itself:=

• Click on the module insert button (black “+” icon.)
• Search for the “Divi Blog Carousel” module and add it to your page/post.

Step 4: Configure Post Element Visibility Settings

In the “Content” tab, click on “Elements” and then make the following changes:

• Excerpt Length: 150
• Show Categories: Disable it 
• Read More Button: Enable it

Step 5: Make Carousel-Related Customization

After adjusting post elements, click “Carousel Settings” to configure the following settings:

• Show items xLarge: 5 Columns
• Item Spacing: 40
• Arrow Navigation: Enable it
• Center Slide: Enable it
• Loop: Enable it 
• Autoplay: Enable it 
• Equal Height: Enable it

Step 6: Customize Blog Carousel’s Appearance

To customize the blog carousel’s appearance, you have to follow the below instructions:

6.1: Change Module’s Background Color

• In the “Content” tab, click on “Background” and add this color: #ffffff

Next after changing the background color, head over to the “Design” tab to style your blog carousel.

6.2: Customize Meta Information

Scroll down and click on “Meta,” where you will see three sub-tabs. Inside each tab, you have to make the following changes:

• Meta:
  • Use meta icon: Enable it
  • Meta Text Color: #8e8e8e
  • Meta Text Size: 13px
  • Meta Line Height: 2em
• Author:
  • Author On Top: Enable it
  • Author Background Color: rgba(0,0,0,0.81)
  • Author Top Font Weight: Bold
  • Author Top Font Weight: Uppercase
  • Author Top Text Color: #ffffff
• Date:
  • Date On Top: Enable it
  • Date Background Color: #29c4a9
  • Date Separator Color: #ffffff
  • Date Font: Fira Sans
  • Date Font Weight: Medium
  • Date Text Color: #ffffff
  • Date Line Height: 1.6em

6.3: Customize Button

In the Design tab, click on “Read More” and then make the following changes:

• Use Icon: Enable it and select an icon
• Background: rgba(255,255,255,0)
• Read More Font: Fira Sans
• Read More Text Color: #29c4a9

6.4: Customize Button Next and Previous Button

Click on “Next & Prev Button” and then make the following changes:

• Next & Previous Color: #ffffff
• Next & Previous Background Color: #29c4a9
• Show on Hover: Enable it
• Position: Top
• Alignment: Right

6.5: Add Custom Spacing 

In the Design tab, scroll down to find “Custom Spacing.” Click on it and you will see three different sub-tabs.

You have to make the following changes in these tabs:

• Container: 
  • Inner Container Padding: 36px (top and bottom)
• Content: 
  • Content Margin: – 49px (top), 21px (left and right)
  • Content Padding: 33px (top), 29px (left and right)
• Button: 
  • Button Margin: 10px (top)

Note: If you have any questions regarding this module’s settings, refer to Divi Blog Carousel Module documentation for clarification.

Final Preview of Our Created Blog Post Carousel

If you have followed all our provided steps from one to six, you must be able to create a blog post carousel similar to this:

Conclusion

By now you might know how to create blog post carousel in Divi. Since Divi doesn’t have a blog carousel module, we used the Divi Blog Carousel plugin that is dedicatedly made for blog post carousels.

This plugin also has a lot of free pre-made templates that you can use for your own projects. As a matter of fact, we demonstrated the creation process using one of the demo designs.

Now the choice is yours. Get the plugin for $39 (lifetime) for unlimited sites and start creating stunning blog post carousels today!