Mis à jour le 12 octobre 2026
Les Editable Theme Builder Areas de Divi 5 permettent de modifier l’en-tête, le pied de page et le modèle de corps directement dans le Visual Builder, pendant que vous éditez une page, sans repasser par l’écran séparé du Theme Builder. Mon outil de travail quotidien est Avada, donc je m’appuie ici sur la documentation d’Elegant Themes plutôt que sur un test personnel de longue durée.
Que sont les Editable Theme Builder Areas dans Divi 5 ?
C’est la possibilité de modifier les zones pilotées par le Theme Builder (en-tête, corps, pied de page) depuis le front-end, dans la même session que le contenu de la page. Elegant Themes parle aussi d’« édition complète du site ». Divi 5 est sorti le 26 février 2026, et l’article de présentation de la fonction date de fin mars 2026.
Avant, un modèle d’en-tête ou de pied de page vivait dans le Theme Builder, et le contenu de la page dans le Visual Builder. Repérer un défaut dans l’en-tête en travaillant sur une page obligeait à quitter le constructeur, ouvrir le Theme Builder, corriger, puis revenir. Ce n’est pas bloquant, mais sur un site avec plusieurs modèles, ces allers-retours s’additionnent.
Comment éditer l’en-tête et le pied de page dans le Visual Builder ?
Connectez-vous à WordPress, ouvrez une page, un article, une archive ou une fiche produit WooCommerce côté public, puis cliquez sur « Edit With Divi » dans la barre d’administration. L’en-tête, le corps et le pied de page se chargent dans la même session, et vous pouvez cliquer directement sur chaque zone.
Selon l’aide officielle, vous pouvez aussi copier, coller et glisser du contenu d’une zone à l’autre. Deux précisions utiles :
- Pour un type de contenu personnalisé, il faut activer le Visual Builder dans Divi, Theme Options, Builder, Post Type Integration.
- Si « Edit with Divi » n’apparaît pas sur les pages d’archive, vérifiez qu’au moins un en-tête ou un pied de page existe dans le Theme Builder.
Qu’est-ce qui change par rapport à Divi 4 ?
Divi 4 proposait déjà l’édition du site complet en front-end, mais chaque zone devait être activée avant de pouvoir l’éditer, et la structure sous-jacente restait celle des anciens modèles. Divi 5 rend les zones éditables dès l’entrée dans le constructeur, y compris sur les vues générées par modèle comme les archives.
| Point | Divi 4 | Divi 5 |
|---|---|---|
| Activation des zones | Une par une, avant édition | Immédiate à l’ouverture du constructeur |
| Vues par modèle (archives, produits) | Édition plus fragmentée | Éditables dans la même session |
| Navigation entre zones | Structure en couches héritée | Calques et fil d’Ariane pour se repérer |
Les comparatifs d’Elegant Themes restent des documents d’éditeur : lisez-les comme tels. Leur comparatif avec Divi 4, Elementor et Bricks (avril 2026) décrit surtout un gain d’ergonomie, pas de performance.
Comment ne pas éditer la mauvaise zone par erreur ?
Quand l’en-tête, le contenu et le pied de page sont éditables en même temps, le risque est de modifier un modèle global en croyant toucher à la page. Elegant Themes indique deux repères visuels pour s’orienter : le panneau des calques et le fil d’Ariane du panneau de réglages, qui montrent à quelle zone appartient l’élément sélectionné.
- Calques : vue structurelle de tout ce qui est sur le canevas, regroupée par zone (en-tête, contenu, pied de page).
- Fil d’Ariane : à la sélection d’un élément, il indique où il se situe, donc s’il appartient à un modèle global ou à la page seule.
Ma règle perso, valable avec n’importe quel constructeur : avant de toucher à un élément d’en-tête ou de pied de page, je regarde si la modification doit s’appliquer à tout le site. Si oui, je continue. Sinon, je m’arrête et je crée un modèle dédié.
Comment protéger un site livré à un client ?
Deux réglages suffisent. Le premier masque les zones du Theme Builder pendant l’édition : dans le panneau latéral, ouvrez Builder Settings et désactivez « Show Theme Builder Layouts ». Le second bloque l’accès aux modèles par rôle : Divi, Role Editor, puis désactivez « Theme Builder » dans « General Functionality » pour le rôle concerné.
Le client peut alors modifier le contenu qui lui est destiné sans exposer les modèles globaux. Le Role Editor fait partie des vérifications que je recommande avant toute remise de site, quel que soit le constructeur. Dans la même logique, une sauvegarde avant livraison évite les mauvaises surprises.
Faut-il migrer vers Divi 5 pour en profiter ?
Oui, la fonction est propre à Divi 5, et la migration n’est pas anodine. Elegant Themes précise que le passage est à sens unique après la mise à jour, avec une possibilité de retour juste après la migration, et que Divi 4 reste supporté au moins 12 mois après la sortie de Divi 5 (corrections de sécurité et critiques uniquement).
Ma checklist avant de migrer
- Sauvegarder la base de données, le dossier uploads, le thème et les plugins.
- Faire la migration sur un site de préproduction, pas en production.
- Mettre à jour WordPress, Divi et tous les plugins avant de commencer.
- Vérifier que les modules tiers affichent la compatibilité Divi 5 sur le Marketplace.
- Lancer le Divi 5 Migrator avant d’ouvrir des pages : une page ouverte avant serait convertie sans retour possible.
- Tester ensuite les pages clés, les menus, WooCommerce et les modèles du Theme Builder.
Pour les sites que je suis en production, j’applique cette même logique à toute évolution majeure d’un constructeur : préproduction d’abord, mesure ensuite.
Questions fréquentes
Qu’est-ce que les Editable Theme Builder Areas dans Divi 5 ?
C’est la possibilité de modifier les zones du Theme Builder (en-tête, corps, pied de page) directement dans le Visual Builder, en contexte, qu’on travaille sur une page ou sur une vue générée par un modèle comme une archive ou une fiche produit.
Qu’apporte l’édition complète du site dans Divi 5 ?
Un flux de travail unifié. Plus besoin d’alterner entre l’éditeur de page et le Theme Builder : les zones structurelles se modifient au même endroit que le contenu, sans étape d’activation, ce qui réduit les allers-retours.
Faut-il migrer vers Divi 5 pour en profiter ?
Oui, ces fonctionnalités sont propres à Divi 5. La migration depuis Divi 4 demande une sauvegarde, un test sur préproduction et la vérification de la compatibilité des modules tiers avant de passer en production.
Comment empêcher un client de modifier l’en-tête global ?
Dans Divi, Role Editor, désactivez l’option « Theme Builder » du rôle du client. Il pourra toujours modifier le contenu des pages dans le Visual Builder, mais ne pourra plus ouvrir ni changer les modèles globaux.
Peut-on créer ou réaffecter un modèle depuis le front-end ?
D’après l’article d’Elegant Themes, la création et la réaffectation des modèles se font encore dans le Theme Builder. L’édition en front-end concerne les zones déjà assignées à la page en cours.