How to Create Carousel in Divi: With or Without Plugin

If you want to create a carousel in Divi the easiest way is to use a dedicated carousel plugin since Divi doesn’t offer a built-in carousel module. 

However, you can design a carousel section and then make it function like a carousel using code, which can be a hassle and time-consuming too. 

In this article, I’ll show you how to create a Divi carousel using both a plugin and code, so that you can choose the method that works best for you.

Let’s get started.

First, let’s look at what we’re building. In the following section, we will recreate one of our demo designs. The result will look exactly like this:

Method 1: Create a Divi Carousel with the DiviFlash Advanced Carousel Module

As we told before, the default Divi Builder lacks a built-in carousel module, but you can use the text or blurb modules to create a similar layout. However, to make the section function as a true carousel, you’ll need third-party plugins like the DiviFlash Advanced Carousel Module.

So, here’s what you need to do,

Step 1: Install and Activate DiviFlash Plugin

First, purchase the DiviFlash plugin from their websites. (It includes 50+ other modules besides the Advanced Carousel module). Then navigate to your WordPress Dashboard and follow the instructions below,

• Go to Plugins > Add New Plugin.
• Click Upload Plugin and choose Choose File.
• Select the DiviFlash Plugin ZIP file and click Install Now.

• After successful installation, click “Activate” to activate the DiviFlash plugins.

The Advanced Carousel Module may not be enabled by default, so you might need to enable it manually. To do this, 

• Navigate to WordPress Dashboard > DiviFlash > Modules tab,
• Search for the “Advanced Carousel” module, and enable it. Or, simply click on Enable All. 

Step 2: Insert the Advanced Carousel Module

Once we are done with the plugin installation process, It’s time to move on to adding our Carousel section. But, first, we need to add a page since we are building it from scratch. You can also design the Carousel section on an existing page.

Simply follow the steps,

• Go to your WordPress dashboard.
• Navigate to “Pages” and click “Add New Page.”
• Give your page a title and click “Use Divi Builder.”

• Select “Build From Scratch” from the three options. It will take us to the Divi visual builder. 
• Add a single-column row. A modal with the available module will appear now. Search for the “Advanced Carousel” module and click on it to insert it.

Note: To fulfill the design requirement, we first added a heading using the Text module, applied a background color to the section, and adjusted the spacing. However, we’ll skip these steps to stay focused on the carousel design process. Let’s move on to designing the carousel.

Step 3: Add Carousel Item

As soon as we insert the module a settings panel will appear. According to our design, we need to add a total of four items. 

Simply follow the steps,

• Click on the Add New Item Item to add a carousel item.

• First, from the Content option, set the Title and Body content. We will skip the Sub Title here.

• Next, scroll down to the Image option and add the image. Keep the rest of the settings unchanged. 

• Next, scroll down to the Button option and add the button text.

• Next, scroll down to the Background > Hover option and add the background color on hover (Color code: #ff6b00).

• Now navigate to the Design tab > Title, and make the following changes, 

Title tag: h4 tag

Title font: Plus Jakarta Sans

Title font-weight: Ultra Bold

• Next, navigate to the Design tab > Button, and make the following changes, 

Button font: Plus Jakarta Sans

Title font-weight: Semi Bold

• Next, navigate to the Design tab > Border, and change the border color to #ff6b00, 

• Next, click the back button in the top left corner to return to the main settings panel to add another new item.

• Now, add three more items following the same process. You can also duplicate items and then edit them according to the design. 

So far, this is how the section will look. 

This is just the default look with default carousel settings. Now, we will enhance the carousel with various design options to match our chosen style.

Step 4: Apply Carousel Settings

So far we have just added the carousel items. Now we will build the structure of the carousel. 

• From the settings panel, open up the Carousel Settings and make the following changes,

Carousel type: Slide

Max slide desktop: 4

Spacing: 40px

Loop: ON

Autoplay: ON

Pause on hover: ON

Arrow navigation: ON

Equal height item: ON

This is how the section will look, 

Step 5: Customize and Style the Carousel Section

Now we will style our carousel to meet our design exactly how it is.

• Navigate to the Design Tab > Title, and make sure the following changes,

Title font: Plus Jakarta Sans

Title font-weight: Ultra Bold

Title text color (Desktop): #f6f6f6

Title text color (on hover): #08070b

Title text size: 80px

Title letter-spacing: 0.5px

Title line height: 79.2px

• Next, navigate to the Design Tab > Content, and make sure the following changes,

Font: Plus Jakarta Sans

Font weight: Medium

Text Color: #f6f6f6

Text size: 22px

• Next, navigate to the Design Tab > Button, and make sure the following changes,

Button padding: 0px (All)

Button font: Plus Jakarta Sans

Button font weight: Semi Bold

Button text Color (Desktop): #f6f6f6

Button text Color (on hover): #09070c

Button text size: 16px

Button letter spacing: 0.5px

Button line height: 24px

• Next, navigate to the Design Tab > Arrow, and make sure the following changes,

Arrow icon color: #ffffff

Arrow background: rgba(255,255,255,0)

Arrow position: Top

Arrow alignment: Right

Arrow prev icon: Yes

Icon size: 24px

Arrow next icon: Yes

Icon size: 24px

Arrow previous margin (Top): -100px 

Arrow next margin (Top): -100px 

• Next, navigate to the Design Tab > Custom Spacing, and make sure the following changes,

Wrapper

Carousel wrapper padding: 0px (Top & Bottom)

Item wrapper padding: 30px (Top & Bottom),  40px (Left),  15px (Right)

Content

Title margin: 100px (Top)

Title padding: 0px (Top)

Content margin: 100px (Bottom)

• Next, navigate to the Design Tab > Border, and make sure the following changes,

Rounded corner: 4px (All)

Border style: All side

Border width: 1px

This is how the section will look,

Preview the Carousel Section

Now that our Carousel section is ready to publish.

Method 2: Create a Divi Carousel without Plugin

To create a Carousel in Divi without a plugin we need to add a page and then a section where we apply the design just like the previous method. Again, you can also design the Carousel section on an existing page. 

Let’s jump straight into the carousel creation process.

Note: First add a heading using the text module, a background color to the section, and adjust the spacing according to the design. 

Step 1: Add a Four-Column Row

Since we have four separate carousel items we are going to need a four-column row first.

• Click on the green plus icon and add the row.

Row Setting

• Open up the row setting then navigate to the Design Tab > Sizing and make the following changes,

Row alignment: Left

Column Setting

• Next, open the first column setting. 

• Then click on Background > Hover and apply the background color (Color code: #ff6b00) on Hover, 

• Next, navigate to the Design Tab > Spacing and change the entire padding values, 

Top: 30px

Bottom: 30px

Left: 40px

Right: 15px

• Next, navigate to the Design Tab > Border and make the following changes, 

Rounded corner: 4px

Border style: All side

Border width: 1px

Border color: #ff6b00

• Now, navigate to the Advanced tab > Custom CSS > Module Elements > Main Elements and paste the following code,

display: flex;

flex-direction: column;

justify-content: space-between;

Margin-left: 30px;

Note: For 2nd, 3rd, and 4th column apply the following code,

display: flex;

flex-direction: column;

justify-content: space-between;

• Next, click the back button in the top left corner to return to the row settings panel.

• Apply the same column settings for the rest of the three columns. Only the background (on hover) and border color will change according to the example. 
• Save changes and close the Row settings.

So far, this is how the section will look, 

Note: Sometimes, your results might not match the image above. The fourth column might move to the next line, but don’t worry—it will automatically fixed by the CSS code later. Just keep following the design steps as explained.

Step 2: Design Carousel Item

Now we will add content as well as design each content respectively. We will add images, text, and buttons, then apply some customization using the design tab.

Add Image

First, we will add an image using the Image module. 

• Click the gray (+) icon to add the Image module. 

• Open up the image settings and add your images first,

• Save changes and close the module settings.
• Now, add images to the remaining three carousels using the same process.

Add Text

Next, we will add text content using the Blurb module just below the image. 

• Click the gray (+) icon to add a Blurb module. 

• Open up the blurb settings and add the Title text in the Title field and body content in the Body field.

• Scroll down to the Image & Icon settings and delete the image from here.

• Next, navigate to the Design tab > Title Text > H4 and make the following changes, 

Title font: Plus Jakarta Sans

Title font weight: Bold

Title text color: #ffffff

Title text size: 80px

• Next, navigate to the Design Tab > Body Text, and make sure the following changes,

Body font: Plus Jakarta Sans

Body font weight: Semi bold

Body text Color: #ffffff

Body text size: 24px

• Save changes and close the module settings.
• Now, add text content to the remaining three carousels using the same process.

Add Button

Now we will add a button just below the text content using the button module.

• Click the gray (+) icon to add a Button module. 

• Open up the button settings and add the text in the Button field. 

• Next, navigate to the Design tab > Button and make the following changes, 

Use custom styles for button: Yes

Button text size: 16px

Button Color: #ffffff

Button font: Plus Jakarta Sans

• Next, navigate to the Design tab > Spacing and make the following changes, 

Left padding: 0px

• Save changes and close the module settings.
• Now, add buttons to the remaining three carousels using the same process.

This is how the section will look,

Note: We will adjust the spacing between carousel elements using code. 

Step 4: Define CSS ID & Classes 

Once we are done with all the design and customization we will then define the CSS ID & Classes to blend this with the code and work as a carousel.

Define CSS ID in Section

• Open the carousel section setting. 

• From the section setting, navigate to the Advanced tab, then to the CSS ID & Classes section. Enter ‘df_custom_carousel‘ in the CSS ID field.

• Save changes and close the Section settings.

Define CSS Classes to the Row

• Open the carousel section setting. 

• From the section setting, navigate to the Advanced tab, then to the CSS ID & Classes section. Enter ‘swiper-wrapper‘ in the CSS Class field.

• Save changes and close the Row settings.

Define CSS Classes to the Column

• Open the Column setting from the row setting. 

• Then, navigate to the Advanced tab > CSS ID & Classes and add the ‘swiper-slide’ CSS class to the CSS Class field.

• Do the same for the rest of the three columns. 
• Save changes and close the Row settings.

Our Carousel section design is ready now. This is how it will look,

Step 5: Add CSS Snippet

Now, the next step is to include a CSS snippet. We’ve prepared a CSS code for you; simply copy and paste it. 

To add the CSS code, go to your WordPress Dashboard then navigate to Divi > Theme Options. Under the General tab, find the Custom CSS section and paste your code there.

Here’s the code:

After you’ve pasted the code, click “Save Changes.”

Step 4: Add JavaScript Snippet

Next, we will need to add some JavaScript code. Navigate to Divi > Theme Options > Integration, and paste the code into the box labeled “Add code to the <head> of your blog.” 

Simply copy and paste the below code.

Click “Save Changes” afterward.

Preview the Carousel Section

Now that our Carousel section is ready to publish.

Conclusion

Creating a Divi carousel using code can be time-consuming and complex for those without coding experience. On the other hand, using a plugin like DiviFlash Advanced Divi Carousel is quick, efficient, and doesn’t require any coding skills, making it the ideal choice for most users. 

Now that you know how to create a Divi carousel with or without a plugin, it’s time to put your skills to the test. If you face any issues, please leave a comment below. Our dedicated support team is always here to help you out.