Même si sa date de sortie officielle n’est pas encore connue, Divi 5.0 est très attendue. Il faut dire qu’elle rebat toutes les cartes, ou presque.
Cette mise à jour d’envergure, sûrement la plus importante jamais menée par Elegant Themes, la société qui développe le Divi Builder, reconstruit tout simplement l’architecture technique du constructeur de page.
Un exemple marquant ? Fini le système de shortcodes. Place à un page builder ultra-rapide, encore plus intuitif et flexible que celui que vous connaissez jusqu’à présent. Avec en prime, une interface repensée et simplifiée.
Franchement, c’est un petit tremblement de terre, ou une petite révolution – c’est selon – qui vous attend prochainement.
En attendant sa sortie officielle, nous avons testé pour vous la version « Public Alpha » de Divi 5. Découvrez notre ressenti et nos conclusions dans cet article de présentation sous forme de guide complet.
Après l’avoir lu, vous connaîtrez les changements et fonctionnalités apportés par cette version, ainsi qu’une présentation de la nouvelle interface du constructeur de page.
Qu’est-ce que Divi 5.0 ?
Divi 5.0 est une mise à jour du page builder basée sur une réécriture complète de ses technologies de base. Les principaux changements ont lieu dans le code, et non sur l’interface utilisateur. Cette version vise à rendre Divi plus rapide, évolutif et extensible pour les développeurs.
Une « mise à jour des fondations »
Qualifiée de « mise à jour des fondations » (« Foundation Update ») par Nick Roach, le PDG d’Elegant Themes, Divi 5.0 est encore en cours de développement au moment de rédiger ces lignes (mai 2024).
Pour le moment, vous ne pouvez pas encore l’activer sur votre site WordPress.
Il s’agit d’un projet mené sur plusieurs années, qui vise à réimaginer Divi et à le préparer pour l’avenir en le faisant reposer sur un socle technique propre et solide, à même d’évoluer avec le temps « au cours de la prochaine décennie », selon les termes de Roach.
Ce dernier a même précisé, dans l’une de ses vidéos sur YouTube :
C’est un investissement dans notre propre futur. Nous sommes en train de créer les outils dont nous avons besoin pour créer un excellent logiciel.
Divi 5 est probablement la mise à jour la plus importante depuis le lancement du constructeur de page, en 2013.
Les équipes techniques d’Elegant Themes s’y préparent en interne depuis 2021. Les premières communications publiques sur le projet ont démarré fin 2022.
À quoi ressemble l’interface de Divi 5.0 ?
Comme l’a expliqué Elegant Themes, le « Divi Builder va ressembler et fonctionner de la même manière qu’aujourd’hui ».
Vous noterez bien quelques petits changements par-ci, par-là, sur l’interface utilisateur, qui a quand même subi un rafraîchissement notable.
Mais pas de grosses nouveautés à prévoir en termes de fonctionnalités. Il y en a quelques-unes, que nous vous détaillerons un peu plus tard dans cet article.
En attendant, voici un premier aperçu de l’interface de Divi 5, présentée dans cette vidéo YouTube :
Pourquoi cette mise à jour ?
Se rapprocher de l’infrastructure technique de WordPress
Pour comprendre ce qui a poussé les têtes pensantes d’Elegant Themes à se lancer dans cette mise à jour titanesque, il faut d’abord décortiquer leur communication officielle.
On y décèle plusieurs explications, comme la volonté de se rapprocher de l’infrastructure technique proposée par WordPress. Divi 5 va par exemple migrer vers un nouveau format JSON qui est similaire à la façon dont Gutenberg (l’éditeur de WordPress) stocke les données.
Par conséquent, les shortcodes (codes courts) seront supprimés (on y reviendra). L’idée derrière tout ça consiste à renforcer la compatibilité entre Divi et Gutenberg et favoriser les passerelles entre les deux outils.
Il y a aussi la volonté de tirer un trait sur une infrastructure technique jugée trop archaïque, afin de la rendre plus performante, évolutive et flexible.
Tenter de rattraper le train Elementor
Repenser Divi de A à Z est aussi devenu une nécessité pour essayer de récupérer des parts de marché sur le segment des constructeurs de page.
Lancé fin 2013, le Divi Builder s’est peu à peu imposé comme le constructeur de page le plus populaire au sein de l’écosystème.
Puissant, doté de multiples fonctionnalités et proposant un rapport qualité-prix très intéressant, Divi était THE page builder à posséder.
Des qualités qui lui ont permis de séduire près d’un million d’utilisateurs, tout de même. Et puis la tornade Elementor a débarqué sur le marché, dévastant tout sur son passage. Au point de s’imposer sans conteste comme le page builder numéro un, au tournant des années 2020.
Aujourd’hui, Elementor est actif sur plus de 16 millions de sites et propulse plus de 10% des sites WP dans le monde. En parallèle, Divi s’est mis à stagner, voire à décliner dans certains cas :
Elementor a mis un sacré uppercut à Divi, mais ce dernier compte bien s’en relever. D’ailleurs, au détour d’une vidéo, Nick Roach a lâché une petite phrase très explicite qui ne laisse pas de place au doute : avec Divi 5.0, Elegant Themes se prépare à « dépasser la concurrence ». Soyons clair : rattraper Elementor restera très compliqué.
Par contre, une chose est sûre : grâce à Divi 5, Elegant Themes est en mesure de refaire une bonne partie du retard qu’elle a accumulé depuis quelques années.
Sur quoi cette mise à jour est-elle axée ?
Divi 5.0 repose sur 4 piliers :
- Vitesse de chargement et stabilité.
- Évolutivité et extensibilité.
- Durabilité.
- Renforcement de la communauté.
Amélioration des performances et de la stabilité
Les développeurs de Divi 5.0 ont d’abord mis l’accent sur la performance. L’une de leurs priorités consiste à rendre le page builder beaucoup plus rapide à se charger, afin de réduire les frictions pour l’utilisateur.
Basé sur React 18 (une bibliothèque JavaScript), Divi 5.0 est capable de « gérer des designs très vastes et complexes ».
Vous irez plus vite et rencontrerez moins de bugs lorsque vous interagirez avec les différents modules et concevrez le design de vos pages. Ces dernières se chargeront aussi plus vite sur l’interface front-end (celle visible par vis visiteurs), pour une expérience utilisateur améliorée.
À l’usage, vous ne rencontrerez aucun temps de latence lorsque vous manipulerez et éditerez vos sections, lignes, colonnes et autres modules. La preuve par l’image :
Elegant Themes précise qu’elle s’attelle à « nettoyer des années de dettes techniques », en rendant le code plus léger et plus propre au niveau du back-end.
Une façon de répondre à un reproche souvent adressé au page builder, réputé plus lourd que bon nombre de ses concurrents (Elementor, Beaver Builder etc.).
Évolutivité, avec l’apparition d’une nouvelle API
Le deuxième axe de travail concerne l’évolutivité. Nick Roach parle d’un « changement de paradigme » dans la façon d’aborder le développement de Divi.
Cela se matérialise par l’apparition d’une nouvelle API (interface de programmation d’application), qui va rendre le nouveau Divi Builder « entièrement personnalisable », permettant aux développeurs tiers de « créer ce qu’ils veulent », grâce à une flexibilité beaucoup plus importante.
Durabilité, avec la fin des shortcodes sur Divi 5
Le troisième changement significatif embarqué avec Divi 5.0 repose sur la fin du système de shortcodes et la migration vers un format de stockage plus moderne.
Elegant Themes indique que cela présente plusieurs avantages :
- une amélioration des performances ;
- vous rencontrez moins de bugs dus à la complexité de l’imbrication des shortcodes et de leurs attributs dans le contenu de vos articles et pages ;
- vous ne vous retrouverez plus avec des shortcodes partout dans le contenu de vos pages lorsque vous désactiverez Divi 5 (par exemple pour basculer vers un autre page builder ou sur l’Éditeur de site de WordPress), comme c’était le cas avec Divi 4 (ou une version inférieure).
Se débarrasser des shortcodes est aussi un moyen pour Divi de rester « à la pointe du progrès » et en phase avec les évolutions de WordPress.
En effet, l’éditeur du CMS (Gutenberg) repose sur des blocs et les codes courts sont voués à être dépréciés au fil du temps.
Cet abandon des codes courts permet aussi de renforcer l’interaction entre les deux éditeurs (Divi Builder et Gutenberg), tout en vous garantissant de bénéficier des dernières fonctionnalités de WordPress.
Responsabiliser la communauté de développeurs
Enfin, Divi 5.0 a été pensé pour renforcer la communauté. Il doit servir de base « à un écosystème plus large » capable de prospérer, exactement comme celui de WordPress.
Pour cela, les développeurs tiers disposeront des mêmes outils que les développeurs d’Elegant Themes pour personnaliser le page builder.
Voici ce que précise Nick Roach à ce propos : « Les développeurs qui ont l’habitude de créer des blocs pour WordPress retrouveront de nombreuses similitudes avec l’API de Divi 5.0. Les blocs WordPress seront plus facilement adaptés à Divi et les développeurs pourront foncer tête baissée dans la création de choses pour notre communauté. Nous concevons cette nouvelle version de Divi pour qu’elle marche en harmonie avec WordPress. »
Où en est-on du développement de Divi 5 ?
Quand doit sortir Divi 5 ?
Au moment de publier cet article, Divi 5 est encore en phase de développement. Cela signifie que sa version publique officielle n’a pas encore été lancée.
Quand pouvez-vous espérer en profiter sur votre site WordPress ? Telle est la question… à laquelle Nick Roach lui-même n’a pas la réponse.
Aucune date précise de sortie n’a été communiquée par l’équipe d’Elegant Themes qui se contente par exemple d’un : « Ce sera prêt quand ce sera prêt. La pression est forte, et nous travaillons aussi dur que possible pour terminer Divi 5 le plus tôt possible. »
Dans l’une de ses vidéos sur YouTube, Nick Roach a quand même dévoilé quelques indices en expliquant que Divi 5.0 était « une mise à jour très importante » et qu’elle ne se ferait pas « dans la précipitation ».
Avant d’ajouter que la sortie de « la version utilisateur dépendra du retour d’information et des tests effectués par les utilisateurs ».
Justement, où en est-on à ce sujet ?
Quelles sont les phases de développement prévues ?
Actuellement – comprenez à la date de publication de l’article -, Divi 5 se trouve dans la phase 3 (sur 5 phases) de son développement.
Les équipes techniques planchent sur la version « Public Alpha », qui proposera une version « Lite » du page builder.
Cela signifie que le constructeur de pages sera « entièrement fonctionnel » et stable, mais qu’il ne proposera pas « certaines fonctionnalités et modules ».
En résumé, cette version « conviendra à la création de nouveaux sites et aux tests, mais ne pourra être utilisée que sur certains sites Divi existants en raison de son manque de fonctionnalités », précise Elegant Themes.
Info : Les phases 1 (Developer Alpha) et 2 (Developer Beta) de Divi 5 sont terminées. Elles visaient notamment à mettre en place la nouvelle API, tout en permettant aux développeurs tiers de mettre à jour leurs extensions en se basant sur la nouvelle architecture technique du page builder.
Une fois cette version « Public Alpha » validée, il ne manquera « plus que » deux étapes à franchir :
- La sortie de la version « Public Beta » (Phase 4). Elle sera proposée « une fois que toutes les fonctionnalités de Divi auront été ajoutées à Divi 5.0 et que tous les commentaires de l’Alpha auront été pris en compte. Il s’agira de la version finale de Divi 5.0, en attendant les éventuelles corrections de bugs trouvées pendant la Bêta. »
- La sortie de la version officielle (Phase 5) lorsque « tous les commentaires de la version bêta publique auront été pris en compte. Elle sera disponible comme une mise à jour normale du thème Divi sur votre tableau de bord WordPress. »
D’après ces informations, il est possible d’espérer une sortie de la version officielle à partir du dernier trimestre de l’année 2024.
Vu les enjeux de cette mise à jour, mieux vaut tabler sur une sortie en 2025. Du retard a déjà été accumulé et Elegant Themes ne veut surtout pas se précipiter. Soyez sûr qu’ils ne proposeront pas de version officielle tant que tout ne sera pas impeccable.
Vous allez donc devoir prendre votre mal en patience pendant encore quelques mois.
Bon à savoir : Pour vous tenir informé des dernières sorties et actualités en lien avec Divi 5, consultez les mises à jour publiées tous les mois au bas de cette page (Divi 5 roadmap). Vous pouvez aussi vous abonner à leur newsletter pour être informé par email.
Comment tester Divi 5.0 ?
Si vous ne supportez pas d’attendre, il y a quand même une solution pour commencer à vous familiariser avec l’interface de Divi 5.0 et voir ce qu’elle a dans le ventre.
Depuis début mai 2024, Elegant Themes propose une démo gratuite de sa version Alpha accessible en cliquant sur ce lien.
Vous pourrez manipuler la bête et vous faire une idée plus précise de ce qui vous attend à l’avenir :
Une fois que la « Public Alpha » sera sortie, vous pourrez la télécharger et l’installer sur votre site WordPress, comme vous le feriez avec n’importe quelle extension.
Attention : Nous vous recommandons de vous servir d’un site de test pour cela (en local, staging, ou sur une pré-production). Pour éviter tout risque de bug et/ou d’incompatibilité, n’activez pas Divi 5.0 sur un site en production (en ligne), tant que sa version officielle et définitive n’est pas sortie.
Lorsque ce sera le cas, pensez à sauvegarder votre site (fichiers + base de données) avant de le mettre à jour. En cas de problème, vous pourrez le restaurer.
Qu’est-ce qui change sur Divi 5 vs Divi 4 ?
« Les changements les plus critiques sur Divi 5 sont ceux que vous ne pouvez pas voir », expliquait Nick Roach.
Alors à quoi pouvez-vous vous attendre de nouveau au niveau de l’expérience utilisateur en vous servant de Divi 5 ? Découvrez un tour d’horizon de ce qu’il faut retenir après notre test de la version « Public Alpha », ainsi que les différences notables avec Divi 4.
Une interface ultra-rapide et simplifiée…
Pour commencer, ce qui vous sautera aux yeux avec Divi 5 par rapport à Divi 4, c’est la simplification de l’interface et son aspect épuré.
Plus petite et plus efficace, elle est aussi délestée des « animations et effets inutiles », comme l’a dévoilé Elegant Themes.
Tout va aussi beaucoup plus vite. Nous n’avons par exemple constaté aucun ralentissement au clic, au survol de la souris (hover) ou lorsque nous avons modifié, dupliqué ou déplacé des éléments.
Par rapport à Divi 4, voici par exemple ce qui évolue :
- présence d’un mode sombre (dark) et clair ;
- suppression des boutons de sauvegarde et d’annulation au niveau de chaque panneau ;
- présence d’options de personnalisation sur la gauche, en haut de la page et dans un panneau sur la droite.
- abandon des couleurs traditionnelles (violet et vert) au profit du bleu et du blanc ;
Concernant ce dernier point, prenez cet exemple illustratif qui compare Divi 4 à Divi 5 :
Elegant Themes avait prévenu : avec Divi 5.0, elle souhaite être en phase avec les évolutions de WordPress. Cela se perçoit déjà au niveau de son interface, qui rappelle très fortement celle de l’éditeur natif de WP (Gutenberg).
C’est assez flagrant, par exemple, lorsque vous ajoutez un module. Cela doit vous rappeler quelque chose de familier, regardez :
Pour le reste, le mode de fonctionnement reste le même qu’avant. Vous pouvez éditer votre page en ajoutant tour à tour une section, une ligne puis le module de votre choix.
… et encore plus personnalisable
En parallèle, Divi 5 vous offre encore plus de contrôle sur la mise en page des options proposées par le constructeur de page.
Si vous le souhaitez, vous pouvez fixer, déplacer ou combiner les panneaux dans des fenêtres à onglets. Si vous préférez avoir toutes les fenêtres fermées et un panneau de configuration flottant comme dans Divi 4, c’est aussi envisageable :
Une navigation plus intuitive
Divi 5.0 rend aussi la navigation encore plus facile. Il devient par exemple plus simple de savoir ce que vous allez éditer grâce au panneau des options des réglages qui reste fixe (si vous le souhaitez), mais aussi grâce à la présence d’un fil d’Ariane.
Ce dernier vous permet d’accéder à un élément parent immédiatement, d’un simple clic sur celui qui vous intéresse :
Une amélioration de l’édition responsive sur Divi 5
Autre point notable à relever : la gestion du responsive, qui a été vraiment améliorée. Désormais, il vous suffit de sélectionner la taille d’écran de votre choix en haut de la page (ordinateur, smartphone ou tablette) :
Éditez ensuite votre page comme bon vous semble et toutes vos modifications s’appliqueront automatiquement pour chaque taille d’écran que vous aurez choisie au départ.
Sur Divi 4, la gestion du responsive se faisait au niveau de chaque option à personnaliser et pour chaque écran. Vous deviez donc multiplier les clics pour entrer vos réglages, ce qui était beaucoup plus chronophage.
Quelles répercussions pour vous, utilisateur du page builder ?
Une fois la sortie officielle de Divi 5 entérinée, quel impact cette mise à jour va-t-elle avoir sur votre quotidien de webmaster ? Découvrez quelques éléments de réponse concrets :
- Divi 5 sera rétrocompatible avec Divi 4, y compris avec ses modules ;
- La mise à jour vers Divi 5 se fera automatiquement depuis votre tableau de bord, en cliquant sur un simple bouton ;
- Aucun surcoût n’est à prévoir pour vous servir de Divi 5. Il s’agit d’une mise à jour gratuite pour tous les clients d’Elegant Themes, quelle que soit votre licence (annuelle ou lifetime) ;
- Vous bénéficierez ensuite de nouvelles fonctionnalités. Une fois Divi 5 sorti, Elegant Themes a annoncé qu’elle allait se lancer dans un sprint pour sortir de nouvelles fonctionnalités. « Loop builder, Flexbox et grilles CSS, accessibilité améliorée, plus de modules, un meilleur menu, et des options d’en-tête : tout cela est sur notre radar », ont-ils expliqué.
Le mot de la fin
Très attendue, Divi 5.0 est une mise à jour fondamentale qui se laisse désirer. Mais c’est pour la bonne cause, au vu des multiples changements structurels qu’elle va introduire.
Grâce à elle, vous bénéficierez d’un page builder plus rapide, plus flexible et conçu pour s’intégrer beaucoup plus facilement à l’éditeur natif de WordPress.
Avec Divi 5, Elegant Themes souhaite prendre date pour les prochaines années, en proposant une base saine et propre à ses utilisateurs. Cette mise à jour revêt aussi un enjeu commercial et d’identité de marque.
Pour Elegant Themes, il s’agit de se repositionner comme l’acteur central du paysage des page builders, tout en comblant une partie du retard accumulé sur Elementor depuis plusieurs années.
Après notre test, nous pouvons vous dire que c’est largement dans ses cordes. Le travail réalisé est excellent et nous avons hâte d’en profiter de façon officielle.
Pour cela, il faut encore patienter quelques mois. En attendant, qu’en pensez-vous ? Êtes-vous séduit par cette future mouture de Divi ? Donnez-nous votre avis dans les commentaires.
