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.
LOOKING GREAT! Can’t wait for this great update.
that is sick! congrats on your team’s hard work! Will the AI Features be faster in Divi 5 than in Divi 4+? because sometimes it takes too much time.
i also hope that you really improve the sync of the ET serial key with Divi because even though i paid the AI plan and i added my ET key and username, most of the time, it tells me i need an AI plan which is annoying so I ended up not using it because it is almost impossible to make it work (even adding again the username and ET key), and this is in all my clients’ websites
HMMMM if DIVI AI layouts is just going to based off a single prompt that is not going to be enough…
What if you already have some images or content you want on that page?
What if you wanted to use specific images in a slider?
What if you had the accordion content ready?
After Divi AI generates the layout, you can jump in and make changes. It’s not different than any other premade layout.
Over time, Divi AI will be able to get you closer and closer to your desired result, tailored to your specific use case, which static layouts can’t do. This is just the first step!
While AI is one thing. What I was thinking about was filling out a form when clicking that build with AI feature.
You can specify modules you want on the page.
You can upload images you want to use on that page.
Specify images you want in a slider if you have them.
You can upload .doc files to use for sections on the page.
And more…
Having AI do it all from scratch is one thing but if you have some content ready to go you need more functionality than what was shown off in the video imo.
Well done Elegant Themes👏
I’m really excited to try the public alpha update. Hope it doesn’t keep getting pushed back.
Thanks Nick. Looking forward to the new UI look. I lick of fresh paint is wlaways welcome and everything looks tighter, with more room for the canveas. It also ties in with the whole Gutenberg/block editor vibe and this is probably wise where that now the foundation of WordPress.
Just so you know, I have moved to Bricks. This doesn’t mean I have given up on Divi. I made the jump because I needed to try something differnt, going back to basics to relearn all the best practices in web design. Much of what I have learnt there I would apply back in Divi but I am hopping tha there are some things that we see in builders like Bricks that will someday appear in Divi as well. Things like having a CSS first approach, where some of us want this functionality. Presets have there place but are not as flexible as straight utility and BEM classes using variables. Leading onto the other thing that would be a great addition, some sort of integration with one of the CSS frameworks, Core Framework for example.
The other thing I would like to see introduced are basix html elements like section, container and div and on these the ability to swith semantically between div, section, anchor, nav, li, ul, ol etc. As it is I only ever a small subset of the modules anyway and it would be really liberating to be able to build out layouts with just the most basic structural elements.
In many ways the Gutenburgh project has been hit and miss in this area. I have said before that they missed a trick by limiting blocks, but allowing them to be overriden by third party builders with thier own UI and features. After using Bricks I relaise that the WordPress Core team have in fact missed another trick by not conforming to the main conventions of semantic HTML therefore renderring the first trick above unimplementable in the most desirable way.
Not to worry, we work with what is to. hand and, when I see this new UI I see small glimmers of more great features on the horizon, afforded by these changes. Onward and upwards.
It’s fantastic what’s coming up. ✨✨✨✨✨✨
I noticed how you used the words “converted” many Divi modules, does this mean that this is a breaking change for all previously existing modules in the wild, and that for any modules that work on the Divi 4 framework will not work on the Divi 5 framework without also being converted? I seriously hope not, if so this will mean complete madness for the Divi community as a whole at large. As I am a long time Divi member but am just about to start a very large project that need to make use of many Divi modules and features not converted, and this will change the course of my entire planned project as I may have to switch from using Divi altogether if this is the case. Please let me/us all know as soon as possible so we can all rest assured knowing how to proceed with All of our projects moving forward. If this is not the case, please PUT US ALL AT EASE, as I know this is the one burning question that is on everybody’s mind and want an answer for!!!! Thank you!!
Jessica, rest assured, Divi 5 will be backward compatible with currently built websites. Please reference past articles about what Divi 5 is and news on its development cycle.
Hi Jessica, I want to emphasize what Christopher just mentioned. The conversion of Divi 5 modules means that we’ve upgraded our Divi modules to work seamlessly with the Divi 5 framework. We prioritize maintaining compatibility with Divi 4!
In other words, updating to Divi 5 will be a smooth process, and all the features and modules you currently use in Divi 4 will continue to work. We have a Public Alpha and Public Beta release to ensure a hassle-free experience for every website.
As Divi 5 progresses through Public Alpha and incorporates new features, you might find that it’s already suitable for use during these phases. If the features you need are available, there’s no need to wait for the final release. Just keep an eye on the roadmap and the monthly Divi 5 updates!
Will the classic builder still be an option? I usually revert back to this when moving rows or content as it seems easier to navigate. Maybe that will change with the new version. But, I was wondering.
Any timeline for the Divi Layout AI?
Is it going to be compatible with iPad? There are some features in Divi 4, like Divi Builder, that aren’t.
Will there still be a wireframe mode?
Carol, yes it’s still there and not going anywhere, in fact we just gave it some design improvements as well, and also have even more design improvements to come in the future!
Now I have a good reason to buy DIVI AI. The new update will make me go for it 🙂
Really excited for the Divi Layouts AI! That’s going to be a real time saver!
Great work Elegant Themes Team! This looks amazing. Looking forward to using it.
This is going to be amazing! Can’t wait for the Public Alpha!
Will you eliminate the Search bar from the Layers and Modules windows???
Oh my God! Really? Will there be no option to keep it? This bar is extremely important for productivity, the filter options also speed up the workflow. Please, I beg you to keep this functionality…
Hi Thomaz, we’re not removing it we just havent built that yet in the latest build of dev beta.
Hi there. Will you introduce felxbox option in Divi5?
Looking forward to it!
Is there a possibility to purchase an early access version?
Can’t wait to get my hands on the new divi 🙂
Best greetings from germany
WOW!! Thanks for such an update! Will the update include CSS Flex and Grid?
Wow, Divi 5 sounds like a game-changer. It is awesome to hear that despite the new look, the functionality remains consistent, ensuring a seamless transition for users. The promise of a faster and more efficient interface is incredibly exciting—speed and efficiency are key when it comes to productivity. The fact that there is no delay in actions like hovering, clicking, and editing is music to my ears. And the removal of animations to prioritize speed is a smart move. Can’t wait to experience the raw speed and efficiency of Divi 5 firsthand.
Will dynamic content be implemented everywhere? Such as image gallery, progress bar (not just for the title, which is quiet useless)?
Awesome, I think there will be many sought after features. One of the things I’d like an update on, is new menu styles and mobile menu options. Like mega menu, adding custom information, new hamburger styles etc. Will there be any of that?