Creating Carousels in Divi wasn’t possible before the release Divi Supreme’s Divi Card Carousel and Divi Image Carousel Module that allows you to create not only Carousels of any type but with some advanced Customizations and Effects that makes your carousel looks more interesting and attractive.

Why do you need Carousel

You can use Carousels to display Testimonial Carousels, Featured Products Carousel, Team Carousel, Image Carousel, and almost any kind of Carousel you need.

You can use the Divi Supreme’s Card Carousel module to display a beautiful combination of texts, links, badge and image in a Carousel Slider.

Control and customize almost everything in this powerful carousel module. It comes with image and video lightbox/popup for Image and Button and many more Carousel Settings. You can design an unlimited number of carousels with this Card Carousel module.

How to create a Carousel in Divi

First, make sure that you’ve got Divi Supreme Pro Installed on your site and after that Enable Visual Builder on a Page or anywhere you want to show carousel. After that, you need to insert the Divi Card Carousel Module.

Now you need to click on +Add new Item Button to create your first carousel Item. After clicking that you’ll see so many other settings and content options to craft your carousel.

Now in the Content tab of Card Carousel Item Settings, you’ll be able to create your first carousel item, you can enter your own Title, Subtitle and Content/Description as we’ve done here.

As we’re done with content, it’s to play around with Image & Badge of the Carousel Card. For this open up the Image & Badge Panel where you can set up your Image and a Custom text to the Badge.

Ok so now we want to add a button call to action. Just open up Button Panel and set up Button Text and Link.

That’s it. We’ve just created a Carousel Item, So for the carousel to work perfectly you need to add more items to Carousel Module you can do so by duplicating the item you just created and changing Content.

Now as we’ve got more Carousel Items, you can go back to Main Settings and open up Carousel Settings Panel and here you’ll be able to make your carousel look more interesting. Here are some changes that we made in this Panel:

• Carousel Effect – Coverflow
• CoverFlow Rotate – 40
• CoverFlow Depth – 150
• Equal Height – Yes

Now we need to do some Design Changes to the Card Carousel, open up the Design tab to start. Here are Some Changes we made in the Design tab:

Spacing Panel

• Padding: Bottom – 40px

Box Shadow – -> Card Box Shadow

• Shadow Blur Strength – 15px
• Shadow Blur Strength Hover – 50px
• Shadow Color – rgba(0,0,0,0.06)

Border –> Card Rounded Corners

• Corner Radius – 10px

Button

• Use Custom Styles for Button –  Yes
• Button Text color – #fff
• Button Background color – #8300e9
• Button Border width – 0px
• Button Border Radius – 100px
• Button Font – Montserrat
• Show Button Icon – No
• Button Padding – 8px 8px 35px 35px

Title Text

• Title Font – Montserrat
• Title Font Weight – Semi Bold
• Title Text Color – #000

Subhead Text

• Subhead Font – Montserrat
• Subhead Font Weight – Semi Bold
• Subhead Text Color – rgba(0,0,0,0.49)

Body Text

• Body Font – Montserrat
• Body  Font Weight – Semi Bold
• Body Text Color – rgba(0,0,0,0.73)

All right, we’ve just created a beautiful Looking Carousel and here’s a quick Demo

Hover Effect on Image

Let’s see how to add a Hover effect to Card Image when you’ll hover to it. First of all, open up the Carousel Module settings > Carousel Item settings > Image and make sure that “Use Image as Background is Checked and scrolling down you’ll find “Background Image Animation” option just choose any animation from here.

And here’s a quick look at how this animation works.

Open Image in Lightbox

If you like to open an image in a lightbox when a user clicks on the carousel image, you can do so by going to Carousel Item settings > Image & Badge > Open as Image Lightbox and then you’ll be prompted to choose any image from Library you can choose a different image or that same if you like.

Here’s a quick look

Open as Video Lightbox

If you like to open a video in the Lightbox by clicking on Carousel Card Image then it’s easy to do so as well, Open up Carousel Item settings > Image & Badge > Open as Video Lightbox and then you’ll see a field to enter the Video URL, just simply add the video URL and you’re good to go.

Here’s a quick look at how the Video Pops.

If you want to Open an Image or a Video in Lightbox by clicking on the Carousel’s Button then the same way you can do that as well, you just have to go to the Carousel Item settings > Button and there you’ll be able to set up Image/Video Lightbox easily.

How to create an Image Carousel in Divi

With Divi Supreme’s Image Carousel Module you can easily create Logo Carousels or a Simple Image carousel as well. Let’s see how to create an image carousel and we’ll see how to add a link to each Image in that carousel and allow a downloadable link as well.

So all you’ve to do is insert the Image Carousel Module on any page you want.

Now add some Images from your Media Library

 Now under the Carousel Settings, you’ll find so many options but here are some changes that we’ve made here:

• Slides to show – 5
• Slider Speed – 500(ms)

And some default settings that are On by default we left them On. 

And here’s how the Image Carousel Works

How to open Carousel Images in Lightbox

If you want to open every image in the Carousel as  Lightbox then it’s super simple and easy again. All you’ve to do is go to Image Carousel Module settings > Carousel Settings > Open Image in Lightbox(Enable this option) and now every image in the Image Carousel module will open in Lightbox. 

You’ll see another option named “Lightbox in Gallery Mode” and this will show Next and Previous Arrow when you’ll open any image in Lightbox to navigate to the next image in the Carousel. And here’s a quick demo

How to add an URL link to Image in the Carousel

To add an link to the image in the Carousel, you’ll need to open the image in the Media Library and a link there. So when a user will click on the Image they’ll be taken to that URL that you added to Image.

How to add a Download link to the Image

If you want to let your users download a file when they click on the image you can simply enter the URL of that download file and check the option “Download as File”. 

So that’s it for today’s tutorial. Let us know what you think by leaving a comment below.