Divi’s new visual builder allows you to create and edit your pages on the front-end of your website. When you load the builder, you see your page exactly as you would if you were browsing your website normally. With the builder activated, however, everything on the page becomes editable! You can click into any element and adjust its content, size, spacing, color, positioning and more. You can add, duplicate and delete content, drag content from one area to another and load items from your library instantly. All of the Divi modules and settings that you are familiar with are still there, enhanced and simplified through the new visual interface.

Things that are tedious and frustrating in block-based backend builders, such as locating content in a grid of sections and rows, previewing changes and understanding how certain settings work are now things of the past. Building with the visual interface is infinitely more intuitive, and after you use it for the first time you are seriously going to wonder how you ever lived without it! Even for current Divi users, this update is a complete game changer.

Observe Changes Instantly

When you make a change in the new visual builder, your page is updated instantly. Text on the page feels tangible as you slide the font size controls and watch your words expand and contract with each gesture. The page feels alive as you explore the color picker and watch each glowing transformation. It’s fun and easy and just a bit magical. Unlike other front-end editors you may have used, Divi’s new visual builder is incredibly fast which makes the design process all the more fun.

Add New Content On The Fly

Adding content to your page couldn’t be easier. If you want to add something new, simply hover over the desired area and click the “+” button and you will be greeted by a list of Divi’s 40+ content elements. No need to awkwardly drag items from a central dock because Divi’s content tooltip is always there when you need it. Plus it’s searchable, which makes it easy to find your desired content element or saved library item. Did I mention it’s super fast? When you add new content elements, they are just there.

Divi has a content module for every occasion and each can be completely customized to obtain your desired result. Simply add, mix and match content and watch your new page come to life. No coding; no plethora of disjointed plugins; just click and build. No matter what kind of website you are creating, Divi has the tools you need to make your vision a reality.

Drag, Drop, Duplicate & Delete

Of course no website builder would be complete without drag and drop, and Divi is no exception. Dragging and dropping elements in Divi’s visual builder is particularly intuitive because you are working with your actual content instead of with ambiguous blocks and grids. When editing long pages, Divi’s new “zoom out” feature gives you an overhead view of your design and allows you to drag large pieces of content long distances without having to scroll. You can also forgo dragging and dropping completely and opt for Divi’s copy and paste functionality instead.

Draggable Widths & Heights

One of the things we strived for in Divi was to allow for meaningful interactions that take full advantage of the builder’s visual nature. Draggable widths and heights are perfect examples of this. It’s something that didn’t make sense in the backend builder, but something that’s completely natural and totally awesome in the visual builder. When you place your cursor over any of the four sides of a row or section, you can drag to increase or decrease the padding thereby increasing or decreasing the element’s width and height. You can see the changes take place instantly as your move your mouse!

Working with white space can be challenging, and it can be downright frustrating in a backend builder. It’s one of those things that you need to see and feel to understand, and working with only numbers and blocks simply isn’t the best way to make such important design decisions. The first time you launch the visual builder and drag open the height of a section, you are going to feel your mouth open to a smile along with it! It’s just so. damn. cool.

Easy Responsive Editing

The new visual builder comes with responsive design toggles that you can use to view your page on Smartphone, Tablet and Desktop breakpoints. You can toggle these different views while you edit your page and the visual builder stays fully functional in all three modes. What’s more, Divi allows you to specify different settings values for each different breakpoint, and the Divi Builder will automatically switch between each breakpoint while you edit them! It’s never been this easy to build a beautifully responsive website.

Instant Undo, Redo & Revision Restore

The new visual builder has a very comprehensive undo and redo system, complete with a fully restorable history log. It’s one of my favorite features of Divi, not only because it’s incredibly useful, but because it’s perhaps the most shining example of the new builder’s speed and power. You are never in danger of making a mistake because nothing is ever lost. You can undo your most recent actions, or open up the history log and travel back and forth through time and watch your page transform instantly. It’s even a great way to compare design changes and decide which variation you like best. Just flip through your history like a living sketchbook and expand on your favorite ideas!

When you first open the builder, you might not even know it’s there. Your screen is not hijacked by floating sidebars or fixed headers. Your content is not affixed to countless buttons or obstructed by annoying grids and overlays. What you see is your website, but that’s not the full story. When you click into a paragraph, you can start typing. When you highlight a block of text, you can apply custom fonts and styles. When you drag something, it moves. Upon hovering over any of Divi’s basic elements, their settings can be opened and adjusted. Everything you need to add content, edit content and create an awesome website is right there at your fingertips, but it never gets in your way. This is the most enjoyable website building experience I have ever used, and I know that you are going to fall in love with its beauty, its subtlety and its power.

Customize Your Interface

This is the first WordPress page builder to have a customizable interface that doesn’t pigeonhole you into certain polarizing UI conventions. You can choose to have your module controls appear inside of a popup, or you can opt to have them appear in a sidebar. You can adjust the popup’s size and position, or use the buttons for expand and contract. If you drag the popup over to either side of the page, it will automatically snap into the sidebar position and adjust your content accordingly! You can change the width of the sidebar to accommodate the size of your screen or drag it over to the alternate side of the page to satisfy your personal preference.

When editing text content in Divi’s new visual builder, there is no need to open a settings panel to add or edit text. If you want to add some content to your page, just click and start typing! You can compose entire posts using a single column and a text module and the experience is fast and wonderful. Composing on your page is so much better than working inside a cluttered backend interface. There are no distractions and there is no mystery as to how your content will render once it has been saved.

We have created our own custom inline editing interface for Divi, and it’s really a joy to use. It’s simple and effective, stripped of superfluous tools and consolidated into a single tooltip that is easy to navigate.

Custom Fonts And Styles

Styling text with the inline editor is easy. You can apply standard styles to any selection, such as bold, italic and underline. You can add H1-H5 headers, create links, build lists and adjust text alignment just like you can in the normal WordPress text editor. In addition, you can apply custom fonts, colors and text sizes. Through this combination of stylization options you can easily take your typography to the next level.

Last year Matt Mullenweg, the co-founder of WordPress and the CEO of WordPress.com, talked about the future of WordPress and the importance of JavaScript. Later that year the team at WordPress.com released Calypso, a modern WordPress interface built using React and Flux. This allowed them to jump past years of legacy and create a new and modern WordPress interface. We decided to follow their lead and do the same thing with Divi. The visual builder in Divi is a completely new application built from the ground up using React and Flux, and this new technology has allowed us to do some really amazing things. We are invested in the future of the web, we are dedicated to the future of Divi, and Divi is our way of proving to ourselves and our community that the builder will continue to evolve and change for the better. Today we get to show you the future of Divi. It’s a huge leap forward and we are just getting started.

Unbelievably Fast

Divi Builder is fast. Really fast. In fact it’s probably one of the fastest website builders you have ever used. When you add or change content, the page updates instantly. There is little to no traditional “loading” because the building takes place in your browser, not on your server. Say goodbye to page refreshes and ajax loading bars and enjoy instant feedback to every adjustment you make. If you have been deterred from front-end editing in the past by slow and clunky visual builders, then Divi is here to change your perspective once and for all. This is the future of WYSIWYG.