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.
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.
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.
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.
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.
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!
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.
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!
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.
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.
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.
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.
A Modern Builder For A New Era
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.
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!
Get 10% Off Today!
Today's The Best Day To Get Divi Or Upgrade Your Account To Lifetime
Join the most enthusiastic and loving WordPress theme community on the web and download Divi today. Using the new Visual Builder, you can build websites faster than ever before with its incredibly fast and intuitive visual interface. You have to see it to believe it!