How to create Blog Carousel in Divi

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!

How to access the Divi Supreme Blog Carousel Module

To use the Divi Supreme Blog Carousel Module, you need to purchase the Pro version of our plugin at the cost of $40 for one website and $79 for unlimited sites. Both plans come with a 30% discount on renewals while we also offer you premium support and free updates during the licensing period. Want a more lasting plan? We also offer a Lifetime plan which goes for only $199. With it, you can install Divi Supreme Pro on unlimited websites while you also enjoy premium support and free updates forever.

Our goal is to assist you to create beautiful and effective business websites without impacting negatively on user experience.

So, give Divi Supreme Pro a try today and don’t forget to share your experience with the Divi Supreme Blog Carousel Module in the comments section below.

Or try out the Divi Supreme Lite

Divi Supreme Lite Offers 18 Modules and 3 Beautiful Extensions and using them you can easily extend your site’s functionality.

Get Access To All Divi & Divi Supreme Tips

Get access to all our Divi and Divi Supreme’s tips, articles and cutting-edge helpful tutorials that are easy to understand for small businesses, bloggers, and non-techy Divi website owners, direct to your inbox.

3 Comments

  1. Joerg Baaden

    Great!!!!

    Reply
  2. Eric

    Thanks! When do you think you’ll add the custom post type’s? Kind regards,

    Reply
    • Divi Supreme

      Hi Eric,

      Actually the post carousel module is meant for this. We have released this last week but have yet to announce it yet. Make sure you’re on the latest version and you’re good to go 😀

      Reply

Submit a Comment

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

ten + 12 =