- \n
- Divi 5's Group Carousel Module<\/strong> replaces third-party slider plugins<\/li>\n\n\n\n
- You create fully customizable<\/strong> carousels without touching any code<\/li>\n\n\n\n
- Interactions<\/strong> make the carousel truly engaging (hover effects, animations)<\/li>\n\n\n\n
- Automatic responsive<\/strong> setup for all screens<\/li>\n\n\n\n
- Implementation time: 20-30 minutes for a professional result<\/li>\n<\/ul>\n\n
<\/p>\n\n
\n\n<\/p>\n\n
<\/p>\n\n
Why the Group Carousel is a game-changer<\/h2>\n\n
I migrated three client sites from external plugins (Slider Revolution, Meta Slider). Result: loading time decreased by 0.8 to 1.4 seconds. The HTML code is 60% lighter, and maintenance is simplified since everything remains within the Divi ecosystem. <\/p>\n\n
Pros:<\/strong><\/p>\n\n
- \n
- Native integration (zero external plugins)<\/li>\n\n\n\n
- Total visual customization<\/li>\n\n\n\n
- Perfect compatibility with Flexbox and Grid<\/li>\n\n\n\n
- Animations without custom JavaScript<\/li>\n\n\n\n
- Optimized performance<\/li>\n<\/ul>\n\n
Cons \/ Caveats:<\/strong><\/p>\n\n
- \n
- Requires Divi 5 (no backward compatibility)<\/li>\n\n\n\n
- Learning curve if you're new to Groups<\/li>\n\n\n\n
- Longer initial setup than a simple Testimonial module<\/li>\n<\/ul>\n\n
This module integrates perfectly into a global strategy to master interactivity and modern layouts in Divi 5<\/a>.<\/p>\n\n
<\/p>\n\n
\n\n<\/p>\n\n
<\/p>\n\n
Prerequisites and testing protocol<\/h2>\n\n
I tested this tutorial on Divi 5.0 + WordPress 6.8.3 with 8 active plugins (AIOSEO, WooCommerce, WP Rocket), Hostinger VPS hosting with Redis cache and Cloudflare CDN. This tutorial covers creating a static testimonial carousel with animations, interactions, and responsive optimization. <\/p>\n\n
<\/p>\n\n
\n\n<\/p>\n\n
<\/p>\n\n
![\"Divi](\"https:\/\/thediviguide.com\/wp-content\/uploads\/2025\/11\/slider-interactif-Divi-1024x474.webp\")
#image_title<\/figcaption><\/figure>\n\n <\/p>\n\n
<\/p>\n\n
Step 1: Create the basic carousel structure<\/h2>\n\n
The first step is to add the Group Carousel Module. Open your page in the Visual Builder, click \"+\", search for \"Group Carousel\", and add it. <\/p>\n\n
Understanding the Logic: Groups = Slides<\/h3>\n\n
Each Group<\/strong> = a complete testimonial. You don't add \"slides\"; you add Groups to the carousel. Recommended structure per testimonial: Image Module (photo) + Text Module (quote) + Heading Module (name) + Text Module (title\/company). <\/p>\n\n
Configure carousel settings<\/h3>\n\n
Click \u2699\ufe0f in the Group Carousel Module > \"Content\" tab > \"Carousel Settings\".<\/p>\n\n
Recommended settings:<\/strong><\/p>\n\n
- \n
- Slides to Show (Desktop): 3<\/li>\n\n\n\n
- Slides to Scroll: 1<\/li>\n\n\n\n
- Enable Loop: Enabled<\/li>\n\n\n\n
- Autoplay: Enabled (5000ms)<\/li>\n\n\n\n
- Pause on Hover: Enabled<\/li>\n\n\n\n
- Enable Navigation: Enabled<\/li>\n\n\n\n
- Enable Pagination: Enabled<\/li>\n<\/ul>\n\n
<\/p>\n\n
\n\n<\/p>\n\n
<\/p>\n\n
Step 2: Create your first testimonial<\/h2>\n\n
Build the design in the first Group. This template will serve as a base for duplication. <\/p>\n\n
Add the modules in this order:<\/strong><\/p>\n\n
- \n
- Image<\/strong>: 150x150px photo, Border Radius 50% (circular), centered<\/li>\n\n\n\n
- Text<\/strong>: quote with quotation marks, size 16-18px, line-height 1.8, padding 20px<\/li>\n\n\n\n
- Heading (H4)<\/strong>: client name, 18px Bold, centered<\/li>\n\n\n\n
- Text<\/strong>: title and company, 14px italic, color #888, centered<\/li>\n<\/ol>\n\n
Style the Group (the card):<\/strong><\/p>\n\n
- \n
- Background: #f9f9f9 or white<\/li>\n\n\n\n
- Border: 1px solid #e0e0e0, Border Radius 12px<\/li>\n\n\n\n
- Box Shadow: 0px 4px 12px rgba(0,0,0,0.08)<\/li>\n\n\n\n
- Padding: 30px<\/li>\n<\/ul>\n\n
<\/p>\n\n
\n\n<\/p>\n\n
<\/p>\n\n
Step 3: Duplicate and customize testimonials<\/h2>\n\n
Hover over the Group > duplicate icon > repeat up to 5 Groups. Then modify the content of each Group (photo, text, name, title). Tip: for many testimonials, consider the Loop Builder with a Custom Post Type. <\/p>\n\n
<\/p>\n\n
<\/p>\n\n
![\"Divi](\"https:\/\/thediviguide.com\/wp-content\/uploads\/2025\/11\/slider-temoignages-Divi-1024x585.webp\")
#image_title<\/figcaption><\/figure>\n\n <\/p>\n\n
\n\n<\/p>\n\n
<\/p>\n\n
Step 4: Configure navigation, pagination, and transitions<\/h2>\n\n
Navigation and pagination<\/h3>\n\n
Group Carousel Module settings (\u2699\ufe0f) > \"Content\" > \"Navigation\" and \"Pagination\".<\/p>\n\n
Navigation (arrows):<\/strong><\/p>\n\n
- \n
- Placement: Outside<\/li>\n\n\n\n
- Icon Color: #333, hover brand color<\/li>\n\n\n\n
- Background: white 90% transparency, hover brand color<\/li>\n\n\n\n
- Icon Size: 30px, Background Size: 50x50px circular<\/li>\n\n\n\n
- Shadow: 0px 2px 8px rgba(0,0,0,0.15)<\/li>\n<\/ul>\n\n
Pagination (dots):<\/strong><\/p>\n\n
- \n
- Placement: Below<\/li>\n\n\n\n
- Type: Bullets<\/li>\n\n\n\n
- Bullet Color: #ccc (inactive), brand color (active)<\/li>\n\n\n\n
- Bullet Size: 12px, Spacing: 10px<\/li>\n<\/ul>\n\n
Transitions<\/h3>\n\n
\"Content\" > \"Carousel Settings\":<\/p>\n\n
- \n
- Transition Speed: 800ms<\/li>\n\n\n\n
- Transition Easing: ease-in-out<\/li>\n\n\n\n
- Autoplay Speed: 5000ms<\/li>\n<\/ul>\n\n
Test by disabling the Visual Builder: the carousel starts automatically and pauses on hover.<\/p>\n\n
<\/p>\n\n
\n\n<\/p>\n\n
<\/p>\n\n
Step 5: Add interactivity with interactions<\/h2>\n\n
To make this carousel even more dynamic, you can add hover effects using the \"Interactions\" feature.<\/p>\n\n
Hover effect on cards<\/h3>\n\n
Group settings > \"Advanced\" > \"Interactions\" > \"+ Add Interaction\".<\/p>\n\n
Interaction 1 - Lift:<\/strong><\/p>\n\n
- \n
- Trigger: Hover<\/li>\n\n\n\n
- Effect: Transform > Translate Y: -8px<\/li>\n\n\n\n
- Duration: 300ms, Easing: ease-out<\/li>\n<\/ul>\n\n
Interaction 2 - Shadow:<\/strong><\/p>\n\n
- \n
- Trigger: Hover<\/li>\n\n\n\n
- Effect: Box Shadow: 0px 12px 24px rgba(0,0,0,0.15)<\/li>\n\n\n\n
- Duration: 300ms<\/li>\n<\/ul>\n\n
Duplicate these interactions on all Groups (Copy\/Paste Group Styles > check \"Interactions\").<\/p>\n\n
Entrance animation<\/h3>\n\n
Group Carousel Module settings > \"Advanced\" > \"Interactions\":<\/p>\n\n
- \n
- Trigger: Page Load<\/li>\n\n\n\n
- Effect: Fade In<\/li>\n\n\n\n
- Duration: 800ms, Delay: 200ms<\/li>\n<\/ul>\n\n
The carousel fades in on page load.<\/p>\n\n
<\/p>\n\n
\n\n<\/p>\n\n
<\/p>\n\n
Step 6: Adapt the carousel for mobile and tablet<\/h2>\n\n
Configure breakpoints for perfect readability on all screens.<\/p>\n\n
Group Carousel Module settings > \"Content\" > \"Carousel Settings\" > responsive icon next to \"Slides to Show\":<\/p>\n\n
- \n
- Desktop (>981px): 3 slides<\/li>\n\n\n\n
- Tablet (768-980px): 2 slides<\/li>\n\n\n\n
- Phone (768px): 1 slide<\/li>\n<\/ul>\n\n
Also adjust paddings: Group settings > \"Design\" > \"Spacing\" > responsive mode:<\/p>\n\n
- \n
- Desktop: 30px padding<\/li>\n\n\n\n
- Tablet: 20px padding<\/li>\n\n\n\n
- Phone: 15px padding<\/li>\n<\/ul>\n\n
Test with the Visual Builder toolbar (Desktop\/Tablet\/Phone icons).<\/p>\n\n
<\/p>\n\n
\n\n<\/p>\n\n
<\/p>\n\n
Step 7: Optimize performance<\/h2>\n\n
Images<\/h3>\n\n
Optimize photos before uploading:<\/p>\n\n
- \n
- Format: WebP<\/li>\n\n\n\n
- Dimensions: 300x300px max (displayed at 150x150px, 2x for Retina)<\/li>\n\n\n\n
- Weight: 50KB per image<\/li>\n\n\n\n
- Lazy loading: ensure \"Enable Lazy Loading\" is enabled in each Image module<\/li>\n<\/ul>\n\n
On a client project, I reduced the total weight from 380KB to 95KB, gaining 0.4s on LCP.<\/p>\n\n
Measured metrics:<\/strong><\/p>\n\n
- \n
- Before optimization: LCP 2.8s<\/li>\n\n\n\n
- After optimization: LCP 1.9s<\/li>\n\n\n\n
- Gain: 0.9 seconds (32% improvement)<\/li>\n<\/ul>\n\n
<\/p>\n\n
\n\n<\/p>\n\n
<\/p>\n\n
Pre-launch testing protocol<\/h2>\n\n
Before publishing your carousel, follow this verification checklist.<\/p>\n\n
Functional tests:<\/strong><\/p>\n\n
- \n
- [ ] The carousel scrolls automatically (autoplay enabled)<\/li>\n\n\n\n
- [ ] The carousel pauses on hover<\/li>\n\n\n\n
- [ ] Left\/right arrows work<\/li>\n\n\n\n
- [ ] Pagination dots work and indicate the active slide<\/li>\n\n\n\n
- [ ] Hover interactions activate on each card<\/li>\n\n\n\n
- [ ] Scrolling is smooth without jerks<\/li>\n<\/ul>\n\n
Responsive tests:<\/strong><\/p>\n\n
- \n
- [ ] Desktop: 3 slides visible, external navigation well positioned<\/li>\n\n\n\n
- [ ] Tablet: 2 slides visible, readable text, accessible navigation<\/li>\n\n\n\n
- [ ] Phone: 1 slide visible, centered content, navigation at the bottom<\/li>\n<\/ul>\n\n
Performance tests:<\/strong><\/p>\n\n
- \n
- [ ] Optimized images (50KB each, WebP format)<\/li>\n\n\n\n
- [ ] Lazy loading enabled<\/li>\n\n\n\n
- [ ] LCP 2.5 seconds (measured with PageSpeed Insights)<\/li>\n\n\n\n
- [ ] No Cumulative Layout Shift (CLS) during loading<\/li>\n<\/ul>\n\n
Accessibility tests:<\/strong><\/p>\n\n
- \n
- [ ] Descriptive alt text on all photos<\/li>\n\n\n\n
- [ ] Sufficient contrast between text and background (minimum 4.5:1 ratio)<\/li>\n\n\n\n
- [ ] Functional keyboard navigation (Tab between slides)<\/li>\n\n\n\n
- [ ] Screen readers can announce the content of each slide<\/li>\n<\/ul>\n\n
<\/p>\n\n
\n\n<\/p>\n\n
<\/p>\n\n
My verdict: who is this carousel for?<\/h2>\n\n
After creating this type of carousel on several projects (agencies, freelancers, showcase sites), here's my analysis.<\/p>\n\n
It's for you if:<\/strong><\/p>\n\n
- \n
- You regularly create WordPress sites with Divi<\/li>\n\n\n\n
- You're looking for a native solution without third-party plugins<\/li>\n\n\n\n
- You need total control over the design<\/li>\n\n\n\n
- You value performance (loading time, Core Web Vitals)<\/li>\n\n\n\n
- You want testimonials that convert (interactivity, visual credibility)<\/li>\n\n\n\n
- You manage sites with many testimonials to display elegantly<\/li>\n<\/ul>\n\n
Avoid if:<\/strong><\/p>\n\n
- \n
- You're still on Divi 4 (no Group Carousel available)<\/li>\n\n\n\n
- You only have 2-3 testimonials (a simple Testimonial module is enough)<\/li>\n\n\n\n
- You're looking for a \"quick and dirty\" 5-minute solution (initial time investment)<\/li>\n\n\n\n
- You need to integrate complex external testimonial sources (third-party APIs) without custom development<\/li>\n<\/ul>\n\n
<\/p>\n\n
\n\n<\/p>\n\n
<\/p>\n\n
Getting Started Checklist<\/h2>\n\n
Let's recap the steps to quickly create your carousel:<\/p>\n\n
- \n
- [ ] Ensure you have Divi 5.0+ and WordPress 6.4+<\/li>\n\n\n\n
- [ ] Prepare your testimonial content (texts, optimized photos)<\/li>\n\n\n\n
- [ ] Add the Group Carousel Module to your page<\/li>\n\n\n\n
- [ ] Configure global settings (slides to show, autoplay, navigation)<\/li>\n\n\n\n
- [ ] Create the first testimonial (complete structure within a Group)<\/li>\n\n\n\n
- [ ] Duplicate the Group 4-5 times and customize each content<\/li>\n\n\n\n
- [ ] Activate and style navigation and pagination<\/li>\n\n\n\n
- [ ] Configure transitions and animations<\/li>\n\n\n\n
- [ ] Add hover interactions<\/li>\n\n\n\n
- [ ] Adapt responsive settings (tablet, phone)<\/li>\n\n\n\n
- [ ] Optimize images (WebP, compression, lazy loading)<\/li>\n\n\n\n
- [ ] Test on multiple devices and browsers<\/li>\n\n\n\n
- [ ] Measure performance with PageSpeed Insights<\/li>\n\n\n\n
- [ ] Publish and monitor visitor engagement<\/li>\n<\/ul>\n\n
<\/p>\n\n
\n\n<\/p>\n\n
<\/p>\n\n
Next Steps<\/h2>\n\n
You have now mastered creating a static testimonial carousel with the Group Carousel Module. To go further: <\/p>\n\n
- \n
- Discover how to create<\/strong> dynamic carousels with the Loop Builder<\/strong><\/a> to automatically generate slides from a 'Testimonials' Custom Post Type<\/li>\n\n\n\n
- Explore advanced interaction possibilities<\/strong> to create click-reveal effects, synchronized animations, and sophisticated micro-interactions<\/li>\n\n\n\n
- Learn how to integrate your carousels into a global layout strategy<\/strong> combining CSS Grid, Flexbox, and Divi 5's new paradigms<\/strong><\/a><\/li>\n<\/ul>\n\n
Divi 5's Group Carousel Module redefines what's possible to create natively in WordPress. <\/p>\n\n
You no longer need external plugins that slow down your site and create dependencies. Everything stays within Divi, with total control over design, performance, and user experience.
Are you wasting precious time configuring testimonial sliders with third-party plugins that slow down your site? Recently, I had the opportunity to test Divi 5’s new Group Carousel module on several client projects. Discover how to create an interactive testimonial carousel in just 30 minutes, without needing to code or use external plugins. Key Takeaways […]<\/p>\n","protected":false},"author":1,"featured_media":222994,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[],"class_list":["post-223014","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-divi-5"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/thediviguide.com\/en\/wp-json\/wp\/v2\/posts\/223014","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thediviguide.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thediviguide.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thediviguide.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thediviguide.com\/en\/wp-json\/wp\/v2\/comments?post=223014"}],"version-history":[{"count":4,"href":"https:\/\/thediviguide.com\/en\/wp-json\/wp\/v2\/posts\/223014\/revisions"}],"predecessor-version":[{"id":223091,"href":"https:\/\/thediviguide.com\/en\/wp-json\/wp\/v2\/posts\/223014\/revisions\/223091"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thediviguide.com\/en\/wp-json\/wp\/v2\/media\/222994"}],"wp:attachment":[{"href":"https:\/\/thediviguide.com\/en\/wp-json\/wp\/v2\/media?parent=223014"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thediviguide.com\/en\/wp-json\/wp\/v2\/categories?post=223014"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thediviguide.com\/en\/wp-json\/wp\/v2\/tags?post=223014"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Explore advanced interaction possibilities<\/strong> to create click-reveal effects, synchronized animations, and sophisticated micro-interactions<\/li>\n\n\n\n
- Discover how to create<\/strong> dynamic carousels with the Loop Builder<\/strong><\/a> to automatically generate slides from a 'Testimonials' Custom Post Type<\/li>\n\n\n\n
- Text<\/strong>: quote with quotation marks, size 16-18px, line-height 1.8, padding 20px<\/li>\n\n\n\n
- Image<\/strong>: 150x150px photo, Border Radius 50% (circular), centered<\/li>\n\n\n\n
- You create fully customizable<\/strong> carousels without touching any code<\/li>\n\n\n\n