With the Blog Post Carousel on your site, you can easily show your Latest Posts or posts from specific categories in a cool way that attracts your visitors. If you’re looking for the same functionality in Divi, well now is your lucky day because Divi Supreme has got you covered. Using the Divi Supreme Blog Carousel Module you can easily create stunning Blog Carousels in Divi like never before.

Let’s get started

So let’s see, how, using the Divi Supreme Blog Carousel Module, you can easily create Blog Post Carousels in Divi. First of all, you’ll have to insert the Blog Carousel to where you want to show it.

Once you’ve added the module, it’s now time to set it up the way you like.

Content Panel

This is where you’ll be able to set which post categories you want to show, set the number of posts you want to show, and even choose the post type (This is currently not available – but will be added soon) and more.

Elements Panel

In the Elements Panel, you’ll be able to control what you want to show in the carousel. There are many options to talk about. You can hide or show what you like, set a custom text for the Read More button, and the best of all “Bottom Meta Elements”, this will uniquely show meta, this will show Author Gravatar Image, Author Name and Post Publish date.

Carousel Settings

Under the Carousel Settings panel, you’ll be able to control the working of the Carousel. Like you can change the Carousel slide effect (4 different effects), Change the number of columns, Enable or Disable the Autoplay function, Hide elements like Arrow, Pagination, and many other options.

After making some required changes in the Content tab we can now move to the Design tab, where we’ll be able to play around with different styling options to make our Carousel Look cool.

Post Item

The first panel, you’ll see in the design tab is Post Item. And here we can style each post Item in the carousel. You’ll be able to add Padding, Background Corner radius border, and box-shadow. Changes we made here:

• Padding – 15px 15px 15px 15px
• Background Color – #eee
• Rounded Corner – 10px 10px 10px 10px

Post Thumbnail

As the name suggests, you can style the Thumbnail/Featured Image of the Post here. You can change the height of the Image which is really a pain in the default Divi Blog Module but we don’t want you to feel it here. And else you can play around with Rounded Corners, Border, and Box Shadow. Changes we did:

• Thumbnail Height – 200px
• Rounded Corners – 10px 10px 10px 10px

Looking at the carousel, It’s already looking cool. But there is much more to style.

Post Entry Title

Under here, you’ll be the style of the Post Title. You can change the Heading tag and style the Heading the same way you do in Divi. Here are the changes we did:

• Title Font – Lato
• Title Font Weight – Bold
• Title Text Size – 20px
• Title Line Height – 1.5em

Post Entry Summary

This where you’ll be the style the Post Excerpt/Summary the way you like. For this, we’ve only changed the Font to Lato.

Post Entry Meta

If you’ve enabled the Meta in the Elements panel, like the Author, Category & Date. Then here you’ll be able to style all of them. You’ll get each meta item styling in here.

Readmore

For this, make sure you’ve enabled the Readmore button in the elements panel.

When enabled, you’ll be able to style the button in this panel the same way you style buttons in Divi.

For our example, we’re not using the Readmore button.

Navigation

Under the navigation panel, you’ll be able to style the Navigation/Arrows. You’ll have full control over how and where you want to show, which means you’ll be able to change the Horizontal and Vertical Position of arrows. Here are the changes we did here:

• Left Navigation Position – (-80px)
• Right Navigation Position – (-80px)
• Arrow Color – #fff
• Arrow background Color – #4e00d2
• Rounded Corners – 100px
• Box Shadow Vertical Position – 15px
• Box Shadow Blur Strength – 40px

Pagination

In here, we can style the Pagination/Dots. You’ll be able to change the position of dots, color, and style of the dots. Here are the changes we did:

• Pagination Color – #4e00d2 (It will adjust the opacity of in-active dots automatically even if it’s a solid color )
• Pagination Active Color – #4e00d2
•  Pagination Button Style – Default

You’ll also find three different styles for the Dots, here how it looks.

Bottom Meta Items

And this the place where you’ll be able to style the Bottom Meta Items, you’ll be able to change Author Image Width, Style Date text, style Author text, add rounded corners, border, and box-shadow to the author image. Here are the changes we made here:

• Image Width – 40px
• Date Font – Lato
• Author Font – Lato
• Author Font Weight – Bold
• Author Text Size – 17px
• Rounded Corners – 10px 10px 10px 10px (for author image)
• Box Shadow Vertical Position – 10px
• Box Shadow Blur Strength – 30px

Overlay

And lastly, we’ve got an Overlay panel, using the overlay option you’ll be able to add an overlay to the Thumbnail on hover. When you’ll enable the “Use Overlay” option, you’ll see options to choose Icon and change colors. Here are the changes we made:

• Overlay Icon Color – #fff
• Overlay Background Color – rgba(0,0,0,0.58)

And that’s it. Here’s a final look at the Blog Carousel Module. As you can see It looks really cool. And It’s a great way to showcase your Posts in a new & modern way in different places on your site. You can design Carousel in different ways using the built-in options.

So that’s it for today’s tutorial, we hope you’ll found it useful and it will help you understand the working of the Blog Carousel Module. Let us know what you think about this in the comment section below. We’d love to hear from you.

Have a great day!