How does the new Divi Theme Builder work?

Updated on 19/11/2019 | Published on 18/10/2019 | 31 comments

As planned, Divi 4.0 arrived on October 17, 2019 and like all users, I was looking forward to testing it. I suggest you to quickly discover how the Divi Theme Builder works. So that you don't get too lost when you update the theme 😉 ...

Lost? I admit I was a little confused when I installed a new WordPress with Divi 4 locally.

Out of habit, I activated the Visual Builder on an existing page and there, surprise, nothing seems to have changed!

Yes and no, actually:

  • The Visual Builder works as before, no changes at this level (ouf !).
  • But all the power of the Divi Theme Builder is in its eponymous tab, in the back office. This is where you can create the design of your page templates. You will also be able to import and export these "theme templates"..
Divi Theme Builder exemple n°1
Example of a default global layout
Divi Theme Builder exemple n°2
Example layout for the Blog page
Divi Theme Builder exemple n°3
Example layout for the category archive page

Let's see together how the Theme Builder works...

Advertisement: This article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.

1 - Build the default template (global)

To start enjoying the full functionality of the new Divi Theme Builder, you must go to the Divi > Theme Builder tab.

If you are new to WordPress, here is how to how to install Divi.

From this tab, you can build layout "parts" (Header, Body and Footer) to create a set of templates.

By clicking on "Add Global Header", you can start build the header of your site which will be displayed on all the pages of your site. It is indeed a global design.

Build Global Header
Click on Add Global Hedaer then on Build Global Header (or add from the library)

You will get 2 choices:

  • Build Global Header: you will build the design of your header
  • Add from Library: you will download an item already present in your Divi Library.
Templates via l'onglet Theme Builder
Pencil icon to edit the "template piece".

By clicking on the pencil icon, an editing window opens:

Éditer la template et commencer à créer
Edit the template and start creating

You can create your layout as usual: add sections, lines, modules and make the settings you want.

Sauvegarder et fermer l'édition
Save and close the template edition

As soon as you are satisfied with the design of your layout, don't forget to save and click on the cross (top right) to exit the edition.

Sauvegarder le design créé.
Save the created design.

Back in the "Theme Builder" tab, remember to click on "Save Changes". Without this action, your creation may not be taken into account.

construire le body avec le Theme Builder
Click on the template to be modified: build the body

Repeat these actions for the other parts of the default template: Custom Body (Global Body) and Custom Footer (Global Footer).

construire le footer avec le Theme Builder
Click on the template to be modified: build the footer

Note that this default template will apply to all pages of your site: it is the global design. And that it is not mandatory to use it. You could very well create unique templates for certain page types without having to create a default design.

2 - Add and manage new models via the Divi Theme Builder

Once you have set up the overall design of your site (optional), you can move on to the serious stuff: create new ones WordPress page templates (new templates) and assign them to certain types of post.

construire une nouvelle template avec le Divi Theme Builder
Add and build a new template

To do this, simply click on "+ Add a new template" ("+ Add New Template"). A popup appears and suggests that you assign this template (this template) to a page type.

To read: how to create a product sheet template with WooCommerce and Divi?

There are many choices and may vary depending on your installation. They are classified by typology:

  • Pages : All Pages - Homepage - Specific Pages - Children of Specific Pages
  • Articles: All Articles - Blog - Articles in Specific Categories - Articles with Specific Étiquettes - Specific Articles
  • Archive Pages: All Archive Pages - All Author Pages - All Project Category Pages - All Project Category Pages - All Date Pages - All Project Tags Pages - All Labels Pages - Specific Author Page - Specific Project Category Pages - Specific Category Pages - Specific Category Tags Pages - Specific Project Tags Pages - Specific Labels Pages
  • Projects : All Projects - Projects Archive Page - Projects in Specific Project Categories - Projects with Specific Project Tags - Specific Projects
  • Other : Search Results - 404 Page

With all these pages you can edit and build with the Divi Theme Builder, it's impossible for your site to look like the neighbour's!

To be read absolutely: how to import/export theme templates?

Warning: note that when you add a new template, by default, the Global Header and Global Footer are automatically copied.

This means that if you modify them, all the other synchronized modules (green in color) will also change: this is the global element functionality.

This can be interesting for the footer for example, which is generally the same on all pages of a site.

désactiver global
Important: do not forget to click on "Disable global".

But if that's not your intention, make sure you click on the 3 small dots to bring up the related menu and click on "Disable Global".

Éditer chaque partie de la nouvelle template
Edit each part of the new template: Header - Body - Footer

Once your template parts are no longer synchronized as a global element, you can start editing and building your layout.

Ajouter des modules Divi
Adding sections, lines and Divi modules

When editing the Template Layout, it is the same as with the Visual Builder.

Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE"

3 - Do not forget the module "Publish Content" (or Post Content)

Creating the design of your pages with the Divi Theme Builder allows you to define a structure specific to each page type (or a general structure).

Then, you just have to create or edit your pages (Pages tab > All Pages) as you did before: with Divi or with Gutenberg (WordPress editor).

However, it is likely that by activating the Visual Builder on one of your pages, you will get the following error message:

Missing Post Content Module
Error message: "Missing Post Content Module"

"A template has been assigned to this article using the Theme Generator. However, the template used does not contain a "Publish Content" module. A content publishing module is required to add unique content to the theme generator template. Once a publishing content module has been added to the template, you will be able to add a unique publishing content in this area for each publication using the template. »

ajouter un module "Publier un Contenu" (Post Content)
Edit the template and add a "Publish Content" module

Then go back to the created template (to the tab Divi > Theme Builder), edit it and add a module named "Publish Content" (or Post Content) at the desired location.

Post Content - Publier un Contenu

When you activate the Visual Builder again on the page being created, the error message will have disappeared and you can start creating the layout.

Module Post Content au sein du layout
Now you can build your layout at the location of the "Post Content" module

Divi sections, lines and modules can only be placed where you added the "Publish Content" module.

Also to be read: Divi integrates the functionality of WooCommerce Builder.

4 - Have you tamed this Divi Theme Builder?

I hope this overview of the Divi Theme Builder has allowed you to know where to start with Divi !

Of course, I didn't go into details, there are still many options and features to discover. Not to mention future updates that will allow the tool to evolve....

Note: Upgrading to Divi 4.0 should have no impact on the design of your site using a previous version. as long as you don't create templates on the Divi > Theme Builder tab.. On the other hand, if you create new templates, including the Default Website Template on an already existing site, the design of your entire site will change (this is the purpose of this Theme Builder).

Need more resources on Divi? Visit ElegantThemes' blog full of ideas and tutorials!

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)

To read this article later: pin it on Pinterest!

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

1,426 words

6

You should like it too:

Formation Divi PDF : un guide pas à pas

Divi PDF training: a step-by-step guide

What better than a Divi PDF training to master this WordPress Theme, its Visual Builder and its Theme Builder? It's as if a trainer invited himself in your home... Discover its content!

31 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 ?

  27. Jérôme

    Bonjour Lycia,

    Je profite de ton article pour te poser une question sur un comportement gênant du theme builder… Si je construit un footer global dans le theme builder. (Aucune autre intervention dans le theme builder, je veux juste gérer mon footer… ).
    Et bien cela impacte aussi le header… J’ai modifié le harder de mon child manuellement… (pour ajouter des trucs en html dans le top-header). A partir du moment où le theme builder utilise un footer pour une page, mes modifs du header ne sont plus appelées… (elles ne sont plus dans le code html).
    Est ce que sais si un autre header est utilisé quand on fait appel au theme builder?
    Merci pour ton contenu toujours enrichissant

  28. Lycia Diaz

    Salut Jérôme,
    J’ai pas tout compris mais j’ai certainement une partie de la réponse que tu cherches : le thème Divi utilise le fichier theme-header.php et theme-footer.php.
    Donc tu as certainement raison, le thème appelle effectivement d’autres fichiers que les historiques header.php et footer.php lorsque tu utilises le thème builder.

  29. Ted

    Bonjour, est-ce moi ou le Pack Divi à 90€ ne permet pas autant de libertés et de fonctionnalités que le Pack Thrive Membership à 90€ pour faire des blogs corporates et des landing page. Je suis vraiment très déçu par rapport à Thrive Membership et/ou Elementor Pro. Je cherchait une alternative meilleur que Thrive, tous les avis sur le web m’ont pousser à essayer le Pack Elegant Theme mais d’une Divi est super lent, peut optimisé de base et les possibilités en Drag and Drop sont beaucoup moins importante et puissante que Thrive Membership.
    Il serai pas mal à la limite pour du e-commerce mais pas pour du corporates orienté SEO, inbound & growth marketing.

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