How to Create a Card Carousel in Divi (Step-by-Step)

Want to showcase your content, products, or testimonials in an eye-catching way?

A card carousel is the perfect solution for Divi users! While Divi doesn’t have a built-in carousel module, you can achieve this using plugins like Divi Carousel or through custom CSS.

Using a plugin will be the best solution, as it offers the easiest way to create a card carousel without requiring any coding skills.

Learn how to create a card carousel in Divi by using the Divi carousel plugin from this guide.

Preview of Our Created Card Carousel Demo Design

By using the Divi Carousel plugin, we will create a card carousel as described below:

Required Setup

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

Step 1: Insert the Divi Carousel Module

• Navigate to the page/post where you want to add the carousel and launch the Divi Builder.
• Create a new section and row, or use an existing one.
• Click the gray “+” icon within your row to open the module library.
• Search for the “Divi Carousel” module and select it to add it to your layout.

Note: Based on your design requirements, adjust section and row settings. For our demo design, we made the following changes to the section and row settings:

• Section Setting: We added a background image by going to Content tab > Background. And added 120px top and bottom padding by going Design tab > Spacing.
• Row Setting: We just adjusted the Max Width to 1200px by going to Design tab > Sizing. 

Step 2: Create Carousel Items

After inserting the module, it’s time to create carousel items. For that, click on “Add New Item,” then follow the below provided instructions:

2.1: Add Carousel Content

Add your carousel item’s title and body text content to the “Title” and “Content” fields.

2.2: Add Button Details

In the Content tab, click on “Button Settings” and then add carousel item’s button text and URL.

2.3: Add Image

Next, add carousel item’s image by clicking on “Image Settings” in the Content tab. (Here use the image that you want to show in the carousel item.)

2.4: Add Background Color:

To create a similar design of our provided carousel demo, you have to add both background color and image. For that, click on “Background” in the Content tab and make these changes:

• Color: #ff7c44
• Image: Add the image you want to use as the background. After adding the image, make the following changes:
  • Background Imager Size: Actual Size
  • Background Image Position: Top center
  • Background Image Vertical Offset:  – 1%

Note: If you are unable to replicate the demo design, simply navigate to Background > Image > Background Image Size > Custom Size and adjust the following settings according to your requirements:

• Background Image Width: 100%
• Background Image Height: Adjust this according to your need

2.5: Style The Carousel Item’s Button

To style the button, navigate to Design tab > Button and then apply the following settings to customize its appearance:

• Use Custom Styles For Custom Button: Enable it
• Custom Button Text Size: 15px
• Custom Button Text Color: #ffffff
• Custom Button Background: Hover color (transparent)
• Custom Button Border Width: 0px
• Custom Button Font: Montserrat
• Custom Button Font Weight: Semi Bold
• Show Custom Button Icon: Enable it and choose your preferred icon
• Only Show Icon On Hover for Custom Button: Enable and then instantly disable it

With your first carousel card looking sharp, it’s time to create the rest of the carousel. You can repeat the same process to create each new item from scratch. Or duplicate the first item and then customize its content as needed.

Step 3: Configure Carousel Slider Settings

Once all your carousel items are created, you can fine-tune the overall behavior of the carousel slider. To do this, click on “Slider Settings” from the module’s main settings panel, and then make the following adjustments:

• Show Item Desktop: 3
• Show Item Tablet: 2
• Transition Duration (ms): 1000
• Loop: Enable it
• Arrow Navigation: Enable it

Step 4: Customize the Card Carousel’s Appearance

To style the card carousel’s appearance, navigate to the Design tab from module’s main settings panel and then adjust these styling options:

4.1: Style Image

To style the carousel images, click on “Image” and then make these changes:

• Image Alignment: Left
• Image Max Width: 44px

4.2: Title Text

To style your card carousel’s title, click on “Title  Text” and then adjust these:

• Title Font: Montserrat
• Title Font Weight: Semi Bold
• Title Text Color: #ffffff
• Title Text Size: 24px
• Title Line Height: 33px

4.3: Body Text

Click on “Body Text” in the Design tab to make the following changes:

• Body Font: Montserrat
• Body Text Color: #ffffff
• Body Text Size: 16px
• Body Line Height: 24px

4.4: Style Next and Previous Navigation Button

To style the next and previous button, click on “Next & Previous Button” and then apply these changes:

• Position: Bottom
• Alignment for top & bottom position: Center
• Font Size: 30px
• Spacing Around: 22px

Next click on the “Color Settings” to make these changes:

• Arrow Color: #121212, hover color: #ffffff
• Arrow Background Color: #ffffff, hover color:#ff7c44

4.5: Add Spacing Value

Click on “Custom Spacing” in the Design tab where you will see two sub-tabs. There you have to make these adjustments:

• Container:
  • Inner Wrapper Padding: 40px (top and bottom)
  • Carousel Item Padding: 250px (top)
  • Image Container Padding: 24px (top ), 20px (bottom), and 24px (left)
  • Content Container Margin:  24px (bottom, left and right)
• Content:
  • Title Margin: 7px (bottom)
  • Text Margin: 10px (bottom)
  • Button Padding: 0px (top and left)

Final Preview of Our Created Card Carousel 

Have a look at the final preview of our created card carousel that we created using the Divi Carousel plugin.

Conclusion

Now you know how to create card carousel and how easy the process is. We have created a fully functional carousel using the Divi Carousel plugin in just 4 simple steps.

Get the plugin to create one for your site. 

The interesting fact is that with Divi Carousel, you can do much more than just a card carousel. You can also create content, testimonials, teams, logos, images, and even video carousels.

Explore Divi Carousel free templates to get a complete idea.