Le Theme Builder de Divi est l’outil qui transforme réellement Divi en « constructeur de thème ». Il vous permet de créer des modèles (templates) pour le header, le footer, le corps des pages (articles, catégories, produits WooCommerce, 404, recherche, archives, etc.) et d’assigner ces modèles à des zones ou des types de contenus précis, grâce à un système de règles de conditions. En clair : plus besoin de thème enfant pour maquettiser vos gabarits – vous concevez tout visuellement.

Theme Builder vs Visual Builder : la différence

Le Visual Builder de Divi sert à construire le contenu d’une page spécifique (mise en page de l’article X, design d’une landing page Y, etc.).

Le Theme Builder, lui, sert à créer des gabarits réutilisables (templates) qui s’appliquent automatiquement à une ou plusieurs zones du site : l’en-tête, le pied de page, le corps de tous les articles, le modèle de catégorie « Actus », les fiches produit, la page 404, la page de recherche… Il centralise la structure globale et garantit la cohérence du design.

Autrement dit : Visual Builder = page unique ; Theme Builder = modèles pour des ensembles de pages.

Comment fonctionne le Theme Builder (templates et conditions)

Dans Divi > Theme Builder, vous créez un ou plusieurs Templates. Chaque template peut contenir trois zones :

• Header (en-tête) : logo, menu, barre d’annonce, recherche, panier WooCommerce, etc.
• Body (corps) : disposition des éléments du contenu principal (titre d’article, image à la une, métas, contenu de l’éditeur, sidebar, modules, etc.).
• Footer (pied de page) : navigation secondaire, mentions légales, newsletter, réseaux sociaux, logos de confiance, etc.

À chaque template, vous assignez des conditions : « Inclure » / « Exclure » sur tout le site, seulement sur les articles, seulement sur une catégorie, seulement sur les produits, sur un type de contenu personnalisé (CPT), sur des pages spécifiques, etc. Les règles déterminent où et quand le template s’applique.

Astuce : créez un Global Header et un Global Footer qui s’appliquent à tout le site, puis des templates spécifiques pour certaines sections (blog, boutique, landing pages) avec leur propre Body.

Cas d’usage concrets (Blog, WooCommerce, Pages, CPT)

Blog

• Template de single post : ajoutez Titre, Image à la une, Métadonnées (date, auteur, catégories), Post Content (très important), bloc « Article suivant », articles connexes, zone de commentaires.
• Template d’archive de catégorie : grille des articles avec pagination, filtre par étiquette, bannière avec description de la catégorie.

WooCommerce

• Template de fiche produit : titre, galerie, prix, bouton Ajouter au panier, onglets, avis, produits connexes, badge promo, arguments de réassurance.
• Template de catégorie produit : grille, tri, contenu SEO de catégorie, bandeau promotionnel.

Pages

• Uniformiser les pages « À propos », « Contact », « Services » avec un header et footer cohérents et un corps modulable.

Custom Post Types (CPT)

• Créer un template pour « Projets », « Événements » ou « Témoignages » et afficher des champs personnalisés (date de l’événement, client, note, etc.).

Tutoriel pas à pas : créer un template global

1. Allez dans Divi > Theme Builder, cliquez sur Ajouter un nouveau template.
2. Assignez la règle « Tout le site » (ou un périmètre précis si vous préférez un template par section).
3. Ajoutez un Global Header : construisez visuellement votre en-tête (logo, menu, CTA, téléphone, recherche, panier, bandeau d’alerte si besoin).
4. Ajoutez un Global Body : insérez les modules nécessaires, notamment le Post Content (obligatoire si vous voulez afficher le contenu rédigé dans l’éditeur WordPress).
5. Ajoutez un Global Footer : liens légaux, plan du site, newsletter, réseaux, copyright.
6. Enregistrez et testez : vérifiez l’affichage sur une page, un article, une fiche produit (si WooCommerce est actif).
7. Affinez avec des conditions d’inclusion/exclusion pour gérer les cas particuliers (ex. : une landing n’a pas le header global).

Important : dans le « Body », le module Post Content sert à « injecter » le contenu de l’éditeur WordPress. Sans lui, vos articles ou pages afficheront une mise en page vide.

Contenu dynamique (ACF, WooCommerce, champs WordPress)

Le Theme Builder prend tout son sens avec le contenu dynamique. Vous pouvez lier des modules Divi à :

• Champs natifs WordPress : Titre, Extrait, Image mise en avant, Auteur, Date, Catégories, Étiquettes.
• ACF / champs personnalisés : texte, images, URLs, répétiteurs (via modules ou shortcodes), pour enrichir vos CPT.
• WooCommerce : prix, stock, note, attributs, bouton panier, etc.

Exemples :

• Dans un CPT « Projets », affichez dynamiquement « Client », « Budget », « Date de livraison », « Galerie » depuis ACF.
• Sur les fiches produits, remontez automatiquement le badge promo si un champ « Promotion active » est vrai.
• Dans un template d’article, affichez l’image à la une, le titre et l’extrait sans les ressaisir.

Organisation & maintenance (naming, export, rôles)

• Naming clair : « Global Header », « Template Articles – Single », « Template Produits – Archive Catégorie », etc.
• Ordre logique : regroupez visuellement (même si Divi n’a pas de dossiers) ; utilisez des préfixes (ex. [GLOBAL], [BLOG], [SHOP]).
• Portabilité : utilisez l’outil d’Export/Import du Theme Builder pour sauvegarder vos templates (.json). Conservez-les dans votre versioning ou votre drive.
• Rôles & permissions : limitez l’accès au Theme Builder aux profils nécessaires pour éviter des modifications accidentelles.
• Environnement de test : avant de remplacer un header global, dupliquez le template et testez sur un périmètre restreint (exclusion des pages sensibles).

SEO & Performance : paramètres clefs

SEO on-page

• Hiérarchie des titres : 1 seul H1 (souvent le titre de l’article), puis H2/H3 cohérents dans le Body.
• Balises Meta & Open Graph : pilotez-les via votre extension SEO (Rank Math, Yoast). Le Theme Builder n’en empêche pas l’usage.
• Breadcrumbs : ajoutez un fil d’Ariane (module tiers ou shortcode) dans vos templates d’articles/produits.
• Données structurées : selon le type de contenu (Article, Product, Event…). Vous pouvez injecter un script JSON-LD dans le Body (module Code) si besoin.

Performance

• Options Performance de Divi : activez la génération de CSS statique/critique, le chargement conditionnel des icônes, et désactivez les fonctionnalités inutiles.
• Images : WebP, dimensions adaptées, lazy-loading, et pas d’images géantes en header.
• Modules : évitez de multiplier sliders/animations lourdes dans le header global (impact sur toutes les pages).
• Cache & CDN : combinez les options Divi avec un bon plugin de cache et un CDN.

Accessibilité : gagner en qualité UX

• Contraste des couleurs (texte/menu/footer) et taille de police lisible.
• Navigation clavier : focus visible, éviter les pièges d’onglets dans les menus complexes.
• Balises ARIA sur header/footer si nécessaire ; rôle navigation, contentinfo, etc.
• Alt dynamiques pour les images (ex. lier l’attribut à « Titre de l’article » pour l’image à la une).

Erreurs fréquentes et comment les éviter

• Oublier le module « Post Content » dans le Body : le contenu de l’éditeur n’apparaît pas.
• Toutes pages affectées par erreur : une condition trop large applique un template partout. Utilisez « Exclure » pour affiner.
• Conflits de templates : si deux templates ciblent la même zone, Divi applique la règle de priorité (le plus spécifique gagne). Clarifiez vos cibles.
• Dupliquer des éléments globaux : éviter deux headers globaux actifs simultanément.
• Header trop lourd : impact direct sur LCP et CLS. Préférez un header épuré, sticky seulement si utile.

Checklist express

• Créer Header et Footer globaux, simples et légers.
• Définir des templates spécifiques (articles, catégories, produits, 404, recherche).
• Dans chaque Body : ajouter Post Content + blocs dynamiques utiles.
• Poser des conditions précises (inclure/exclure) et tester.
• Activer les optimisations performance de Divi, soigner les images.
• Vérifier SEO on-page (H1 unique, fil d’Ariane, meta via plugin).
• Exporter les templates (.json) et documenter le naming.

Conclusion sur le Theme Builder de Divi

Le Theme Builder de Divi est un atout majeur pour industrialiser vos gabarits et maintenir une cohérence de marque sur tout le site, sans coder. En combinant templates, conditions et contenu dynamique (WordPress, ACF, WooCommerce), vous obtenez une base solide, évolutive et performante. Avec une bonne organisation (naming, export, rôles), quelques règles SEO/UX, et un œil sur la performance, vous déployez des designs propres, rapides et faciles à faire évoluer.