With the release of Divi 5 Public Alpha, users can start to see what we at Elegant Themes have been working on behind the scenes. Divi 5, a major foundational update, has been redesigned to be faster, more stable, and highly scalable to keep up with the future of WordPress.
One of Divi 5’s most exciting new aspects is its redesigned Visual Builder interface, which is more user-friendly and faster. Whether you’re a seasoned Divi user or new to the platform, the quicker, more intuitive Visual Builder will help you create websites in fewer steps with faster load times.
Learn more about the Divi 5 Public Alpha and how to download it. 👇
What’s New In Divi 5’s Interface?
The new Visual Builder experience has undergone a complete overhaul. It provides more workspace, fewer animations, and a fully customizable workspace. Every panel can be moved to be free-floating, docked on the left or right, or tabbed to place your most used settings within reach. But aside from that, there are a ton of features that will help you be more productive, too.
1. One-Click Editing In Divi 5
In Divi 5, we’ve introduced a new way to edit design modules when building a web page – one-click editing. When working within Divi 4, you’d have to hover over a module and click a small icon to bring up its settings. With Divi 5’s improved interface, you can click anywhere on a module to instantly activate that module’s settings.
This new workflow allows you to quickly access your settings without clutter. Whether you’re adjusting text, adding images, or adding padding and margin to sections, one-click editing makes it easy to make changes faster and more intuitively than ever before.
2. More Accessible Hover, Sticky, & Responsive Controls
Divi 5 introduces a new way to easily control the hover state of your elements, enable responsive controls, and enable sticky settings. With these settings now more accessible, you no longer need to enable these options manually at the module level. Thanks to controls that eliminate the need to navigate through settings, these elements are now easier to manage.
Accessing these tools more easily allows you to preview and customize how your content behaves across different devices, add sticky controls to elements faster, and apply hover effects without digging down into the design tab to find them.
3. Tabbed & Multi-Panel Docking
Another amazing feature of Divi 5 is the ability to customize the Visual Builder to suit your needs. This allows you to open multiple panels simultaneously, organize them into tabs, and dock them for quick access. Whether switching between different settings or editing multiple sections, you can keep all essential settings at your fingertips, saving you much time.
By enabling multiple panels to be open and docked at once, Divi 5 speeds up the design process, helping you to focus on creativity without the hassle of navigating back and forth between different menus.
4. Light & Dark Mode
With the introduction of light and dark modes, users can create a more comfortable work environment. Whether you prefer a bright, vibrant workspace or one that’s easier on the eyes, you can now switch between these modes with a single click. A new toggle in the Divi 5 interface allows you to switch back and forth depending on how you want to use the Visual Builder.
No matter where or when you’re working—whether during the day or late at night—you can choose the mode that works best for you.
5. Canvas Scaling For Different Breakpoints In Divi 5
In the past, when you wanted to view your layout in a different breakpoint (screen size), you’d need to dig down into a module’s settings or enable the responsive menu at the bottom of Visual Builder’s interface. With Divi 5, we’ve added a new feature called canvas scaling. This new option allows you to automatically adjust the canvas size to fit different breakpoints simply by dragging it.
By clicking and dragging the edge of the panels to the right or left, the canvas scales down, providing a true-to-size preview of how your content will look on different screen sizes. This ensures pixel-perfect accuracy across all devices, so you can easily design responsive websites.
6. Divi 5 Breadcrumbs
In Divi 5, we introduce breadcrumbs – an intuitive way to see where you are at any given point on the page. With breadcrumbs, tracking and managing design adjustments is easier than ever. As you dive deeper into different settings, breadcrumbs provide an easy way to return to earlier settings with a single click.
7. Faster Visual Feedback & Performance
One of the most significant changes from Divi 4 to Divi 5 is the speed and performance of the Visual Builder. This is due to a complete overhaul of Divi’s framework, drastically improving the Visual Builder’s responsiveness and front-end performance. This new version of Divi focuses on a block-type base rather than shortcodes, which allows it to be more efficient and future-proof.
The Visual Builder is now free of animations and lag that tended to slow down your workflow in previous versions. While Divi 4 is still an amazing WordPress theme, Divi 5 provides a better foundation for years to come. But what did we do to make that happen? Here’s a quick rundown of what’s new in the backend that makes the new Visual Builder so speedy:
- Rewritten Core Framework: Divi 5’s core has been completely rewritten. It eliminates inefficiencies that cause slower performance. We moved from a shortcode-based framework to a modular one, making it adaptable to future updates.
- Code Optimization: Divi 5 reduces code bloat by only using the JavaScript necessary based on the modules of the page. In Divi 4, all JS was loaded, contributing to Visual Builder lag. Now, JavaScript modules are designed to work asynchronously, making the builder more responsive and boosting page speed.
- Faster Canvas Rendering: Changes to a design, such as adjusting spacing or modifying content, now happen instantly on the canvas. This results from code changes that create smaller, independent modules for faster re-rendering of elements.
- Better Use of Browser Resources: Divi 5 works better with modern browser technologies, including advanced caching and improved memory management. Even the most complex layouts and dynamic content can now be handled without slowing down the design process.
Navigating The New Divi 5 Visual Builder
With Divi 5’s redesigned interface, navigating the Visual Builder is more efficient and user-friendly. Let’s look deeper into the tools that make up the new interface so you can start quickly.
1. The Main Toolbar
The top toolbar in Divi 5 is where you’ll find essential tools like page settings, save options, and view modes (desktop, tablet, and mobile). Here’s a full breakdown of every setting available:
- Page Settings: Similar to Divi 4, you can add a page title, excerpt, and featured image. Other options include setting the page’s gutter width, text colors, and advanced options for CSS, visibility, and position.
- Page Title: You can also change the page title here by clicking on the name.
- Responsive Controls: Switch between desktop, tablet, and mobile.
- Page Width: Control the width of the canvas.
- View Modes: Zoom in or out to increase or decrease the size of the canvas view.
- Light and Dark Mode: You can switch between light and dark to make Visual Builder more comfortable to work with based on your preferences.
- Undo/Redo: In Divi 5, you can easily undo or redo your last design settings or adjustments.
- View Design History: Get an overview of your most recent actions.
- Export/Import: Export or import a JSON file of your page.
- Delete: Erase the entire layout to start from scratch.
- Save to Library: Save your layout to the Divi Library
- Save Options: Save, preview, or exit your layout.
2. The Left Toolbar
The left toolbar contains tools to help you build more efficiently. Items such as layers allow you to view the structure of your page, making it easier to navigate. There’s also a wireframe mode, which is a throwback to previous versions of Divi.
X-Ray mode allows Divi users to see the underlying structure of your designs more clearly. When activated, this mode provides a view of the elements on the page, making it easier to identify how sections, rows, and modules are layered and positioned.
Here’s a full breakdown of all tools in the left toolbar:
- Add Layout: Quickly add a premade layout, a saved layout, or an existing page.
- Layers: Get a quick overview of your page structure to easily find what you want.
- Wireframe View: A throwback view of your page that shows a wireframe of sections, rows, and modules.
- Action Icons On Hover: When enabled, hovering over an element reveals relevant actions like edit, duplicate, delete, or move.
- Parent Action Icons On Hover: Activates parent elements (sections and rows) similar to modules.
- X-Ray: Places a border around design elements to help them be more easily identifiable.
- Builder Settings: Provides customizable settings for the Visual Builder, including the default view, opacity settings, light and dark mode, and color scheme.
- Help: A collection of Divi video tutorials and keyboard shortcuts to help you learn the new interface.
3. The Right Toolbar
The right toolbar in Divi 5’s interface controls page settings by default, as long as a section, row, or module isn’t selected. Once you choose a design element to edit, the module’s settings appear with familiar tabbed sections for content, design, and advanced.
This is also where you’ll find breadcrumbs to help you navigate the settings for quick changes.
4. Quick Actions Menu
The Quick Actions Menu is a new addition to Divi 5. It offers a fast way to perform common tasks without navigating multiple menus. You’ll get access to options like copying and pasting styles, adding new modules, or duplicating elements by right-clicking on a section, row, or module.
Tips For Getting Comfortable With Divi 5’s Interface
Divi 5’s revamped Visual Builder may feel different at first, but after a few minutes of using it, you’ll realize it’s the same Divi you’ve come to know and love, but with a lot more speed. Here are a few tips to help you adjust:
- Experiment With Panel Docking: Try different panel layouts to see which best suits your design style. You can float panels (similar to Divi 4), dock them, or group them into tabs for quick access.
- Use Canvas Scaling For Responsive Design: Play with canvas scaling to see how your designs respond to different devices. This will be a game-changer when designing responsively.
- Switch Between Light & Dark Mode: Don’t forget that you can toggle between light and dark mode depending on your work preferences.
- Utilize The Quick Actions Menu: The Quick Actions menu is one of Divi’s best time-saving upgrades. Try copying and pasting module styles to speed up your workflow.
Experience The Future Of Divi
Divi 5’s Visual Builder represents a significant leap forward in website design. With its redesigned interface, enhanced speed, and improved performance, Divi 5 empowers users to create stunning websites more efficiently. The Visual Builder’s intuitive design and customizable workspace make it accessible to beginners and experienced users.
Ready to get started? Start using the Divi 5 Public Alpha today!
The post How to Familiarize Yourself With Divi 5’s New Interface appeared first on Elegant Themes Blog.
# A Guide to Navigating the New Interface of Divi 5
Divi, one of the most popular WordPress themes and page builders, has undergone a significant transformation with the release of Divi 5. This new version promises a more intuitive user experience, enhanced performance, and a plethora of new features that cater to both novice and experienced web designers. In this guide, we will explore the new interface of Divi 5, highlighting its key features and providing tips to help you navigate this powerful tool effectively.
## Overview of Divi 5
Divi 5 is designed to streamline the web design process, making it easier to create stunning websites without needing extensive coding knowledge. The new interface focuses on user-friendliness, offering a clean layout, improved accessibility, and enhanced customization options. With Divi 5, users can expect faster loading times, better responsiveness, and a more cohesive design experience.
## Key Features of the New Interface
### 1. **Revamped Visual Builder**
The Visual Builder has received a complete overhaul in Divi 5. The new interface is more responsive and allows for real-time editing, making it easier to see changes as you make them. The toolbar has been simplified, providing quick access to essential tools without overwhelming the user. The drag-and-drop functionality has also been enhanced, allowing for more fluid movement of elements on the page.
### 2. **Enhanced Design Options**
Divi 5 introduces a range of new design options, including advanced typography controls, improved color palettes, and new layout settings. Users can now customize their designs with greater precision, ensuring that every element aligns with their vision. The new interface also includes pre-built design templates that can be easily modified, saving time for users who want to get started quickly.
### 3. **Improved Performance**
One of the standout features of Divi 5 is its focus on performance. The new interface is optimized for speed, ensuring that websites load faster and run more smoothly. This is particularly important for user experience and SEO, as search engines favor fast-loading sites. Additionally, Divi 5 has been designed to reduce bloat, meaning that your website will be more efficient and easier to maintain.
### 4. **Mobile Editing Capabilities**
With the increasing importance of mobile responsiveness, Divi 5 includes enhanced mobile editing features. Users can now easily switch between desktop, tablet, and mobile views to ensure their designs look great on all devices. The new interface allows for specific adjustments to be made for each device type, ensuring a seamless user experience across platforms.
### 5. **Global Styles and Settings**
Divi 5 introduces a new system for managing global styles and settings. This feature allows users to set design parameters that apply across the entire website, making it easier to maintain consistency. Changes made to global styles will automatically update all relevant elements, saving time and effort in the design process.
## Tips for Navigating the New Interface
### 1. **Familiarize Yourself with the Dashboard**
Take some time to explore the new dashboard layout. Familiarize yourself with where key tools and features are located. The more comfortable you are with the dashboard, the more efficiently you can work.
### 2. **Utilize the Help Center**
Divi 5 comes with an extensive help center that provides tutorials, guides, and troubleshooting tips. If you encounter any challenges, don’t hesitate to refer to these resources for assistance.
### 3. **Experiment with Pre-built Layouts**
If you’re new to Divi or web design in general, start by experimenting with the pre-built layouts. These templates can serve as a great foundation for your projects and can be customized to fit your needs.
### 4. **Make Use of the New Design Options**
Take advantage of the enhanced design options available in Divi 5. Spend time experimenting with typography, colors, and layouts to discover the full potential of the new interface.
### 5. **Stay Updated with New Features**
Divi is continuously evolving, and new features are regularly added. Keep an eye on updates and announcements from Elegant Themes to ensure you’re making the most of Divi 5’s capabilities.
## Conclusion
Divi 5 represents a significant leap forward in web design technology, offering users a powerful and intuitive interface that simplifies the design process. By familiarizing yourself with the new features and tools, you can create stunning, responsive websites with ease. Whether you’re a seasoned designer or just starting, Divi 5 provides the resources and flexibility needed to bring your creative vision to life. Happy designing!
Recent Comments