Divi 5 marque un tournant dans la technologie des page builders WordPress. La refonte complète a apporté des gains de performance substantiels, un système de modules restructuré et des paramètres composables natifs qui éliminent la majorité des contournements CSS. Pourtant, beaucoup d’utilisateurs Divi restent ancrés sur un set étroit de modules familiers, passant à côté de capacités puissantes qui dorment dans leur installation. Ce guide passe en revue dix modules Divi 5 sous-utilisés que les designers pros peuvent exploiter pour bâtir des sites plus sophistiqués et plus interactifs sans recourir au code custom.
Pourquoi les paramètres composables changent la donne
La force de Divi 5 ne tient pas seulement aux capacités individuelles des modules, mais à la philosophie des paramètres composables qui sous-tend le système entier. Chaque module supporte un styling granulaire au niveau sous-élément — couleurs, polices, espacements, ombres, bordures et effets sur n’importe quel composant d’un module sans écrire de CSS. Cela rend le design sophistiqué accessible aux designers qui maîtrisent les principes mais n’ont pas de compétences fortes en développement.
Beaucoup de designers fonctionnent avec un modèle mental limité de ce que les modules peuvent faire. Ils utilisent les mêmes trois ou quatre modules en boucle, produisant des designs homogènes qui ne différencient pas leur travail. Casser ce pattern demande une exploration intentionnelle : charger une mise en page avec les modules par défaut, tester leur potentiel, repérer les manques dans le playbook habituel.
1. Module Timeline : le storytelling visuel
Le module Timeline présente l’information chronologique sous forme de chronologie verticale ou horizontale avec points de connexion, dates et contenu descriptif personnalisables. Au-delà des cas évidents (histoires d’entreprise, processus), la flexibilité couvre l’évolution produit, les jalons de projet, la progression de carrière, les événements fondateurs — tout récit qui bénéficie d’un séquençage temporel. Vous pouvez attribuer des couleurs custom à chaque item pour codifier des segments. Le comportement responsive bascule automatiquement de l’horizontal au vertical sur mobile sans module séparé. Le module s’intègre aussi au système de contenu dynamique de Divi, donc les données de timeline peuvent venir de champs personnalisés.
2. Module Pricing Table : au-delà du tarif basique
Le module Pricing Table est partout, mais la majorité des implémentations n’utilise pas ses fonctionnalités avancées. Dans Divi 5, chaque item peut avoir un fond distinct, du texte et un style de bouton custom par item, et un plan recommandé mis en avant. La fonction de comparaison native affiche checkmarks et croix pour la disponibilité des fonctionnalités sans CSS externe. Les paramètres composables donnent un contrôle granulaire sur marges, paddings, bordures, ombres et opacité au niveau sous-élément. À utiliser pour la comparaison de plans SaaS, les options de packs immobiliers avec recommandation mise en avant, ou les niveaux de service de conseil avec listes de fonctionnalités détaillées. Le responsive empile automatiquement les plans verticalement sur mobile.
3. Module Wistia Video : l’intégration vidéo pro
Le module Wistia Video se connecte directement à votre compte Wistia et tire les vidéos sans embed code manuel ni gymnastique d’iframe. La commodité compte moins que ce qu’elle préserve : analytics Wistia, heatmaps qui montrent où les viewers décrochent, options de personnalisation du player qui maintiennent la cohérence de marque. Beaucoup de designers embarquent les vidéos manuellement via iframes et passent à côté de la donnée d’engagement qui vient avec l’intégration native. Le module gère le scaling responsive automatiquement. Utile pour les études de cas, démos produit, contenu de formation et témoignages clients où la donnée de performance vidéo informe l’itération suivante.
4. Module Code : la sortie de secours chirurgicale
Le module Code est humble et souvent ignoré parce qu’il sonne comme nécessitant des compétences de code. En réalité, c’est une soupape pour les moments où aucun module Divi natif n’existe pour votre besoin précis. Il accepte HTML, CSS et JavaScript, ce qui le rend adapté à l’embed de widgets tiers (Calendly, Typeform), d’éléments interactifs custom ou de visualisations spécialisées. Contrairement à du code ajouté aux fichiers de template, le module Code garde le code custom localisé à des sections de page précises, ce qui le rend portable d’un projet à l’autre. Les sections contenant des modules Code peuvent être dupliquées et réutilisées. Le module n’est pas une béquille pour le mauvais design ; c’est le pont entre les capacités natives de Divi et les rares cas où un outil spécialisé est la bonne réponse.
5. Module Testimonials : la preuve sociale systématisée
Le module Testimonials est capable mais reçoit souvent une personnalisation minimale. Divi 5 permet de personnaliser images d’avatar, couleur de texte, style de fond et densité de mise en page, avec plusieurs options de layout : colonne unique, grilles multi-colonnes, formats carousel avec navigation. Les avatars sont mis à l’échelle selon les terminaux et l’optimisation d’image native de Divi les garde légers. Le contenu de témoignage supporte le formatage de texte riche, les liens et les emphases. Une typographie, des espacements et une couleur stratégiques transforment une section basique en preuve sociale convaincante qui pèse vraiment sur les décisions de conversion.
6. Module Blurb : le cheval de bataille discret
Le module Blurb est trompeusement simple — un conteneur pour icône, titre et texte — et la majorité des designers le déploie en mises en page trois colonnes pour des listes de fonctionnalités sans aller plus loin. Dans Divi 5, les paramètres composables permettent de styler icône, titre et texte indépendamment. Polices custom sur les titres pendant que le corps reste dans une autre. Le dimensionnement d’icône est granulaire ; on peut appliquer ombres, bordures et effets d’opacité aux icônes seules. La flexibilité de mise en page va au-delà des grilles standards : combiner des configurations Blurb différentes dans une rangée crée des layouts asymétriques. À utiliser pour des flows de processus avec icônes séquentielles, des sections de comparaison de fonctionnalités, des présentations d’équipe et des mises en avant de services.
7. Module Person : humaniser la marque
Le module Person affiche image, nom, titre et liens sociaux d’une personne. Conçu pour les pages d’équipe, listes de speakers et structures organisationnelles, il inclut des effets hover natifs qui révèlent les liens sociaux ou l’information additionnelle. Le responsive garantit l’affichage propre sur mobile en colonne unique ou grille multi-colonnes. Au-delà des pages d’équipe, le module Person sert pour les sections de références clients, les boards, les listes de partenaires et les promotions de speakers d’événements. L’intégration native aux réseaux sociaux relie directement à LinkedIn, X (anciennement Twitter), Facebook ou des URL custom sans modules d’icônes séparés.
8. Module Accordion : organiser l’information dense
Le module Accordion transforme du contenu long en sections pliables organisées. L’utilisateur voit les en-têtes et n’ouvre que ce qui le concerne. Dans Divi 5, chaque item peut avoir un style distinct, des en-têtes custom et un contenu flexible incluant texte, images ou modules imbriqués. Les états ouvert et fermé peuvent avoir des palettes différentes. Particulièrement efficace pour les sections FAQ, les détails techniques, les détails de plans tarifaires et la documentation de processus. En réduisant la charge cognitive, l’accordéon encourage l’engagement avec plus de contenu qu’une page tout-déplié. Les FAQ en accordéon sont aussi un bon support pour le balisage schema FAQPage, qui peut décrocher l’éligibilité aux rich results sur les questions présentées.
9. Module Social Icons : intégration de marque discrète
Le module Social Icons affiche des icônes liées vers les profils sociaux. Les paramètres composables permettent de personnaliser taille, couleur, effets hover et espacements avec précision. Sets d’icônes custom avec couleurs spécifiques par plateforme, layouts horizontaux ou verticaux, effets hover (scale, opacité, changement de couleur). Placés stratégiquement dans les en-têtes, pieds, profils d’équipe ou sections d’appel à l’action, des icônes sociales personnalisées guident vers un engagement plus profond sans paraître décoratives. Le module garantit la cohérence à l’échelle du site et rend les mises à jour de liens triviales — un changement dans les paramètres se propage partout.
10. Module Scroll Box : zones scrollables contenues
Le module Scroll Box est relativement nouveau et sous-utilisé. Il crée une zone scrollable contenue à l’intérieur d’une page où l’utilisateur fait défiler indépendamment du scroll principal. Utile pour les galeries à scroll horizontal, les tableaux de comparaison détaillés, les sections de documentation qui ne demandent pas la pleine page, et les sections timeline avec décompositions détaillées. Supporte le scroll vertical et horizontal et peut contenir n’importe quels modules imbriqués. Personnalisation de la barre de scroll pour la cohérence visuelle. Sur mobile, le module s’adapte à l’espace disponible automatiquement.
Paramètres avancés et comportement responsive
Le système responsive de Divi 5 mérite l’attention. Chaque module inclut des contrôles natifs pour la visibilité (cacher sur tablette, sur téléphone), des ajustements de taille par appareil, et des bascules de mise en page. Les contrôles d’espacement (marge et padding) sont personnalisables indépendamment pour desktop, tablette et mobile. La taille du texte se réduit sur les écrans plus petits sans media queries. Cette responsivité native est suffisamment complète pour rendre superflues beaucoup de personnalisations CSS.
Les contrôles de visibilité sont particulièrement puissants. Afficher du contenu différent sur mobile vs desktop, afficher des arrangements de modules alternatifs sur tablette, cacher des éléments décoratifs sur petit écran. Les designers avancés s’en servent pour optimiser l’expérience mobile pour le tactile plutôt que de servir des layouts desktop réduits.
L’intégration CSS custom utilise une syntaxe de sélecteurs scopée au module. Le CSS spécifique au module reste localisé plutôt que d’affecter tout le site. Si on déplace un module sur une autre page, le CSS suit. Cela évite les conflits en cascade et garde le CSS maintenable.
Stratégies de combinaison de modules
La vraie puissance émerge quand les modules se combinent. Un Timeline suivi d’une série de Blurb raconte l’évolution d’une entreprise. Des Person en grille avec des Accordion en dessous créent un répertoire d’équipe extensible. Des Pricing Table couplés à des Scroll Box contenant les détails de fonctionnalités créent des présentations tarifaires sophistiquées. Des Testimonials en carousel intercalés avec des Wistia Video créent des récits d’études de cas. Comprendre les capacités individuelles est la fondation ; reconnaître comment les modules interagissent sépare le design correct du design exceptionnel.
Considérations de performance
Tous les modules Divi 5 sont optimisés pour la performance par défaut. Ils ne chargent pas de JavaScript inutile et le styling sort en CSS efficace. Même les mises en page complexes combinant plusieurs modules avancés tiennent les Core Web Vitals au vert quand le contenu (images, vidéo) est correctement optimisé. INP a officiellement remplacé FID comme Core Web Vital en mars 2024 — l’empreinte JavaScript réduite de Divi 5 aide les scores INP de manière significative par rapport aux anciennes versions.
Les navigateurs modernes gèrent l’optimisation de rendu de manière sophistiquée. Les modules Divi 5 exploitent les capacités natives pour le lazy loading des images, le report de l’exécution JavaScript et la priorisation du contenu critique. Les modules utilisent du HTML sémantique et un comportement de scroll CSS qui s’intègrent au rendu natif du navigateur plutôt que de lutter contre.
Profondeur de personnalisation sans code
La philosophie des paramètres composables signifie qu’on atteint une personnalisation visuelle sophistiquée sans écrire de CSS. Contrôles typographiques, ajustements d’espacement, application de couleurs, effets d’ombre, comportement responsive — tout via l’UI du module. Beaucoup de designers qui ont appris Divi sur d’anciennes versions ne réalisent pas l’ampleur du changement. Le design Divi moderne demande moins de contournements CSS et plus de sélection et configuration de modules stratégiques.
Patterns d’implémentation concrets
Page d’accueil SaaS. Module Hero avec fond marquant et accroche. Trio de Blurb pour les fonctionnalités clés avec icônes custom. Pricing Table avec plans comparés. Testimonials alternés (carousel sur desktop, colonne unique sur mobile) avec Scroll Box contenant les détails d’études de cas. Timeline qui raconte l’évolution. Person modules pour l’équipe fondatrice avec liens sociaux intégrés. Accordion pour les FAQ. Sept modules distincts, chacun déployé pour un impact maximal, formant un récit cohérent.
Portfolio d’agence. Hero. Person modules en galerie pour l’équipe. Scroll Box contenant les portfolios projets que les utilisateurs font défiler horizontalement. Chaque projet associé à un Testimonials avec retour client. Wistia Video près du bas pour les highlights vidéo. Social Icons en pied.
Contenu éducatif. Timeline pour la progression d’apprentissage, chaque étape liée à un Accordion contenant le contenu de leçon. Blurb pour les évaluations avec indicateurs de progression visuels. La combinaison rend le contenu séquentiel digeste.
Landing page entreprise. Pricing Table, Testimonials, Social Icons et Scroll Box ensemble pour créer des expériences de conversion pro. La clé, c’est la combinaison intentionnelle : choisir les modules pour des objectifs de communication précis plutôt que par défaut.
Conclusion
Les dix modules ci-dessus représentent une fraction des capacités Divi 5, mais ils mettent en lumière un pattern : les outils de design les plus puissants sont souvent les plus simples, et les plus grandes améliorations de design viennent de la maîtrise des modules existants plutôt que de l’ajout permanent de plugins. Passez du temps avec les états hover de l’Accordion, le comportement responsive du Scroll Box, les capacités de contenu dynamique du Timeline. Votre vocabulaire de design s’élargit, la dette CSS diminue, et les sites deviennent plus maintenables. Le meilleur design Divi ne tient pas à connaître chaque module ; il tient à comprendre les capacités déjà en place et à les déployer avec intention.
LaFactory bâtit des sites Divi 5 pros qui exploitent pleinement le système de modules natif — paramètres composables, contrôles responsive, contenu dynamique — plutôt que de lutter contre lui à coups de CSS. Contactez-nous pour cadrer un build ou un refactor Divi 5.