Divi 3.0 Sneak Peek: A Look At Divi’s Upcoming Inline Editing Capabilities

24 Must-Do Checks Before Launching Your WordPress Website
July 7, 2016
Post Status: WordCamp Europe 2016, held in Vienna, was a massive success
July 7, 2016
Show all

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


Our progress on Divi 3.0 continues at a strong and steady pace, and as promised I am back with another sneak peek at what we have been working on behind the scenes. There is so much to share, but today I want to focus on just one very small part of what will make the new visual editor great. It’s called the “inline editor,” and it’s a new way to quickly and easily add, edit, remove and stylize the text content in all of your Divi modules.

What Is the “Inline Editor” Exactly?

Divi 3.0 will introduce an entirely new visual builder created from the ground up using React. This new interface will allow you to build and modify pages visually, instead of being limited to the current block-based builder. It will be super fast, easy to use and will have no learning curve for current Divi users. If you have’t been following along with our Divi 100 countdown then be sure to check out our first and second sneak peeks to learn more about what you can expect from Divi 3.0.

One part of that new visual editing experience is the “inline editor,” a new way to edit the text on your page…on your page!

Gone will be the days of hunting through a long list of text modules, locating the one that contains the text your are looking for, opening up the text module settings, scrolling down to the editor, editing your text, previewing your changes, clicking save and then clicking save again (wow, that’s a lot of steps). Wouldn’t it be better if you were looking at your page and you clicked on the text you wanted to edit and just…edited it? That’s were the new inline editor comes in—just one of the many pieces to the visual editor that will make building websites with Divi 3.0 a more enjoyable experience for everyone.

We have lots of great ideas on how to make our inline editor great. Here are some design mockups as they exist at their current stage, which should give you a good idea how the editor will work and what kinds of things you will be able do with it.

inline-outline

The Inline Editor (Alpha) In Action

Even though our work on the inline editor is still very much in progress, things are starting to come together! While we still need to polish the interface, add functionality and tweak a few things here and there, you can begin to see how the new inline editor will work in the screen capture below. This is just one part of what will make the new Divi 3.0 visual editor great, but it’s a perfect example of how the visual nature of the new builder will lead to much a faster and more intuitive editing experience. As we continue to develop the visual editor over time, more and more things will become “intuitively editable,” as we continue to work towards our ultimate goal of creating the best website builder ever 🙂

inline-editor-small

I hope you are as excited about these new features as we are. Divi 3.0 will be, without a doubt, the best piece of software our team has ever created and the biggest upgrade we have ever given the Divi Builder. Stay tuned as we continue our Divi 100 marathon and count down to the release of Divi 3.0 on Day 100! There are many more freebies, tutorials and sneak peeks to come.

divi-2-6-logo

Divi 100 Day 38

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 Look At Divi’s Upcoming Inline Editing Capabilities appeared first on Elegant Themes Blog.

View @ ElegantThemes

Skip to toolbar