L’incroyable « remontada » de Divi 5 en 2025 !

Depuis le début de l’année 2025, l’équipe d’Elegant Themes avance à un rythme effréné dans le développement de Divi 5. En l’espace de quelques mois – et à l’heure où j’écris cet article – pas moins de 21 nouvelles fonctionnalités ont été publiées, transformant peu à peu le célèbre constructeur en un outil entièrement repensé, plus moderne, plus rapide et surtout beaucoup plus flexible.

Si vous avez eu du mal à suivre cette transformation qui a eu lieu tout au long de cette année, je vous propose un récapitulatif de l’incroyable « remontada » de Divi 5 dans cet article…

1 – Points de rupture (Breakpoints) réactifs personnalisables | Public Alpha 7.2 | 6 février 2025

Avec cette nouvelle mise à jour, Divi 5 vous permet enfin de personnaliser vos points de rupture ! Fini les trois tailles figées : vous pouvez désormais ajuster les seuils selon vos besoins et activer uniquement ceux que vous utilisez.

Divi propose désormais 7 breakpoints au total, dont quatre nouveaux (Phone Wide, Tablet Wide, Widescreen, Ultra Widescreen).

Chaque breakpoint est entièrement modifiable, et les changements que vous faites s’appliquent automatiquement à la taille d’écran concernée.

Une nouveauté simple mais puissante, qui vous donne un contrôle total sur le responsive design !

🍒 Et cerise sur le gâteau, il suffit de faire vos modifications sur la taille d’écran choisie et les options sont directement enregistrées pour cette taille sans impacter les autres.

Découvrir cette fonctionnalité

2 – Préréglages (presets) | Public Alpha 9.3 | 11 mars 2025

Les Presets vous permettent de créer des ensembles de styles réutilisables (typos, couleurs, bordures, espacements, etc.) que vous pouvez appliquer à n’importe quel élément.

Lorsqu’un Preset est modifié, toutes les instances qui l’utilisent se mettent automatiquement à jour, ce qui garantit une cohérence parfaite sur l’ensemble du site.

Vous pouvez également empiler plusieurs préréglages sur un même élément, et même redéfinir les presets par défaut pour adapter l’apparence globale de vos modules.

Les presets existaient dans Divi 4 mais sont arrivés dans Divi 5 avec une plus grande précision.

Découvrir cette fonctionnalité

3 – Unités CSS avancées | Public Alpha 10.1 | 19 mars 2025

Divi 5 prend désormais en charge toutes les unités CSS (px, rem, vw, etc.), ainsi que les fonctions comme calc() et clamp(). Vous pouvez taper ou glisser pour ajuster les valeurs, tout en bénéficiant de la liberté de composition.

Vous avez aussi la possibilité d’utiliser des variables CSS : définissez-les globalement ou au niveau de la page, puis référez-vous à ces variables dans vos styles. Une modification à la source se répercute partout où la variable est utilisée.

Cette nouveauté rend la création de typographies fluides et de designs adaptatifs beaucoup plus simple et puissante.

Découvrir cette fonctionnalité

4 – Gestionnaire de variables globales | Public Alpha 11.1 | 3 avril 2025

Le gestionnaire de variables globales permet de définir des valeurs réutilisables (couleurs, typographies, nombres, images, textes, URLs) dans un gestionnaire central.

Vous pouvez ensuite injecter ces variables dans les options des éléments et des presets. Si vous modifiez une variable, toutes les parties du site qui l’utilisent se mettent à jour automatiquement, ce qui assure une cohérence instantanée sur l’ensemble du site.

C’est une avancée majeure pour fluidifier votre workflow et centraliser la maîtrise du design sans refaire les mêmes réglages à chaque module.

Découvrir cette fonctionnalité

5 – Lignes imbriquées | Public Alpha 12.1 | 17 avril 2025

Il est enfin possible d’imbriquer des lignes dans d’autres lignes, sans limite de profondeur, ouvrant la porte à des structures de mise en page bien plus complexes.

Quand vous ajoutez une ligne à l’intérieur d’une colonne, vous pouvez y insérer des modules ou continuer à imbriquer encore des lignes.

Parallèlement, les options de dimensionnement des colonnes ont été enrichies : vous contrôlez désormais précisément la largeur et la hauteur de chaque colonne dans vos agencements imbriqués.

Découvrir cette fonctionnalité

6 – Groupe de modules | Public Alpha 13.1 | 1er mai 2025

Un nouveau module voit le jour, il s’agit d’un conteneur : les groupes de modules.

Vous pouvez désormais regrouper plusieurs modules à l’intérieur d’une colonne pour les manipuler, styliser ou dupliquer comme un seul élément.

Ces groupes prennent en charge les presets et peuvent être enregistrés comme éléments globaux, assurant cohérence et gain de temps.

Vous pouvez imbriquer des groupes les uns dans les autres – ou dans des lignes – sans limite, ce qui ouvre des possibilités de structure très évolutives.

Découvrir cette fonctionnalité

7 – Gestion des attributs | Public Alpha 14.1 | 16 mai 2025

Avec Divi 5, la gestion des attributs devient beaucoup plus puissante et précise, vous pouvez :

• Copier des attributs au niveau du module, d’un groupe d’options, d’un onglet ou d’un champ, avec toute la granularité souhaitée.
• Coller de façon sélective : vous pouvez choisir de coller tous les attributs, ou uniquement les styles, le contenu ou les presets.
• Réinitialiser des attributs de façon ciblée : tout remettre à zéro, ou seul le style, le contenu ou les presets selon vos besoins.
• Ces options sont accessibles via un menu contextuel (clic droit), y compris au niveau des groupes d’options, pour une action rapide et précise.
• En plus, de nouveaux raccourcis clavier permettent d’accélérer ces opérations.

Cette gestion fine vous donne un contrôle total sur vos éléments, tout en vous évitant les retours fastidieux au code pour synchroniser des styles entre modules.

Découvrir cette fonctionnalité

8 – Recherche et filtrage des réglages | Public Alpha 15.1 | 29 mai 2025

Divi 5 intègre désormais une barre de recherche dans le panneau des réglages, pour vous permettre de trouver instantanément une option par mot-clé, sans fouiller dans les onglets.

Vous disposez aussi de filtres utiles : par type de réglage (couleurs, tailles…) ou par état, notamment « modifié », ce qui permet de repérer les options que vous avez changées sur un module.

Cette amélioration augmente considérablement votre rapidité de travail avec Divi, surtout sur des modules avec de nombreux réglages.

Découvrir cette fonctionnalité

9 – Attributs étendus | Public Alpha 16 | 5 juin 2025

Divi 5 recrée le concept de « étendre les styles », connu dans Divi 4, mais de manière largement enrichie. Vous pouvez maintenant propager un ou plusieurs attributs — styles, presets, ou contenu — d’un élément vers d’autres éléments de la page.

Le menu « Extend Attributes » (accessible par clic droit) vous permet de choisir la source, la destination (colonne, ligne, section, page entière) et le type d’attribut à étendre. Vous pouvez étendre des styles individuels, des groupes d’options ou des presets, avec une sélection très fine des champs à propager.

De plus, le panneau « Extend Attributes » s’adapte automatiquement au contexte de l’élément actif, et vous pouvez le fixer pour l’avoir toujours à portée.

Durant un certain temps, je vous avoue avoir eu peur 😰 que Divi 5 n’intègre pas cette fonctionnalité qui m’était indispensable dans Divi 4 pour créer des sites avec plus de productivité.

Découvrir cette fonctionnalité

10 – Chercher et remplacer | Public Alpha 17 | 18 juin 2025

Une fonction « Find and Replace » accessible par clic droit sur n’importe quel champ arrive dans Divi 5. Vous pouvez rechercher une valeur dans un élément (par exemple une couleur, une police, un chiffre) puis la remplacer partout, selon une portée que vous définissez (dans l’élément, ses enfants, la page entière, etc.).

Cette fonctionnalité est particulièrement utile pour transformer des valeurs statiques en variables (couleurs, polices…), ou pour ajuster rapidement une nuance ou un style dans un layout importé sans devoir fouiller chaque option.

Vous contrôlez aussi quelles options sont remplacées (types d’éléments, champs identiques seulement), pour éviter les effets secondaires indésirables.

Découvrir cette fonctionnalité

11 – Couleurs relatives & HSL | Public Alpha 17.1 |19 juin 2025

Il est enfin possible d’utiliser des couleurs relatives reposant sur HSL (Hue, Saturation, Lightness) : vos couleurs peuvent être définies comme variables et ajustées mathématiquement les unes par rapport aux autres.

Par exemple, vous pouvez déclarer votre couleur « primaire » puis créer des déclinaisons (teinte, saturation, luminosité modifiées) qui resteront liées à cette couleur mère. Si vous changez la couleur primaire, toutes les déclinaisons se mettent à jour automatiquement.

Le sélecteur de couleurs a été repensé : il affiche les variables, permet de composer des couleurs relatives et intègre une interface HSL plus claire (teinte, saturation, luminosité et opacité).

Découvrir cette fonctionnalité

12 – Interactions | Public Alpha 18.1 | 26 juin 2025

Divi 5 propose maintenant un système d’interactions intégré, qui permet de créer des effets dynamiques comme des pop-ups, des toggles ou des animations liées au scroll ou au mouvement de la souris.

Vous choisissez un déclencheur (click, survol, scroll, entrée dans le viewport, etc.), un effet (afficher/masquer, changer un preset, modifier un attribut, etc.) et une cible (l’élément qui subit l’action).

L’éditeur d’interactions est accessible depuis l’onglet avancé de chaque module, et les effets incluent des options comme Toggle Visibility, Toggle Preset, Mirror Mouse Movement, Scroll To Element, gestion des cookies et attributs, etc.

Quelques exemples d’utilisation :

• créer une pop-up qui apparaît quand une section entre dans le viewport,
• basculer entre deux versions de module sur clic (toggle),
• appliquer une variation de preset en fonction du scroll,
• rendre un élément « suiveur de souris » avec des effets d’inclinaison ou d’opacité.

Découvrir cette fonctionnalité

13 – Flexbox | Public Alpha 18.2 | 10 juillet 2025

C’est une révolution qu’on attendait tous ! Divi 5 intègre enfin la Flexbox 🎉

Vous pouvez désormais construire des dispositions complexes en imbriquant des lignes, en contrôlant la disposition des éléments enfants (direction, passage à la ligne, ordre) et en ajustant les alignements verticaux ou horizontaux – le tout sans avoir à coder (c’était le cas avec Divi 4 comme expliqué dans cet article).

Pour chaque point de rupture, vous pouvez définir une structure différente : modifier la largeur des colonnes, changer l’ordre des éléments, ou redéfinir le sens du flux selon l’appareil.

Avec l’arrivée de la Flexbox, Divi abandonne certaines sections spécialisées (fullwidth violette et specialty orange) au profit d’un système unifié : tout passe par les lignes flex, ce qui simplifie la structure globale.

Découvrir cette fonctionnalité

14 – Loop Builder | Public Alpha 19.1 | 25 juillet 2025

On ne l’attendait pas et pourtant il est là ! Le Loop Builder permet de créer des boucles dynamiques pour tout type de contenu – articles, pages, produits, auteurs, catégories, etc.

Vous définissez d’abord un modèle (template) avec vos modules/designs, puis vous configurez la requête (type de post, filtres, méta, ordre) pour alimenter la boucle.

Le Loop Builder est compatible avec les champs personnalisés (ACF), les types de posts personnalisés (comme les Projets de Divi), et même les champs répéteurs.
En modifiant votre requête ou votre modèle, toutes les instances de la boucle se mettent à jour automatiquement.

🤩 On peut enfin construire des pages de contenu personnalisé sans module « blog » imposé, avec une liberté totale sur le design et la structure.

Découvrir cette fonctionnalité

15 – Nouveaux modules : Carousel de groupes, Lottie et liste d’icônes | Public Alpha 20.1 | 8 août 2025

Divi 5 enrichit sa panoplie de modules avec trois ajouts précieux :

• Un module Group Carousel très flexible : chaque « slide » est une toile vierge dans laquelle vous pouvez insérer n’importe quel module, imbriquer des lignes, appliquer des effets, etc. Le carousel peut aussi être alimenté dynamiquement via le Loop Builder (articles, catégories, etc.).
• Un module Lottie, pour intégrer facilement des animations en JSON/SVG. Vous contrôlez la vitesse, le déclencheur, la répétition, etc. Fini l’implémentation de Lottie avec des astuces de ninja !
• Un module Icon List (liste avec icônes), pour créer des listes avec des icônes personnalisées, sans recourir à du texte brut ou à des astuces.

Ces modules tirent parti de la nouvelle architecture de Divi 5 et montrent la capacité du thème à évoluer rapidement vers davantage de modularité.

Découvrir cette fonctionnalité

16 – Modules WooCommerce | Public Alpha 21 | (15 août 2025)

Avec cette mise à jour, Divi 5 propose une première série de 17 modules WooCommerce natifs, sans l’étiquette « legacy ». Ces modules couvrent l’essentiel pour concevoir vos pages produits et catégories avec une liberté totale.

Vous y retrouverez par exemple :

• le module Products pour afficher une grille de produits.
• Product Page Modules : Add To Cart, Product Gallery, Product Title, Product Description, etc.
• des modules utilitaires comme Breadcrumbs, Notice, Product Meta, Reviews, Upsells…

Grâce au Loop Builder, vous pouvez aussi créer des boucles personnalisées sur vos produits (requêtes, styles) au lieu de vous limiter au module « Products » standard.

Les modules restants pour le panier et la validation de commande arriveront dans un second temps.

Découvrir cette fonctionnalité

17 – Responsive Editor | Public Alpha 22 | 27 août 2025

Divi 5 introduit un éditeur réactif centralisé qui facilite la gestion des états responsive, « hover » et « sticky » depuis une seule interface.

Au lieu de devoir passer en mode mobile ou tablette pour modifier les valeurs, vous pouvez cliquer sur l’icône du responsive editor et ajuster les valeurs sur tous les modes simultanément.

Si une option présente des valeurs différentes selon les modes (desktop, tablette, mobile), l’icône devient bleue pour signaler cette modification, et vous pouvez visualiser, modifier ou réinitialiser ces valeurs rapidement.

L’éditeur réactif améliore la rapidité de votre flux de travail et diminue les clics inutiles tout en conservant la puissance du design responsive.

Découvrir cette fonctionnalité

18 – Attributs personnalisés | Public Alpha 23 | 11 septembre 2025

Un nouveau panneau Attributs apparaît dans l’onglet Avancé de chaque élément, vous donnant la possibilité d’ajouter n’importe quel attribut HTML (alt, title, rel, aria-label, data-*, etc.) aussi bien à l’élément principal qu’à ses sous-éléments.

Cela renforce nettement l’accessibilité (vous pouvez associer les rôles, labels ou attributs ARIA aux modules non sémantiques) et permet une personnalisation plus fine du comportement ou de l’indexation du contenu.

Les anciens champs pour les classes CSS ou l’ID sont progressivement dépréciés : leurs valeurs sont migrées automatiquement vers ce nouveau système unifié d’attributs personnalisés.

Bref, vous gagnez enfin la liberté d’ajouter tous les attributs nécessaires à vos éléments sans recourir au code, tout en conservant les réglages de classes et d’identifiants dans ce même environnement.

Découvrir cette fonctionnalité

19 – CSS Grid | Public Alpha 23.2 | 19 septembre 2025

Tout comme l’arrivée de la Flexbox, l’arrivée de CSS Grid est une avancée majeure dans la création de mises en page sophistiquées.

CSS Grid a un comportement un peu plus difficile à comprendre que la Flexbox pour les néophytes et c’est pour cette raison que l’éditeur propose des modèles de grilles prédéfinis que vous pouvez appliquer en un clic. Les éléments s’y adaptent automatiquement au fur et à mesure que vous ajoutez du contenu.

Pour les utilisateurs avertis, toutes les options du CSS Grid sont accessibles : vous pouvez définir vos propres colonnes, lignes, espacement, alignement, direction, etc.

En résumé : CSS Grid offre une flexibilité structurelle « high level », tout en restant accessible aux débutants grâce aux modèles.

Découvrir cette fonctionnalité

20 – Modules de panier et de paiement WooCommerce | Public Alpha 24 | 26 septembre 2025

C’était la partie manquante des modules WooCommerce que les « e-commerçant amoureux de Divi » attendait !

Vous pouvez maintenant construire vos pages de panier et de checkout via le Theme Builder, en assemblant les composants module par module.

Parmi les modules disponibles :

• Pour le panier : Woo Cart Products, Woo Cart Totals, Woo Cross-Sells
• Pour la page de paiement : Woo Checkout Billing, Woo Checkout Shipping, Woo Checkout Details, Woo Checkout Payment, etc.

Lorsque vous activez Divi sur une page panier ou paiement, Divi remplace automatiquement les templates WooCommerce classiques par ces modules, ce qui vous donne contrôle total sur le style et la structure.

Découvrir cette fonctionnalité

21 – Inspecteur | Public Alpha 24.1 | 3 octobre 2025

L’outil Inspector, inspiré de Figma, centralise les attributs d’un élément (et de ses enfants) dans un panneau dédié. Vous pouvez inspecter couleurs, typographies, tailles, contenus et presets, et tout modifier depuis ce panneau.

Voici ce qu’il permet :

• Regrouper les attributs modifiés (couleurs, polices, etc.) d’un élément et de ses descendants, plutôt que de les disperser dans les onglets.
• Éditer en masse : changer une couleur à un seul endroit et la mettre à jour partout où elle est utilisée.
• Accéder aux textes, médias, attributs ou presets actifs dans l’élément inspecté.
• Révéler les attributs utilisés à l’intérieur des presets, ce qui vous permet de les modifier directement à partir de là.

C’est un gain de temps majeur pour repérer et modifier ce qui se cache derrière une mise en page sans sauter entre des onglets multiples. J’ai même l’impression qu’il remplace le petit icône en forme de pinceau qui était tant utile dans Divi 4.

Découvrir cette fonctionnalité

Pour finir : un tableau récapitulatif des avancements de Divi 5

Wahou ! Ça en fait des nouveautés ! Et tout cela en moins d’une année !

En règle générale, l’équipe d’Elegantthemes publie 2 fonctionnalités chaque mois, sans compter les corrections et améliorations…

Mais vous remarquerez que certains mois ont été plus prolifiques que d’autres avec jusqu’à 4 fonctionnalités parues au mois de juin, rien que ça !

Bref, j’ai le sentiment que « ça valait le coup d’attendre » ! Et vous est-ce aussi votre sentiment ?

Pour finir cet article, j’ai pensé qu’un petit récap’ sous forme de tableau serait le bienvenue 👇

Nom de la fonctionnalité	Version Public Alpha	Date de sortie	Description
Points de rupture réactifs personnalisables	7.2	6 février 2025	Permet de définir ses propres breakpoints et d’ajuster le design pour chaque taille d’écran.
Conception basée sur les préréglages (Presets)	9.3	11 mars 2025	Introduit un système de styles réutilisables et synchronisés pour tous les modules du site.
Unités CSS avancées	10.1	19 mars 2025	Ajoute la compatibilité avec toutes les unités CSS (px, em, vw, etc.) et les fonctions calc() et clamp().
Gestionnaire de variables globales	11.1	3 avril 2025	Permet de définir et réutiliser des variables (couleurs, textes, nombres…) dans tout le site.
Lignes imbriquées (Nested Rows)	12.1	17 avril 2025	Autorise l’imbrication de rangées dans d’autres rangées pour des mises en page plus flexibles.
Groupe de modules (Module Groups)	13.1	1er mai 2025	Permet de regrouper plusieurs modules pour les styliser, dupliquer ou déplacer ensemble.
Gestion des attributs	14.1	16 mai 2025	Facilite la copie, le collage et la réinitialisation des styles ou du contenu à différents niveaux.
Recherche et filtrage des réglages	15.1	29 mai 2025	Ajoute une barre de recherche et des filtres dans les panneaux de réglages pour gagner du temps.
Attributs étendus (Extend Attributes)	16	5 juin 2025	Permet d’étendre des styles ou des attributs à d’autres éléments sur la page ou la section.
Chercher et remplacer (Find & Replace)	17	18 juin 2025	Offre un outil de recherche et remplacement global pour modifier des valeurs à grande échelle.
Couleurs relatives & HSL	17.1	19 juin 2025	Introduit un système de couleurs dynamiques liées entre elles via le modèle HSL.
Interactions	18.1	26 juin 2025	Permet de créer des animations, toggles ou effets basés sur le scroll, le clic ou le survol.
Flexbox	18.2	10 juillet 2025	Remplace l’ancien système de colonnes par un modèle de mise en page flexible basé sur flexbox.
Loop Builder	19.1	25 juillet 2025	Permet de concevoir des boucles personnalisées pour afficher n’importe quel type de contenu.
Nouveaux modules : Carousel, Lottie, Icon List	20.1	8 août 2025	Ajoute trois modules modernes : carrousel de groupes, animations Lottie et listes avec icônes.
Modules WooCommerce produits	21	15 août 2025	Introduit 17 modules WooCommerce natifs pour construire vos pages produits et boutiques.
Responsive Editor	22	27 août 2025	Centralise la gestion des modes desktop, tablette et mobile dans une interface unifiée.
Attributs personnalisés	23	11 septembre 2025	Permet d’ajouter n’importe quel attribut HTML ou ARIA à un module directement depuis l’interface.
CSS Grid	23.2	19 septembre 2025	Intègre un véritable système CSS Grid avec modèles prédéfinis et édition visuelle complète.
Modules WooCommerce : panier et paiement	24	26 septembre 2025	Ajoute les modules natifs de panier et de checkout pour un contrôle total du processus d’achat.
Inspecteur (Inspector)	24.1	3 octobre 2025	Centralise tous les attributs et styles d’un élément dans un panneau unique façon Figma.