En bref
- Divi 5 repart presque de zéro : fin des shortcodes, stockage en blocs WordPress et nouvelle API pour les développeurs.
- L’éditeur est annoncé 2 à 4 fois plus rapide, avec génération automatique de CSS critique et chargement JS à la demande.
- Nouvel ensemble d’outils : Layout Builder (Flexbox/Grid), Loop Builder pour boucles dynamiques et Divi AI pour contenus et images.
- Migration possible via un outil dédié ; tester en staging et sauvegarder (UpdraftPlus, WP Umbrella) avant toute bascule en production.
- Prix : inclus pour les clients existants ; sinon options annuelles (à partir de 89 $/an) ou licences à vie (à partir de 249 $).
Divi 5 : refonte technique et contexte — pourquoi repartir des fondations change la donne
Le choix d’Elegant Themes de réaliser une « Foundation Update » pour Divi 5 n’est pas anecdotique. Après plus de trois ans de développement et des tests en alpha/beta publics, l’objectif affiché a été de corriger une dette technique qui freinait l’outil sur la vitesse, la maintenabilité et l’intégration avec WordPress natif.
Les sites qui carburaient encore aux shortcodes souffraient d’une logique difficile à maintenir et à optimiser pour les Core Web Vitals. Dans plusieurs audits de performance, on retrouvait des pages générées avec une quantité importante de shortcodes transformés en HTML* lourd, ce qui nuisait au rendu initial. En remplaçant ce système par un stockage en blocs et en adoptant un format de données plus proche de Gutenberg, Divi 5 cherche à réduire ces frictions.
Concrètement, quatre fondations techniques changent la donne : suppression des shortcodes, architecture repensée pour l’administration et le front-end, nouvelle API pour modules personnalisés, et stockage modulaire compatible avec l’éditeur de blocs. Ces décisions ne sont pas juste esthétiques. Elles autorisent des optimisations concrètes comme le chargement conditionnel des bibliothèques JavaScript et la génération automatique de CSS critique.
Sur le terrain, cela se traduit par un éditeur qui s’ouvre plus vite sur des installations classiques (PHP 8.0+ recommandé, base MySQL/MariaDB stable) et par une charge front-end plus légère. Un site marchand sous WooCommerce qui utilisait Divi 4 et qui souffrait d’un temps de chargement de la page produit supérieur à 4 secondes pouvait voir l’éditeur et le rendu initial s’améliorer sensiblement après migration, à condition d’associer la mise à jour à un plugin de cache bien configuré comme WP Rocket et un hébergement adapté (o2switch ou équivalent pour un trafic modéré à soutenu).
La décision d’Elegant Themes n’est pas non plus isolée dans l’écosystème. Depuis l’explosion d’Elementor (19 millions de sites actifs et une forte adoption depuis 2016), la concurrence s’est durcie. Divi a perdu du terrain à cause d’une architecture vieillissante. Repartir de zéro était risqué, mais nécessaire pour viser une plateforme viable pour la décennie à venir.
En termes d’impact, retenir que cette refonte vise moins l’apparence que la durabilité : amélioration des performances, meilleure intégration avec Gutenberg, et base plus simple à étendre pour les développeurs qui veulent créer des modules compatibles. C’est un changement stratégique qui redonne aux créateurs de sites plus de latitude pour optimiser l’expérience utilisateur et l’optimisation du design.
Phrase-clé : la refonte technique de Divi 5 transforme la maintenance et l’évolutivité, pas seulement l’interface.
Nouvelles fonctionnalités pratiques de Divi 5 et gains mesurables pour ton site
Divi 5 ajoute des outils qui n’étaient pas disponibles ou limités dans Divi 4, et ces fonctionnalités font la différence dès qu’il s’agit de conception à l’échelle ou de contenus dynamiques. Parmi les plus impactantes : le Layout Builder (Flexbox + CSS Grid), le Loop Builder pour boucles dynamiques et Divi AI pour accélérer la création de contenu.
Le Layout Builder apporte un contrôle fin sur l’alignement, l’ordre et l’espacement grâce à Flexbox, et permet d’organiser des grilles complexes avec le CSS Grid. Sur un catalogue produit ou une landing page à forte densité visuelle, cela évite les hacks CSS et les empilements de containers qui ralentissaient Divi 4.
Le Loop Builder est pratique pour afficher des listings sans écrire de requêtes PHP : tu crées le modèle visuel (image mise en avant, titre, champ ACF, bouton), tu définis la source (articles, CPT, produits WooCommerce) et Divi répète automatiquement l’affichage. Pour un catalogue d’une cinquantaine de produits avec champs ACF personnalisés, le gain de temps est réel et la cohérence visuelle garantie grâce aux variables globales et presets de classes.
Divi AI va générer du texte, retoucher ou créer des images via prompt, et offrir des suggestions CSS. Cela vaut ce que ça vaut selon l’usage : utile pour rédiger des descriptions courtes, rédiger des textes alternatifs ou tester variantes d’accroches. Pour des contenus SEO importants, il reste préférable d’affiner les productions de l’IA et d’utiliser des outils complémentaires. Un guide sur l’usage de modèles de langage et bonnes pratiques est disponible pour les étudiants et créateurs de contenu sur ce guide, qui aide à formuler des prompts et à vérifier la qualité des sorties.
Sur la vitesse, Elegant Themes annonce un éditeur 2 à 4 fois plus rapide. Ces chiffres reposent sur des tests où l’éditeur et le front-end ont moins de JS initial à charger et où le CSS critique est extrait automatiquement. En pratique, l’amélioration dépendra de l’hébergement (PHP version, mémoire), du nombre de plugins actifs et de l’utilisation de ressources tierces (fonts, scripts externes). Une mesure sur un site de test peut passer d’un LCP de 3,8s à 1,6–2,2s après optimisation conjointe du thème, configuration de cache et lazy-loading.
| Aspects | Divi 4 | Divi 5 |
|---|---|---|
| Architecture | Shortcodes et code historique | Stockage en blocs, API moderne |
| Performance éditeur | Chargement parfois lent | 2–4× plus rapide (selon contexte) |
| Mise en page | Sections/colonnes classiques | Layout Builder (Flexbox + Grid) |
| Contenus dynamiques | Limitations Loop | Loop Builder complet |
Exemple concret : pour un blog technique avec CPT, ACF et 200 articles, le Loop Builder permet de créer un modèle de liste et d’y intégrer des champs sur-mesure sans toucher à functions.php. Pour un site e-commerce avec WooCommerce, on peut designer une grille produit réactive, appliquer des presets et piloter l’ensemble via variables globales de couleurs et typographies.
Phrase-clé : les nouvelles fonctionnalités de Divi 5 accélèrent la production tout en donnant des leviers concrets d’optimisation du design et de l’expérience utilisateur.
Interface utilisateur et édition visuelle : ergonomie, responsive et workflows optimisés
Le design de l’interface de Divi 5 se rapproche volontairement de l’éditeur natif de WordPress. Les réglages apparaissent sur la droite, l’ajout de modules ressemble à Gutenberg : cette convergence n’est pas un hasard. Elle facilite l’adoption pour qui utilise déjà l’éditeur de blocs, tout en gardant la puissance d’un constructeur de pages.
L’interface propose sept points de rupture responsives prédéfinis, personnalisables en largeur. Le workflow change : on peut cliquer directement sur la taille d’écran souhaitée pour ajuster styles et espacements sans naviguer dans des sous-menus. Pour qui conçoit des landing pages multi-device, c’est un vrai plus. Voici une petite liste pratique pour tester tes réglages responsive :
- Vérifie le rendu sur chaque breakpoint, surtout tablet landscape et small phone.
- Utilise les variables globales pour typographie et couleurs afin d’appliquer des ajustements globaux.
- Teste l’ordre des éléments avec Flexbox pour mobile — parfois tu veux inverser l’ordre pour la lisibilité.
- Active le fil d’Ariane pour sélectionner rapidement le container parent et éviter les modifications sur le mauvais bloc.
Les préréglages de conception (presets) et les classes CSS globaux permettent d’appliquer un style à plusieurs éléments et de le modifier en un point. C’est pratique pour maintenir la cohérence visuelle. Dans un projet agence avec dix pages standardisées, la mise à jour d’un preset se répercute sur toutes les pages qui l’utilisent, ce qui réduit le temps de maintenance.
L’édition visuelle gagne en ergonomie : clic droit pour actions contextuelles, recherche et filtres par mots-clés dans les paramètres, annuler/rétablir en un clic. Ces détails améliorent l’instantanéité du travail créatif. Pour la gestion des images et des prévisualisations sur les réseaux sociaux, pense à vérifier le comportement du rendu Open Graph et la manière dont Divi exporte les balises meta, surtout si tu utilises des plugins SEO comme Rank Math. Pour la création rapide d’images ou de variantes, les fonctions de Divi AI peuvent aider à produire des visuels initiaux ; pour la diffusion multi-plateforme et les spécificités comme la gestion des snaps longs, se référer aux pratiques dédiées sur les formats Snapchat.
Enfin, la compatibilité avec Gutenberg signifie que le passage entre éditeur natif et constructeur se fait plus naturellement, et les modules tiers ont une surface d’intégration plus simple grâce à la nouvelle API. Cela réduit les frictions pour des workflows mixtes où l’on combine blocs natifs et sections Divi.
Phrase-clé : l’interface modernisée de Divi 5 rend l’édition visuelle plus fluide et réduit les frictions lors des ajustements responsive et des itérations design.
Migration vers Divi 5 : méthode, risques mesurés et checklist à exécuter
La migration est possible via l’outil Divi 5 Migrator intégré. Il scanne templates, pages, CPT, produits WooCommerce, éléments de la médiathèque et préréglages. Le scan affiche des codes couleur : texte en bleu pour compatible, texte en orange pour les éléments non pris en charge qui passeront en mode de compatibilité descendante via Divi 4.
Procéder sans préparation serait imprudent. Voici une checklist technique à suivre systématiquement avant toute migration sur un site en production :
- Faire une sauvegarde complète (fichiers + base) avec UpdraftPlus ou via ton outil d’hébergement.
- Créer un environnement de staging. Si ton hébergeur est o2switch, utilise l’outil de préproduction ou WP Tiger pour cloner le site.
- Vérifier la version PHP (8.0+ recommandée), mémoire PHP et limites post_max_size/upload_max_filesize.
- Installer Divi 5 sur le staging et lancer Divi 5 Migrator pour détecter incompatibilités.
- Tester les modules tiers, les shortcodes personnalisés, les overrides dans functions.php et les child themes.
- Valider les formulaires, les templates WooCommerce, les pages critiques et les Core Web Vitals sur le staging.
Quelques cas concrets à repérer : si ton site utilise un add-on Divi non maintenu, il peut basculer en mode compatibility et rester éditable, mais il faudra contacter l’auteur du plugin pour une mise à jour. Si tu as des CSS/JS injectés via wp-config.php ou des hooks profonds dans functions.php, note-les et prépare une stratégie de migration. Pour les agences, il est recommandé d’informer les clients et de documenter les changements de comportements possibles sur l’édition du back-office.
La procédure de migration est simple une fois validée sur staging : lancer le migrator, corriger les warnings, et si tout est bon, appliquer la migration en production. Si le plugin de gestion de sites que tu utilises propose un push de staging vers prod (certains outils premium le font), cela peut automatiser la dernière étape.
Pour une démonstration visuelle de la migration et des workflows, consulter des vidéos de présentation peut aider à anticiper les écrans et options. Voici un exemple vidéo officiel présentant la vision de l’équipe et les nouveautés :
Après avoir testé la migration en préprod et vérifié intégrations et performances, planifie la mise en production en heures creuses et garde un rollback plan prêt. Si un problème surgit, restaure la sauvegarde et analyse les logs pour identifier la source (module tiers, override CSS, hook incompatible).
Phrase-clé : migrer vers Divi 5 exige méthode et tests en staging, mais l’outil fournit les outils pour analyser la compatibilité et limiter les risques.
Pour qui Divi 5 est pertinent ? cas d’usage, budget et alternatives pratiques
Divi 5 s’adresse à plusieurs profils : créateurs de sites qui lancent un nouveau projet, freelances et agences qui veulent une base technique moderne pour produire des sites clients, et les développeurs qui ont besoin d’une API robuste pour créer des modules personnalisés. Pour un nouveau site, il n’y a pas d’argument pour démarrer sur Divi 4 : partir sur Divi 5 est logique.
Sur la question du coût, distinguer deux profils. Si tu es déjà client d’Elegant Themes, Divi 5 est inclus dans ton abonnement annuel ou à vie. Si tu n’es pas client, il existe une formule annuelle à partir de 89 $/an pour Divi ou une offre Divi Pro à 277 $/an qui inclut Divi AI en illimité et Divi Cloud. Il existe aussi une option licence à vie (249 $ pour Divi seul, 297 $ pour Divi 5 + Divi Pro avec certaines conditions). Ces tarifs sont indicatifs ; vérifier l’interface d’achat pour les offres actualisées.
Comparer Divi et Elementor revient souvent dans les discussions. Elementor a une masse d’utilisateurs plus grande et une marketplace d’extensions très fournie. Divi 5 réduit l’écart technique, notamment sur la performance et la modularité. Le choix dépendra du projet : pour une boutique de 30 produits où l’objectif est de garder la main sur tout le code et personnaliser les templates WooCommerce, Divi 5 avec Loop Builder est une option solide. Pour une boutique très volumique ou un écosystème massivement étendu, évaluer les intégrations existantes d’Elementor peut rester utile.
Quelques limites à prendre en compte : une courbe d’apprentissage pour exploiter pleinement le Design System, la nécessité de vérifier la compatibilité de modules tiers, et le fait que la majeure partie des changements soient techniques plutôt que visuels. Si l’objectif est uniquement de peaufiner l’apparence d’un site simple, migrer immédiatement n’est pas impératif, mais pour une base à long terme, Divi 5 est la meilleure option.
Exemple chiffré : un site de démonstration migré correctement avec hébergement adapté et configuration cache a vu le LCP chuter de 3,9s à 1,9s. L’indexation et l’expérience utilisateur se sont améliorées, et la maintenance a été simplifiée grâce aux presets de classes et variables globales.
Phrase-clé : Divi 5 est une mise à jour stratégique pour qui veut une base moderne et maintenable ; choisir maintenant dépend du profil du projet, du budget et de la capacité à tester la migration en staging.
Divi 5 est-il compatible avec mes modules tiers Divi 4 ?
La plupart des modules natifs fonctionnent immédiatement. Les add-ons tiers peuvent nécessiter une mise à jour. Le Divi 5 Migrator affiche un rapport de compatibilité et propose un mode de compatibilité descendante pour les modules non compatibles, mais il est conseillé de tester sur un environnement de staging et de contacter les auteurs des plugins si nécessaire.
Faut-il tester la migration sur un staging ?
Oui. Sauvegarde complète, création d’un environnement de préproduction et exécution du Migrator sont indispensables. Utilise UpdraftPlus ou l’outil de ton hébergeur, vérifie PHP, mémoire et plugins, puis teste formulaires, templates WooCommerce et performances.
Quel est le coût réel d’adoption de Divi 5 pour un freelance ?
Si tu es déjà client d’Elegant Themes, Divi 5 est inclus. Sinon, l’offre commence à 89 $/an pour Divi. Les options Pro et Cloud augmentent le tarif. Prévois aussi le coût d’un staging et d’un éventuel travail de mise à jour des add-ons.
Divi AI remplace la rédaction humaine pour le SEO ?
Divi AI accélère la génération de contenu court et d’images, mais pour le SEO stratégique, il reste nécessaire d’éditer les textes, vérifier la véracité des informations et optimiser la structure. Des outils et guides pratiques sur la rédaction assistée par IA peuvent aider à formuler des prompts efficaces.