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"..
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.
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.
By clicking on the pencil icon, an editing window opens:
You can create your layout as usual: add sections, lines, 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 edition.
Back in the "Theme Builder" tab, remember to click on "Save Changes". Without this action, your creation may not be taken into account.
Repeat these actions for the other parts of the default template: Custom Body (Global Body) and Custom Footer (Global 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.
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.
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.
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".
Once your template parts are no longer synchronized as a global element, you can start editing and building your layout.
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:
"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. »
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.
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.
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!
To read this article later: pin it on Pinterest!