Skip to main content

The Divi Group Carousel Module (Divi 5)

Learn how to showcase multiple modules in a sliding, scrollable format using the Divi Group Carousel module.

Updated today

The Divi Group Carousel module allows you to display multiple grouped modules in a horizontal, scrollable carousel. You can combine text, images, buttons, and other modules within each group, then customize the carousel’s layout, navigation, and animation settings. It’s perfect for showcasing portfolios, testimonials, product sets, or any content that benefits from an interactive sliding format.

Add The Divi Group Carousel Module

When you load the Visual Builder, Divi automatically adds a Section.

  1. Click the Green Plus icon to insert a Row.

  2. Click the Gray Plus icon inside the Row, which will show the list of all available Divi modules.

  3. Find the Group Carousel module and click on it to load it. Alternatively, you can use the Search option to find it.

Divi 5 - Add the Group Carousel module

Add Modules inside a Carousel Slide

  1. Click on the Gray Plus icon inside the Carousel Slide, which will show the list of all available Divi modules.

  2. Choose the module you want to add.

  3. Repeat this process to add more modules.

    Divi 5 - Add modules inside a Carousel Slide

Note: You can style each module added inside a Carousel Slide, just like any other module.

The Divi Group Carousel Module Use Cases

  1. Portfolio Showcase: Present multiple project previews in grouped slides, allowing visitors to browse your work without overwhelming the page layout.

  2. Testimonial Slider: Display client testimonials in compact, swipeable groups with photos and quotes for an engaging, space-saving social proof section.

  3. Product Collection Display: Highlight related products or seasonal collections in interactive groups, allowing shoppers to explore additional items quickly.

Group Carousel Module Settings Breakdown

Once you've added the Group Carousel module, its settings will automatically appear. This is where this module's content and design styles are configured. These settings are organized into three groups via the tabs at the top of the module:

The Content tab

Inside the Content tab, you can add or remove Carousel Slides, change the Carousel settings, change the default arrow icons, customize the background styles, and much more.

Divi 5 - Group Carousel module's Content tab

  1. Add, Edit, and Remove - Allows you to add new Carousel Slides, remove Carousel Slides, or edit them.​

  2. Carousel Settings:

    • Automatic Rotation: If enabled, all carousel slides will animate automatically.

    • Center mode: Ensure that the active carousel slide is always displayed in the center.

    • Transition Speed: Select the speed at which each carousel slide transitions from one to another.

    • Slides to Show: Choose how many carousel slides are visible at one time.

    • Slides to Scroll: Choose how many carousel slides are slid each time the arrows or the dots navigation is clicked.

  3. Elements:

    • Show Dot Navigation: If enabled, the dot navigation will be visible

    • Show Arrows: if enabled, the navigation (left/right) arrows will be visible

    • Left/Right Arrow Icon: Choose the icons for the left/right navigational arrows.

  4. Link: Make the entire Group Carousel module clickable, creating a seamless way to direct users to another page, section, or external site.

  5. Background - Choose the Group Carousel module's background styles.

  6. Loop: Enables the loop builder.

  7. Order: Defines the Flexbox order of the module.

  8. Admin Label - Select the Group Carousel module's label text to help you keep things organized and easy to understand in the Visual Builder.

The Design tab

All the design styles and options for the Group Carousel module are in this tab.

Divi 5 - Group Carousel module's Design tab

  1. Arrows - Choose the navigational arrow's styles such as arrow color, arrow's font size, and the position:

    • Inside - Displays the navigation arrows inside the Group Carousel module.

    • Outside - Displays the navigation arrows outside the Group Carousel module.

    • Center - Displays the navigation arrows centered on the left/right margins of the Group Carousel.

  2. Dot Navigation: Choose the Dot Navigation styles, such as:

    • Dot Position: Choose the Dot Navigation positions:

      • Below: Displays the Dot Navigation below the Group Carousel module.

      • Above: Displays the Dot Navigation above the Group Carousel module.

      • Overlay: Displays the Dot Navigation on top (as an overlay) of the Carousel Slides.

    • Dot Alignment: Choose the dot navigation alignment, which can be on the left, center, or right.

    • Dot Size: Choose how big or small the dots are.

    • Dot Color: Choose the dot's color.

  3. Groups: Choose styling options, including layout, spacing, background, border, and more, which will be applied to all Carousel Slides.

  4. Active Groups: Choose styling options, including layout, spacing, background, border, and more, which will be applied only to the active Carousel Slides.

  5. Sizing - Choose the Group Carousel module's sizing.

  6. Spacing - Choose the spacing for the Group Carousel module.

  7. Border - Choose the border styles for the Group Carousel module.

  8. Box Shadow - Choose the Box Shadow styles for the Group Carousel module.

  9. Filters - Choose the Group Carousel module's filters, including hue shifts, saturation adjustments, and blending modes.

  10. Transform - Choose the Group Carousel module's advanced design effects, including scaling, rotating, skewing, and translating.

  11. Animation - Choose the Group Carousel module's animation styles to add personality and interactivity while maintaining a polished, professional feel.

The Advanced tab

The Advanced tab provides tools for experienced designers, including options for adding CSS IDs and Classes, controlling visibility, managing transitions, adjusting element positions, and creating scroll effects.

Divi 5 - Group Carousel module's Advanced tab

  1. CSS ID & Classes - Allows you to assign unique CSS ID or reusable CSS classes, enabling advanced custom styling through your child theme’s stylesheet or Divi’s custom CSS settings.

  2. Custom CSS - Allows you to add custom CSS code to fine-tune your Icon List module, enabling advanced styling that perfectly aligns with your vision.

  3. Conditions - Allows you to create dynamic, personalized content, ensuring the right message reaches the right audience at the right time.

  4. Interactions: Create custom interactions, such as showing or hiding the Icon List module, and many more.

  5. Visibility - Choose the visibility of the Icon List module for different devices.

  6. Transitions - Choose how long the Icon List's module animation takes, adding subtle, impactful animations that enhance user experience and make your modules stand out.

  7. Position - Choose precise control of the Icon List's module placement and create dynamic, visually engaging designs.

  8. Scroll Effects - Control how the Icon List module behaves and transforms during scrolling.

Add, Edit, and Delete Carousel Slides

  1. Open the Group Carousel Module: Click on the Group Carousel module on your page or click the Gear icon to open its settings.

  2. Edit an Item: Click the Gear icon next to the Carousel Slide item you want to update(1). Modify design settings as needed.

  3. Add a New Item: In the Content tab, click Add New Carousel Slide (2). Customize design options, such as background color. Click the arrow icon at the top left to return to the main module settings.

  4. Delete Item: Click the Trash icon (3) next to the Carousel Slide item to delete it.

Divi 5 - Group Carousel module's Add, Edit, Delete Carousel Slides

Styling Individual Carousel Slides

When you edit the design styles of the Group Carousel module, the changes apply to all Group Carousel items.

However, you can style each Carousel Slide item individually. In that case, you can click the Gear icon next to the item, which brings up the individual Content and Design settings.

They are the same settings as demonstrated above, but will only apply to that specific Group Carousel item you edit.

To return to the main module settings, click the Arrow icon at the top left corner of the module window.

What's the next step?

Save your changes and exit the Visual Builder

To save the page design, you can type CMD + S on a Mac or CTRL + S on a PC.

You can also:

  1. Click on the Save button.

  2. Click on the Exit button.

Divi 5 - Save and Exit Visual Builder

Related Articles
The Divi Post Slider Module (Divi 5)
The Divi Slider Module (Divi 5)
The Divi Video Slider (Divi 5)
The Divi Post Carousel Module (Divi 5)
The Divi Group Module (Divi 5)
Did this answer your question?