Divi Theme Builder Overview

November 8, 2019

The Divi Theme Builder is the update that Divi users have been waiting for. This is a new Divi feature that makes it easy to create headers, footers, and page layouts and apply them to any page or post type. Even though it uses the Divi Builder system, it’s different from the Divi Builder in that it focuses on site-wide templates. In this article, we’ll take a close look at the Theme Builder and see what it can do.

Divi Theme Builder Workspace

divi-theme-builder-overview Theme Builder Layout

A new menu item is added to the Divi dashboard menu called Theme Builder. Clicking this opens a workspace area with blocks. The block is a template with elements that are built with the Divi Builder. Each template contains three smaller blocks within them: one for the header, one for the body, and one for the footer. You can add as many templates to this workspace as you want.

The first template is global, but it can be overridden by any template you wish for any post-type you wish. It can get confusing if you have a lot of templates that override each other. Fortunately, the label for each template does help clear up any confusion.

divi-theme-builder-overview-1 Theme Builder Layout

The templates can be assigned to pages, posts, archive pages, WooCommerce pages, products, projects, or other (a search page and a 404 page). They can be assigned to all, specific categories, tags, specific posts, etc., for each of the post types. You can also exclude any page or post. Clicking Add New Template opens the template settings where you can choose the type of template you want to create.

divi-theme-builder-overview-2 Theme Builder Layout

Clicking on any of the elements (header, body, or footer) opens a dropdown box where you can select to build a global template or add from the Divi library. Click the eye to enable or disable the layout on the frontend. Use the menu that appears above each theme to move it, duplicate it, edit, and export it.

divi-theme-builder-overview-3 Theme Builder Layout

Selecting to build opens a Visual Builder within the Theme Builder workspace where you can create the layout. This builder has a few features that are unique to the Theme Builder. For example, it includes a post module that’s not available in the normal Divi Builder.

divi-theme-builder-overview-4 Theme Builder Layout

It identifies the theme’s assignment so you can tell at a glance what each theme is for. In this example, the new theme is assigned only to category pages. All other pages will display the global theme instead.

divi-theme-builder-overview-5 Theme Builder Layout

You can copy another theme or import one. To copy, you can select the clone feature that appears at the top of the theme block when you hover over the theme, or drag and drop the elements you want. This leaves the originals in place and adds a copy of them in the location where you dropped it. I’ve copied the All Categories Pages theme (more on this later), but I want to use a different header and footer. Click on the header or footer and click Disable Global. I can now customize the layouts. Another option is to delete them and create a new layout.

Import and Export

divi-theme-builder-overview-6 Theme Builder Layout

You can create your own layouts or import layouts from other sources. Elegant Themes has created several Theme Builder layouts as a starting point. Once you design the layout the way you want it, simply export it to use it on other websites. When you import, you can select for the layout to override the default website template, allow it to override existing assignments, and download a backup before importing.

divi-theme-builder-overview-7 Theme Builder Layout

To export, you can enter the name of the file or select to export all templates.

Creating Header Templates

divi-theme-builder-overview-8 Theme Builder Layout

Clicking Header opens a builder where you can use any Divi module. Place your modules and style them as normal. I’ve added two rows. The first includes the new Menu module and a social media follow module. The second includes search, menu, and a button to create a call to action.

divi-theme-builder-overview-9 Theme Builder Layout

I’ve added a logo to the first menu module and selected the main menu. I’ve also added a border to the bottom of the row. For the second row, I did not add a logo. I selected a different menu to display in this location. I also styled the button with a blue background and white text. Save and exit when you’re done.

divi-theme-builder-overview-10 Theme Builder Layout

Click save changes in the main Theme Builder menu. Since this header is global, it will automatically be placed at the top of every page unless you override it with another header.

divi-theme-builder-overview-11 Theme Builder Layout

Here’s the main page displaying the header.

divi-theme-builder-overview-12 Theme Builder Layout

It’s also possible to create a header that displays only on certain pages, posts, or post types. Click Add New Template and choose where you want it to display. You can also choose where you want to exclude it. In this example, I’m creating a new header that will only display on blog posts with the category Ice Cream.

divi-theme-builder-overview-13 Theme Builder Layout

The header now appears on any blog post with the category I chose, and on no other pages or posts. This is the header from the 6th Theme Builder layout from Elegant Themes.

Creating Footer Templates

divi-theme-builder-overview-14 Theme Builder Layout

I’ve uploaded a header and footer layout from the 4th Divi Theme Builder layout pack. It’s assigned as global.

divi-theme-builder-overview-15 Theme Builder Layout

Here’s a look at the layout in the Theme Builder.

divi-theme-builder-overview-16 Theme Builder Layout

Just like the header, you can create a custom footer for any page or post type. I’m creating a custom footer that will only be used on WooCommerce pages (shop, cart, checkout, and my account).

divi-theme-builder-overview-17 Theme Builder Layout

It automatically uses the global header and footer, so I’m deleting the footer to create my own.

divi-theme-builder-overview-18 Theme Builder Layout

Click Add Custom Footer gives me the options to use the global footer, build a custom footer, or use a layout from the library.

divi-theme-builder-overview-19 Theme Builder Layout

There are lots of amazing layouts already in the Divi library and they have pre-designed footers that I can use. I’m using the Magazine Categories Page layout.

divi-theme-builder-overview-20 Theme Builder Layout

I now have a custom footer that I can edit. Since I used a full-page layout I had to delete the sections I didn’t want.

divi-theme-builder-overview-21 Theme Builder Layout

This left me with a styled footer that I can now have at the bottom of every WooCommerce page. This same method can be used to create custom footers for every page and post type.

Creating Body Templates

divi-theme-builder-overview-22 Theme Builder Layout

To create a custom body, select to add a new template and choose its assignment. I’ve added a template to All Category Pages. You can also create a body template for a 404 page, product layout, etc.

Category Page Example

divi-theme-builder-overview-23 Theme Builder Layout

This creates the template and assigns it to All Category Pages. It automatically includes the global header and footer. I can then click on Add Custom Body and build it from scratch or add a layout from the library.

divi-theme-builder-overview-24 Theme Builder Layout

In this example, I’ve added three rows. The first has a text module with dynamic content. I’ve selected to show the category names. The second has a post slider with 1 post and a blog module with 3 posts. The third has a blog module with 6 posts in the current category. The blog module now has options to show different post types. I’ve chosen posts, but it can also show pages, projects, and products.

divi-theme-builder-overview-25 Theme Builder Layout

The custom body is now assigned to all category pages.

Products Page Example

divi-theme-builder-overview-26 Theme Builder Layout

Next, I’ll create a layout for All Products. Choose the assignment from the list and click Create Template.

divi-theme-builder-overview-27 Theme Builder Layout

It automatically added my global header and footer. Clicking on Add Custom Body lets me build from scratch, add from library, or copy from an existing template in the Theme Builder.

divi-theme-builder-overview-28 Theme Builder Layout

Add your WooCommerce and Divi modules to create your layout. Alternately, you can import one of the Elegant Themes Theme Builder layouts as I’ve done here. This is the product page from the 3rd layout.

divi-theme-builder-overview-29 Theme Builder Layout

All of my products now use this layout.

Search Results Page Example

divi-theme-builder-overview-30 Theme Builder Layout

Next, I’m creating a Search Results page. I want to duplicate the All Categories Pages theme and add a new header and footer.

divi-theme-builder-overview-31 Theme Builder Layout

Once you duplicate a theme, the Template Settings opens so you can assign it. I’ve assigned it to Search Results.

divi-theme-builder-overview-32 Theme Builder Layout

I’ve now disabled global so I can customize the header and footer.

divi-theme-builder-overview-33 Theme Builder Layout

I’ve used several Elegant Themes layouts to build my Search Results page. This is how it looks on the front end. Since it can include multiple posts, the category page layouts are great for search results pages. This page also has a different header than the rest of the site.

Ending Thoughts

That’s our look at how to use the Divi Theme Builder. One thing I’d like to see is a Theme Builder Library. This way, we wouldn’t have to upload the same layouts into the Theme Builder. I’d also like to see Elegant Themes add Theme Builder layouts to their weekly Divi layout packs.

The Theme Builder is actually easy to use, and it adds a lot of design potential to Divi. We highly recommend Divi and the new Theme Builder.

We want to hear from you. Have you tried the Divi Theme Builder? Let us know what you think about it in the comments.

Source

Share this article:
 




eHost-square-ad Theme Builder Layout

We’re listening.

Have something to say about this article? Share it with us on Facebook, Twitter or LinkedIn:

SHARE IT HERE:

Related Posts

how-to-easily-change-the-author-in-wordpress Theme Builder Layout

How to Easily Change the Author in WordPress

There are a number of times when you may want to change the author of a WordPress post. For example, if you have a ghostwriter (or several), the original author won’t be the person who you want a post published under. If you have a content hub with a lot of writers,...

Get ALL Your SEO, WordPress & Divi News

Join Our Daily Roundup

SEO News and More

SEO News and More

Subscribe ToThe Weekly SEO Trade News Updates

Get the latest SEO, SEM and SMM marketing intel, tips and tricks from one of the best SEO Gurus online. 

Every Tuesday morning we send out an aggregated email listing all new posts on SEO Trade News.

Excellent! Now check your email to confirm your subscription.