Most users who are new to Divi miss out on one of its best and most powerful features – the Divi Theme Builder. It gives you a simple and intuitive interface that you can use to create multiple templates for the various pages of your website.
For example, using the Divi Theme Builder, you can set up a specific template for your blog posts complete with a header, footer, and body. Now, every time you publish a new post, it will automatically style itself according to that theme builder template.
You can also create templates for post categories, tags, and even specific pages.
Overall, the Divi Theme Builder gives you an extremely powerful way to customize and manage your site’s design.
This article is a comprehensive quickstart guide on how to use the Divi Theme Builder.
So without further ado, let’s get started:
The Divi Theme Builder: Overview
To access the Divi Theme Builder, you’ll need to log in to your WordPress backend dashboard, and from the lefthand sidebar, navigate to Divi>Theme Builder.
Divi Theme Builder
As you can see from the image above, from the start you get access to a “Default Website Template.” You can easily tweak this by adding a Global Header, Body, or Footer. Similarly, you can also create more templates by hitting the “Add New Template” button.
Other than this, you have the three options located at the top-right corner of the Divi Theme Builder title bar. From here, you can import/export templates, check the history of all edits and changes you have made, and also bulk delete all Divi Theme Builder templates.
Now, to give you an idea of how this works, let’s set a new global section for our website
How to create a new global section
For the sake of this example, we will show you how you can create/set a new global header for your Divi website.
First, click the “Add Global Header” button. You will then get the option to either “Build Global Header” or “Add From Library.” A new installation of Divi doesn’t have any pre-built header layouts in the Divi Library. As such, we will need to create one ourselves.
To do this click the “Build Global Header Button” and then select “Build From Scratch” as shown in the GIF below:
Build Global Header
Note: Going over a step-by-step tutorial on how we created the header will unnecessarily lengthen this overview. As such we have skipped this section. If you do want a tutorial, then you can check out this tutorial for creating a global header.
Additional Reading: Divi custom header examples for your inspiration.
Once you’re done creating a new header, click on “Save” and exit the Divi Builder. You’ll land on the Divi Theme Builder. Again click the “Save Changes” button. Your new Global Header is now ready.
Save new Global Header
You can now head over to your website’s front end. You will find that all your pages now use this new header.
A website with new header
Following this method, you can also set a global footer for your website as well.
A global body isn’t recommended as different pages will use different structures. However, you will find the option to “Add Custom Body” for different templates specific to different category pages or tags extremely useful.
Let’s go over this next!
How to create a new Divi Theme Builder template
Now, to show you the power and efficiency of Divi templates, we will create a new template for all blog posts on our website.
To do this, first click on the “+ Add New Template” button in the Divi Theme Builder. Next, select “Blog” under “Use On” to specify that this template will only be used on Blog Posts. Finally hit “Create Template”.
Create a new Divi Theme Builder template
As you can see, a new template named “Blog” is now available on your Divi Theme Builder area. It has already inherited the Global Header. Now, we want to set a unique body for the template such that all blog posts appear with that layout.
Now, to do this, we click on the “Add Custom Body.” Next, you can either “Build Custom Body” from scratch or “Add From Library.” However, similar to before, the Divi Libary doesn’t contain any layout that can function as a custom template for your blog posts.
As such, you can refer to this link on how to design a Divi blog post template. You will also find a download link for the template that you can simply upload to your Divi website and use as your blog post template.
After downloading the Divi template as a .json file, to upload it, head on over to the Divi Theme Builder, click on the Portability button, go to the Import section, and then import the file.
Upload Divi blog post layout
Once uploaded, you will find the new “All Posts” template on your Divi Theme Builder interface. It has a Custom Body but no Header or Footer.
New blog template
As such, do remember to add a custom or global header/footer to the template.
Now, to check out how the template is designed or understand how its modules work, you can read this article on blog post templates.
Basically, it contains placeholder modules for the post title, author name, feature image, and so on. Once you publish a post, these modules will automatically update with the specific information from the blog post.
Different template “assignment” options
In the previous section, we showed you how you can assign a template to different pages or post types on your Divi website. However, the Divi Theme Builder also allows you to reassign the templates if you need. Not just that, but the assignment system is super powerful giving you granular control over where you wish to apply the template.
First, to reassign a template, hover your mouse over the template to showcase the hidden settings. Next, click on the vertical 3-dots to option additional settings. From here, click on “Manage Template Assignments.”
Reassign templates
As you can see from the GIF above, you get access to a lot of different assignment options for the Divi Theme Builder template.
For starts, you can choose to either apply it on “All Pages”, just on the “Homepage”, or on specific pages or children of specific pages.
Other than this, you get to assign the templates to “All Posts”, just on your “Blog”, or for specific posts depending on their “categories” or “tags.” What’s more, you can even create a template for a specific post as well.
Then you have the option to assign templates to archive pages, projects, products (if WooCommerce is enabled), search results page, and even 404 page.
But what if you want to apply the template to all “blog posts” except a few. In that case, you can hop onto the “Exclude Form” and mark the posts that you wish to “exempt” from the template.
Exclude assignments from templates
So as you can see, the possibilities are endless. The Divi Theme Builder gives you granular control over where you want to apply your templates.
The Divi Theme Builder: different settings and options
By now, you should have a basic understanding of how to create templates for different pages and posts using the Divi Theme Builder. Apart from this, you also get access to a bunch of different settings and options to make your work easier.
Starting off, we have the Portability tab.
Export templates
We showcased it in the above section. This is useful for importing/exporting different Divi Theme templates on and off your website.
Next, we have the History tab.
Divi Theme Builder history
From here you can easily jump back and forth between different changes you made in the Divi Theme Builder. So if you accidentally deleted a template, you can easily revert your action from here.
And then we have the Reset tab.
Delete all Divi Theme Builder templates
It will delete all templates in the Divi Theme Builder.
Now, moving on to each specific template, hover over them will present you with a few options.
Divi template additional options
Using these options you can delete the templates, move them around to organize the view, access its settings, export the template, and even access additional settings like rename, delete, disable, reassign the template to another post type, and even duplicate them.
And speaking of duplicating templates, sometimes you might want particular sections from one template combined with sections of another template. For example, let’s say we want to add the Global Header from the “All Pages” template into the “All Posts” template. Well, you can easily do that by simply dragging and dropping the section from one template to the other.
Drag and drop template sections
Another useful feature is the “eye” button. It allows you to show/hide a particular header/body/footer section from the frontend.
Hide template sections
Wrapping Up
And that brings us to the end of our quick start guide on the Divi Theme Builder. We hope you found this useful and that it helped you in better understanding and using the Divi theme.
As you can see, the Divi Theme Builder is a super powerful tool that can streamline the way you create content on your website. All you need to do is create a template once, and it will automatically apply itself to all your content falling into that particular “assignment.”
Now, with that being said, if you need help creating the templates, then leave us a comment and we might consider creating a full-fledge step-by-step guide to help you out.
🙂
🙂