Divi 3.0 Has Arrived! Introducing The Visual Page Builder So Ridiculously Fast & Easy-To-Use You’ll Think It’s Magic

How to Add Web Push Notifications to Your WordPress Website
September 8, 2016
12 Tips to Optimize Your WordPress RSS Feed
September 8, 2016
Show all

Six months ago our team decided to go all in on a single idea, to lay our cards on the table and commit to something bigger and better than we had ever built before. We committed to building Divi 3.0. This project wasn’t about incremental improvements, it was about reinventing Divi, reinventing ourselves, learning a completely new language and creating a modern React application that would change the game for our customers and ensure Divi’s relevancy for years to come. We set out to build what could become, and continue to be, the best visual page builder in the world.

Over the past 100 days we have been holding those cards close to our chest as we guided you through the Divi 100 Marathon, slowly counting down the days to this moment. You may have started to wonder how good it could really be. You may have been skeptical about whether or not you would enjoy a true front-end editing experience. You may have started to wonder if it would be worth the wait.

Well the wait is over, Divi 3.0 is here and let me tell you…it’s awesome! The speed is incredible, the interface is beautiful and the experience is pure magic. The new visual builder takes everything you love about Divi and makes it infinitely better through a new visual interface that allows you to build pages on the front end of your website. Add content, customize the design, type directly on the page and watch everything happen instantly right before your eyes. It makes me smile every time I use it, and I can’t wait for you to try it too.

test

visual

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

invisible

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

inline

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

modern

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.

react

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

The new 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 3.0 is here to change your perspective once and for all. This is the future of WYSIWYG.

No Strings Attached

Current Divi users need not be concerned about clicking the upgrade button. Even though we have completely re-designed the builder, the end result on your page will remain unchanged. All modules and settings will work exactly as they have in the past and you can even bounce back and forth between the backend and front end builders at your leisure. Divi 3.0 offers full backwards compatibility.

divi_extra

Available For Extra Too!
Divi Builder Plugin Coming Soon

Divi isn’t the only one of our products that takes advantage of the Divi Builder framework. If you are currently using our Extra theme, or if you are using our Divi Builder plugin to enable the Divi Builder on third party themes, then you will be excited to know that the new visual builder is coming your way very soon. In fact, it’s available for Extra today!

Extra & Divi Builder Users Rejoice!

Even though today we celebrate the release of Divi 3.0, users of our Divi theme aren’t the only ones who should be excited. The Divi Builder framework powers not only Divi, but also our Extra theme and the Divi Builder Plugin. Both of these products will be updated to include the latest version of the Divi Builder framework and users of these products will be able to take full advantage of the new visual builder. You won’t have to wait long either. Extra 2.0 is already ready and has been released today along with the new visual builder. Version 2.0 of the Divi Builder plugin, including the visual builder, will be available very soon. We are talking about days away, not months 🙂 We are adding an artificial delay to the release of the new Divi Builder plugin to allow for additional testing with various third party themes. Unlike the Divi and Extra themes, where the Divi Builder lives in a controlled environment, the Divi Builder Plugin needs a little extra attention. Don’t worry, when it’s ready it’s going to work like a charm!

It’s also worth mentioning that the visual builder is backwards compatible and completely interchangeable with the current backend builder. Pages built using new and previous versions of Divi, Extra and the Divi Builder Plugin will all work perfectly when switching between each product, so there is no need to worry about upgrading to Divi 3.0 today!

try-icon

Take It For A Free Test Drive

We are so excited to show you Divi 3.0, that we created a free demo that you can play with before you buy it! Go ahead and take it for a spin and find out why we think the new visual builder is going to change the game for WordPress web designers.

Try Before You Buy

If you want to see what Divi 3.0 is all about, then we invite you to take our all new visual builder for a free test drive. Click the link below and have fun! Building websites with the visual builder is such a wonderful experience and we know you are going to love it.

test

giveaway-icon

Enter To Win a FREE Membership Or Account Upgrade!

When we release new theme updates, we like to celebrate by giving away some free memberships and account upgrades to our lovely followers! Entering is free, simply follow the instructions in the widget below. We will announce the winners next week.

Enter To Win

To celebrate the release of Divi 3.0, we are giving away 10 free memberships and account upgrades to 10 lucky winners! It’s easy to enter your name into the raffle using the widget below, so don’t miss out. You can also come back each day to enter more tickets and increase your chances of winning 🙂

a Rafflecopter giveaway

sale-icon

Get 20% Off Account
Upgrades & New Memberships!

To celebrate the release of Divi 3.0, we are offering a big 20% discount off all new developer memberships and all account upgrades for a limited time. This is the biggest discount we currently offer and it will only be available for a limited time, so don’t miss out!

Launch Day Special Discount

We are also celebrating Divi 3.0 with a 20% discount off all new developer memberships and all account upgrades! This deal will only be available for a limited time, so be sure to purchase using the links below before it’s too late. Click here to sign up for a new Developer account for 20% off. This gives you access to Divi, plus 87 additional themes and 6 awesome plugins:

discount

If you are already an Elegant Themes member, today is the best day of the year to purchase your Developer or Lifetime upgrade! Click here to get 20% off:

The post Divi 3.0 Has Arrived! Introducing The Visual Page Builder So Ridiculously Fast & Easy-To-Use You’ll Think It’s Magic appeared first on Elegant Themes Blog.

View @ ElegantThemes

Skip to toolbar