The Visual Builder was added to the Divi theme five months ago, and it changed overnight the way people create and edit their pages.
No more editing in the WordPress backend, saving changes and then refreshing the frontend before you could see what your changes actually looked like.
The Visual Builder allows you to work on the frontend of your site, on the actual page.
You can make your edits and changes whilst looking at the page and see the results of those changes instantly.
And now folks, the power of the Visual Builder has been added to the Divi Builder plugin 2.0.
That means that whatever WordPress theme you are using, you can bring on-page editing to your site.
In this post, I’ll look at the features of the Divi Builder plugin 2.0 with particular emphasis on the Visual Builder.
5 months ago we released our biggest Divi theme update yet, Divi 3.0, including the all new Visual Builder. Today, we bring the Visual Builder interface to the Divi Builder plugin.
Elegant Themes
My Affiliate Links Disclosure
Hi everyone. Just to let you know that many of the links on this site are my affiliate links. What that means is that if you click one of them and buy something… I get a commission. It doesn’t cost you anything extra and I only recommend things that I’ve tried and tested, so please, please, please… use my links.
Bring the power of the Divi Builder to your WordPress website
The great thing about the Divi Builder plugin is that because it’s a WordPress plugin, it works with any WordPress theme.
That means that whatever theme you’re using, you can create and edit your pages on the frontend of your website, on the actual pages!
This short video by Nick Roach of Elegant Themes, introduces you to the Divi Builder plugin and points out some of its features along the way.
So now that you know what the Divi Builder plugin is, let’s take a look at its features and where you can use it in more detail.
The Divi Builder plugin works with any WordPress theme
I know that I’ve already said it, but it’s worth saying again:
Because the Divi Builder plugin is a WordPress plugin, it works with any WordPress theme.
It works with all of Elegant Themes’ themes, it works with all themes not produced by Elegant Themes and it works with theme frameworks.
To find out more about using the Divi Builder plugin with other themes, check out my post Page Builder plugins and lightning fast themes
And if you’re a Genesis theme framework user who would like to add drag-and-drop Page Builder capabilities to your theme, then check out my post When Genesis met the Divi Builder – a true story
The Visual Builder is now available for any WordPress Theme.
This means you can use any theme you want, or even switch to a different theme from Divi, without having to sacrifice any of Divi 3.0’s amazing functionality.
Nick Roach – Elegant Themes
The Divi Builder plugin gives you instant visual web design
The main addition to the Divi Builder 2.0 plugin has been the addition of the Visual Builder.
The visual builder allows you to create and edit your pages on the frontend of your website… on the actual pages!
Click into a paragraph and start typing. Highlight some text and adjust the fonts and styles. Drag an element and watch it move.
Add new items from any of Divi’s 40+ content modules, adjust module settings, save and load items from the library and see everything happen instantly.
No page refreshes, little to no Ajax loading bars and absolutely no need to “preview” your changes because everything is happening in real time on your page.
Nick Roach – Elegant Themes
The big advantage of using the Visual Builder to edit your pages on the actual pages, is that it sparks your imagination and really allows you to become creative.
But if that’s not enough, here are a few more reasons to use the Visual Builder:
Create Instant Content
When you add content to your page it appears instantly. No page refreshes or loading bars, just instant feedback.
The guesswork of designing in the backend is gone.
No need to preview your work as you design your page, everything happens instantly right there on the page.
Text editor for easy Inline Editing
The Visual Builder comes with its own text editor, which makes working with text a delight.
To add text, just click and start typing.
To change the font, size or colour, just highlight the text and make the adjustments right there on the page.
Position and create content with Drag, Drop and Duplicate
Arrange elements on your page by simply dragging them from one location and dropping them into another.
You can also cut, copy and paste elements, which is a real time-saver.
Easily add whitespace with Draggable Padding
Adjust the width, height and spacing between elements with just a drag of the mouse.
The creative use of whitespace is one of the features that sets a website apart from the competition and the Visual Builder allows you to create that whitespace by simply dragging the edge of the content to increase the padding.
For more on creating whitespace, see my post Divi Visual Builder – creating whitespace with draggable widths and heights.
Templates, menus, sidebars and footers when using Page Builder plugins
I’m sure you know this already… but just in case.
Page Builder Plugins
Page Builder plugins are all about building the content of pages and posts, which does not include menus, sidebars and footers.
WordPress themes
Menus, sidebars and footers are theme specific so you have to configure and style them yourself and when you change themes you have to make adjustments to these elements.
Theme templates
Page Builder plugins work with the templates available with a particular theme so if you want a particular type of layout (Blank, Boxed or Full-Width say), then make sure that the theme you choose has that particular template.
Divi Builder Sync, Auto Saves and Browser Backups
The visual Builder even allows you to add content to your page using the backend builder and then make visual adjustments in the Visual Builder. The Divi Builder will keep everything in sync while you design your page.
The Visual Builder also automatically saves your work and keeps backups of your changes in your browser just in case you forget to save, your browser crashes or your internet goes down.
Save time with Keyboard Shortcuts
The Visual Builder has an amazing list of keyboard shortcuts, which allow you to save both time and effort.
All the usual suspects are there: copy and paste, save and publish, zoom in and out, toggle through tabs undo and redo and more.
Responsive Editing for Desktop, tablet and Mobile
Enable responsive editing and the Visual Builder displays the content as it would appear on a mobile device.
This allows you to make those oh so important fine adjustments and get immediate feedback.
Turn any theme into a frontend Page Builder with the Divi Builder plugin 2.0
One of the greatest frustrations of using WordPress is that you know what we want to create, but you don’t have the coding skills to create it.
The Divi Builder plugin removes those restrictions.
It allows you to work on the actual pages of your site and create just about any layout that you can think of and add almost limitless functionality using its forty plus content Modules.
And it allows you to do all that using any WordPress theme and without touching a single line of code!
If you’d like to use the Divi Page Builder plugin on your next project or add frontend Page Builder power to your existing site, then please feel free to use my 10% discount link below.
We are excited to announce that the Divi 3.0 Visual Builder is now available in the latest version of the Divi Builder plugin, bringing visual front-end website building power to any WordPress website and any WordPress theme.
Elegant Themes
Join Elegant Themes and download the Divi Builder plugin today.
Complete with a 10% discount!
Credits:
My thanks and gratitude to Elegant Themes for the video and graphics used in this post and for their generous discount deal.
