All Collections
Divi Release Tutorials
Full Site Front-End Editing For Divi
Full Site Front-End Editing For Divi
Design Everything In One Place - Edit Your Headers, Footers, Post Templates And Post Content At The Same Time From The Visual Builder
Goran Cajic avatar
Written by Goran Cajic
Updated over a week ago

This update allows you to easily jump into your custom headers, footers and post templates while browsing your website and edit them in the Visual Builder. There's no longer a need to navigate through the WordPress Dashboard or the Divi Theme Builder to edit parts of your website. When you enable the Visual Builder, you can

edit everything you see, from the top of your website all the way down the bottom. Edit your headers, footers, post templates and page content all at once! No matter where you are on your website, you can activate the builder and edit what you see on the front-end.

Edit Everything You See On The Front-End With A Single Click

Divi already lets you build your entire website, from top to bottom. This is thanks to the Divi Theme Builder, which allows you to create custom headers, footers and post templates, and assign them to unique parts of your website. In the past, the only way to modify these theme builder templates was through the Divi Theme Builder itself, which is several layers deep in the Word Press Dashboard. Furthermore, depending on how many theme builder templates you have active, it can take some time to figure out which template you need to edit in order to update the particular part of the website you were just browsing.

Now, there is no need to navigate through the Divi Theme Builder and no need to leave the Visual Builder at all if you want to modify a header or footer template. Just click into the theme builder area that you want to edit and get to work. There is no loading or refreshing. It all works seamlessly and instantly within the Visual Builder. If you are browsing your website and you want to edit something you see, just hop into the builder!

How It Works

This feature is so easy to explain, and that's part of its charm! When you enable the Visual Builder, you will notice that the header, footer and post templates that surround the page content are now editable. If you want to edit a template, just click into the applicable area to activate the builder. Once you click into a new area, you are now editing that template. When you save your changes, those changes are applied to the template and they propagate throughout your website. You can edit your header, footer, post template and page content in a single session and then save all of your changes at once. There are many ways that this new system makes managing your Divi website easier:

  • Enable The Visual Builder Anywhere - Previously, when browsing your website, the "Enable Visual Builder" button was only available for posts and pages. Now, this button is available everywhere and you can click it to edit your header, footers and post templates while browsing your website. For example, if you are on a category page with a custom header template, and you want to edit that header template, you can enable the Visual Builder from the front-end instead of navigating to the Divi Theme Builder. The same thing applies to post templates and product templates.

  • Design Your Headers & Footers In Context - Now you can edit your headers and footers on the front-end, which means you can see how they look in the context of your completed website. Previously, headers and footers were designed in isolation within the Divi Theme Builder and you couldn't get a complete picture until you saved your changes and then checked things out on the front-end.

  • No Loading Or Refreshing - Once you are in the Visual Builder, you can edit your headers, footers and post templates instantly. There is no loading or refreshing when you switch between different template areas.

  • Save Time With Less Clicks - It may seem like a minor thing, but all those clicks add up! Now you don't need to go to Word Press Dashboard, navigate to the Divi Theme Builder, search for your desired template, activate the Visual Builder for that template, save the template, close the popup, save the Theme Builder and head back to the front-end. It's a big time saver.

  • Edit Multiple Templates At Once - When you enable the Visual Builder on the front-end, you can edit your header, footer and post templates all at the same time. Another great time-saver!

Did this answer your question?