Divi 5 lets you edit every part of your website - header, footer, and body templates - directly from the front end, without visiting the Theme Builder separately.
This is called complete site editing, and it's a significant step forward from Divi 4.
This article explains what editable Theme Builder areas are, where to find them, what you can do with them, and how to control who has access.
Where to Find It
Visit any page (standard page type, single post, archive page, single WooCommerce product page, custom post type page, etc.) on your website while logged in to WordPress. You'll see the Edit With Divi button in the top bar. Click it to open the Visual Builder.
Once inside the builder, your entire site loads in one editing session - your header template at the top, the page body in the middle, and your footer template at the bottom. All three areas are active and editable at once.
⚠︎ Notes:
If you create a new custom post type, ensure that the Visual Builder is enabled for it in the Divi → Theme Options → Builder → Post Type Integration.
If the Edit with Divi option is not avaiable especially when browsing an archive page such as a Post Category Page, ensure that your website has at least a Theme Builder Header or Footer created.
What You Can Do With It
Edit your header, footer, and body layouts without leaving the Visual Builder
Copy, paste, drag, and drop content between Theme Builder areas (header, body, and footer)
Make changes to global templates and see them in the context of a live page
Access the Edit With Divi button on every part of your site, not just posts and pages
How to Use It: A Quick Example
Here's a simple workflow to edit your site header without leaving the page you're on.
Step 1: Open the builder from any page
Navigate to any page on your site while logged in. Click the Edit With Divi button in the top bar. The Visual Builder opens with your full site layout loaded.
Step 2: Click into the header area
Scroll to the top of the builder. Your header template appears above the page content. Click any element inside the header to select it and open its settings panel.
Step 3: Make your edits and save
Update the content or design using the Content, Design, and Advanced tabs in the settings panel. When finished, click the Save button in the top bar to save your changes.
Fullsite Editing Use Cases
Update Your Site Navigation Without Leaving a Page: Your navigation menu lives in the header template. In Divi 4, updating it meant going to the Theme Builder, loading the header template separately, making changes, and coming back. In Divi 5, open the builder from any page, click into the header, update the menu module, and save - all in one session.
Adjust Your Footer Across the Whole Site: Footer layouts - contact details, social links, copyright text - apply to every page on your site. With editable Theme Builder areas, you can spot a footer error while reviewing a blog post and fix it on the spot. No need to navigate away or open a separate editing session.
Design a Page While Seeing It in Full Context: When building a new page, seeing it surrounded by your real header and footer helps you spot design conflicts - font sizes that clash, colors that don't match, spacing that looks off. In Divi 5, the full site loads in the builder by default, so you design the page in context rather than in isolation.
Disabling Editable Theme Builder Areas
If you don't want the header, footer, or body templates to appear while editing individual posts or pages, you can turn this off.
From the left sidebar, click on the Builder Settings icon
Deactivate the Show Theme Builder Layouts option.
Restricting Client Access
If you manage sites for clients and don't want them editing global templates, use the Divi Role Editor to restrict Theme Builder access by user role. This prevents clients from accidentally modifying site-wide layouts like headers and footers.
From your WordPress dashboard, navigate to Divi → Role Editor.
Select the User Role for which you want to disable the Theme Builder template editing.
Under the General Functionality section, deactivate the Theme Builder option.