Build Everything Visually

Divi 3.0 introduces a completely new visual interface that will forever change the way you build websites. This front end editor allows you to make changes to your website…on your actual website! 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.

 

 

visual-editor

 

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.

updates-small

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.

add-content-small-compressor

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 3.0 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.

drag-small-compressor

Draggable Widths & Heights

One of the things we strived for in Divi 3.0 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!

heights-small-compressor

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.

responsive-small

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 3.0, 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!

undo-small-compressor

The “Invisible Interface”
That Won’t Get In Your Way

The new Divi Builder gives you all of the power with none of the clutter. We wanted to build a modern design experience that embodies our team’s most central of values: elegance. It’s in our name, it’s in our products, but never have we built something quite this pure and wonderful.

 

 

 

customizable-interface

 

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.

interface-small-compressor

A Beautiful New
Inline Editing Experience

One of the builder’s most exciting new features is the ability to add, edit and format text right on the page without ever needing to open up a module’s settings panel. It saves a ton of time and it’s infinitely more enjoyable.

 

 

 

inline-editor-header

 

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 3.0, 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.

type-small

A Modern Builder For A New Era

The new visual builder interface in Divi 3.0 has been re-built from the ground up using React, a modern javascript library for user interfaces. While it is still based on the modular Divi Builder framework that we have been working on for the past 3 years, the new interface is completely independent. This has allowed us to approach the builder in an entirely new and modern way, and this should give the Divi community confidence in the theme’s longevity and our team’s dedication to Divi’s continued evolution.