Divi 3.0 Sneak Peek Video #2: The “Invisible” and Customizable User Interface

The Ultimate Guide to W3 Total Cache: Works-Every-Time Settings for Shared Web Hosting
August 19, 2016
17 Best WordPress Resume Themes for Your Online CV
August 19, 2016
Show all

Welcome to Day 80 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!


In my last Divi 3.0 sneak peek, I posted the very first video of the new visual builder in action. We were so excited to show off what we had been working on for so long, and we were even more excited to see the video garner such an insanely positive reaction from the community. It tells us that we made the right decision when we decided to commit to what is undoubtedly the most ambitious project we have ever worked on.

While this first sneak peek showed off a lot of what the builder can do, we have since added even more features that I think you are going to love, and so I decided to make a second video to show off some of these new and awesome additions. Keep reading and make your way down to the bottom of the post to watch the new sneak peek!

The Invisible and Customizable Interface

For those of you who have not been following along with the Divi 100 Marathon and the countdown to Divi 3.0, let me tell you a bit about what we are working on and why we think it’s going to be the most transformative Divi update yet.

Divi 3.0 will introduce a completely new visual builder interface that will allow you to edit your pages on the front end of your website. This new builder has been re-created from the ground up using React and Flux; modern javascript libraries for building web interfaces.

This is the same technology that the WordPress.com team used in their recent Calypso project and it’s allowing us to create a font-end builder that’s super fast–requiring little to no loading. When you open up a module’s settings and adjust its content or design, you see the changes appear instantly. You can click into a paragraph and start typing to add new text to your page, or highlight text to format it. There is no need to preview your changes because everything happens right before your eyes in real time.

What really makes Divi 3.0 special, however, isn’t just the speed and the visual nature of the builder, it’s the simplicity and intuitiveness of the interface. We like to call it the “Invisible Interface” because it embodies one of our favorite design philosophies, that “good design often goes unnoticed.”

A good interface shouldn’t get in your way. It should predict your intentions and give you the tools you need when you need them. This is what it means for an interface to be “intuitive,” which is a term we hear all too often in the design world–but not always rightly so.

With Divi 3.0, it’s really true.

When you first load the new builder, you might not even know it’s there. As you start to explore the page, however, the controls become apparent without crowding your screen or obstructing the design of your page. In addition, the interface can be customized to fit your screen, adjust to your content and satisfy your personal preferences. It’s a design experience unlike anything else.

So without further ado, here is our sneak peek video #2!

20 Days And Counting

The official release date for Divi 3.0 is September 7th, which means there are only 20 days left before you get to use the new visual builder yourselves! In the meantime we will be working hard to make sure that upgrading to Divi 3.0 is as smooth as possible. Tomorrow we begin beta testing, and with the help of our diligent testers I am confident that we are going to have a super successful launch. Until then, keep enjoying our daily Divi 100 resources 🙂

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

divi-2-6-logo

Divi 100 Day 80

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 Video #2: The “Invisible” and Customizable User Interface appeared first on Elegant Themes Blog.

View @ ElegantThemes

Skip to toolbar