Tutoriel carrousel Divi 5 : créer un carrousel de témoignages interactif avec le Group Carousel Module

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

Prérequis et accès à Divi 5

Pour mettre tout ça en pratique, vous avez besoin de trois éléments clés. D'abord, Divi 5 🔗 la nouvelle et dernière version appellée aussi Divi Pro. Ensuite, si vous n'avez pas encore migré, Divi Builder 🔗 vous permet de commencer immédiatement sur votre thème actuel. Enfin, pour un environnement optimisé sans tracas d'hébergement, Divi Hosting 🔗 est préconfigué avec Divi et Redis — idéal si vous démarrez de zéro ou cherchez à éliminer les goulots d'étranglement serveur.

---

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 + dernière version de WordPress 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 :

1. Image : photo 150x150px, Border Radius 50% (circulaire), centrée
2. Text : citation avec guillemets, taille 16-18px, line-height 1.8, padding 20px
3. Heading (H4) : nom du client, 18px Bold, centré
4. 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.

Questions :

_{Les outils marqués 🔗 sont affiliés. Si vous achetez, je perçois une commission sans frais pour vous. Pour plus de détails, vous pouvez consulter la page complète de clause de transparence.}