One of Divi 5‘s latest modules, the Group Carousel, is here to make it easy to create visually stunning carousels and animations for your Divi website. This powerful addition allows web designers to create engaging website carousels without needing third-party plugins or custom CSS. Whether you’re building a sleek portfolio, an e-commerce store, or a blog, the Group Carousel module unlocks new levels of creativity.
In this post, we’ll cover everything you need to know about the Group Carousel module, complete with examples and a step-by-step guide on how to use it. Let’s dive in!
- 1 What Is The Group Carousel Module?
- 2 How To Use the Group Carousel Module
- 3 Integration With Divi 5’s Loop Builder
- 4 Real World Examples Of The Group Carousel Module
- 5 Download For Free
- 6 You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
- 7 Unlock Creative Possibilities With Divi 5’s Carousel Module
What Is The Group Carousel Module?
The Group Carousel module in Divi 5 allows you to create dynamic, eye-catching carousels and sliders that can add a bit of movement and interactivity to your website. Whether you’re showcasing portfolio pieces, team members, or products, this versatile module allows you to build virtually any type of carousel, including post-based ones that pull content dynamically.
Each slide is a blank canvas, allowing you to add any Divi module, making it a great tool for creative and functional designs.
Key Features
The Group Carousel module is built on Divi 5’s optimized foundation, ensuring fast load times and smooth transitions. Divi 5’s drag-and-drop interface lets you easily add modules to sliders, with responsive controls to fine-tune layouts for desktop, tablet, and mobile, while maintaining speedy performance.
Customizable Slides
The Group Carousel module offers complete control over the number of sliders, their content, and animation settings. You can adjust slide transitions, timing, and navigation options to create a seamless user experience that matches your vision.
Dynamic Content With Loop Builder
Integrated with Divi 5’s Loop Builder, the module supports dynamic carousels based on posts, terms, or user data. For example, you can create a testimonial carousel using custom post types and Advanced Custom Fields (ACF), automatically pulling in client reviews or case studies without needing manual updates.
Design Flexibility
You can leverage Divi 5’s design settings to build unique carousel styles. Apply transforms, filters, box shadows, or hover effects to slides, and customize individual modules within the group to create visually appealing slides that keep your visitors engaged.
How To Use the Group Carousel Module
Setting up a Group Carousel in Divi 5 is intuitive and flexible. Start by adding a single-column row to the page. Next, select the Group Carousel module in the Visual Builder and add it to your page.
In the Content tab, click to expand the Carousel Settings dropdown menu.
Enable Automatic Rotation, Center Mode, and set the Slides to Show to 3.
Enable Show Dot Navigation in the Elements dropdown menu. You can leave Show Arrows enabled or disable it.
Assign Styling To The First Group
With our carousel settings in place, we can add our first group. Click on the Group settings icon to bring up the settings.
In the Content tab, expand the Background dropdown menu. Click the Background Image tab and then click +Add Background Image to add an image to the group.
Next, navigate to the Design tab. Expand the Layout dropdown menu and set Justify Content to End.
Next, expand the Spacing dropdown menu and add 5% margin to the left and right of our group. This will add some breathing room between groups in the Carousel.
Set the top padding to 100%. Apply 25px padding to the left and right.
Add Content To The First Group
We can turn our attention to adding content to our group. Click the black + icon and add a Divider module.
Navigate to the Design tab. Expand the Line dropdown menu and change the color to #ffffff.
Next, expand the Sizing tab. Set the Divider Weight to 4px and the Width to 15%.
Next, add a Heading Module to the group. Give the Heading a title.
Switch to the Design tab. Under Heading Text, set the Heading Level to H2 (or any other heading you want), select Inter for the Heading Font, choose light for the Font Weight, #ffffff for the Heading Text Color, and 2em for the Heading Text Size.
Before duplicating our Group, let’s return to the Design Tab and adjust the Vertical Gap to 10px. This will eliminate any unnecessary vertical space between modules.
Adding Additional Groups
Now that our first group is designed, we can copy the styled group and simply swap out our content (background image and title) for the Carousel. Duplicate the group eight times, and we’ll have nine slides in total.
After duplicating the group, your Group Carousel should look like this.
While we’re here, it’s a good idea to give each group a unique name so they are easier to identify. Click the first group’s settings icon and scroll down to Admin Label. Name the group Greece.
Click on the 2nd group in the Carousel. Expand the Background tab and replace the image with a new one.
While in the Content tab, don’t forget to add a name to the Admin Label field. Next, change the Heading module‘s title to Maine.
Repeat the steps with all additional groups. When done, your Carousel should look like this. While in the Visual Builder, you can use the navigation dots to scroll through the Carousel to ensure you haven’t missed any steps.
As you can see, the text on some of our slides is somewhat hard to read. We can correct this in the design tab at the carousel level without having to edit each group item individually.
Customizing Groups And Active Groups
In the Group Carousel module, you can style active and inactive groups. The key is that the Group Carousel module itself serves as a blank canvas, and you apply styling to the Module Groups within it. This allows for a high level of customization, letting you create unique layouts and effects.
Now that we’ve created a Group Carousel, head to the Design tab in the main Carousel’s settings.
Expand the Groups dropdown menu. This tab controls the design settings for the Module Groups contained within the Group Carousel. Any settings you apply here will be applied to the inactive Group Modules.
Expand the Background tab. We’ll apply a light gradient to the inactive tabs to ensure the text is legible. Set the first gradient stop to #000000 with a 0% opacity. Adjust the slider slightly to the right. Enable the Place Gradient Above Background Image toggle.
Set the 2nd gradient stop to #000000 with a 40% opacity.
Enable the Place Gradient Above Background Image toggle.
Next, locate the Filters tab. We will reduce the saturation in the inactive groups to give the background images a black and white effect. Locate the Saturate slider and set it to 0.
Next, expand the Active Groups dropdown menu and click on the Background tab. Apply the same gradient settings as above.
Be sure to enable the Place Gradient Above Background Image toggle.
Expand the Filters dropdown menu under Active Groups and adjust the saturation slider to 75%. This will colorize only the active carousel item, allowing users to identify the active slide in the Carousel.
Customize Responsive Layout
Now that our Group Carousel is ready for desktops, we’ll use Divi 5’s Customizable Responsive Breakpoints to style the mobile version of our carousel. By default, Divi 5 enables three breakpoints. You can use all seven available breakpoints if you want more control over various device sizes. Click the ellipsis menu in the middle of the top bar in the Visual Builder.
Enable the breakpoints you’d like and click Save to continue.
Click on the Tablet breakpoint to view how the layout will look on tablet devices. Scroll down to the Carousel Settings and adjust the Slides to Show to 1. This will also apply to any smaller breakpoints, like phone-wide and phone.
Finally, click the preview button at the top left of the screen to view your Group Carousel in a new tab.
Once finished, your Group Carousel should look similar to the video below.
That’s it! Building a Group Carousel in Divi 5 is straightforward and offers incredible results.
Integration With Divi 5’s Loop Builder
Divi 5’s Loop Builder is a powerful feature that can turn the Group Module into a dynamic content display. This feature allows designers to create dynamic, automated carousels that pull content directly from WordPress, transforming static content into product displays, category archives, or team member carousels with a few clicks.
By integrating Loop Builder with the Group Carousel, Divi 5 empowers users to craft sophisticated, content-driven carousels with minimal manual work, making it a standout feature for dynamic web design.
The Loop Builder enables the Group Carousel to dynamically loop through posts, terms, or user data, creating carousels that automatically reflect your site’s latest content. Because the Loop Builder pulls data directly from your WordPress database, you can easily showcase blog posts, product categories, or user profiles.
For example, you can create a blog post carousel using a post type or a product category slider using WooCommerce terms, making the module incredibly versatile for dynamic content needs.
Real World Examples Of The Group Carousel Module
The Group Carousel module’s flexibility makes it suitable for various use cases. Here are a few real-world examples to show what is possible.
Custom Full Width / Full Screen Slider
In this example, we’ve created a full-width/full-screen slider to feature shakes for an ice cream shop. We set the Carousel to display one slide at a time, each containing a background image, two headings, and a call-to-action button. We’ve also set the animation to advance to the next slide after a 3-second delay. You can achieve this look by setting the Group Carousel and the section to 100vh.
Team Member Showcase
When you want to feature team members on your website, using the Group Carousel module is a great way to do it. In this example, we’ve configured a 3-column layout into our Carousel. Each slide includes a headshot, name, role, and social media links using Divi’s Social Follow module. Set the Carousel to scroll one slide at a time for a clean, professional look.
Category Showcases
Divi 5’s Group Carousel module works flawlessly with the Loop Builder. This allows you to create engaging sliders that feature your website’s product categories. Each slide dynamically pulls in the category name and featured image, making it a great way to showcase your products. In this example, we use filter effects to
Testimonials
The Group Carousel module is also great for creating a testimonial slider. You can easily showcase your best customer reviews, client testimonials, and more. Thanks to the Group Carousel module, you’re no longer restricted to static columns or external plugins.
Unlock Creative Possibilities With Divi 5’s Carousel Module
Divi 5‘s Group Carousel module is a powerful addition that unlocks new possibilities for creating dynamic Divi websites. From creating engaging product sliders to testimonials, this module makes adding interactive content to your Divi sites easier.
Now that Divi 5’s revamped foundation has paved the way for more features, it’s the perfect time to dive in! Have you tried the Group Carousel Module yet? Let us know in the comments below.
Leave A Reply