Divi Meetup ATL: Examining the Visual and Classic Builders

August 8, 2018, Atlanta
On September 7, 2016, Divi 3.0 went live. With it came the Visual Builder, an all-new designing experience crafted by Elegant Themes. In the almost two years since, the builder has morphed, and the differences between it and the Classic Back-end Builder have become even more pronounced.

What are the differences, and is one better than the other?

Elegant Themes and the Visual Builder

The Visual Builder is the current iteration in Elegant Themes’ vision of what a page builder can be. While the Classic Builder remains, their pride and focus has been its front-end counterpart. What Divi may look like far into the future is uncertain, but the Visual Builder is the next step in that journey.

Recent Feature Updates

Tutorials and Documentation

  • In December of 2017, Elegant Themes uploaded 70 videos to YouTube showing how to use every module and function in the Divi Theme. Almost all used the Visual Builder to demonstrate.
  • The Elegant Themes’ blog post tutorials on creating more advanced designs and functions use the Visual Builder to construct and style the page/post.

Ever-increasing Support for the Visual Builder

  • Divi 3.1 added the Developer API, which allows developers to create custom modules and extensions for the Visual Builder. The Visual Builder would now support third-party modules and editing of those modules.
  • On February 15, 2018, Elegant Themes optimized the code of the Visual Builder and how it loads to make it faster and more responsive, even with new features being constantly added.
  • A help shortcut was added to all Visual builder settings, which loads an in-window video tutorial on the specific module/row/section, other suggested videos, and a list of keyboard shortcuts. The Classic Builder did not receive this update.

Speed Differences

  • The Visual Builder can accomplish certain tasks faster and more efficiently than the Classic Builder.

Visual Builder Workflow:

  • Optional Wireframe.
  • Full desktop, tablet, and mobile previews.
  • Instant ability to see how sections, rows, and modules fit together without page refreshes.
  • Automatic mock content.
  • Easy adjustment of padding, margin, and colors.
  • Tabs, search options, and copy/paste in the modal settings.
  • Customization of the interface to suit personal preference.
  • Fluid Styles allows for copy and pasting of specific elements and styles across any desired module/row/section.

Classic Builder Workflow:

  • Mandatory wireframe.
  • Limited desktop, tablet, and mobile previews on a section/row/module basis.
  • No automatic mock content.
  • Preview page must be generated to view full changes.
  • Padding, margin, and colors must be adjusted then previewed.
  • No tabs, search options, or copy/paste in the modal settings.
  • WordPress page/post settings can be accessed.
  • No Fluid Styles.

The Future of the Two Builders

On July 15, 2018, Elegant Themes announced development of a new builder experience for Divi. The Classic Builder will be overhauled and updated with elements from the Visual Builder, melding the two experiences into one.

Visual+Classic=Something New.

  • The menus, buttons, and tabs of the Classic Builder will be updated to share the same style as the Visual Builder’s menu interfaces and wireframes.
  • The Classic wireframe can be enabled, or visual designing can be done using the Visual Builder’s interface right in the back-end.
  • The interface can be customized as with the current Visual Builder.
  • All previous Visual-Builder-exclusive updates will be put into the “new” Classic Builder. This includes tabs, help, Fluid Styles, and more.

What We Know So Far

  • Elegant Themes has not announced a release date for this update.
  • All interface and UI shown in the sneak peek is still in beta form and may change before the final release.
  • The update will not replace the Visual Builder, only overhauling elements of the current Classic Builder.
  • The beta Gutenberg interface, at the present time, disables access to the back-end builder. Elegant Themes has released a compatibility update (link) for Gutenberg, but only the Visual Builder can be accessed. The “Classic Editor” block -which restores the classic WordPress interface- is required in order to access the Classic Builder. WordPress 5.0 is rumored to go live before 2019, but no specific release date has been announced.

The Overhaul of the Classic Builder and What It Means for the Future

  • Speculation: the consolidation of the two builders could be another step towards the upcoming Theme Builder.
  • Speculation: all future feature updates after release may be for both builders -not just the Visual. The joining of the two may make development easier for Elegant Theme’s Development Team.

Mythbusting: Is the Visual Builder still buggy?

  • Items that may look like bugs for the inexperienced user may be features.
  • Are certain bugs in-builder only, or reflected on the finished page?
  • The text-size bug.
  • Glitchy negative margins in sections.
  • In-builder versus live webpage.
  • Accessibility of Browser Inspect Element.