Divi is 4.0 has just been released and it marks a major upgrade in how Divi will work when building websites.
With this update, Divi has evolved from a drag-and-drop page builder that allowed you to create content using the Divi Builder to a drag-and-drop Theme Builder that allows you to create every single part of your website using the Divi Builder and its modules.
You can now;
- Build a custom site-wide header/menu section using the Divi Builder
- Build a custom site-wide footer section using the Divi Builder
- Create templates with custom header, footer, and body elements and apply them to any selected areas using conditional logic
- Create templates using dynamic content for site-wide blog posts, projects and WooCommerce product pages
- Create templates for your blog post category & tag pages, and 404 page
- Export entire website templates (essentially the same as 99% of premium Divi Child themes currently do)
These key features are all now available within Divi and together they combine to enable an endless number of possibilities to control how your content is displayed in every area of your site and to help you create amazing Divi websites.
How does the Theme Builder work?
When you update to Divi 4.0, the Divi Theme Builder will be added to your WP admin under Divi > Divi Theme Builder.
In this dashboard, you can create templates with a header, body, and footer using the default Divi modules and assign it to any area of your website.
- The Divi Theme Builder allows you to create any number of templates.
- Each template will have a custom Header, Footer and Body layout.
- Each of these templates can be built using the Divi Builder using Divi modules and dynamic content.
- Each template can then be applied to (or excluded from) any area of your website such as pages, posts, archives, categories etc.
Build custom headers & footers with the Divi Builder
You no longer need a 3rd party plugin or ninja coding skills to add a custom Divi header or footer. A key part of the new templating system is that you can create header & footer sections using the Divi Builder modules and assign them globally across your website. Display your Theme Builder header or footer on every page of your site, or assign specific headers and/or footers to specific pages of your site using conditional logic.
The Divi menu module has also been updated to give you greater control when building your headers in the Theme Builder. The module has been given more layout options, greater control over the module elements and full design options like any other module. You can now upload your logo, show the shopping cart and/or search icon and choose styles from Left Align, Centered, and Inline Centered Logo
Note* When you add a global header using the Theme Builder you will lose the Theme Customizer options that come with the default Divi header. This means that the sticky header, shrinking header, hamburger menu etc that you may be used to are no longer available as a quick setting option. This seems to already be confusing a few people so I assume there will be 3rd party solutions offered pretty soon.
Build custom blog post & WooCommerce product templates
Divi 4 allows you to build custom blog post templates to change the default structure of your blog posts and apply it to all of your posts on a site-wide basis, or to certain posts as required by category or tag.
Using Divi modules and Dynamic content within your template will allow you to pull each posts’ data into your blog layout. Add the title, body content, author, featured image etc within a pre-designed blog post layout using Divi modules and have it display automatically for all of your posts, or to a selection of posts as required.
Just like with blog posts, you can create a template for your WooCommerce product pages using the Divi & Woo modules and dynamic content. Once you have added a template for your products, each product on your site will be displayed using that layout.
This is a great feature for those building websites for clients as it allows them to use the default WP editors to write posts and add WooCommerce products while displaying that content in a custom-designed template using the Divi Builder.
Build custom blog category & tag, search results, and 404-page templates
The Theme Builder templates can be created for and applied to areas of your site that previously required a child theme and knowledge of PHP code. With the Theme Builder, you can customize all areas of your site using the drag-and-drop system you are used to.
With your blog posts using a custom design template, you can then also build custom templates for the blog category & tag pages, and search results pages too. To allow full control over the blog elements of your site, the Divi blog module has been updated to including some new options such as the post loop and post-filtering options.
You can create custom Theme Builder templates for anything!
Exporting & importing your new site template is easy too
The new Theme Builder templates can be imported & exported just like you currently do with the standard Divi layouts. The Theme Builder templates can be exported & imported as individual templates or as a full Theme Builder packs that include all of the templates created within the Theme Builder.
Designers no longer need to create child themes with custom PHP to customize the 404, blog, category and search pages, etc. With this new system offering functionality that previously required a child theme, there may well be a shift away from Divi Child Themes towards Divi Theme Builder template packs instead.
As these new Theme Builder templates are released you will be able to find them in the Divi Layouts directory (divilayouts.com) along with all the best Divi layouts from Elegant Themes and 3rd party Divi designers.