Dans un précédent article, je vous annoncé un des changements les plus attendus de Divi 5 (lien affilié) : la suppression des shortcodes, le mécanisme principal pour construire le design des sites avec Divi. Cette formulation n’était visiblement pas très claire puisque cette semaine, un visiteur m’a écrit :
« Bonjour, j’ai apprécié votre article, et je me pose une question au sujet de la suppression des shortcode dans Divi 5. En effet j’ai sur mon site WordPress (Divi 4) des plugins importants qui ne fonctionnent qu’avec l’aide d’un shortcode. Quelles seront les conséquences lors du passage à Divi 5 ? »
Rassurez-vous : les shortcodes ne vont pas disparaître avec Divi 5. Dans l’écosystème WordPress, ils restent indispensables. Les shortcodes que vous insérez depuis d’autres extensions ne seront donc pas affectés par le changement annoncé par Elegant Themes.
En réalité, seule l’architecture interne de Divi évolue : le constructeur n’utilisera plus ses propres shortcodes, mais cela n’aura aucune incidence sur les shortcodes tiers déjà présents sur vos pages.
Par contre beaucoup de changements sont à prévoir avec DIVI 5, voici un petit récapitulatif des dernières nouveautés.
Depuis qu’il est passé en version Alpha publique, Divi 5 reçoit une mise à jour toutes les deux semaines. La mouture 19, publiée le 18 juillet, ne se contente plus d’ajouter des options : la plupart des équipes d’Elegant Themes sont désormais concentrées sur le nettoyage des bugs avant l’ouverture de la bêta.
Les nouveautés déjà là
Un système de mise en page Flexbox
Oubliez l’ancien mécanisme de colonnes « flottantes ». Grâce à Flexbox, Divi réorganise automatiquement vos blocs : titres, images et boutons se réalignent quel que soit la taille de l’écran. Vous alignez vos éléments en cochant une case, sans écrire la moindre ligne de CSS, et vous profitez d’un chargement plus léger sur les pages un peu chargées.
Interactions : des effets visuels sans plugin
Dans chaque module, ouvrez l’onglet Avancé puis la section Interactions ; la logique est simple :
- Déclencheur (clic, défilement, délai, passage de souris).
- Action (afficher, cacher, animer, faire défiler).
- Cible (l’élément concerné).
En trois clics, vous faites apparaître une bannière de bienvenue après cinq secondes, animer un bouton lorsqu’il entre dans l’écran ou afficher un pop-up sans installer de plugin ni écrire de JavaScript.
Rechercher & Remplacer
Un clic droit sur n’importe quel champ ouvre la fenêtre Rechercher et remplacer : choisissez la valeur à changer (couleur, police, rayon d’angle…) et décidez si la modification s’applique au module courant, à la section entière ou à toute la page. Idéal pour harmoniser une charte graphique ou adapter un modèle existant en quelques secondes.
Les couleurs relatives
Le sélecteur a été entièrement repensé. Définissez une couleur principale, puis créez des variantes « 20 % plus claires » ou « 50 % d’opacité ». Si vous changez ensuite la teinte maîtresse, tout le nuancier suit instantanément. Parfait pour tester un mode sombre ou un rebranding sans devoir rouvrir chaque module.
Une bibliothèque de composants pensée pour les non-techniciens
Divi 5 inaugure quatre nouveautés qui transforment le montage d’un site en un jeu de construction :
Les variables de conception
Une variable peut stocker une couleur, une taille, un texte ou même une image. Cherchez la petite icône qui ressemble à un gâteau à 3 couches dans la barre latérale gauche, un clic sur cette icône ouvre le Gestionnaire de variables (vous y créez ou gérez vos variables).
Dans n’importe quel champ (couleur, taille, texte…), la même icône apparaît lorsque vous passez la souris sur l’étiquette. Cliquez-la pour injecter l’une des variables que vous venez de créer.
Les lignes imbriquées (Nested Rows)
Vous pouvez placer une ligne à l’intérieur d’une colonne, puis recommencer : pratique pour créer des grilles de témoignages ou une page d’accueil façon magazine, le tout sans toucher au code. Chaque « sous-ligne » garde ses propres réglages et peut donc recevoir un fond ou des marges spécifiques.
Les groupes de modules
Sélectionnez, par exemple, une image, un titre et un bouton, regroupez-les en Groupe : vous obtenez un bloc que vous pouvez déplacer et dupliquer comme une seule entité. Vous pouvez enregistrer ce groupe dans Divi Cloud et le réutiliser sur d’autres sites, ou bientôt l’appeler dans le futur Loop Builder pour l’afficher automatiquement sur toute une liste d’articles.
Le gestionnaire d’attributs
Depuis le menu contextuel, choisissez Copier les attributs puis Coller les attributs : vous pouvez répliquer seulement le style (ex. la typographie) sans toucher au contenu. Avec les raccourcis clavier Shift + Alt + C et Shift + Alt + V, harmoniser vingt boutons prend deux minutes.
Les fonctionnalités qui frappent à la porte
Le Loop Builder
En phase de test final est l’une des fonctionnalité les plus attendue
Le mot d’ordre est : « répéter n’importe quoi ». Concrètement, vous pourrez activer l’option Boucle sur une section, une ligne, un groupe, un module… ou même sur une diapositive à l’intérieur du module Slider !
- Source de contenu étendue – Le Loop Builder saura interroger vos articles, vos produits WooCommerce et tous vos types de contenus personnalisés (Custom Post Types).
- Un seul modèle, des dizaines d’instances – Vous dessinez par exemple une diapo “Recette” : image dynamique, titre, extrait, bouton « Voir la recette ». Activez la boucle ; le Slider affichera automatiquement chaque recette de votre CPT en faisant défiler les diapositives.
- Mises à jour globales – Vous changez la couleur du bouton ou ajoutez un champ ACF ? Toutes les diapos se mettent à jour d’un coup : plus de copier-coller ni de shortcodes externes.
- Autres cas d’usage – Grille de biens immobiliers, liste d’événements, carousel de témoignages… tout ce qui était limité aux articles « classiques » deviendra natif et visuel.
Modules WooCommerce
Les modules « Produit », « Panier », etc. reçoivent les variables, préréglages et Flexbox. Habiller votre boutique n’exigera plus de CSS personnalisé.
Carrousel de groupes
Elegant Themes a montré un premier aperçu : vous pourrez faire défiler vos Groupes (logos, témoignages, articles vedettes) dans un carrousel natif, sans passer par un plugin Premium.
Bêta publique
L’équipe vise toujours une ouverture dans environ six semaines ; ce sera le moment idéal pour migrer vos sites Divi 4 en production en toute sérénité.
RétroCompatibilité améliorée : passer de Divi 4 à Divi 5 sans casse
Elegant Themes vient de renforcer le « pont » qui relie Divi 4 à Divi 5. Concrètement, vous pouvez déjà ouvrir un site bâti sous Divi 4 dans Divi 5 :
- Modules hérités accessibles dans le builder. Les anciens modules (ceux de Divi 4 ou achetés sur le Marketplace) apparaissent maintenant dans le panneau Ajouter un module. Vous continuez donc à utiliser votre bibliothèque actuelle tout en découvrant les nouveaux outils.
- Un « mode rétro » intelligent. Si une page contient un module hérité, Divi charge automatiquement l’ancien moteur uniquement pour cette page ; le reste du site profite du code allégé de Divi 5. Vous évitez ainsi les plantages tout en bénéficiant des gains de vitesse partout ailleurs.
- Testé avec les best-sellers du Marketplace. L’équipe a passé au crible les modules tiers les plus vendus pour vérifier qu’ils fonctionnent en mode rétro. Résultat : l’immense majorité tourne déjà sans bug grave dans l’Alpha.
- Édition possible (mais patience requise). Vous pouvez modifier un module hérité dans le nouveau builder. Il faudra simplement recharger l’aperçu à chaque changement. C’est un petit prix à payer le temps que chaque créateur publie sa « version Divi 5 ».
- Outil de migration et indicateur de performance. Divi affiche un bandeau d’avertissement quand une page utilise le mode rétro, avec la liste des modules concernés et l’impact potentiel sur les performances. Pratique pour planifier les remplacements au fil de l’eau.
En clair : vous pourrez passer vos sites Divi 4 à Divi 5 sans re-maquettage, en gardant vos plugins et mises en page existants, puis retirer progressivement les anciens modules pour adopter la nouvelle génération dès qu’elle sera prête.
Devez-vous passer à Divi 5 tout de suite ?
- Nouveau projet WordPress : oui, testez l’Alpha 19 ; le système Flexbox et la palette de couleurs relatives vous simplifient déjà la vie.
- Site en production sous Divi 4 : mieux vaut attendre la bêta pour profiter du moteur de migration et des modules WooCommerce mis à jour.
- Agence ou freelance : commencez à créer vos propres Groupes de modules et vos variables communes ; vous gagnerez un temps précieux dès que vos clients demanderont de petits ajustements.
L’essentiel à retenir
Divi 5 (lien affilié) vise à rendre la création de site le plus simple possiblepour pouvoir se concentrer sur le contenu. Grâce aux nouvelles variables, aux lignes imbriquées, aux groupes réutilisables, aux couleurs relatives et aux Interactions sans plugin, même un utilisateur sans bagage technique peut désormais bâtir une mise en page complexe. Et avec le Loop Builder qui approche, gérer les CPT n’aura jamais été aussi facile.
