How To Create Blog Post Carousel in Divi?

Team DiviFlash

Updated: August 28, 2023
Table of Contents

Post carousel is a great way to display your blog posts. Besides creating an engaging layout, it lets you showcase multiple blog posts within a shorter area. 

But, many Divi users miss out on this opportunity as it lacks this functionality. So, how to create a blog post carousel in Divi?

Take the query above. We put our effort into finding the most effective solution. Although a lot has been offered, most don’t have the luxury of a flexible Divi building experience.

Nonetheless, we find that the DiviFlash Post Carousel module comes out with this feature. This module can potentially take your blog posts page to the next level. Take this design, for instance.

We didn’t have any obstacles while designing this intuitive post carousel with the DiviFlash module. Particularly, adding the title, category, author, date, and many more was simple through the child items. Moreover, we didn’t have to insert any code for the coverflow carousel type. Quite surprising! Check out the demo and download it to learn more. 

You will find it a lot easier if you go through this step-by-step design process of the blog post carousel on the Divi website. So don’t miss out and confirm the requirements below.

Prerequisite:

  1. Install the latest version of the Divi theme.
  2. Latest version of the DiviFlash Plugin

If you are done with the prerequisites, jump to your Divi builder. 

How to Make Post Carousel in Divi

Let’s get started. Using the visual builder, add a regular section to an existing page or on a new page. And open up the section setting.

Section Design

Once you are inside the section, add a background color. Also, keep other settings as their default.

In the Content Tab,

Under Background option,

  • Background Color: #faf4ed

Row Design

Insert two rows for this design. Both will be single-column rows. Here, increase the max width for the second row. Otherwise, you don’t have to customize the row settings anymore. Next, move to the modules part.

In the Design Tab,

Under Sizing Options,

  • Max Width: 1400px

Divi Modules

According to our design, we are going to use three modules. There will be two text modules in the first row. Beneath them, you will find the DiviFlash Blog Carousel module in the second row.

1st-Text Module

We are using the first text module for this blog post carousel heading. In this case, the text is heading 2. See below how we have adjusted our text customization.

In the Content Tab,

Under Text option,

  • Body: About Travelling (Heading 2)

In the Design Tab,

Under Heading Text option,

  • Heading Level: H2
  • Heading 2 Font: Nunito
  • Heading 2 Font Weight: Bold
  • Heading 2 Text Alignment: Center
  • Heading 2 Text Color: #3a3a3a
  • Heading 2 Text Size: 48px (Desktop), 32px (Mobile)

Now we will add our second text module.

2nd-Text Module

Now in the second text module, some text customization is similar to the previous one. Further, we will add custom width and align the module to the center. 

In the Content Tab,

Under Text option,

  • Body: Dummy Text

In the Design Tab,

Under Text Option

  • Text Font: Poppins
  • Text Text Color: #918e9a
  • Text Text Size: 16px
  • Text Alignment: Center

Under Sizing Option,

  • Width: 80% (Desktop), 100% (Mobile)
  • Module Alignment: Middle

That’s all the text module. Next, we will add the DiviFlash Post Carousel Module.

Post Carousel Module

Set the Post Carousel Module in the second row. We will adore our blog post slides with several child items. You can see our used child items in the picture below.

Clicking the (+) icon above “Add New Post Element” will bring up post element settings. Here you can add the preferred child item from the dropdown of the select type under the Element option. Customizing the child item is flexible, as its settings look like the default Divi module settings.

After finishing child time customization, hit the right icon in the green box below. Then, you will go back into the module settings. Add your next child item in the same way. 

Now, it’s time to add child items. In our design, you can see many child items for different purposes. Let’s look at each one.

Post Image: Use this child item to display your post image in the slider. The only change we do here is to add some margin to the bottom and decrease it to the left & right.  

In the Design Tab,

Under Spacing option,

  • Margin: 20px (Bottom), -30px (left/right)

Post Categories: This child item can be used to show the category for your post. In our case, we have added background color, styled text, & other customizations.

In the Content Tab,

Under Background option,

  • Background Color: #ffb435

In the Design Tab,

Under Text Styles Option

  • Text Font: Nunito
  • Text Font Weight: Bold
  • Text Font Style: TT
  • Text Text Color: #30304f
  • Text Text Size: 12px

Under Spacing Option,

  • Padding: 2px (Top), 10px (Left/Right)

Under Border Option,

  • Rounded Corners: 3px (All Sides)

Post Title: This is where we will customize our post title. See the breakdown below.

In the Design Tab,

Under Text Styles Option

  • Text Font: Nunito
  • Text Font Weight: Bold
  • Text Text Color: #000000
  • Text Text Size: 24px (Desktop), 18px (Tablet)
  • Text Line Height: 30px

Post Content: We are using this child item to exhibit our post summary in the slider. According to the design, the default excerpt length has been decreased by 120 characters in the content tab. Then, move to the design tab and make the following changes.

In the Design Tab,

Under Text Styles Option

  • Text Font: Nunito
  • Text Text Size: 13px

Post Author: With this child item, you can show the author’s image of the blog post. To do that, we are enabling the author image option and increasing its size to 32. Also, hide the author text. Next, go to the design tab.

In the Design Tab,

Under Spacing Option,

  • Margin: 10px (Right)

Custom Text: This child item lets you write something in the slider. Here our custom text is “by.” Below, you can see how we customized this time.

In the Design Tab,

Under Text Styles Option

  • Text Font: Nunito
  • Text Text Color: #000000
  • Text Text Size: 11px

Post Author: We are using this child item again. This time we will use it for adding the author’s name. Let’s see how to do it.

In the Design Tab,

Under Text Styles Option

  • Text Font: Nunito
  • Text Font Weight: Ultra Bold
  • Text Font Style: TT
  • Text Text Color: #ffb435
  • Text Text Size: 12px

Under Spacing Option,

  • Margin: 50px Right (Desktop), 25px Right (Tablet)

Published Date: The last child item on our list is the published date. As the name suggests, it will show the post-published date. We also style the date here.

In the Design Tab,

Under Text Styles Option

  • Text Font: Nunito
  • Text Font Weight: Semi Bold
  • Text Text Color: #000000
  • Text Text Size: 12px

Under Transform Option,

  • Transform Translate: 33px (Horizontal Right) 

So we have added all the child items for our design. But, don’t leave the content tab of the parent module. Here make the following changes as well. 

In the Content Tab,

Under Post Setting Option,

  • Post Count: 6

Under Carousel Setting Option,

  • Carousel Type: Coverflow
  • Max Slide Desktop: 4
  • Spacing: 0px

Now enables options below.

  • Centered Sliders: ON
  • Loop: ON
  • Arrow Navigation: ON
  • Equal Height Item: ON

Note here that when you choose the coverflow carousel, it adds an advanced setting option.

Under Advanced Setting Option,

  • Slide Rotate in Degrees: 0
  • Stretch Space Between Slides: 2
  • StreDepth Offset in (Px): 150

Under Item Background Option,

  • Background Color: #ffffff

We are done with the content tab. Afterward, go to the design tab. Here, we will expand the item outer wrapper radius and customize the arrows. See below to know more:

In the Design Tab,

Under Item Outer Wrapper Option,

  • Item Rounded Corners: 5px (All Sides)
  • Box Shadow- 1st One
  • Shadow Color: rgba(0,0,0,0.2)

Under Arrows Option,

  • Arrow Icon Color: #000000
  • Arrow Background: #ffb435
  • Arrow Position: Bottom
  • Arrow Alignment: Center
  • Arrow Previous Margin: 10px (Right)
  • Arrow Next Margin: 10px (Left)

Under Spacing Option,

  • Container Padding: Desktop= 30px (Top), 72px (Bottom), Mobile= 29px (Top/Bottom)
  • Blog Item Inner Wrapper Padding: 15px (Bottom),30px (Left/Right)

Finally, we are done with all the steps. Hit the “Save” button in the bottom right and exit the visual builder to see the post carousel. We really like our amazing coverfllow carousel. Further, it was an effortless experience with the DiviFlash module. Now we are explaining more reasons behind our satisfaction.

Why Choose DiviFlash to Create a Blog Post Carousel in Divi?

The DiviFlash Post Carousel module isn’t a traditional design element. But what makes it unique is its powerful functionalities that allow you to control the carousel fully. So now let’s see what you will get.

  • Eleven post elements to decorate the carousel.
  • Make accurate distances with custom spacing.
  • Inner and outer wrapper customization.
  • Overlay & image scale animation effects.
  • Organize your posts by tags, categories, and times.

Your Turn

So we have shown you how to create a blog post carousel in Divi. Now it is time to make your move. Hopefully, you will find this tutorial helpful. 

And don’t hesitate to contact us if you have questions about your blog carousel in Divi. We have some Divi experts on our side. Just let us know in the comment box. 

Team DiviFlash

At DiviFlash, we are more than just a team – we are a collective of Dev Experts, Word Artists, Design Virtuosos, and Marketing Maestros, all united by our profound expertise in Divi and WordPress. Our mission is to provide you with accurate, insightful, and in-depth content aimed at enriching your understanding of Divi, WordPress, and the art of web design.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *