As expected, Divi 4.0 arrived this October 17, 2019 and like all users, I was eager to test it. I propose you to quickly discover how the Divi Theme Builder works. So that you won't be too lost when you update the theme 😉 ...
Lost? I admit I was a bit 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 in fact:
- The Visual Builder works as before, no changes at this level (phew!).
- But the power of the Divi Theme Builder lies in its eponymous backoffice tab. This is where you can create the design of your page templates. You can also import and export these "theme templates.
Let's see how the Theme Builder works...
Announcement: this article contains affiliate links that you will easily recognise. The classic links are in purple and sponsored links are in pink.
1 - Building the default (global) template
To start taking full advantage of the new Divi Theme Builder, you need to go to the Divi > Theme Builder tab.
If you are new to WordPress, here is 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 to build the header of your site which will be displayed on all the pages of your site. It is a global design.
You will get 2 choices:
- Build GlobalHeader: you will build the design of your header
- Add from Library: You will upload an item already in your Divi Library.
By clicking on the pencil icon, an editing window opens:
You can create your layout as usual: add sections, rows, modules and make the settings you want.
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 editing process.
Back in the Theme Builder tab, remember to click on "Save Changes". If you don't do this, your creation may not be taken into account.
Repeat these actions for the other parts of the default template: Global Body and Global Footer.
Note that this default template will apply to all the pages of your site: it is the global design. And it is not mandatory to use it. You could very well create unique templates for certain types of pages without having to create a default design.
2 - Adding and managing new templates via the Divi Theme Builder
Once you have set up the overall design of your site (optional), you can get down to business: create new WordPress page templates (new templates) and assign them to certain post types.
To do this, simply click on "+ Add New Template". A popup appears and offers you to assign this template to a page type.
Read more: how to create a product sheet template with WooCommerce and Divi?
There are many choices and they can vary depending on your installation. They are classified by type:
- Pages : All Pages - Homepage - Specific Pages - Children of Specific Pages
- Articles: All Articles - Blog - Articles in Specific Categories - Articles with Specific Tags - Specific Articles
- Archive Pages : All Archive Pages - All Author Pages - All Project Category Pages - All Category Pages - All Date Pages - All Project Tags Pages - All Tags Pages - Specific Author Page - Specific Project Category Pages - Specific Category Pages - Specific Project Tags Pages - Specific Tags 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 the pages you can edit and build with the Divi Theme Builder, it's impossible for your site to look like your neighbour's!
A must read: how to import/export theme templates?
Please note that when you add a new template, by default the Global Header and Global Footer are copied automatically.
This means that if you change them, all other synchronised modules (green) will also change: this is the global element functionality.
This can be interesting for the footer, for example, which is generally identical on all pages of a site.
But if you don't want to do that, make sure you click on the 3 little dots to bring up the related menu and click on "Disable Global".
Once your template parts are no longer synchronised as a global element, you can start editing and building your layout.
When editing the "Template Layout", it is done in the same way as in 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 - Don't forget the "Post Content" module
Designing your pages with the Divi Theme Builder allows you to define a specific structure for each page type (or a general structure).
Then, just 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 when you activate the Visual Builder on one of your pages, you will get the following error message:
"A template has been assigned to this article using the Theme Builder. However, the template used does not contain a "Publish Content" module. A Publish Content module is required to add unique content to the Theme Builder template. Once a publish content module has been added to the template, you will be able to add unique publish content to this area for each publication using the template."
Then go back to the created template (to the Divi > Theme Builder), edit it and add a module named "Post Content at the desired location.
When you reactivate the Visual Builder on the page you are creating, the error message will disappear and you can start creating the layout.
Divi's sections, rows and modules will only be able to be placed where you have added the "Publish Content" module.
Read also: Divi integrates WooCommerce Builder functionality.
4 - Have you mastered this Divi Theme Builder?
I hope this overview of the Divi Theme Builder has given you some insight into where to start with Divi !
Of course, I haven't gone into details, there are still many options and features to discover. Not to mention the future updates that will allow the tool to evolve...
Note: Upgrading to Divi 4.0 should not impact the design of your site using a previous version as long as you do not create templates in the Divi > Theme Builder tab. However, if you create new templates, including the Default Website Template on an existing site, the design of your entire site will change (which is the purpose of this Theme Builder).
Need more resources on Divi? Visit the ElegantThemes blog which is full of ideas and tutorials!
To read this article later: pin it on Pinterest!
Merci Lycia pour votre réactivité et bravo pour ce bel article.
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
Merci pour toutes ces infos 😉
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.
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 !
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 😉
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 🙂
Salut David,
C’est bien expliqué dans mon article : il ne faut pas oublier d’ajouter le module Post Content au sein de ta template de page. C’est grâce à lui que tu pourras injecter ton contenu (textes, images etc.).
As-tu essayé ? 😉
salut Lycia, merci pour ta réponse rapide! je vais essayer 🙂
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 !!!!!
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!
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 😉
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 ! 😉
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
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 ?
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
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 😉
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
Tu parles de l’Onglet SEO de Divi (https://astucesdivi.com/options-divi-seo/) ? Je ne le recommande pas : utilises YOAST plutôt.
Peut-être que cet article peut aussi t’intéresser : https://astucesdivi.com/divi-seo-friendly/
😉
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!
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!
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 😉
Salut David,
Désolée, je viens d’y répondre, je n’ai pas eu le temps avant…
Hello Lycia,
Merci de ta réponse, je vais creuser tout cela!
Bonne semaine à toi
David
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?
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
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 !?
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 ?
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
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.
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.
Bonjour Alicia : et vraiment félicitations et courage pour tout ce que vous faites pour nous amateurs . j’ ai acheter les 2 ebook et suivi plein de tutos sur astuces divi , je me suis lancer dans un grand projet de creation de mon site avec des fonctionnalités diverses ce n’ est pas simple mais j y arriverai jhe pense bien avec tous vos conseils.
j’ ai cree mes pages pour creer mes menus . pui avec theme builder j’ ai construits le modele par defaut ( header et footer ) global jusque la cava
puis pour les pages specifiques que je voulais differentes pour chaque elements de menus , j’ ai creer des body differents . j’ ai bien pris la peine de prevoir des zone » publier un contenu » . mais quand a parti d’ une page deja creer j’ appelle le modele correspondant la page apparait avec le header colle au footer et le main contain est en transparence au dessus pourquoi ??? j’ aurais cru que ma page apparaitrais dans l’ alignement tete corps et pieds . qu’est ce que je faix mal ???
MERCI POUR VOTRE AIDE
Rose
Salut Rose.
Avez-vous trouvé finalement ?
C’est un peu bizarre…
Bonjour Lycia,
Tout d’abord, merci pour ce site, toutes vos ressources sont incroyables et m’ont beaucoup aidée !
Je vous embête, car je rencontre un problème d’affichage sur un site que j’ai créé, uniquement sur la page de blog.
Pour lancer ce blog, j’ai donc :
1) créé un modèle de page comme d’habitude, en retravaillant un modèle de la bibliothèque divi (sans passer par thème builder);
2) créé un template pour les articles en suivant votre article sur le sujet (en passant par le thème builder).
Puis, j’ai publié la page de blog + le premier article. Et là, ça se corse :
– Quand je regarde ma page depuis mon tableau de bord/page de blog/modifier, c’est bien mon template qui s’affiche
– Quand je regarde la page depuis le site directement ou depuis le tableau de bord/page de blog/afficher, c’est le template basique (très moche) de DIVI qui s’affiche.
L’en-tête et la barre latérale que j’ai préparés sur « ma » version ne s’affichent pas sur le site en ligne.
J’ai essayé de faire différemment, en créant un template uniquement réservé à la page de blog depuis thème builder en suivant le modèle fait pour les articles, mais ça ne change rien.
Avez-vous une idée pour m’aider à résoudre ce problème ?
Merci à vous,
Très bonne journée !
Salut Jessica, je ne sais pas si j’ai bien tout compris mais je crois que tu confond la page du blog et les articles eux-mêmes. Même si en fait, j’ai compris que tu ne confond pas vraiment les deux. Mais voilà : les templates pour tes articles, ok tu peux suivre mon tuto. Par contre, pour la page du blog, effectivement, celle de Divi est pas jolie et tu as tout à fait raison de vouloir utiliser le thème builder mais je crois que là où ça coince c’est si tu utilises les mêmes modules prévus pour les articles sur la page du blog… cela ne peut pas fonctionner. Sur la page du blog, tu ne dois pas utiliser le module Publier un contenu, tu dois simplement utiliser le module Blog. Ensuite, tu peux ajouter du texte ou d’autres chose mais le module Blog doit bien être présent sur ce template (modèle). Voilà, j’espère que c’est assez clair et j’aimerais bien savoir si ton souci venait de là… À bientôt. Lycia
Bonsoir Lycia,
Merci pour ta réponse.
Je te confirme que j’avais bien différencié les deux.
Je viens de vérifier et c’est bien le module Blog sur la page de blog et publier un contenu sur le template d’article.
J’ai réussi à forcer l’affichage de mon template avec l’en-tête que j’avais préparée.
Quand dans les réglages je désigne la page » blog » comme la page des articles, c’est la version standard de DIVI qui s’affiche.
Par contre si dans les réglages je ne désigne aucune page comme page des articles, c’est mon template qui s’affiche.
Toutefois, pas sûre que ça soit viable dans la durée.
J’attends de voir ce que ça donne quand il y aura plusieurs articles.
Bonne soirée, à bientôt
Salut Jessica :
« Quand dans les réglages je désigne la page » blog » comme la page des articles, c’est la version standard de DIVI qui s’affiche.
Par contre si dans les réglages je ne désigne aucune page comme page des articles, c’est mon template qui s’affiche. »
C’est très bizarre.
Peux-tu vérifier dans le thème builder à quel modèle tu as assigné ton template pour la page du blog ? Tu peux me donner son nom STP ?
Salut Lycia,
Comme ça ne fonctionnait pas, j’ai supprimé le template préparé pour la page de blog dans le thème builder (j’avais attribué le template à Pages spécifiques/blog).
J’ai donc construit la page de blog comme les autres sans passer par le thème builder et en intégrant une ligne avec le module blog.
Dans les deux cas, avec ou sans le template depuis thème builder, le résultat ne change pas. Quand je désigne la page blog comme page des articles, version DIVI, quand je laisse vide, ma version.
Mystère…
Je te fais un mail avec l’adresse si tu veux aller jeter un coup d’œil.
Salut Jessica, oui fais moi un mail. Mais je crois savoir :
1/ dans les réglages de WordPress tu choisis : la page du blog = blog
2/ ensuite dans le thème builder tu crées un template pour le BLOG (et non pour page spécifique/blog)
Ça devrait marcher.
Hello Lycia,
Je te remercie pour ton retour. Pas besoin de t’embêter plus, c’était bien ça le problème 😉
Merci beaucoup pour ta dispo !
Bonne journée
Coucou Lycia, j’espère que tout va bien pour toi ?!!
Je viens de créer un modèle de page produit et à chaque fois c’est ce message que tu cite dans cet article
« 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 »
Mais c’est une page produit, donc ai-je vraiment besoin du module Publier un contenu ?
Car en effet mon contenu je le rédige dans les champs réservés de woocommerce.
Et je dois dire que ce message est irritant un peu, il réapparait sans cesse
Merci de m’éclairer sur ce point Lycia 😉
Bonne soirée
Youssef
Salut Youssef, comment tu vas ? Le module Publier un contenu dans une fiche produit sert à afficher la « description longue », ce n’est pas obligatoire, effectivement, mais si tu as ce message, c’est peut-être que tu as fait quelque chose de « travers » (désolée de l’expression). Peut-être que cet article t’aidera : https://astucesdivi.com/modele-fiche-produit-woocommerce/
Hello Lucia,
Je precise que je suis tres nouveau avec Wp et Divi , je decrit dabord le context et plus loin mes questions :
1/ j ai demarre un site avec Wp et j ai active le theme Astra .
2/ J ai modife la page Home ( avec Elementor – installe par defaut sur Wp) pour m entrainer avec Wp.
3/ J ai publie le site ainsi cree. tout marche bien.
4/ Apres come j ai vue votre site Astuce DIVI , j ai eu envie d installer DIVI ( theme et builder) dans Wp.
5/ J ai donc ACTIVE le theme DIVI et le site precedement cree, s affiche correctement aussi.
6/ Ensuite je voulais modifier ma page HOME avec Divi ( au lieu d elementor ) et je clique sur Edit with Divi
7/ La page s ouvre mais sans son contenu initiale , et affiche seulement
Bien que j ai clique Edit with DIVI, pourqoi ceci n es pas possible ?(si je clique Elementor le contenu s affiche).
8/ AVEC DIVI Il n es pas possible de modifier une page cree par un autre : theme Astra + elementor ?
9/ Si je cree une nouvelle page de zero avec DIVI, ceci apparement marche.
10/ Si je veut modifier des elements ( exemple un buton) d une page existante fait par elementor+astra ,
ceci n es pas possible dans mon cas. Pourqoi?
11/ AVEC DIVI cela revient a CLONER une page existante (elementor) ? ceci es possible? comment?
Je suis confus entre ces 2 editeurs , et comment mixer des pages cree avec Divi et Elementor,
et aussi avec le bascule entre les 2 themes Astra et Divi .
Merci d avance
Charis
Salut Charis.
Tu ne peux pas basculer d’un éditeur à l’autre. Ce n’est pas conseillé. Dans ton cas, tu dois choisir, c’est soit Astra + Elementor soit Divi et son builder.
Pour info, Elementor n’est pas un builder installé par défaut, s’il s’est installé c’est parce que ton thème Astra t’as fortement conseillé de l’installer.
Utiliser plusieurs thèmes et plusieurs builder n’est vraiment pas une bonne pratique, car chaque thème offre ses propres options et quand tu actives un autre thème, tu perds tes modifications, idem pour les page builder (Elementor ou Divi Builder). Malheureusement, tu dois faire un choix, je le répète. Et tu devras faire un grand ménage après avoir fait ton choix.
Voilà, courage !