Unveiling the New Divi 5 User Interface

I’m back with another Divi 5 update, and this time, I am excited to give you an early look at Divi 5’s new interface. It’s not finished yet, but there’s still plenty to explore. 😁

Watch the video to get a closer look. 👇

The New Divi 5 Interface

Divi 5 is getting a new look. It works the same way it always has, so don’t worry about the new interface throwing you for a loop. It’s all going to feel very familiar. We haven’t changed what you can do with Divi, but we hope you will enjoy doing what you do even more with a faster and less cumbersome interface.

A Faster And More Efficient Interface

Divi 5 represents raw speed and efficiency; the UI should serve those goals. The first thing you’ll notice about Divi 5 is that it’s crazy fast. There’s absolutely no delay as you hover, click, edit, and move items around, and it can handle extensive pages like never before. We also removed all animations because we don’t want anything slowing you down.

An Interface That Doesn’t Get In Your Way

We reduced the footprint of the interface to give your designs more room to breathe. You can dock multiple smaller-sized panels to the side of the browser without them overlapping your content or getting in your way.

In the example above, I have my layers panel docked to the left, and my settings panel docked to the right. The settings panel is automatically populated as I click around the page, and when I edit something, the feedback is instantaneous.

A Fully Customizable Interface

Divi 5 gives you much more control over the builder’s layout. You can dock, undock, or combine panels into tabbed windows. If you prefer to have all windows closed and one floating settings panel like Divi 4, that’s an option too.

An Interface That’s Easier Than Ever To Navigate

With click-mode as the default interaction mode, a smaller layers panel you can always leave open, and new breadcrumbs in each settings panel, navigating the page is easier than ever. You won’t struggle to find or click on anything you want to edit.

We still need to make improvements and add missing pieces, but this early look should give you a good idea of what to expect when we release the Public Alpha in the coming months.

What We Accomplished This Month

We got a lot of other stuff done over the past month, too. Building the new interface was relatively simple. All the major work is happening behind the scenes, where we are building a solid foundation that will serve the community for many years, which involves the complete redevelopment of all of Divi’s core features and modules.

We are currently in the Dev Beta phase (which you are welcome to join if you are a developer of Divi modules), which means we have completed the new framework and are now rebuilding everything on that framework.

We fixed more bugs, wrote more developer docs, and converted a bunch of modules, such as the post slider, blog, post navigation, filterable portfolio, fullwidth menu, and fullwidth portfolio.

Every time we finish a new feature or module, we get one step closer to Public Alpha, where we want to have enough of Divi’s most popular features and modules ready to make that first version usable to a broad audience.

Here are the latest Divi 5 changelog entries. 👇

• Added Post Slider module for Divi 5
• Added Fullwidth Menu module for Divi 5
• Added Fullwidth Post Title module for Divi 5
• Added feature-flagged enhancement for app frames.
• Implemented advancedStyles on PHP module styles declaration for code, audio, circle counter, column, countdown timer, divider, fullwidth header, fullwidth image, heading, icon, call to action, button, bar counters, accordion, post title, portfolio, number counter, map
• Added Blog module for Divi 5
• Added feature-flagged enhancement for app frames.
• Added Filterable Portfolio module for Divi 5
• Added Fullwidth Portfolio module for Divi 5
• Added Post Navigation module for Divi 5
• Implemented advancedStyles on VB module styles declaration for section, fullwidth map, heading, menu, sidebar, social media follow, tabs, team member, testimonial, text, toggle, video, and slider modules.
• Integrated auto-generated module settings for settings panel for modules like count down timer, circle counter, code, button, blurb, divider, audio, blurb, code, and heading.
• Updated the export of ‘SyncGlobalLayoutAttributes’ to be a type instead of an object.
• TypeDocs: Added @divi/modal-library package to the TypeDocs generator.
• TypeDocs: Updated documentation for data store functions in @divi/modal-library package.
• TypeDocs: Added @divi/page-settings package to the TypeDocs generator.
• TypeDocs: Updated documentation for data store functions in @divi/page-settings package.
• Developed Fullwidth Portfolio module both in VB and FE into D5.
• TypeDocs: Added @divi/keyboard-shortcuts package to the TypeDocs generator.
• TypeDocs: Added @divi/object-renderer package to the TypeDocs generator.
• TypeDocs: Added @divi/mask-and-pattern-library package to the TypeDocs generator.
• TypeDocs: Added @divi/middleware package to the TypeDocs generator.
• TypeDocs: Added @divi/modal package to the TypeDocs generator.
• TypeDocs: Added @divi/modal-snap-indicator package to the TypeDocs generator.
• TypeDocs: Added @divi/draggable package to the TypeDocs generator.
• TypeDocs: Added @divi/numbers package to the TypeDocs generator.
• TypeDocs: Added @divi/error-boundary package to the TypeDocs generator.
• TypeDocs: Added @divi/events package to the TypeDocs generator.
• TypeDocs: Added @divi/help package to the TypeDocs generator.
• TypeDocs: Updated documentation for data store functions in @divi/help package.
• TypeDocs: Added @divi/history package to the TypeDocs generator.
• TypeDocs: Added @divi/hooks package to the TypeDocs generator.
• TypeDocs: Added @divi/icon-library package to the TypeDocs generator.
• TypeDocs: Added @divi/global-layouts package to the TypeDocs generator.
• TypeDocs: Updated documentation for data store functions in @divi/global-layouts package.
• TypeDocs: Added @divi/fonts package to the TypeDocs generator.
• TypeDocs: Updated documentation for data store functions in @divi/fonts package.
• TypeDocs: Updated documentation for @divi/module package.
• TypeDocs: Added @divi/data package to the TypeDocs generator.
• TypeDocs: Added @divi/divider-library package to the TypeDocs generator.
• Added TypeDocs for the @divi/context-library package.
• TypeDocs: Added @divi/conversion package to the TypeDocs generator.
• TypeDocs: Added @divi/constant-library package to the TypeDocs generator.
• TypeDocs: Updated documentation for @divi/field-library package.
• Implemented advancedStyles on VB module styles declaration for … modules.

Coming Soon: Divi Layouts AI!

That’s all for this month’s Divi 5 update. In other news, we have a new Divi AI feature coming out soon that I’m excited about. We’ve already created AI tools for text, image, and code generation. Next, we’re putting it all together to enable you to generate entire layouts with AI. Note: layout generation was sped up in the following video.

Just tell Divi AI what kind of page you want, and it will construct the layout, generate the images, write the content, and customize the fonts and colors. In a matter of seconds, you have an entire page ready to go, and you can jump into Divi’s design settings to put on the finishing touches or use Divi’s AI tools to refine the results further.

Stay Tuned For More Updates

Stay tuned for the release of Divi Layouts AI, and don’t forget to check back next month for another Divi 5 update. Follow us by email and subscribe to our YouTube to ensure you don’t miss a thing, and I’ll see you in the next one.