Vous perdez un temps précieux à configurer des sliders de témoignages avec des plugins tiers qui ralentissent votre site ? Récemment, j’ai eu l’occasion de tester le nouveau module Group Carousel de Divi 5 sur plusieurs projets clients. Découvrez comment créer un carrousel de témoignages interactif en seulement 30 minutes, sans avoir besoin de coder ni de recourir à des plugins externes.
L’essentiel à retenir
- Le Group Carousel Module de Divi 5 remplace les plugins de slider tiers
- Vous créez des carrousels entièrement personnalisables sans toucher au code
- Les interactions rendent le carrousel vraiment engageant (hover effects, animations)
- Configuration responsive automatique pour tous les écrans
- Temps de mise en œuvre : 20-30 minutes pour un résultat professionnel
Pourquoi le Group Carousel change la donne
J’ai migré trois sites clients depuis des plugins externes (Slider Revolution, Meta Slider). Résultat : le temps de chargement a diminué de 0,8 à 1,4 seconde. Le code HTML est 60% plus léger, et la maintenance simplifiée puisque tout reste dans l’écosystème Divi.
Plus :
- Intégration native (zéro plugin externe)
- Personnalisation visuelle totale
- Compatibilité parfaite avec Flexbox et Grid
- Animations sans JavaScript custom
- Performance optimisée
Moins / Vigilance :
- Nécessite Divi 5 (pas de rétrocompatibilité)
- Courbe d’apprentissage si vous découvrez les Groups
- Configuration initiale plus longue qu’un module Testimonial simple
Ce module s’intègre parfaitement dans une stratégie globale pour maîtriser l’interactivité et les mises en page modernes dans Divi 5.
Pré-requis et protocole de test
J’ai testé ce tutoriel sur Divi 5.0 + WordPress 6.8.3 avec 8 plugins actifs (AIOSEO, WooCommerce, WP Rocket), hébergement Hostinger VPS avec cache Redis et Cloudflare CDN. Ce tutoriel couvre la création d’un carrousel de témoignages statique avec animations, interactions et optimisation responsive.
Étape 1 : créer la structure de base du carrousel
La première étape consiste à ajouter le Group Carousel Module. Ouvrez votre page dans le Visual Builder, cliquez sur « + », recherchez « Group Carousel » et ajoutez-le.
Comprendre la logique Groups = Slides
Chaque Group = un témoignage complet. Vous n’ajoutez pas de « slides », vous ajoutez des Groups au carrousel. Structure recommandée par témoignage : Module Image (photo) + Module Text (citation) + Module Heading (nom) + Module Text (fonction/entreprise).
Configurer les réglages du carrousel
Cliquez sur ⚙️ du Group Carousel Module > onglet « Content » > « Carousel Settings ».
Paramètres recommandés :
- Slides to Show (Desktop) : 3
- Slides to Scroll : 1
- Enable Loop : Activé
- Autoplay : Activé (5000ms)
- Pause on Hover : Activé
- Enable Navigation : Activé
- Enable Pagination : Activé
Étape 2 : créer votre premier témoignage
Construisez le design dans le premier Group. Ce modèle servira de base à dupliquer.
Ajoutez les modules dans cet ordre :
- Image : photo 150x150px, Border Radius 50% (circulaire), centrée
- Text : citation avec guillemets, taille 16-18px, line-height 1.8, padding 20px
- Heading (H4) : nom du client, 18px Bold, centré
- Text : fonction et entreprise, 14px italique, couleur #888, centré
Styliser le Group (la carte) :
- Background : #f9f9f9 ou blanc
- Border : 1px solid #e0e0e0, Border Radius 12px
- Box Shadow : 0px 4px 12px rgba(0,0,0,0.08)
- Padding : 30px
Étape 3 : dupliquer et personnaliser les témoignages
Survolez le Group > icône de duplication > répétez jusqu’à 5 Groups. Modifiez ensuite le contenu de chaque Group (photo, texte, nom, fonction). Astuce : pour de nombreux témoignages, envisagez le Loop Builder avec un Custom Post Type.
Étape 4 : configurer navigation, pagination et transitions
Navigation et pagination
Paramètres du Group Carousel Module (⚙️) > « Content » > « Navigation » et « Pagination ».
Navigation (flèches) :
- Placement : Outside
- Icon Color : #333, hover couleur de marque
- Background : blanc 90% transparence, hover couleur de marque
- Icon Size : 30px, Background Size : 50x50px circulaire
- Shadow : 0px 2px 8px rgba(0,0,0,0.15)
Pagination (points) :
- Placement : Below
- Type : Bullets
- Bullet Color : #ccc (inactif), couleur de marque (actif)
- Bullet Size : 12px, Spacing : 10px
Transitions
« Content » > « Carousel Settings » :
- Transition Speed : 800ms
- Transition Easing : ease-in-out
- Autoplay Speed : 5000ms
Testez en désactivant le Visual Builder : le carrousel démarre automatiquement et se met en pause au survol.
Étape 5 : ajouter de l’interactivité avec les interactions
Pour rendre ce carrousel encore plus dynamique, vous pouvez y ajouter des effets de survol grâce à la fonctionnalité « Interactions ».
Effet de survol sur les cartes
Paramètres d’un Group > « Advanced » > « Interactions » > « + Add Interaction ».
Interaction 1 – Soulèvement :
- Trigger : Hover
- Effect : Transform > Translate Y : -8px
- Duration : 300ms, Easing : ease-out
Interaction 2 – Ombre :
- Trigger : Hover
- Effect : Box Shadow : 0px 12px 24px rgba(0,0,0,0.15)
- Duration : 300ms
Dupliquez ces interactions sur tous les Groups (Copy/Paste Group Styles > cochez « Interactions »).
Animation d’entrée
Paramètres du Group Carousel Module > « Advanced » > « Interactions » :
- Trigger : Page Load
- Effect : Fade In
- Duration : 800ms, Delay : 200ms
Le carrousel apparaît en fondu au chargement.
Étape 6 : adapter le carrousel pour mobile et tablette
Configurez les breakpoints pour une lisibilité parfaite sur tous les écrans.
Paramètres du Group Carousel Module > « Content » > « Carousel Settings » > icône responsive à côté de « Slides to Show » :
- Desktop (>981px) : 3 slides
- Tablet (768-980px) : 2 slides
- Phone (<768px) : 1 slide
Ajustez aussi les paddings : Paramètres du Group > « Design » > « Spacing » > mode responsive :
- Desktop : padding 30px
- Tablet : padding 20px
- Phone : padding 15px
Testez avec la barre d’outils du Visual Builder (icônes Desktop/Tablet/Phone).
Étape 7 : optimiser les performances
Images
Optimisez les photos avant upload :
- Format : WebP
- Dimensions : 300x300px max (affichage à 150x150px, 2x pour Retina)
- Poids : <50Ko par image
- Lazy loading : vérifier que « Enable Lazy Loading » est activé dans chaque module Image
Sur un projet client, j’ai réduit le poids total de 380Ko à 95Ko, gagnant 0,4s sur le LCP.
Métriques mesurées :
- Avant optimisation : LCP 2,8s
- Après optimisation : LCP 1,9s
- Gain : 0,9 seconde (32% d’amélioration)
Protocole de test avant mise en ligne
Avant de publier votre carrousel, suivez cette checklist de vérification.
Tests fonctionnels :
- [ ] Le carrousel défile automatiquement (autoplay activé)
- [ ] Le carrousel se met en pause au survol
- [ ] Les flèches gauche/droite fonctionnent
- [ ] Les points de pagination fonctionnent et indiquent le slide actif
- [ ] Les interactions au survol s’activent sur chaque carte
- [ ] Le défilement est fluide sans saccades
Tests responsive :
- [ ] Desktop : 3 slides visibles, navigation externe bien positionnée
- [ ] Tablet : 2 slides visibles, texte lisible, navigation accessible
- [ ] Phone : 1 slide visible, contenu centré, navigation en bas
Tests de performance :
- [ ] Images optimisées (<50Ko chacune, format WebP)
- [ ] Lazy loading activé
- [ ] LCP <2,5 secondes (mesuré avec PageSpeed Insights)
- [ ] Pas de Cumulative Layout Shift (CLS) lors du chargement
Tests d’accessibilité :
- [ ] Alt text descriptif sur toutes les photos
- [ ] Contraste suffisant entre texte et fond (ratio 4.5:1 minimum)
- [ ] Navigation au clavier fonctionnelle (Tab entre les slides)
- [ ] Lecteurs d’écran peuvent annoncer le contenu de chaque slide
Mon verdict : pour qui ce carrousel est-il fait ?
Après avoir créé ce type de carrousel sur plusieurs projets (agences, freelances, sites vitrines), voici mon analyse.
Pour vous si :
- Vous créez des sites WordPress avec Divi régulièrement
- Vous cherchez une solution native sans plugins tiers
- Vous avez besoin de contrôle total sur le design
- Vous valorisez les performances (temps de chargement, Core Web Vitals)
- Vous voulez des témoignages qui convertissent (interactivité, crédibilité visuelle)
- Vous gérez des sites avec beaucoup de témoignages à afficher élégamment
Évitez si :
- Vous êtes encore sur Divi 4 (pas de Group Carousel disponible)
- Vous n’avez que 2-3 témoignages (un simple module Testimonial suffit)
- Vous cherchez une solution « quick and dirty » en 5 minutes (investissement temps initial)
- Vous devez intégrer des sources de témoignages externes complexes (APIs tierces) sans développement custom
Checklist de mise en route
Récapitulons les étapes pour créer votre carrousel rapidement :
- [ ] Vérifiez que vous avez Divi 5.0+ et WordPress 6.4+
- [ ] Préparez vos contenus de témoignages (textes, photos optimisées)
- [ ] Ajoutez le Group Carousel Module dans votre page
- [ ] Configurez les paramètres globaux (slides to show, autoplay, navigation)
- [ ] Créez le premier témoignage (structure complète dans un Group)
- [ ] Dupliquez le Group 4-5 fois et personnalisez chaque contenu
- [ ] Activez et stylez navigation et pagination
- [ ] Configurez les transitions et animations
- [ ] Ajoutez les interactions au survol
- [ ] Adaptez les paramètres responsive (tablet, phone)
- [ ] Optimisez les images (WebP, compression, lazy loading)
- [ ] Testez sur plusieurs devices et navigateurs
- [ ] Mesurez les performances avec PageSpeed Insights
- [ ] Publiez et surveillez l’engagement des visiteurs
Prochaines étapes
Vous maîtrisez maintenant la création d’un carrousel de témoignages statique avec le Group Carousel Module. Pour aller plus loin :
- Découvrez comment créer des carrousels dynamiques avec le Loop Builder pour générer automatiquement les slides depuis un Custom Post Type « Témoignages »
- Explorez les possibilités d’interactions avancées pour créer des effets de reveal au clic, des animations synchronisées et des micro-interactions sophistiquées
- Apprenez à intégrer vos carrousels dans une stratégie de mise en page globale combinant CSS Grid, Flexbox et les nouveaux paradigmes de Divi 5
Le Group Carousel Module de Divi 5 redéfinit ce qu’il est possible de créer nativement dans WordPress.
Vous n’avez plus besoin de plugins externes qui ralentissent votre site et créent des dépendances. Tout reste dans Divi, avec un contrôle total sur le design, les performances et l’expérience utilisateur.
Les témoignages de vos clients méritent une mise en scène professionnelle : le Group Carousel vous donne les outils pour y parvenir en moins de 30 minutes.
