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

As a Divi user, you might already know Divi doesn’t have any carousel module. Although it has a slider module, it’s not quite the same as a carousel. 

To create a content carousel in Divi, you can use third-party plugins or custom code. Instead of writing tons of code, it’s always better to use a plugin like Divi Carousel.

In this guide, we will show you how to create content carousel in Divi using Divi Carousel from DiviGear. Let’s get started.

Our Created Content Carousel Preview

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

Required Setup

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

Step 1: Setup Section, Row, and Insert the Module

Start with navigating the to page/post where you want to include the content carousel. Then insert section, row and module.

However, to replicate our design, adjust your section and row settings as follows:

• Section Setting:
  • Background: In the Content tab, click on “Background” and choose a background color that matches your overall website design.
  • Spacing: Switch to the Design tab, select “Spacing,” and set the top and bottom padding to 120px.
• Row Setting:
  • Go to the Design tab, click on “Sizing,” and change the Max Width to 1200px.

Once you have configured the section and row settings, insert the Divi Carousel module.

Here is how you will do it:

• Click on the gray “+” icon within your row to open the module library.
• Search for the “Divi Carousel” module and click on it.

Step 2: Create Carousel Items

After inserting the carousel module, you can proceed to carousel items. For that, click on  “Add New Item” and then follow the below steps:

2.1: Add Title and Body Text

In the “Title” and “Content” fields, add your carousel item’s headline and descriptive text.

2.2: Add Button

In the Content tab, click on “Button Setting” and then add button text and the corresponding URL in the designated fields.

2.3: Add Image

To add the carousel item’s image, simply click on “Image Settings” and add your image using the “Image” setting. 

2.4: Add Background Color/Image

Click on “Background” settings in the Content tab. Next, based on your design requirements, add a background image or color to the entire carousel item.

2.5: Customize the Button

Navigate to the Design tab  > Button and then make these changes:

• Use Custom Styles For Custom Button: Enable it
• Custom Button Text Size: 15px
• Custom Button Text Color: #121212 and hover color: #ffffff
• Custom Button Background: #ffffff and hover color: rgba(4,215,4,0.5)
• Custom Button Border Width: 1px
• Custom Button Border Color: #eaeaea
• Custom Button Border Radius: 100px
• Custom Button Font: DM Sans
• Custom Button Font Weight: Medium
• Button Alignment: Middle

2.6: Adjust Spacing

In the design tab, click on “Spacing” to add these spacing values:

• Button Padding: 7px (top and bottom), 20px (left and right)

2.7: Add Item Border

To style the border area, simply click on the “Item Border” then make these changes:

• Border Styles: To replicate our provided demo, you have to apply two different border styles, including:
  • Border Style 1: Border width (1px), border color (#c0f8c0)

• Border Style 2 (Top): Border width (4px), border color (#04d704)

Now that the first carousel item is created and designed, it’s time to add more. You can either repeat the process to create new items or duplicate an existing one and customize its content and design.

Step 3: Configure Carousel Slider Settings

After creating carousel items, proceed to configure the slider settings:

• Show Item Desktop: 3
• Show Item Tablet: 2
• Loop: Enable it
• Arrow Navigation: Enable it

Step 4: Customize and Style the Content Carousel

Navigate to the Design tab from module settings panel and then adjust these styling settings:

4.1: Style the Carousel Item’s Title

Click on “Title Text,” then apply these styling settings:

• Title Font: DM Sans
• Title Text Alignment: Middle
• Title Font Weight: Medium
• Title Text Color: #000000
• Title Line Height: 30px

4.2: Style the Body Text

To customize the body text into the carousel items, click on “Body Text” settings and then make these changes:

• Body Font: DM Sans
• Body Text Alignment: Middle
• Body Text Color: #717171
• Body Text Size: 16px
• Body Line Height: 24px

4.3: Customize Next and Previous Button

Click on “Next & Previous Button” setting and then make the following adjustments:

• Position: Middle & Outside the container
• Show on hover (Only for middle position): Enable it
• Use Previous Custom Icon: Enable it and select a previous icon
• Use Next Custom Icon: Enable it and select a next icon
• Font Size: 30px
• Spacing: 22px

4.4: Customize Arrow Navigation’s Appearance

To customize the arrows look, click on “Color Settings” and add these colors:

• Arrow Color: #121212
• Arrow Background Color: #ffffff

4.5: Add Custom Spacing

Click on “Custom Spacing” in the Design tab. There you will see two tabs where you have to make the following changes:

• Container: Carousel Item Padding 29px (top and bottom) and 24px (left and right)

• Content: Title margin 16px (top and bottom), text margin 24px (bottom)

4.6: Style Carousel Item Border

To style the carousel item borders, simply click on the “Item Border” settings, then add this:

• Border Rounded Corners: 20px

Final Preview of Our Created Content Carousel 

After following every step that we provided above, this is what we achieved:

Conclusion

As you can see, creating content carousel in Divi is super easy when you use the Divi Carousel plugin. 

Besides our designed demo, you can create many different types of content carousel. You can explore Divi Carousel’s free demos to see the various carousel designs that you can use on your site.