Comment fonctionne le nouveau Divi Theme Builder ?

Mis à jour le 19/11/2019 | Publié le 18/10/2019 | 28 commentaires

Comme prévu, Divi 4.0 est arrivé ce 17 octobre 2019 et comme tous les utilisateurs, j’avais hâte de le tester. Je vous propose de découvrir rapidement comment fonctionne le Divi Theme Builder. Histoire que vous ne soyez pas trop perdu lorsque vous ferez la mise à jour du thème 😉 …

Perdu(e) ? J’avoue avoir été un peu déroutée lorsque j’ai installé un nouveau WordPress avec Divi 4 en local.

Par habitude, j’ai activé le Visual Builder sur une page existante et là, surprise, rien n’a l’air d’avoir changé !

Oui et non en fait :

  • Le Visual Builder fonctionne comme avant, pas de modifications à ce niveau-là (ouf !).
  • Mais toute la puissance du Divi Theme Builder se trouve dans son onglet éponyme, en backoffice. C’est ici que vous pourrez créer le design de vos modèles de page. Vous pourrez également importer et exporter ces « templates de thème ».
Divi Theme Builder exemple n°1
Exemple de layout global par défaut
Divi Theme Builder exemple n°2
Exemple de layout pour la page Blog
Divi Theme Builder exemple n°3
Exemple de layout pour la page d’archive de catégorie

Voyons ensemble comment le Theme Builder fonctionne…

Annonce : cet article contient des liens d’affiliation que vous reconnaitrez facilement. Les liens classiques sont en violet et les liens sponsorisés sont en rose.

1 – Construire la template par défaut (globale)

Pour commencer à profiter pleinement des fonctionnalités du nouveau Divi Theme Builder, vous devez vous rendre à l’onglet Divi > Theme Builder.

Si vous êtes nouveau sur WordPress, voici comment installer Divi.

Depuis cet onglet, vous pouvez construire des « parties » de layout (Header, Body et Footer) afin de créer un ensemble de templates.

En cliquant sur « Ajouter un en-tête personnalisé » (Add Global Header), vous pouvez commencer à construire l’en-tête de votre site qui s’affichera sur toutes les pages de votre site. Il s’agit bien d’un design global.

Build Global Header
Cliquez sur Add Global Hedaer puis sur Build Global Header (ou ajouter de la bibliothèque)

Vous obtiendrez 2 choix :

  • Construire un en-tête personnalisé (Build Global Header) : vous construirez le design de votre header
  • Ajouter de la Bibliothèque : vous téléchargerez un élément déjà présent dans votre Bibliothèque Divi.
Templates via l'onglet Theme Builder
Icône du crayon pour éditer le « morceau de template ».

En cliquant sur l’icône du crayon, une fenêtre d’édition s’ouvre :

Éditer la template et commencer à créer
Éditer la template et commencer à créer

Vous pouvez créer votre layout comme à votre habitude : ajoutez des sections, des lignes, des modules et effectuez les paramétrages que vous souhaitez.

Sauvegarder et fermer l'édition
Sauvegarder et fermer l’édition de la template

Dès que vous êtes satisfait du design de votre layout, n’oubliez pas de sauvegarder et de cliquer sur la croix (en haut, à droite) pour sortir de l’édition.

Sauvegarder le design créé.
Sauvegarder le design créé.

De retour dans l’onglet « Theme Builder », pensez à cliquer sur « Sauvegarder les changements ». Sans cette action, votre création risque de ne pas être prise en compte.

construire le body avec le Theme Builder
Cliquez sur la template à modifier : construire le body

Renouvelez ces actions pour les autres parties de la template par défaut : Corps Personnalisé (Global Body) et Pied de Page Personnalisé (Global Footer).

construire le footer avec le Theme Builder
Cliquez sur la template à modifier : construire le footer

Notez que cette template par défaut va s’appliquer à toutes les pages de votre site : c’est le design global. Et qu’il n’est pas obligatoire de l’utiliser. Vous pourriez très bien créer des templates uniques pour certains types de page sans avoir à créer un design par défaut.

2 – Ajouter et gérer de nouveaux modèles via le Divi Theme Builder

Une fois que vous avez paramétré le design global de votre site (facultatif), vous pourrez passer aux choses sérieuses : créer de nouveaux modèles de pages WordPress (nouvelles templates) et les affecter à certains types de post.

construire une nouvelle template avec le Divi Theme Builder
Ajouter et construire une nouvelle template

Pour cela, il vous suffit de cliquer sur « + Ajouter un nouveau modèle » (« + Add New Template »). Une popup apparaît et vous propose d’attribuer cette template (ce modèle) à un type de page.

À lire : comment créer un modèle de fiche produit avec WooCommerce et Divi ?

Les choix sont nombreux et peuvent varier en fonction de votre installation. Ils sont classés par typologie :

  • Pages : All Pages – Homepage – Specific Pages – Children of Specific Pages
  • Articles : All Articles – Blog – Articles in Specific Catégories – Articles with Specific Étiquettes – Specific Articles
  • Archive Pages : All Archive Pages – All Author Pages – All Catégorie De Projet Pages – All Catégorie Pages – All Date Pages – All Projet Tags Pages – All Étiquettes Pages – Specific Author Page – Specific Catégorie De Projet Pages – Specific Catégorie Pages – Specific Projet Tags Pages – Specific Étiquettes Pages
  • Projets : All Projets – Projets Archive Page – Projets in Specific Catégories De Projets – Projets with Specific Projet Tags – Specific Projets
  • Other : Search Results – 404 Page

Avec toutes ces pages que vous pouvez éditer et construire avec le Divi Theme Builder, impossible que votre site ressemble à celui du voisin !

À lire absolument : comment importer/exporter des templates de thème ?

Attention : notez que lorsque vous ajoutez un nouveau modèle (une nouvelle template), par défaut, l’En-tête Globale (Global Header) et le Pied de Page Global (Global Footer) sont copiés automatiquement.

Cela signifie que si vous les modifiez, tous les autres modules synchronisés (de couleur verte) se modifieront également : c’est la fonctionnalité d’élément global.

Cela peut être intéressant pour le footer par exemple, qui est généralement identique sur toutes les pages d’un site.

désactiver global
Important : ne pas oublier de cliquer sur « désactiver global »

Mais si ce n’est pas votre intention, veillez donc à cliquer sur les 3 petits points pour faire apparaître le menu connexe et cliquez sur « Désactiver Global ».

Éditer chaque partie de la nouvelle template
Éditer chaque partie de la nouvelle template : Header – Body – Footer

Une fois que vos parties de templates ne sont plus synchronisées en tant qu’élément global, vous pourrez commencer à éditer et construire votre layout.

Ajouter des modules Divi
Ajouter des sections, des lignes et des modules Divi

Lors de l’édition du « Modèle » (Template Layout), ça se passe comme avec le Visual Builder.

Savez-vous que vous pouvez tester Divi gratuitement ? Rendez-vous sur cette page et cliquez sur « TRY IT FOR FREE »

3 – Ne pas oublier le module « Publier un Contenu » (ou Post Content)

Créer le design de vos pages avec le Divi Theme Builder vous permet de définir une structure propre à chaque type de page (ou une structure générale).

Ensuite, il vous suffit de créer ou éditer vos pages (onglet Pages > Toutes les Pages) comme vous le faisiez avant : avec Divi ou avec Gutenberg (éditeur de WordPress).

Toutefois, il est probable qu’en activant le Visual Builder sur l’une de vos pages, vous obtenez le message d’erreur suivant :

Missing Post Content Module
Message d’erreur : « Missing Post Content Module »

« Un modèle a été attribué à cet article à l’aide du Générateur de thèmes. Toutefois, le modèle utilisé ne contient pas de module « Publier le contenu ». Un module de publication de contenu est requis pour ajouter un contenu unique dans le modèle de générateur de thèmes. Une fois qu’un module de contenu de publication a été ajouté au modèle, vous pourrez ajouter un contenu de publication unique dans cette zone pour chaque publication à l’aide du modèle. »

ajouter un module "Publier un Contenu" (Post Content)
Éditer la template et ajouter un module « Publier un Contenu »

Retournez alors dans la template créée (à l’onglet Divi > Theme Builder), éditez-la et ajoutez un module nommé « Publier un Contenu » (ou Post Content) à l’endroit désiré.

Post Content - Publier un Contenu

Lorsque vous activerez de nouveau le Visual Builder sur la page en cours de création, le message d’erreur aura disparu et vous pourrez commencer à créer le layout.

Module Post Content au sein du layout
À présent, vous pouvez construire votre layout à l’endroit du module « Post Content »

Les sections, les lignes et les modules de Divi pourront uniquement se placer à l’endroit où vous avez ajouté le module « Publier un Contenu ».

À lire aussi : Divi intègre la fonctionnalité de WooCommerce Builder.

4 – Avez-vous apprivoisé ce Divi Theme Builder ?

J’espère que ce tour d’horizon du Divi Theme Builder vous a permis de savoir par où commencer avec Divi !

Bien évidemment, je ne suis pas entrée dans les détails, il y a encore beaucoup d’options et de fonctionnalités à découvrir. Sans parler des mises à jour futures qui permettront de faire évoluer l’outil…

Notez : la mise à jour vers Divi 4.0 ne devrait pas avoir d’impact sur le design de votre site utilisant une version précédente tant que vous ne créez pas de templates à l’onglet Divi > Theme Builder. Par contre, si vous créez des nouvelles templates et notamment la Default Website Template sur un site déjà existant, le design de votre site entier va changer (c’est d’ailleurs le but de ce Thème Builder).

Besoin de plus de ressources sur Divi ? Visitez le blog de ElegantThemes qui regorge d’idées et de tutos !

Divi Theme Builder 4.0.x
(re)Voir la vidéo de lancement du Theme Builder.
Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Pour lire cet article plus tard : épinglez-le sur Pinterest !

comment fonctionne le Theme Builder de Divi ?
les fonctionnalités du Theme Builder
how does the Divi Theme Builder works ?

Ça devrait vous plaire aussi :

Divi Layout Block : des modules Divi au sein de Gutenberg !

Divi Layout Block : des modules Divi au sein de Gutenberg !

Bonne nouvelle ! La version 4.1 de Divi permet d’insérer des modules du Divi Builder au sein de l’éditeur Gutenberg de WordPress. Votre imagination n’a plus aucune limite ! Vous imaginez tout ce que vous allez pouvoir réaliser avec Divi et WordPress ?

28 Commentaires

  1. Hugo Genin

    Merci Lycia pour votre réactivité et bravo pour ce bel article.

  2. Lycia Diaz

    Merci Hugo, je n’ai pas encore tout testé en profondeur mais ça va venir. Je mettrai certainement l’article à jour plus tard ou je ferais une série de nouveaux articles si nécessaire.
    À bientôt
    Lycia

  3. Gouilly-Frossard Guillaume

    Merci pour toutes ces infos 😉

  4. kaellyana

    Coucou, merci pour cet article.
    J’ai commencé de regarder un peu hier soir comment cela fonctionnais.
    Je continuerai de tester dans les jours à venir.
    Enfin pouvoir personnaliser son header et footer ça ça va être chouette.
    C’est quelque chose de possible avec elementor sur certains thèmes et du coup je me demandais quand ce serai possible avec Divi.

    Reste leur page blog que je n’aime toujours pas ainsi que la barre latéral toujours aussi moche.

  5. Krapos

    Merci pour cet article, très intéressant et réactif alors que la fonctionalité vient seulement de sortir !

    Par contre je test quelques minutes et je bloque déjà : on peut templater la page de recherche mais comment afficher les résultat d’une recherche ? Post content ne marche pas….

    Merci !

  6. Lycia Diaz

    Salut Krapos,
    Bonne question ! Je n’ai pas encore testé… Désolée. Je mets ça dans ma to-do. Si tu as une réponse avant, fais-nous un signe 😉

  7. DavidArles

    Bonjour à tous,

    Voilà, imaginons, je créer mon template de pages, super!…Ensuite, je vais dans pages et commence à en créer quelques unes…Comment je vais pour « intégrer » mon template à ces pages pour commencer à la créer? (texte, photo etc…)?
    Merci 🙂

  8. DavidArles

    salut Lycia, merci pour ta réponse rapide! je vais essayer 🙂

  9. Aurélie

    Bonjour
    Merci pour votre article sur la nouvelle version Divi. Mon prestataire m’ayant laissé tomber, je me trouver seule pour appréhender cette mise à jour. Je m’en sors plutôt bien sauf sur une chose qui m’irrite fortement !
    Pourriez vous me dire où sur une page article blog on peut désormais supprimer la barre latérale qui est moche et que je n’ai sur aucun autre article puisque sur l’ancienne version nous avions le choix de mettre la page en fullwidth. Je vous remercie pour votre aide précieuse avant que j’envoie tout balader !!!!!

  10. DavidArles

    Salut Lycia,
    Je vais donc essayer….Si j’ai bien compris, pour chaque page que je veux créer, je dois effectuer la manoeuvre que tu me décris dans ton article?
    Je recherche des ressources « tutots « comme ici, ou vidéos pour faire mon apprentissage de Divi Theme 4.0…Peut être as tu en tête l’idée du livre? 😉
    Merci en tout cas pour ta réponse rapide!

  11. Lycia Diaz

    Merci David ! Oui l’ebook était dans les tuyaux mais je l’ai laissé tombé il y a quelques mois car les mises à jour successives me rendaient folles (le livre était obsolète tous les mois)… donc ce n’est pas pour « bientôt »… Toutefois, je prépare plusieurs rédactions qui pourront aider les « débutants » car tu n’es pas le seul : les commentaires fusent depuis la sortie de Divi 4.0 😉

  12. Lycia Diaz

    Salut Aurélie, je n’ai pas vérifié mais l’option « fullwidth » doit certainement être toujours là. Sinon, le plus simple serait de créer un modèle de page pour tous tes articles depuis le Divi Theme Builder (All Articles) en ajoutant seulement un « Custom Body » dans lequel tu places une section et une ligne 1/1 (fullwidth). Dedans tu places un module « Post Content ». Et hop, le tour est joué : adieu sidebar dans tous tes articles ! 😉

  13. roland

    Bonjour à tous,

    Avez vous rencontrer des lenteur au niveau du back office avec le builder

    Chez moi c’est du lenteur quand je veux modifier une page

    Cela viendrait pt de ma connexion ?

    Merci pour vos retours

    FM

  14. Lycia Diaz

    Bonjour Roland.
    Pour ma part, c’est comme d’habitude. Est-ce que tout est à jour ? Peut-être un problème chez l’hébergeur ? Genre serveur un peu lent mais après ça revient ?

  15. Roland

    Bonjour Lycia

    oui tous mes site sont à jours
    wordpress theme et plug-in

    C’est vraiment pénible il faut que je test avec une connection
    je suis à 2 M en download

  16. Lycia Diaz

    C’est mas mal 2Mo en download. Moi je suis à 3Mo en Upload et 0,3Mo en Download ! OMG… J’ai tellement hâte d’avoir la fibre mais ce n’est pas encore disponible dans mon village Rrrrr !
    Quant à toi, je ne sais pas et je me doute que c’est pénible.
    Des fois, avec Gutenberg (éditeur WordPress), lorsque je rédige, j’ai le temps d’écrire la phrase entière alors que le premier mot ne s’est pas encore affiché. C’est très pénible mais ça m’arrive une fois de temps en temps. Vraiment rarement. Donc j’imagine que c’est le serveur… Peut-être « redémarrer l’ordi » ? Même si je doute que ça résolve le problème…
    Bonne journée 😉

  17. roland

    Merci pour ton aide

    je suis un server en Suisse, Infomaniak, pour moi le top

    POur la fibre elle viendra pt un jour…

    Autre question qui a rien à voir, le référencement proposé par DIVI pour les mots clefs c’est bien ? Quelqu’un l’a déjà tester ?

    Je devrais poser cette question à un autre endroit du site ?

    Bonne journée

  18. DavidArles

    Bonjour à tous,
    Hello Lycia,

    Je viens donc d’essayer ta méthode…En effet, ça à l’air de marcher..Mais je me rends compte que je suis un peu dévarié avec ce Theme Builder….Voilà ma question : j’ai cru comprendre qu’il faillait d’abord créer un Thème (ou plus), pour ensuite créer des pages SANS les construire avec Visual Builder, et les importer dans mon Templates en tant que pages déjà crées….Est ce la bonne méthode? Du coup je ne vois plus « l’utilité » du Visual Builder…(Dis moi si je suis complet à côté de la plaque lol)

    Merci et bonne journée!

  19. DavidArles

    Hello,

    J’ai posté un message sur la création des pages avec Theme Builder mais il a disparu…C’était une question qui me taraude….Si vous l’a retrouvez et y répondez ce me sera d’un grand secours 🙂 Merci!

  20. Lycia Diaz

    Salut David,

    Bon, je ne suis pas sûre de tout comprendre…

    – D’abord : tu n’es pas obligé de créer des templates de thème. Cela est facultatif, même si cette fonctionnalité peut être vraiment appréciable.
    – Ensuite : bien sûr que tu peux continuer à créer tes pages (layouts) avec le Visual Builder ! Dans tes templates de thème (au niveau du Theme Builder), le fait d’ajouter un module Post Content au sein du Custom Body permettra au site d’afficher la page, qu’elle soit construire avec l’éditeur de WordPress ou avec le Visual Builder.

    Pour récapituler : tu construis un design global avec le theme builder et tu continues à créer tes contenus de pages comme tu le souhaites (depuis l’onglet Pages de WordPress), il suffit juste de les « appeler » grâce au module « Post Content » que tu places dans ton template de thème.

    Es-ce plus clair pour toi ?

    A bientôt

    Lycia 😉

  21. Lycia Diaz

    Salut David,
    Désolée, je viens d’y répondre, je n’ai pas eu le temps avant…

  22. DavidArles

    Hello Lycia,
    Merci de ta réponse, je vais creuser tout cela!
    Bonne semaine à toi
    David

  23. Fred

    hello Lycia, savez vous comment le nouveau header construit avec le thème builder peut se réduire quand on descend sur la page, comme avant? merci pour l’info! faut il rajouter du CSS?

  24. cécile

    Bonjour Lycia
    Je viens de commencer mon site avec visual Builder, et je suis tombée sur ton site pour appréhender au mieux Divi.
    Suite à ton article, j’aurais voulu savoir : pour faire un site one page, peut-on juste travailler sur « modèle site par défault » ? ou faut-il l’utiliser juste pour faire « l’apparence » du site et ensuite créer des pages pour mettre le contenu ?

    Merci d’avance pour le retour,

    Bonne journée

    Cécile

  25. Lycia Diaz

    Salut Fred… hélas je n’ai pas vu cette option dans le thème Builder… je pense qu’un coup de CSS fera l’affaire !?

  26. Lycia Diaz

    Salut Cécile,
    Désolée, je n’ai pas tout compris…
    Tu veux faire un site one-page ? Cela signifie que tout est sur la même page et que ton menu renvoie vers des sections de ta page principale. Pourrais-tu m’en dire plus sur ce que tu recherches ?

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This