Divi 3.0 Sneak Peek: A Glimpse At The New Visual Editing Experience

WordPress and HTTP2: All Your Questions Answered
June 17, 2016
Help center in Yoast SEO
June 17, 2016
Show all

Welcome to Day 17 of our Divi 100 Marathon. Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series!


As the Divi 100 marathon continues and we edge closer to the release of Divi 3.0, I will be publishing regular sneak peeks and progress reports following our development. Even though Divi 3.0 is still in a pre-alpha stage, we have made some great headway and things are really starting to come together. The new builder’s foundation, built from the ground up using React, is finished and the basic structure for all module settings have been integrated. Things are starting to work, and the results are pretty spectacular. Editing a module and seeing the results instantly is a wonderful experience!

The Visual Editing Experience

When you load the Divi Builder’s visual editor, you see your page exactly as it is displayed on your website. Unlike the current version of the Divi Builder, in which elements on the page are represented by blocks, elements in the visual editor are represented by themselves. You can click into any section, row or module and edit the element’s settings just like you would in the current builder. When in visual mode, however, the broader editing experience, particularly the interplay between a module’s settings and the actual output of those settings, is infinitely more intuitive. When you make a change, it happens instantly (and I mean instantly)! All of the editing occurs in your browser which means there is no need to use Ajax calls to load elements or update the design, and since we are using React, updating the DOM is incredibly efficient. Building a new page is really really fast.

sneak-peek-1

One of the driving concepts behind our approach to the new visual editing experience is creating an “invisible user interface.” We want the building experience to be as natural as possible, and that means we don’t want the UI to impede the visual nature of the editor. We have stripped things down to their essentials, informing the user through subtle cues instead of excessive outlines, grids, floating option frames and buttons.

sneak-peek-2

Building a more natural editing experience that strips away UI elements means that we need to make more naturally-intuitive actions possible. For example, if you click on some text then you should be able to edit it right there on the page, instead of having to open up a settings panel. If you drag the edge of a row, you should be able to make it bigger and smaller without having to “enable custom width” in the row’s settings and then input a size and unit of measurement. If it seems like something should be possible, then we want to make it possible. These are ideas we are just starting to explore, and they are ideas that we will continue to expand on after 3.0 has been released.

sneak-peek-3

Current Progress Report

The concepts above are more than just mockups. They are starting to take shape in the current pre-alpha build of Divi 3.0, and using the live editor in its current stage is already quite awesome! We have jumped over many of the foundational hurdles and our ideas are starting to become reality. There is still a lot of work to be done with some of the builder’s more nuanced features (such as roles, right click controls, editing history and global modules), and there is a lot of refinement to be done with the UI, but as it stands were are currently at about 60% completion and we are on track to meet our release deadline in 82 days 🙂

Our main goal is creating a super solid and bug-free MVP that we can continue to expand on after 3.0 has been released. After we have integrated all of the basic Divi Builder controls into the visual editor, we will be moving on to some of our more advanced concepts. Divi has a long and exciting future ahead of it!

I hope everyone is as excited about Divi 3.0 as we are. Let us know if you have any questions in the comments and we will be happy to answer them 🙂 Don’t forget to check back each day for more Divi 100 freebies and resources!

divi-2-6-logo

Divi 100 Day 17

The Countdown To Divi 3.0

This post is part of our Divi 100 marathon. Follow along as we post free Divi resources for 100 days in a row! This 100-day countdown will end with the game-changing release of Divi 3.0, including our brand new visual editor built from the ground up using React. Divi 3.0 will change the way you build websites with the Divi Builder forever!
Let the countdown begin.

jQuery(document).ready(function(){jQuery(“#DIV_TO_PLACE_COUNTDOWN”).jCountdown({timeText:”2016/9/7 7:00:00″,timeZone:-8,style:”slide”,color:”black”,width:0,textGroupSpace:15,textSpace:0,reflection:false,reflectionOpacity:10,reflectionBlur:0,dayTextNumber:1,displayDay:true,displayHour:true,displayMinute:true,displaySecond:true,displayLabel:true});});Learn More About Divi 3.0

.section-header{width: 520px; padding: 50px 40px 20px; margin: 100px 0; text-align: center; color: #fff !important; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #6c2eb9; background-image: url(http://cdn.elegantthemes.com/blog/wp-content/uploads/2016/04/divi-100.jpg); background-repeat: no-repeat;}.section-header h2{margin-top: 0 !important; color: #fff;}.section-header strong{color:#fff;}.section-header img{margin-bottom: 10px;}.section-header:after{position: absolute; bottom: -16px; left: 50%; margin-left: -16px; width: 32px; height: 32px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); content:”; background: #6c2eb9;}.divi-demo-link{border-bottom: 4px solid #00d5b5; margin-top: 15px; border-radius: 4px; transition: all.5s ease-in-out; display: block; width: 100%; padding: 10px 0; text-transform: uppercase; font-weight: bold; text-align: center; color: #1C695D; background-color: #00efcb;}.divi-demo-link:hover{text-decoration: none; background-color: #2CFFDF;}.divi-download-link{text-align: center; font-size: 18px; border-radius: 4px; padding: 20px; color: #fff; display: block; margin: 10px 0 10px; background-color: #7e3bd0; transition: background .5s; text-decoration: none; font-weight: bold;}.divi-download-link:hover{background-color: #C04BDE; text-decoration: none;}hr{border-style: solid; margin: 0 0 40px 0; border: 1px solid #EAEBEB;}

The post Divi 3.0 Sneak Peek: A Glimpse At The New Visual Editing Experience appeared first on Elegant Themes Blog.

View @ ElegantThemes

Skip to toolbar