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.
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.
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!