How To Create A Carousel Using Any Divi Modules

Prerequisites

Install The Divi Carousel Maker Plugin

In order to make a carousel, we need a carousel maker! And of course we have one for you, a plugin designed by yours truly called the Divi Carousel Maker. Basically this plugin creates a carousel from your existing Divi modules, so it’s pretty unique and clever. If you are not yet a member of our Divi Adventure Club, or have not yet purchased the individual plugin, you will need to do so first in order to access the premium plugin. So take a moment and head on over and purchase or install the Divi Carousel Maker plugin.

1. Understand What This Plugin Does

First, it is important to understand what this plugin does and get familiar with how it works. This plugin is unique in the world of Divi carousels. Most other plugins require a separate module or plugin for each different type of carousels, like one for images, one for testimonials, one or Woo products, one for blog posts, etc. The reason they require multiple plugins is that the type of content within the carousel is so different. This creates a lot of additional admin work and has a lot of limitations.

The Divi Carousel Maker name implies that something is different. As product creators, we like to think outside the box, and have come up with an innovative solution. Our carousel plugin does not create content, but instead makes your existing modules into a carousel!

What does this mean practically? It means you may already have modules on your page, but wish they were a carousel, but don’t feel like installing a plugin dedicated to that type of carousel needed, copying and pasting the content, and trying to get the design the same. Now you can simply move the modules into a single column in your Divi Builder, and enable the carousel. Presto! You have a carousel of your existing modules! And of course you can simply create a brand-new row and add modules to create a new carousel. The key here is that you will continue to add your modules in Divi like usual, write the text, add images, and adjust the design. The difference is that now those modules can slide across your screen in a carousel, with over a hundred design options related specifically to the carousel!

2. Decide Where You Want The Carousel

Now you can begin creating a carousel! First, you need to decide where you want the carousel to be located. One of the great things about the Divi Carousel Maker is the versatility – you can enable a carousel anywhere in your Divi Builder layout in any Column (see step 4 below).

Where you want the carousel may depend on which type of modules you want to make into a carousel. Will you be using Blurb modules to feature your services, Testimonial modules to showcase your reviews, or maybe Blog modules to highlight recent blog posts? Knowing which modules you want to transform into a carousel will help you decide if the carousel should be in a fullwidth row with a single column, or maybe a left or right column in a row with two columns. Should it be in the Theme Builder template, or a regular page? There is no right or wrong answer here, you can choose where to place your carousel anywhere on your site.

3. Add Modules To The Carousel

You can now begin adding new or moving existing modules into the Column at the location where you want to make the carousel. You can add any modules to the carousel, even 3rd party ones! Some modules would obviously make more sense in a carousel than others. A few example modules that would work well in a carousel are Blurb, Image, Call-To-Action, Testimonial, Person, Blog, Portfolio, Video, and Text modules. Remember, all the modules you add or move into the Column where the carousel is enabled (see step 4 below) will be shown as a carousel when you exit the Visual Builder and view the site on the frontend.

4. Enable The Carousel

When the Divi Carousel Maker plugin is installed and active, additional settings to create and design a carousel will appear in all the Divi column settings in the Divi Builder. To find these settings, first open the Row settings and then open the Column settings. There you will see a new fourth tab called “Carousel” which is added by our plugin. Inside that Carousel tab, you will see a toggle called “General Settings.” Click to open this toggle, and then you will see the setting called “Make This Column A Carousel.” This setting is turned off by default, so you need to turn it on to enable the carousel. When the setting is enabled, our plugin code takes all the modules that you have added to this column in step 3 and arranges them into a carousel, which you can see when you exit the Visual Builder and view the site on the frontend.

5. Adjust The Carousel Settings And Design

After enabling the carousel, all the other carousel settings will appear in the Carousel tab. These settings give you complete control over the functionality and design styling of the carousel. The settings are grouped into toggles for easy organization, and can be seen in the list below.

Go ahead and explore the settings and adjust everything as needed. Be sure to save your changes, and when you exit the builder you will see the modules transformed into a working carousel!

General Settings

The general carousel settings allow you to set up and adjust some important features which affect how your carousel works. This includes things like how many modules to show per device, spacing around the carousel and modules, module width, vertical alignment, and cut off mode.

Scroll Settings

These features allow you to control how the carousel moves and functions, and are great for creating the perfect user experience for your visitors viewing the carousel. This includes options like auto scroll, continuous smooth scroll, animation speed, scroll interval timing, infinite scroll, and scroll direction.

Navigation Buttons Settings

You can control the carousel scrolling with several navigation button options. Choose to show arrows only, text only, or text and arrows. You can use any icon and even customize the button text. All the typical design settings are included like color, background, font and text settings, borders, box shadow, alignment, location options, and vertical and horizontal position settings.

Navigation Controls Settings

You can also control the carousel navigation with dots, numbers, or images. These navigation controls can be fully customized with all the standard design settings like width, height, borders, spacing, alignment, box shadows, font and text settings, etc.

Slide Counter Settings

The slide counter is a way to indicate which slide the user is currently viewing, and also how many total slides there are in the carousel. Each of the numbers and separator can be styled with full design settings.

Design Settings

You can also choose to highlight the left, center, or right module in the carousel and design the default and highlighted modules differently to make one stand out from the others. You can adjust all the design settings like spacing, borders, box shadows, background color, opacity, blur, and size for all the modules.

Hover Settings

There are eleven different hover effects to choose from such as grow, shrink, bounce, pulse, wobble, etc. and each of those allow you to adjust the settings such as the animation duration and other values. These elegant hover effects provide a very nice user experience for website visitors.

Responsive Settings

These settings are spread throughout all the other settings, allowing you to change almost everything per device on Desktop, Tablet, and Phone. The responsive settings are perhaps more important in a carousel than regular rows, so be sure to consider all of these settings carefully. These thoughtful and helpful settings truly set our plugin apart even more, providing exactly what customers and visitors need!

Miscellaneous Settings

As the plugin continues to evolve, we will be adding miscellaneous settings here that do not fit into the other categories. So far, we have added the image module gallery lightbox grouping feature.