Elegant Themes Blog

Divi 5.2 Release Notes

Nick Roach — Fri, 03 Apr 2026 12:00:24 +0000

It’s official; the beta phases have ended, and Divi 5 has arrived!

This isn’t the end; it’s a new beginning for Divi, and we are moving forward faster than ever with weekly updates. If you use Divi 5, you’ll see a version 5.2 update notification today.

What’s New In Divi 5.2?

We implemented 69 bug fixes and improvements, and a new feature: Composable Settings.

With Divi 5 hot off the presses, we are still focused on bug fixing and overall stability. However, after 8 months of doing nothing but fixing bugs, we are slowly transitioning back to feature development.

That means the rate of innovation will accelerate significantly over the next few months.

If you want to get an early inside scoop, I often post progress reports in the Divi Theme Users Facebook group. Join us!

Composable Settings

We released Composable Settings in Divi 5.1.1 🎉, allowing you to enable any of Divi’s design options for any module sub-element.

This update completely harmonizes the available settings for Divi modules, which means you’ll never have to use CSS to fill the gaps; enable sizing options for buttons, animation options for titles, and everything in between.

Upcoming Divi 5 Features

We have many plans for Divi 5. We’re listening. We’re building. As each upcoming feature reaches a demoable state, I’ll give you a sneak peek.

Here’s what we are working on right now. 👇

Focus Editing, Field Presets & New Form Modules

Forms are an essential part of every website.

Soon, Divi’s form field styling options will be completely overhauled, allowing you to style forms site-wide using form field presets. Additionally, hundreds of new options will be unlocked thanks to the introduction of focus editing mode.

With better form options in place, new form-based modules will soon arrive!

Changelog

Here is a list of all fixes and improvements included in this update.

Fixed a fatal error that occurred when a third-party module with a non-string content value was saved and rendered as a Global Module.
Fixed an issue where the Responsive Editor displayed incorrect default values for the Section and Row gap fields.
Fixed Contact Form basic math captcha missing an associated label, which triggered accessibility warnings for the captcha field on the front end and in the Visual Builder.
Fixed the Visual Builder color picker not responding when using an ACF Color Picker field as dynamic content (including in Theme Builder), after a recent global color opacity improvement.
Added AI Agent UI tools for preview mode and light/dark mode controls, including tested toggle parity and idempotent state-setting behavior.
Fixed entity-encoded page titles appearing in Portability and Page Settings title fields.
Fixed a compatibility issue that could cause fatal errors when third-party plugins passed nullable values through WordPress translation hooks.
Fixed an issue where global module visibility changes could not be saved because the Save button remained disabled.
Fixed color fields rejecting non-global CSS variables when entering custom colors.
Fixed an issue where Layers could show empty or incorrect content while editing non-main off-canvas canvases in Theme Builder contexts.
Added a New chat control and conversation title toolbar to the Divi AI Agent modal so users can start a fresh chat while keeping the modal open, including when the modal is pinned.
Fixed docked sidebar modal tabs overflowing the sidebar when many modals were open in one row; the tab strip now scrolls horizontally within the sidebar instead of overlapping the canvas.
Fixed button icon not displayed on hover when a custom icon was selected and the icon position was set to right.
Fixed an issue where button animation settings could be incorrectly applied to unrelated nested elements (such as contact form labels/icons) during interaction-triggered animation replay.
Fixed speculative “Edit With Divi” prerendering so it only runs for posts that already have Divi enabled.
Enabled custom attributes for the cart quantity element in the menu module.
Enabled custom attributes for the captcha element in the contact for module.
Fixed missing CSS selector for composable settings output for the captcha and cart quantity elements.
Fixed duplicate composable settings group options in several Woo module button groups.
Fixed missing composables settings CSS selectors for various style-only module elements that resulted in composable setting CSS not targeting the desired module element.
Fixed broken CSS on pages with loops if a paginated page was visited prior to the main loop page.
Fixed Divi 4 -> Divi 5 selective-sync conversion for global modules by restoring migrator post-context and correctly mapping wildcard style paths to localAttrsMap (attrName + subName), preserving unsynced fields after migration.
Fixed an issue where custom CSS containing inline comments in Module Elements fields was removed during migration from Divi 4 to Divi 5.
Fixed an issue where Conditional Display based on Custom Field values would not work correctly on Category and Archive pages.
Fixed header and footer layouts appearing blank in Wireframe view when editing in the Theme Builder.
Fixed an issue where setting the module global color opacity to 100% could still render the module transparent when the source variable’s opacity was 0.
Fixed the Slide module Content Alignment control not working when the custom Content Width is set.
Fixed the global elements confirmation modal to properly prevent all outside interactions when unsaved changes exist, eliminating multiple popups and console errors.
Fixed Lottie module preset interactions not updating animation speed and playback settings on the frontend.
Fixed Image (and other modules with similar quirks as Image Module) Sizing and Spacing option groups are not being correctly copied or extended due to attrsMaps cache collisions.
Fixed SVG hover/sticky paint transitions for 3PS modules.
Fixed an issue where the Preset Manager settings modal would immediately close after clicking “Add New Preset” for the Heading Text option group, and ensured the correct preview module (Text with h1-h6 content) and settings group (FontHeaderGroup with h1-h6 tabs) are displayed.
Fixed button icons not appearing on the frontend for the WooCommerce Checkout Payment module when using non-default icons.
Fixed an issue where responsive editor indicators did not appear at the static module level when responsive values came from applied module or option group presets.
Fixed-block layout columns inside flex rows were rendered as flex containers, causing incorrect module spacing.
Fixed a Blurb issue where custom attributes targeted to Image or Icon were not applied when the module was using an icon.
Fixed element attributes not loading on the frontend when Loop Builder returns no results, ensuring CSS classes, IDs, and custom attributes are preserved to match the Visual Builder preview.
Fixed a security issue in Divi 5 Contact Form redirects by blocking unsafe redirect URLs while preserving valid redirects.
Security Updated Fixed a stored XSS vulnerability that made it possible for users with the Contributor role or above to insert JavaScript code onto the page via the Video Slider module’s shortcode.
Added AI-agent Context, Module, and UI tool sets to Divi 5 with Builder-contract-compatible behavior and integration tests.
Prevented unsafe remote requests when resolving video thumbnail URLs to mitigate SSRF risk.
Fixed border styles expanding to full column width on small Image modules in Divi 5 flex layouts. Borders now wrap tightly around the image regardless of image size.
Fixed an issue where featured images displayed the same image on all paginated pages in Theme Builder layouts on taxonomy archive pages. This was a regression from issue #47541 that occurred when the original fix was reverted during a merge.
Fixed Divi 4 to Divi 5 migration regressions for library-backed tab spacing assets and free-form custom CSS conversion.
Fixed a Visual Builder parity issue where Divider alignment inside flex columns could hide the divider.
Fixed ACF taxonomy archive background images so Dynamic Content custom fields now resolve correctly for Image URL, Image ID, and Image Array return formats.
Fixed double slashes in es6-promise script URLs that were causing issues with 3rd party asset offloading plugins.
Fixed background gradients with global colors using opacity filters, not rendering on the frontend when parallax background images were enabled. The fix resolves CSS sanitization issues with nested gradient functions and prevents the generation of invalid CSS syntax.
Fixed the Image module drag-and-drop functionality so it can be dragged from its center area when the settings panel is open, consistent with other Divi modules.
Customer-friendly, past-tense one-liner describing the fix.
Fixed a Visual Builder issue where typed settings could be applied to the next clicked element when switching modules before pending field commits were completed.
Fixed Group Carousel rotation could stop working after sections hidden on load were revealed via Visibility or Interaction settings.
Fixed Woo Checkout Payment button styling in Visual Builder so toggling the button icon no longer changes button text color or border appearance.
Fixed sticky elements not working correctly in Safari when section dividers are enabled by moving the Safari-specific perspective CSS from the section container to the divider elements themselves.
Fixed a logic bug in internal helpers that determine whether a string starts or ends with a given substring, which could return the wrong result.
Fixed a security issue where legacy Dynamic Content JSON could keep raw HTML enabled for users without unfiltered_html.
Fixed responsive icons not displaying correctly when set to different icons per breakpoint in Group Carousel modules.
Fixed Email Optin forms connected to AWeber not showing an error when an already-subscribed email is submitted again.
Fixed Contact Form “Letters Only” validation to correctly support international characters and multi-byte UTF-8 names.
Fixed Global Variables Manager modal crashing with “Maximum call stack size exceeded” when Heading and Body text colors reference each other.
Fixed Pagination preset link text color precedence so primary accent fallback no longer overrides preset/global variable link colors.
Fixed the Woo module product selector so that This Loop Product appears correctly in Theme Builder current-page loop contexts for Woo archives.
Fixed Blog module pagination, Font Weight, Text Size, and Text Alignment not applying when the WP-PageNavi plugin is active.
Fixed PHP 8.5 deprecation warnings when saving in Visual Builder and rendering the frontend.
Fixed Group Carousel autoplay timing so configured transition cadence applies consistently across all slide transitions, including high transition-speed setups.
Fixed Free-Form Custom CSS in the Visual Builder, not showing an error when a closing brace was missing at the end of the stylesheet.
Fixed a Divi AI authentication flow issue where missing credentials could trigger invalid-credentials behavior and block inline recovery in the Visual Builder.
Fixed the issue where opening the Module Elements tab would automatically jump to CSS fields that had content.
Fixed an issue where newer standard HTML attributes, including fetchpriority, popover, popovertarget, elementtiming, command, and commandfor, were incorrectly rejected as invalid in the Custom Attributes panel.

Jump Into Divi 5 Today

It’s official. Divi 5 is ready for production. Give it a try, and let us know what you think!

If you are brand new to Divi 5, we suggest familiarizing yourself with its many new features; there’s much to explore.

The Divi 5 page provides a good overview of some of its most exciting changes.
Our help center has nearly 200 articles focused on Divi 5.
On the blog, the Divi Resources category features hundreds of long-form tutorials that explore every aspect in depth.
On YouTube, we have many videos that walk you through each new update.
Plus, our Fin chatbot is trained on everything and can answer questions instantly! Behind the chatbot is our support team, ready to chat with you and help you through the transition.

The post Divi 5.2 Release Notes appeared first on Elegant Themes Blog.

How To Create Custom Star Rating Modules In Divi 5

Deanna McLean — Thu, 02 Apr 2026 16:00:00 +0000

Star ratings are one of the quickest ways to communicate trust and perceived quality on a website. Whether you are highlighting product reviews, service testimonials, or customer feedback, a well-designed star rating adds instant visual context. The challenge is making it look polished, reusable, and responsive without overcomplicating the build. In Divi 5, that process is much easier.

One of the most useful tools for this kind of custom component is Module Groups. Groups let you bundle multiple modules into one manageable unit, which makes it easier to build repeatable UI elements such as badges, review summaries, pricing callouts, and custom star ratings.

In this post, we’ll walk through how to create a custom star rating module in Divi 5 using Groups and Flexbox. By the end, you’ll have responsive, reusable star rating designs that you can save and use throughout your site.

Let’s get started.

What Are Module Groups?

Groups are one of the most useful structural additions in Divi 5. A Group is a container element that lets you bundle multiple modules into a single, cohesive unit inside a column. Once modules are placed inside a Group, you can move, duplicate, style, and manage them together far more efficiently.

That makes Groups especially useful for building custom, repeatable components without needing extra Nested Rows.

Here are a few of the most useful things Groups bring to this workflow:

Built-in Flexbox controls: Groups work especially well with Divi 5’s Flexbox-based layout system, giving you visual control over direction, alignment, justification, wrapping, and gap spacing across breakpoints.
Nesting support: You can place Groups inside other Groups to build more advanced structures while keeping the layout organized.
Group-level styling: Apply backgrounds, borders, shadows, spacing, sizing, transforms, and other design settings at the container level.
Reusable design patterns: Once a Group-based component looks the way you want, you can save and reuse it across your site.

In short, Groups make it much easier to build polished, reusable components like star ratings while keeping your page structure lean and manageable.

Step-By-Step Guide For Creating A Star Rating Module

In this section, we’ll build two custom star rating designs using Groups and Divi 5’s native Flexbox controls. The first example is more decorative and layered. The second is much simpler and works well for compact rating displays.

While Nested Rows could also be used for certain custom layouts, they are unnecessary here. Groups and Flexbox provide enough control to handle spacing, alignment, and responsiveness with fewer layers and less overhead.

Star Rating Module Example 1 (Layered Design)

Set Up The Group Structure

Start by creating a new page or opening an existing one in the Visual Builder. Add a new three-column row to the page.

In the first column, add a Group. This will be the Main Group.

Inside that Group, add another Group. This will be the Circle Group.

Next, use Layer View to add another Group inside the Main Group.

Hover over the Main Group in Layer View, open the menu, choose Add Element, and place another Group inside it. This will be the Star Group.

Now select the Main Group, go to Design > Layout, and set Layout Direction to Row. This places the Circle Group and the Star Group next to each other.

Size The Groups

Now set the sizing for each nested Group. Select the Circle Group, go to the Design tab, and open Sizing. Set the Width to 25%.

Use the Responsive Editor to adjust the width at smaller breakpoints. Keep it at 25% for larger screens, then set Phone Wide and Phone to 20%.

Repeat the process for the Star Group, setting the Width to 75% on larger breakpoints and 80% on Phone Wide and Phone.

Next, select the Main Group, go to Design > Layout, and set the Horizontal Gap to 0px.

Then set Align Items to Center.

Add Design Elements To The Circle Group

With the structure in place, click into the Circle Group and add a Text module. Set a Background Color in the module settings.

Go to the Design tab and open Layout. Set both Justify Content and Align Items to Center so the rating number stays centered inside the circle.

In Sizing, set both Width and Height to 60px.

Use the Responsive Editor to reduce those values at smaller breakpoints if needed.

Next, open Border and set the Border Radius to 50%. Add a 2px border and choose a border color.

Finally, go to Advanced > Position and set the Z Index to 15. This allows the circle to overlap the Star Group cleanly.

Style The Star Group

Select the Star Group and assign a background color in the Content tab.

In Design > Layout, set the Horizontal Gap to 15px. Then use the Responsive Editor to adjust it for smaller devices as needed.

Open Spacing and add a -35px left margin, 10px top and bottom padding, and 30px left padding. Tweak those values by breakpoint if your design needs more room on smaller screens.

Next, open Border, set the Border Radius to 10px, add a 2px border, and choose a border color.

Finally, in Transform > Transform Skew, set the X-axis skew to -10deg.

Add The Star Icons

Now click inside the Star Group and add an Icon module.

Choose a Star icon in the Content tab.

Then go to Design > Icon and set the Icon Color and Icon Size. Use the Responsive Editor to fine-tune the size at different breakpoints.

Because the parent Group is skewed, the icon will also inherit that visual distortion. To counter it, open the Icon module’s Transform settings and apply a 10deg skew on the X-axis. This counter-transform keeps the star visually straight while preserving the skewed container shape.

Using Layer View, duplicate the Icon once.

Change the color on the second icon to create contrast.

If the icons stack vertically, select the Star Group, go to Design > Layout, and set Layout Direction to Row.

Then duplicate the second Icon three more times until you have a five-star row.

At this point, your star rating module should look like this:

Once the module is complete, give the Group a clear Admin Label such as 1-Star Rating, then save it for reuse in your library.

To create variations, duplicate the saved version, adjust the rating number, swap colors, rename it, and save each version as its own reusable item.

A practical best practice here is to decide early whether you want the component to show only full-star values or support partial ratings visually. If you need half-star or decimal-style ratings, build that variation intentionally from the start so your saved versions stay consistent.

Apply The Module To An Existing Layout

Once saved, you can add the star rating module anywhere on your site by loading it from your saved items when inserting an element.

For example, you can place it in a product section, adjust the width as needed, and use z-index settings to create a layered composition.

Star Rating Module Example 2 (Basic Design)

Using a simpler version of the same approach, you can also create a minimal star rating with a single Group. This style works well for product cards, short reviews, and compact content areas.

Add a new three-column row, place a Group in the first column, and add one star Icon module inside it.

In the Group’s Layout settings, set the Horizontal Gap to 5px, Layout Direction to Row, and both Justify Content and Align Items to Center.

Set a background color on the Icon module, then choose a white icon color and an Icon Size of 20px.

In Spacing, apply 5px padding on all sides.

Then add a 5px border radius to the Icon.

Finally, duplicate the icon until you have a five-star row.

From there, save it for reuse and insert it into other layouts as needed.

A small but helpful improvement for this simpler version is to save multiple color variants up front, such as gold, dark, muted, and brand-colored versions. That gives you more flexibility when dropping the module into different design contexts later.

Download The Files

In addition to the two examples above, there are five more variations you can use in your own projects. Download them below, import the JSON files into your library, save them as individual reusable items if needed, and place them throughout your site.

Start Building In Divi 5 Today!

Creating custom star rating modules in Divi 5 is straightforward once you use Groups and Flexbox together. They give you enough structural control to build reusable, responsive components without needing custom CSS, extra plugins, or unnecessary layout layers. From a layered badge-style design to a simple five-star strip, the same workflow scales well across different use cases.

The biggest advantage is reusability. Once you build one version cleanly, you can save it, duplicate it, create variations, and use it anywhere you need rating visuals across your site. That makes star ratings faster to maintain and much easier to keep consistent.

Download Divi 5 Learn More About Divi 5

The post How To Create Custom Star Rating Modules In Divi 5 appeared first on Elegant Themes Blog.

Everything You Need To Know About Divi 5’s New Menu Features

Deanna McLean — Wed, 01 Apr 2026 16:00:00 +0000

Divi has evolved into a modular, performance-focused platform with a more streamlined builder, a rebuilt framework, and ongoing feature releases. As Divi 5 development continues, new features are being rolled out regularly. One recent update introduced new menu features that let you build navigation directly inside the Visual Builder, without plugins or custom CSS.

The classic Menu module is still available for simple setups, while the new Link and Dropdown modules act as building blocks for fully custom menus. Paired with updated Loop Builder capabilities and selector-based Interactions, they let you design everything from simple dropdowns to full-screen overlays, slide-ins, and mega menus using native Divi 5 modules and settings.

In this post, we’ll look at these new features, walk through creating a simple desktop and mobile menu with them, and share a few practical tips to help you get started.

Let’s dive in.

Building Menus In Divi 5

Divi 5 rethinks navigation by moving to a modular system. Instead of being locked into a single Menu module, you can now combine Link and Dropdown modules as building blocks. This gives you far more creative control directly within the Visual Builder while letting these elements work alongside native features like the Loop Builder and Interactions.

You can keep things simple by styling individual Link modules with custom text.

For menus that change frequently, Menu Loops are often the better option. By enabling looping for a menu item pattern and using Link modules with menu-based dynamic content, Divi can pull your navigation structure directly from a WordPress menu. That lets you keep your custom design in Divi while managing the actual menu items in WordPress.

For more complex navigation, the Dropdown module provides the structure for dropdown menus, nested layouts, and mega menus.

You can choose between Hover or Click triggers and use the Interactions panel to target specific elements, such as the parent, root container, or child elements.

Because these are native modules, you can nest Rows, Images, Buttons, and other modules inside Dropdown modules to build more advanced navigation patterns.

What Is The Link Module?

In earlier versions of Divi, a menu item was just a line of text inside the Menu module. In Divi 5, each menu item can be its own standalone module. That means you get the same design control over a single menu link that you would over a Button, Blurb, or CTA.

Key Features

One of the most useful aspects of the Link module is its integration with Dynamic Content. When used inside a menu loop, a Link module can automatically receive the correct menu text and URL from the current menu item. This means if you rename a page or update a menu item in WordPress, your custom menu can stay in sync.

Modern navigation often uses visual cues, such as icons that indicate a dropdown or call attention to a link. The Link module includes native icon support, letting you place an icon next to your text and style it independently in the Design tab.

Using the built-in state controls, you can style hover states for your links, such as changing color, weight, borders, or spacing.

Because the Link module is a standalone element, you aren’t forced into a one-size-fits-all menu style. One link can remain simple text while another can be styled more like a button, all within the same navigation row.

What Is The Dropdown Module?

The Dropdown module is a container module whose content can remain hidden until a user interacts with its trigger. This makes it the parent structure for building everything from classic dropdown menus to more complex mega menus.

Key Features

With built-in trigger logic, you can control how your menu reveals itself. You can set the dropdown to open on Hover for a traditional desktop experience or on Click for a more deliberate, touch-friendly interaction.

Navigation doesn’t always have to drop down. Divi 5 lets you choose where the menu appears relative to its trigger, with options such as Above, Below, Left, and Right. That makes it easier to build slide-out sidebars or other custom navigation layouts.

Alignment controls are built in too, with options for Start, Center, and End relative to the parent element.

The Dropdown Offset also supports Divi 5’s Advanced Units, giving you precise control over the spacing between the trigger and the dropdown content.

Finally, you can choose how the dropdown behaves in the layout. A Floating dropdown overlays the page content, while an Inline dropdown pushes surrounding content down when opened.

Because the Dropdown module is a native container, you aren’t limited to links alone. You can place Rows, Columns, Images, Buttons, Contact Forms, or even Video modules inside it.

Understanding Menu Loops

The Loop Builder is one of Divi 5’s most powerful features. It allows you to design a repeatable template item and tell Divi to output that design for every item in a specific data source. In this case, that data source is a WordPress menu.

Key Features

Within the loop settings, you can choose Menu as the query type. This is a specialized loop source for navigation.

Once the Menu source is selected, Divi looks at the WordPress menu you’ve chosen and repeats your linked design for each item in that menu.

This gives you the best of both approaches. You get the design flexibility of Divi modules, but you can still manage menu items centrally in WordPress. If you add or remove an item later, your custom Divi 5 menu can update without rebuilding the layout.

Using Menu Loops also improves consistency. Rather than styling each menu item separately, you can design the pattern once and let Divi repeat it.

New Features In Interactions

In Divi 5, the Interactions tab in the Advanced tab is the control center for triggers and effects. Interactions were released during the beta, and newer additions include selector-based targeting plus breakpoint-based triggers such as Breakpoint Enter and Breakpoint Exit.

Selector-Based Targeting

There are several useful targeting options beyond selecting only an individual module:

Parent targets the containing element of the trigger module. This is useful when a child element needs to control something higher in the structure.
Root Container targets the top-level element in the current component hierarchy.
Child targets child elements inside the trigger container, allowing one trigger to affect multiple items at once.

In practice, these work together with triggers such as hover, click, viewport entry, and breakpoint changes, plus effects such as showing, hiding, or transforming elements. In Divi 5, the Dropdown module already ties its visibility to its parent trigger, but Interactions let you extend that behavior further, such as closing an off-canvas menu via a child icon that targets the parent or showing a mobile menu only at certain breakpoints.

How To Create A Desktop And Mobile Menu

To show how these features work together, we’ll build a simple responsive menu using the Link and Dropdown modules, Menu Loops, and Interactions. By the end, you’ll have a desktop menu and a mobile menu that can be shown and hidden without third-party plugins or custom CSS.

Start by creating a new Global Header in the Theme Builder.

When the Visual Builder loads, click the green + icon to add a new Row.

Select a single-column Flex Row.

Before adding modules to the Row, adjust the Flex settings. In the Design tab, expand the Layout settings at the Column level. Set Layout Direction to Row, Justify Content to Space Between, and Align Items to Center. This places the modules side by side and vertically centers them within the container.

Now click into the Section, go to the Design tab, expand the Spacing settings, and assign 15px of padding to the top and bottom.

Create The Top-Line Navigation

With the Section and Row ready, start by adding an Image module for your logo. In the Design tab, open the Sizing settings and set the Width to 7%.

Use the Responsive Editor to define different widths for smaller screens. Activate it by hovering over the field and clicking the Edit Responsive Values icon.

Click each breakpoint in the Responsive Editor to assign the appropriate value.

Next, add a Module Group to hold the desktop version of your navigation links.

Ensure that the Group’s Layout Direction is set to Row in its Layout settings.

Now add a Link module inside the Group.

In the Link module’s Content tab, enter the Text value.

Then add the destination. Expand the Link settings and hover over the Link URL field to reveal the Insert Dynamic Content icon.

Choose Page Link from the available options.

Use the dropdown to select the page you’d like the link to point to, then click Apply.

From there, switch to the Design tab to style your link. Use hover and responsive controls as needed for color and spacing.

Duplicate the Link module to add the rest of the links in your menu, and update the text and destination for each one.

You’ll also add a Button and an Icon module. Style them however you like. The Icon module will act as the trigger for launching the mobile menu in the next section.

Create The Dropdown Menu

Now that the top-level navigation is in place, create a dropdown menu for one of the links. Click the Link module you want to attach it to. In the Content tab, open the Elements settings and click + Add Element.

When the Insert Module Or Row dialog appears, choose a Dropdown module.

Add Link modules inside the Dropdown by clicking + Add Element in the Elements settings of the Dropdown module.

For extra visual clarity, you can add icons to those Link modules.

Add as many links as you need, then style the Dropdown module’s background and layout settings to match the rest of your navigation.

In the Design tab, open the Dropdown settings. For this example, keep the defaults and set Dropdown Alignment to Center.

Once finished, save the template.

Create The Mobile Menu

Next, create the mobile menu. We’ll use a new Canvas to house it. Click the Canvas Grid View button in the builder’s top bar.

When the Canvas window opens, click + Add Canvas.

Give the Canvas a name such as Mobile Menu and assign a high Z-Index, such as 999999, so it can sit above the rest of the page content. Click Add Canvas to open it in the builder.

Add a single-column Row to the Canvas, select the Column, and open the Layout settings in the Design tab. Set the Vertical Gap to 15px.

Add Modules To The Mobile Menu

Now add the modules for the mobile menu. Add an Icon module for closing the menu, followed by a Link module and a Button module. Style them as needed.

Instead of adding multiple links manually, use the Loop Builder to create a menu loop for the rest of the menu. Click the Link module and open the Loop settings in the Content tab. Enable looping or place the Link module inside the menu loop structure used in your layout.

In the Query Type dropdown, select Menu and choose the menu you want to use.

Then make sure the link text is populated automatically. Open the Text settings in the Content tab, hover over the Text field to reveal the Insert Dynamic Content icon, and select Loop Menu Text.

For the link destination, also use dynamic content for the URL so each looped item points to the correct menu target.

Configure Interactions

To launch the mobile version of the menu and close it again, configure Interactions for the close Icon, the mobile menu canvas content, and the hamburger Icon in the main header.

While inside the Mobile Menu Canvas, select the close Icon module. Go to the Advanced tab, open the Interactions settings, and click + Add Interaction.

Choose Click as the trigger.

When the interaction editor opens, give the interaction an Admin Label such as Hide Menu, choose Hide Element as the Effect Action, and set the Target Module to Root Container. This closes the mobile menu when the user clicks the close icon.

Now hide the mobile menu by default so it doesn’t appear until triggered. In the Visibility settings for the mobile menu content, disable its visibility by default, then use Interactions to show it when needed.

Save the Canvas. Before heading back to the Main Canvas, use Divi 5’s Customizable Responsive Breakpoints to fine-tune the mobile layout if needed.

Click Canvas Grid View and switch back to the Main Canvas.

Configure The Main Canvas Interactions

On the Main Canvas, configure the desktop and mobile visibility behavior. Start by selecting the Group that contains the desktop Link modules. In the Advanced tab, open Interactions and add a new interaction. Give it an Admin Label such as Hide On Tablet And Below, set the Trigger Event to Breakpoint Enter, choose the relevant breakpoint, set the Effect Action to Hide Element, and target the Group.

Repeat that approach for any other desktop-only elements, such as the Button module.

For users resizing their browser windows, it’s a good idea to add another interaction for the desktop-only elements to reveal these elements as the browser window increases in size. For example, when resizing from smaller to larger breakpoints, the menu displays the mobile version instead of the Desktop version.

To correct this, we’ll create Interactions to restore the Desktop Menu as the browser resizes. Create an Interaction for the Group and Button using Breakpoint Enter as the Trigger Event, Breakpoint set to Desktop, Show Element as the Effect Action, and choosing the appropriate Target Module.

Now select the hamburger Icon module. In the Advanced tab, open the Visibility settings and hide it by default.

Then create two interactions: one to show the Icon when entering the tablet breakpoint and another to show the mobile menu on click. For the first, use Breakpoint Enter with the desired breakpoint, Show Element as the effect, and the hamburger Icon as the target.

For the second, create a Click interaction with Show Element as the effect. Set the target to the mobile menu section in the Mobile Menu Canvas.

Save the template and preview the menu on the front end. Resize the browser to confirm that the desktop links are hidden at smaller breakpoints, the hamburger icon appears, and the mobile menu opens and closes correctly.

Tips And Best Practices

Building a complex navigation system is only half the job. Maintaining it is the other half. To get the most out of Divi 5’s menu features, keep your menus organized, responsive, and easy to update.

Use Layer View And Admin Labels

Because custom menus often involve Links, Dropdowns, Groups, and Nested Modules, the canvas can get crowded quickly. Use Admin Labels consistently and rely on Layer View to keep the structure easy to manage.

Use Responsive Editing Early

A navigation layout that looks great on a large monitor can break down quickly on a smaller device. Use Divi 5’s Customizable Responsive Breakpoints and the Responsive Editor early in the process rather than waiting until the end.

Use Variable Manager For Design Consistency

Before styling your Link and Dropdown modules heavily, open the Variable Manager.

Define your brand colors, fonts, spacing, and other reusable values as Design Variables. That way, if your design system changes later, you can update it from one place instead of editing many individual modules.

Use Presets To Reduce Repetitive Styling

If you find yourself applying the same padding, shadows, border radius, or spacing repeatedly, use Option Group Presets. They let you save a reusable group of settings and apply it across different module types.

You can take this further by using an Option Group Preset inside an Element Preset. For example, you might create a Primary Button preset that includes a reusable spacing preset. If that spacing changes later, updating the underlying preset can update every module that depends on it.

Plan For Accessibility

Because you’re building menus from modular pieces, remember to check the final output, not just the visual design. Make sure links remain clear, hover-only behaviors have touch-friendly alternatives where needed, and mobile menu triggers are easy to identify and operate.

Download The Files

If you’d like to see these features in action, download the working files from this post. To use them, import them into the Divi Library, create a new Global Header Template in the Theme Builder, and load the sections into the builder.

Build Custom Menus In Divi 5 Today!

The new menu features in Divi 5 let you combine the Link and Dropdown modules with Menu Loops and Interactions to build custom menus directly inside the Visual Builder. Whether you’re building a simple header, a mobile overlay, or a more advanced mega menu, these tools give you far more flexibility than the classic all-in-one approach.

Try them on a staging site or in a new header template and experiment with the combinations. Start simple, then layer in loops, dropdowns, canvases, and interactions as needed. That’s the fastest way to get comfortable with Divi 5’s new approach to navigation.

Download Divi 5 Learn More About Divi 5

The post Everything You Need To Know About Divi 5’s New Menu Features appeared first on Elegant Themes Blog.

6 Collages For Divi 5 (Free Download!)

Donjete Vuniqi — Tue, 31 Mar 2026 16:00:00 +0000

Divi 5 makes it easy to build modern, image-driven layouts that feel polished without adding unnecessary complexity. In this free pack, you’ll get 6 Collage Sections designed for hero areas, product spotlights, portfolio intros, creative landing pages, and other content that benefits from layered visuals and clean typography. Drop one onto any page, swap the content, and you’re ready to go.

Preview

Here’s a quick look at the 6 Collage Sections included in the pack. The download is further down the post.

Download 6 Collages For Divi 5

Get all 6 sections for free. Import them into your Divi Library and add them to any page in the Visual Builder.

What’s Included (7 Exports)

After you download and unzip the file, you’ll find 6 styled Collage Section exports, plus 1 file containing all designs.

Styled – Collage Section 1 to 6 (6) → Six fully styled collage section layouts for creative headers, product features, portfolio blocks, and layered content presentation that you can use as-is or customize.
Styled – Collage Sections (All) → Imports all 6 designs into your Divi Library at once.

How To Use The Collage Sections

Keep your download folder handy. We’ll import the files, add a section to a page, and then replace the content.

1. Import Sections Into The Divi Library

Go to Divi → Divi Library. Click Import & Export at the top of the screen.

In the Import & Export Layouts modal, switch to the Import tab, then click Choose File and select your JSON file.

Choose any Collage Section JSON you’d like to use, then click Import Divi Builder Layouts.

2. Add A Collage Section To Any Page

Open a page in the Visual Builder and add a new Section.

In the Insert Section modal, click Add From Library and select a Collage Section layout.

Finally, click Use This Section.

3. Swap The Content

Once the section is on the page, replacing the placeholder content takes only a few clicks. Start by updating the heading, supporting copy, buttons, and links so the section matches your message. Then replace the placeholder images with your own.

Because these collage layouts use multiple overlapping or offset images, it’s best to swap one image at a time and check the composition as you go. This helps preserve the balance between text, whitespace, and imagery.

If you’d like to adjust the number of visual elements, duplicate or remove existing image modules rather than rebuilding the layout from scratch. That’s the easiest way to preserve spacing and alignment while expanding or simplifying the collage.

4. Adjust Styles (Optional)

These collage sections are already styled, so you can use them immediately or refine them to better match your brand. Update typography, colors, spacing, border radius, shadows, and image treatment as needed using the settings in the Design tab.

To change typography, open any Text or Heading module and go to the Design tab. Expand the relevant text settings to adjust Font, Font Weight, Text Alignment, and Text Color.

To refine the visual card or image blocks, open the row, group, or module controlling the collage area and use the Design tab to tweak Border Width, Border Color, Border Radius, Box Shadow, and Padding.

If your version uses rounded image masks, soft corners, or overlapping image stacks, keep those relationships in mind as you resize or replace assets so the collage still feels intentional.

Use Divi’s responsive editing tools to adjust spacing, alignment, and stacking behavior on smaller screens so the composition remains balanced across devices.

Tips For Effective Collage Layouts

Collage sections work best when the arrangement feels deliberate and the content is easy to scan. Use these quick tips to keep the designs clean, balanced, and effective.

Use A Clear Focal Point

Every collage should have one element that grabs attention first. That might be the headline, a hero image, or a standout product photo. Once the focal point is clear, the supporting images can reinforce it rather than compete with it.

Keep Image Treatment Consistent

If one image uses rounded corners, soft shadows, or muted tones, the surrounding images should feel like part of the same system. Consistency makes the whole section look more intentional.

Balance Text And Visuals

Collages are visual by nature, but they still need clear messaging. Make sure your headline, body copy, and buttons have enough breathing room and don’t get crowded out by the image composition.

Use Whitespace Intentionally

The empty space around a collage is part of the design. Resist the urge to fill every gap. Whitespace helps the overlapping elements feel cleaner and gives the eye room to move through the section.

Check The Composition On Mobile

On smaller screens, overlapping images and layered layouts can stack differently than expected. Review each section on tablet and phone views to make sure the headline stays readable and the collage still feels balanced.

Start Building In Divi 5 Today!

These 6 Collage Sections give you a fast way to add polished, image-forward layouts to creative headers, product features, portfolio intros, landing pages, and more. Swap the content, keep the styling or adapt it to your brand, and you’ll have a refined section ready in minutes with Divi 5‘s Visual Builder.

Download Divi 5 Learn More About Divi 5

The post 6 Collages For Divi 5 (Free Download!) appeared first on Elegant Themes Blog.

Composable Settings for Divi 5 (Hundreds of New Options)

Nick Roach — Mon, 30 Mar 2026 20:20:32 +0000

I am excited to introduce Composible Settings for Divi 5, allowing you to enable any of Divi’s design options for any module sub-element.

It opens up hundreds of new possibilities.

There’s much to explore, so let me jump into the builder and give you the full, off-the-cuff tour. 👇

Every Option For Every Element

Many Divi modules are comprised of nested elements. For example, the blurb modules consist of an image, title text, and body text.

Traditionally, each module sub-element has come with a suite of design options specific to that element. The title text element came with font options; that makes sense!

But Divi offers many other options: backgrounds, borders, transforms, and much more. Those could always be used to style the module wrapper, but not its sub-elements.

With Composable Settings, you can compose your own suite of design options for any sub-element, toggling on whatever you need. Add a width to your button, a border to your title, an animation to your image; there are no limits!

How To Toggle Design Settings

When hovering over an option group that represents a module sub-element, you’ll notice a new icon to “Toggle Options.” Click the icon, enable your desired options, and they will appear instantly as nested option groups.

That’s it! Enable the settings you need and then get to work.

Enabling Default Settings Using Presets

Composable settings work with presets. If you enable specific settings within a preset, then those option groups will appear automatically when editing an element that uses the preset.

If you want specific settings to be enabled by default, simply toggle them on in your default presets. Instead of crowding the settings panel with infinitely nested options, Divi lets you enable only what you need.

Try Divi 5 Today

Complete site editing is now available for Divi 5. Give it a try and let us know your thoughts.

We rebuilt Divi from the ground up and packed it full of dozens of your most requested features. Forget everything you thought you knew about Divi, because Divi 5 is an entirely different beast.

Have You Tried Complete Site Editing Divi 5?

In case you missed it, we recently released Complete Site Editing for Divi 5.

Now, you can edit your header, footer, body layouts, and page content at once. Your entire site, from top to bottom, can be edited in a single step. You don’t have to exit to the Theme Builder.

It’s really convenient and saves a ton of time!

Watch this video for all the details. 👇

More Divi 5 Updates Are On The Way

The features keep coming, and we aren’t slowing down anytime soon!

If you are enjoying these updates, do us a huge favor and let us know by liking this video and leaving a comment. It means a lot to us to see you cheering Divi on, and it’s essential to feed the algorithm and spread the word.

Don’t forget to follow us on YouTube and subscribe to the Divi newsletter so you never miss an update. I’ll see you soon for another Divi 5 feature announcement, which I promise will be right around the corner. 😁

The post Composable Settings for Divi 5 (Hundreds of New Options) appeared first on Elegant Themes Blog.

How To Build A Floating Image Animation In Divi 5

Christopher Morris — Sun, 29 Mar 2026 16:00:00 +0000

Floating images are elements that appear to hover and drift above the page, creating depth and organic motion without any user interaction. You’ve seen them on agency sites, SaaS landing pages, and portfolio headers—images that gently bob and sway as if suspended in space. The effect transforms static layouts into something that feels alive.

Divi has offered built-in animation controls for years, but Divi 5 makes this workflow cleaner thanks to its rebuilt Visual Builder, improved attribute management, and flexible design controls. Combined with a single CSS property, Divi’s built-in Animation options can produce smooth, continuous floating motion directly inside the builder. No plugins. No JavaScript. Just Divi’s native tools and one line of Custom CSS.

This tutorial walks through the full build: layout, card styling, animation, staggered timing, and a frosted-glass text treatment that ties the composition together. By the end, you’ll have a reusable section that looks polished and works well across devices.

What We’re Building

Our target is a three-column section with image cards on a dark background. Each card has a subtle glass-like treatment—a semi-transparent background, a thin border, and a generous border radius. Inside each card, an image drifts vertically in a slow, continuous loop. The key detail: each image moves on a different timeline, preventing the rigid, synchronized bobbing that can make animations look mechanical.

To finish the composition, we’ll add oversized heading text above and below the cards using a frosted-glass CSS technique that lets the images show through the letterforms as they float.

Building The Section

Start with a new Regular Section. Inside the Section, add a Row using a three-column structure.

If you started from a larger grid preset, keep only the three columns you need for the image cards.

Open the Section settings and set a dark background color. The dark treatment makes the floating cards pop and gives the section a modern, dimensional feel. A deep navy color (#0f172a) works well, though any dark tone can suit this layout.

Give the Section generous top and bottom padding (10rem) to isolate it visually from surrounding content. This extra space helps the floating motion breathe so the images do not appear cramped against the section edges.

Adding The Image Modules

Drop an Image module into each column. Upload or select the images you want to use. The images should share a consistent aspect ratio—it’s easiest to crop and size them before uploading them to your site. A vertical or square ratio (roughly 4:5 or 1:1) works best for this card layout because it gives the floating motion room to breathe vertically.

For each Image module, in Design > Border, set a border radius to round the corners (17px works well). Extend Attributes makes it easy to apply this across all image modules.

Right-click the Image from the Layers Panel or in the Visual Builder to select Extend Attributes

Styling The Cards

The card effect lives on each Column, not the Image module. Open the Column settings and configure the following:

Under Design > Spacing, add equal padding on all sides so the image floats inside the card with some breathing room.

Under Design > Background, set a semi-transparent background color. White at very low opacity (3–5%) creates the glass-panel effect against the dark section background.

Under Design > Border, add a thin border (1px) using white at low opacity (8–10%). This subtle edge helps define the card boundary. Set the border radius to a value larger than the Image module’s radius to create the inset-frame look, where the image sits inside a larger rounded container.

Once you finish one column, apply those design settings to the other columns using Extend Attributes or Extend Styles. The result is three glass-like cards sitting side by side on a dark field. Even before animation, the layout should already look clean and intentional.

Adding The Float Effect

Apply The Base Animation

Select the first Image module and open its settings. Navigate to Design > Animation and configure the following:

Animation Style: Slide
Animation Direction: Bottom
Animation Duration: Around 4000ms
Animation Intensity: Low, around 3–5%
Animation Starting Opacity: 100%
Animation Repeat: Loop

These settings create the basic vertical motion. A longer duration keeps the effect calm and intentional, while a low intensity prevents the image from traveling too far inside the card.

Create A Smooth Loop

Now switch to the Advanced tab. Open the Custom CSS option group and add the following to the Main Element field:

animation-direction: alternate;

That single line makes the animation play forward and then backward on each loop, creating a smoother back-and-forth drift instead of a noticeable reset at the start of every cycle.

Extend these Image Design Attributes to the other images so you can fine-tune each one in the next step.

Staggering The Motion

Applying identical animation settings to all three images creates synchronized movement, which usually looks too uniform. The fix is to give each image a different combination of duration and delay.

On the second Image module, increase the Animation Duration by 500–1000ms relative to the first and set an Animation Delay of 1000–2000ms. On the third Image module, use a different Duration and Delay so all three modules stay offset from one another.

For reference, here’s one combination that works well:

Image 1: Duration 4000ms, Delay 0ms, Intensity 3%
Image 2: Duration 5500ms, Delay 1500ms, Intensity 2%
Image 3: Duration 3500ms, Delay 800ms, Intensity 3%

You can adjust these values to taste, but keep enough variation between the modules to avoid a mirrored rhythm.

Going Further With Text

Add Overlapping Headings

The floating images work better when they are anchored by text.

Add two Rows—one above and one below the image row—using a single-column structure.

In each of those rows, add a Heading Module. Style the first heading with a color of White (#ffffff) at 10% opacity, a text size of 15rem, and a font weight of Ultra Bold.

Create A Frosted-Glass Text Effect

Go to the Advanced tab and open the CSS option group. In Module Elements > Main Element, paste in this custom CSS:

backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
-webkit-mask: linear-gradient(#000 0 0) text;
mask: linear-gradient(#000 0 0) text;
color: rgba(255, 255, 255, 0.1);

This creates a frosted-glass knockout effect—the text becomes a translucent window that blurs whatever sits behind it, including the floating images as they drift through the letterforms.

Extend the design attributes of the first Heading Module to all Heading Modules in the parent Section so the same settings apply to the heading below.

Position Headings Around The Cards

On the top row, in Design > Spacing, set the bottom margin to -8rem. On the bottom row, set the top margin to -8rem.

Then set the bottom Heading Module’s alignment to Left.

Finally, set the top Row’s z-index to 1. This brings the row and its Heading Module above the images it overlaps.

Performance Notes

This effect is relatively lightweight because Divi’s animation settings rely on CSS animation, and movement-based effects are generally efficient in modern browsers. Still, performance depends on the number of animated elements, image sizes, device capability, and any additional visual effects layered on top.

The floating motion here should perform well in most cases, but it’s still smart to keep image file sizes optimized, test the section on mobile, and avoid overusing continuous animations throughout the same page. The blur-based text effect can also be more demanding on some devices and browsers than the image movement itself, so test that carefully if you plan to use it prominently.

Start Building Website With Divi 5 Today!

Floating images are a great example of how Divi 5’s design controls, Animation options, and Custom CSS fields can work together without third-party dependencies. The built-in Slide animation plus animation-direction: alternate; handles the drifting motion, while Custom CSS adds the frosted-glass text treatment. Everything stays inside the builder, which makes the effect easy to reuse and refine.

Download Divi 5 Learn More About Divi 5

The post How To Build A Floating Image Animation In Divi 5 appeared first on Elegant Themes Blog.

How To Create Dynamic Navigation Using Divi 5 Menu Loops

Christopher Morris — Sat, 28 Mar 2026 16:00:00 +0000

Divi has always connected to WordPress menus through the Menu module. What the new Link module, Dropdown module, and Menu query type in the Loop Builder add is compositional control. Instead of relying on a pre-packaged menu component with a fixed structure and styling constraints, you can now build navigation from individually styleable modules using the same building blocks you use elsewhere in Divi 5.

The Menu query type in the Loop Builder is the other key ingredient. A Link module can be looped against a WordPress menu so it repeats once per menu item and dynamically pulls in each item’s text and URL. Add, remove, or reorder items in Appearance > Menus, and the navigation updates without requiring changes in the Visual Builder.

There is one current limitation to keep in mind: Divi 5’s new menu looping does not yet provide a complete one-loop solution for top-level items and nested sub-menu items together. These new modules and the Menu query type still provide a strong foundation, but for now, building dropdown navigation works best with a hybrid approach. Because of that, this tutorial covers two practical patterns: one for flat navigation driven entirely by a single menu loop, and one for navigation with dropdowns where the top level is built manually and each dropdown’s links are looped from a dedicated WordPress menu.

Before You Start: Set Up Your WordPress Menus

Go to Appearance > Menus and create the menus you want to loop. For flat navigation, a single menu containing all top-level items is enough.

For dropdown navigation, create a separate menu for each set of dropdown links you want to output dynamically. In this tutorial, the “Services” menu contains only the links that appear inside the Services dropdown.

One last note before we start: this article focuses on the new modules, loop settings, and basic semantic structure. To stay on topic, it does not cover styling or building a broader design system for navigation. For that, refer to the detailed guidance on Design Variables and Nested/Stacked Presets.

Flat Navigation Driven by a Single Menu Loop

This structure works well for navigation with no dropdowns. One Link module, configured as a loop template, handles the entire menu. Add or remove items in WordPress, and the navigation updates automatically.

Structure

Open a Global Header template in the Theme Builder.

Use this structure: Section > Row > Column containing an Image module for the logo, a Group module with a single Link module inside it, and a Button module for a CTA. In the Column’s Design > Layout settings, set the layout to Flex, set Layout Direction to Row, Justify Content to Space Between, and Align Items to Center.

On the Group module, use these flex settings: Justify Content set to Space Between and Align Items set to Center.

The Link module inside the Group will serve as the loop template and output all menu items.

Loop Settings

Select the Link module inside the Group. In the Content tab, open the Loop option group. Toggle Loop Element on, set Query Type to Menu, then select your primary navigation menu in the Menu field. Set Order By to Menu Order and Order to Ascending so the output matches the order you set in WordPress.

Set the Link module’s text field to pull dynamic values from the menu item so each repeated instance uses its own label. Use Loop Menu Text.

Do the same for the link destination by setting the Link field to use Loop Menu Link.

Semantics

Work through each layer from the outside in.

Row: In the Advanced tab, set the HTML element to

Then open Attributes and add aria-label=”Main navigation”.

Column: In the Advanced tab, set the HTML element to

Image Module: In the Advanced tab, set the HTML element to

.

Group Module: In the Advanced tab, set the HTML element to
- using HTML Before and HTML After.
  
  Link Module: In the Advanced tab, set HTML Before to
- and HTML After to
- and HTML After to
- and HTML After to

Everything You Need To Know About Editable Theme Builder Areas In Divi 5

Deanna McLean — Fri, 27 Mar 2026 16:00:00 +0000

Divi 5 is now available, bringing a rebuilt foundation focused on performance, a modernized builder experience, and a growing list of new features. One of the latest additions is Editable Theme Builder Areas, also referred to as complete site editing. Instead of leaving the Visual Builder to open the Theme Builder separately, you can now edit the active header, footer, and body template areas directly on the front end while working on the page itself.

This creates a smoother workflow because the global template areas assigned to the page you’re viewing appear inside the same editing session. You can update site-wide elements and page-level content side by side, with less context switching and faster visual feedback.

In this post, we’ll walk through what Editable Theme Builder Areas are, how to use them, and a few practical ways to work with them more efficiently.

Let’s dive in.

What Are Theme Builder Areas In Divi 5?

Divi has always been more than a page builder. It also gives you control over structural parts of your WordPress website, including headers, footers, post templates, product templates, category templates, and other dynamic layouts.

Subscribe To Our Youtube Channel

Those site-wide and conditional layouts are managed inside the Theme Builder, where you can create templates using Divi’s modules and design settings, then assign them to specific parts of your site.

Traditionally, editing those templates meant going to WordPress Dashboard > Divi > Theme Builder, opening the relevant template, and working on it in a separate builder session. In Divi 5, that workflow changes. The Theme Builder areas assigned to the current page can now be edited directly inside the Visual Builder on the front end.

Achieve Complete Site Editing In Divi 5

With this update, Divi 5 brings a more complete front-end editing experience. When you visit a page, post, archive, product page, or another template-driven area of your website, you can click Edit With Divi and open the builder with the relevant Theme Builder areas already loaded.

Inside the builder, you can work across the full page structure in one place, including the header template, the page or template body, and the footer template. That means you can refine global elements and local content without bouncing between separate interfaces.

Key Advantages

Less context switching: You can edit the assigned header, body, and footer in one builder session instead of opening the Theme Builder separately.
Seamless editing between areas: You can copy, paste, drag, and move elements between template areas more naturally while seeing the full page context.
Front-end editing on more parts of your site: Divi 5 makes Edit With Divi available across more template-driven areas, not just singular content like pages and posts.
Better visual decision-making: Because you’re editing in context, it’s easier to judge spacing, navigation, calls to action, and how global elements interact with the content below them.

This makes editing headers, footers, and body templates feel more integrated and efficient, especially when you’re fine-tuning site-wide elements in context.

How To Access And Use Editable Theme Builder Areas

Editing Theme Builder Areas in Divi 5 happens directly on the front end. Here’s how to get started.

Log in to WordPress and navigate to the front end of your website. Click the Edit With Divi button in the top admin bar.

Once the builder opens, hover over the header, footer, or other template-controlled area. Divi highlights Theme Builder areas with a bright green label so they’re easy to identify.

Click into the Header area to start editing it directly.

From there, you can edit the header like any other part of the layout. For example, you can copy a Button module from the body content and place it directly into the Header area without leaving the builder.

When you’re finished, save your changes as usual.

Just like edits made through the Theme Builder, changes to a global template area apply everywhere that template is assigned.

One important thing to keep in mind is scope. You’re editing the Theme Builder areas assigned to the page you’re currently viewing, so any changes to those global templates will affect every location where that template is used.

By bringing Theme Builder editing into the Visual Builder, Divi 5 removes a lot of back-and-forth from the workflow and makes site-wide editing feel faster and more intuitive.

Managing And Protecting Editable Areas

Direct front-end access to Theme Builder areas is powerful, but there will be times when you want to simplify the interface or restrict access, especially on client websites or collaborative builds.

Disable Theme Builder Areas In The Visual Builder

If you want to hide Theme Builder areas while editing, launch the Visual Builder on any page and click the Builder Settings icon in the left sidebar.

When the Builder Settings modal opens, scroll until you find the Show Theme Builder Layouts toggle. Switch it off to hide those areas from the current editing view.

The header and footer will now be hidden in the builder, allowing you to focus only on the page content.

This is especially useful when you’re editing content on a live page and don’t want global template areas cluttering the workspace.

Use The Divi Role Editor To Restrict Access

For client or team websites, you can prevent certain users from editing Theme Builder areas entirely.

Go to the WordPress dashboard and select Divi > Role Editor.

To restrict access, toggle Theme Builder off in the General Functionality settings for the relevant role.

Click the Save Divi Roles button to apply the changes.

Users will still be able to work with page content in the Visual Builder, but they won’t be able to access or edit Theme Builder templates.

The combination of the in-builder toggle and the Role Editor gives you both workflow flexibility and protection against accidental global edits.

Tips And Best Practices

Here are a few practical ways to get even more out of Editable Theme Builder Areas in Divi 5.

Use Layer View Or Breadcrumbs

Global areas like headers and footers often contain more complex structures, including Nested Modules and Nested Rows. Instead of hunting visually for the right element, open Layer View to see the full hierarchy and jump directly to the item you want.

Divi 5 Breadcrumbs also make it easier to move up and down a deep layout structure without excessive clicking or scrolling.

Enable Speculative Prerendering

Divi 5’s Speculative Prerendering helps speed up navigation by preloading likely next pages based on user behavior. That can make entering and exiting the builder, or moving between pages while testing template edits, feel much faster.

If you’re making several header, footer, or template adjustments across different pages, this feature can noticeably reduce friction in your workflow.

Use Design Variables And Presets For Consistency

Define Design Variables such as brand colors, font sizes, and spacing values in the Variable Manager.

Then apply them through Element Presets or Option Group Presets to keep styling consistent across global areas.

This is particularly helpful for headers and footers. Instead of manually repeating design choices, you can update a variable or preset once and maintain consistency across every assigned template area that uses it.

Test Global Changes With Responsive Tools

Because Theme Builder Areas affect multiple parts of your website, every change should be reviewed across screen sizes. Use Divi’s Customizable Responsive Breakpoints to check how your global layouts behave on desktop, tablet, and mobile.

For more granular edits, the Responsive Editor lets you adjust values such as menu text size, spacing, and logo sizing from one centralized interface.

A good habit is to test the template in the exact contexts where it appears. For example, check a blog post template on an actual post, a category template on an archive page, and a product template on a product page before publishing broader changes.

Start Building With Divi 5 Today

Editable Theme Builder Areas are one of the most practical workflow improvements in Divi 5. They let you edit assigned global template areas directly in the Visual Builder, in context, without constantly jumping back to the Theme Builder interface.

That makes everyday tasks faster, especially when you’re adjusting navigation, calls to action, promotional bars, footer content, or dynamic template layouts while reviewing the page itself.

If you haven’t tried Divi 5 yet, this feature is an excellent place to start. Download it from the members area, enable it on a staging site first, and test editing a header or footer directly from the front end. You’ll quickly see how much smoother the workflow feels.

Ready to share your thoughts? Drop a comment below or let us know what you think on social media.

Download Divi 5 Learn More About Divi 5

The post Everything You Need To Know About Editable Theme Builder Areas In Divi 5 appeared first on Elegant Themes Blog.

Divi 5: Semantic Elements vs Role Attributes

Deanna McLean — Thu, 26 Mar 2026 16:00:00 +0000

In an era where WCAG compliance, semantic HTML, and AI-assisted search experiences matter, modern website builders are evolving to make accessibility and meaningful structure standard rather than an afterthought. Divi 5 is part of that shift, making it easier for Divi users to build sites with clearer structure and stronger accessibility.

Divi 5 includes Semantic Elements, which let users change a module’s underlying HTML tag to native semantic tags such as nav, header, article, or button. Another recent feature, Custom Attributes, lets users add HTML attributes, including ARIA roles and states, in the Advanced tab. While Semantic Elements provide built-in meaning through proper HTML tags, Custom Attributes provide additive semantics and finer control when a native tag alone is not enough.

In this post, I’ll compare the two approaches head-to-head, explain when to prioritize one over the other, and show how they work together in Divi 5 to improve accessibility, clarity, and long-term maintainability.

Let’s dive in.

What Are Semantic Elements?

Semantic Elements are one of the most important accessibility upgrades in Divi 5. At their core, they let you replace default wrapper tags with native semantic HTML tags such as nav, header, section, article, main, footer, and button, each of which carries built-in meaning about the content’s purpose and structure.

Unlike generic div wrappers, these tags help browsers, screen readers, and search engines understand what the element is for. A nav tag clearly signals navigation, a button identifies an interactive control, and structural tags like header, main, or article help define the page’s logical hierarchy without extra role attributes.

Key Benefits of Semantic Elements

Strong Accessibility: Screen readers can recognize landmarks such as navigation and main content automatically, making pages easier to navigate for people using assistive technologies.
Clearer Structure For Search Engines: Search engines can parse semantic HTML more accurately, understanding content hierarchy, boundaries, and purpose more clearly.
Cleaner HTML Output: You get meaningful structure without relying on extra ARIA roles or custom code, resulting in simpler, more maintainable markup.

How It Works In Divi 5

The Semantic Elements feature lives in the Advanced tab under the HTML option group. There, you’ll find an Element Type dropdown that lets you select from a list of semantic tags.

This option applies to modules and containers, giving you a lot of flexibility. You can change a custom menu wrapper to nav so assistive technologies recognize it as navigation. You can convert an Icon module acting as a close or toggle control into a proper button element. You can also group content into semantic wrappers like header, main, or article, which is especially useful for one-page layouts built directly in the Visual Builder.

Practical Examples

You can build a semantic one-page layout by wrapping your hero area in a header tag, primary content in a main or article tag, and closing sections in a footer tag. This creates clear page regions for both assistive technology and crawlers.

You can also create icon-only controls by changing an Icon module from a generic element to a real button. That gives it native button semantics, and you can pair it with ARIA later if you need an accessible name or state.

Finally, you can create custom navigation by assembling a menu with Divi modules and applying the nav tag to the container. This gives the region landmark status immediately.

Strengths And Limitations

Semantic Elements are best for structural and interactive elements where a native HTML tag already exists. They’re easy to implement, low-risk, and closely aligned with web standards.

That said, they are limited to the tags available in the dropdown. They also don’t cover every accessibility need on their own. For example, a semantic tag won’t add a state like aria-expanded to a toggle button or label a dialog automatically. For cases like that, Custom Attributes and ARIA fill the gaps.

Semantic Elements give your Divi site a strong, meaningful foundation in the HTML layer, making accessibility and clean code much easier to achieve.

What Are Role Attributes?

While Semantic Elements give your Divi modules native HTML tags with built-in meaning, not every situation fits neatly into those predefined tags. That’s where role attributes come in. A role attribute explicitly describes an element’s purpose to assistive technologies when the underlying HTML tag doesn’t provide enough meaning or when you need additional semantic context.

These are added through Divi 5’s Custom Attributes system. This feature lives in the Advanced tab under the Attributes option group and lets you add attributes directly in the builder.

Custom Attributes let you add valid HTML attributes such as data-* for custom scripting, tabindex for focus management, rel for link behavior, and ARIA attributes such as role, aria-label, and aria-expanded. This makes the feature useful for fine-tuning semantics, especially on sub-elements or dynamic components.

Key Benefits of Role Attributes

More Flexibility: You can target the entire module or specific sub-elements, such as an icon in a Blurb module, list items in an Icon List, or looped elements in the Loop Builder.
Helpful For Accessibility Gaps: You can add semantics to generic wrappers, describe dynamic components, or improve accessibility without changing the base tag.
Useful When Tag Changes Aren’t Ideal: They help when the Element Type dropdown doesn’t offer the right semantic tag, or when you need states and labels that native tags alone don’t provide.

How Role Attributes Work In Divi 5

Adding an attribute is straightforward. In this example, we’ll assign a role to a close Icon module on a pop-up. An Interaction is already set, but we also want assistive technologies to understand that the Icon module behaves like a control.

Simply open any module’s settings and go to the Advanced tab. Expand the Attributes menu, then click + Add Attribute.

Choose role as the Attribute.

Assign an Admin Label for easy identification, and set the Attribute Value to button.

Adding role=”button” tells assistive technologies that the element should be treated as a control rather than as a decorative graphic. However, role alone does not make a generic element behave like a native button. If the element is not already keyboard-focusable and operable, you’ll also need the right interaction handling and, in some cases, tabindex and keyboard support. When possible, using a real button element through Semantic Elements is still the better option.

Practical Examples

In addition to using a role attribute on an Icon module to support a pop-up close control, there are other cases where a role attribute makes sense.

Custom Menus Built Without Using The Menu Module

For example, if you’re assembling a navigation bar using Text modules, you could add role=”navigation” to the parent Row.

This can be useful when you don’t want to change the container itself to nav or when the structure around it needs to stay as-is. That said, a native nav element is still preferable whenever it’s practical.

Modal Or Popup Containers

Another example is a modal or pop-up container. A full-screen overlay, pop-up, or dialog box triggered by Interactions is often built with generic Section and Row structures.

By adding role=”dialog” to the section, you tell assistive technologies that the region is a dialog. To make it more accessible, pair it with a label such as aria-label=”Newsletter Signup” or aria-labelledby. In a fully accessible modal pattern, you should also manage focus correctly and indicate modality where appropriate.

Defining List Intent

You can also use role attributes on the Icon List module to clarify its purpose in certain edge cases. Divi 5 typically outputs this module with native list semantics, which is the ideal setup.

In some situations, custom styling can affect how lists are exposed to assistive technologies. Adding role=”list” can act as a fallback when native list semantics are weakened or not conveyed as expected. It shouldn’t replace proper list markup, but it can help reinforce intent when needed.

Semantic Elements vs Role Attributes

Both Semantic Elements and role attributes are useful tools in Divi 5 for creating more accessible, understandable websites. They share the same broad goal: improving how browsers, screen readers, and other tools interpret your page structure and content. Divi 5 makes both features easy to use directly in the Visual Builder.

Similarities

Semantic Elements and role attributes both improve accessibility and semantic meaning. They can help screen readers announce content more accurately, define landmarks that let users jump quickly to key page regions, and clarify the purpose of interactive elements.

Both approaches also align with modern web standards. Used correctly, they support better accessibility practices and make it easier to build sites with clearer structure and more maintainable markup.

Differences

The key distinction lies in how each approach delivers meaning: native and built-in versus descriptive and additive.

Native vs Additive

Semantic Elements use proper HTML tags that browsers and assistive technologies understand natively. The meaning is built into the tag itself. Role attributes, by contrast, add semantic meaning to an existing element without changing its underlying tag. That makes them useful when native tags aren’t available, aren’t practical, or need additional context.

Preferences And Best Practices

Web standards recommend using native semantic elements first whenever possible. A native tag usually provides stronger and more reliable semantics than an ARIA role added to a generic element. For example, changing a module to nav is preferable to adding role=”navigation” to a div. Fall back to role attributes when:

The Element Type dropdown doesn’t offer the semantic tag you need.
Changing the tag would break the layout, styling, or functionality.
You need to describe dynamic or composite behavior, such as role=”dialog” for a modal.
You’re targeting a sub-element, such as an icon inside a Blurb module.

Impact On SEO And Maintainability

Semantic Elements usually produce cleaner HTML, which can make page structure easier for search engines and developers to understand. Role attributes are primarily accessibility-focused. They don’t replace native structure, but they can improve usability when used carefully. From a maintenance perspective, native semantic tags are usually easier to reason about than a layer of added ARIA.

To help you better understand the differences, refer to the table below:

	Semantic Elements	Role Attributes
Implementation	Change Element Type in HTML option group	Add via the Attributes panel
Type of Semantics	Native/Inherit (built into HTML5)	Additive/ARIA-described
Best For	Structural/page landmarks, static elements	Dynamic content, sub-elements, gaps
Accessibility Strength	Excellent (automatic landmark recognition)	Excellent when used correctly, but requires care
SEO Impact	Strong (cleaner, semantic HTML)	Indirect (accessibility helps indirectly)
Flexibility	Limited to supported HTML tags	Unlimited (any valid attribute/role)
Risk of misuse	Low (hard to overdo)	Higher (redundancy, conflicts possible)
Divi 5 Targeting	Whole module/element	Module + sub-elements, like an icon or title
Example Scenario	Menu as a nav tag	Decorative icon as aria-hidden or role="button" on non-button elements

Best Practices

To get the most out of Semantic Elements and Custom Attributes in Divi 5, follow these best practices:

Use Semantic Elements First

In accessibility work, this aligns with the First Rule of ARIA: if you can use a native HTML element or attribute that already provides the semantics and behavior you need, use that instead of repurposing an element and adding ARIA. Native HTML gives the strongest, most reliable semantics because the meaning is built directly into the language.

Use ARIA Roles When Necessary

ARIA roles and attributes should be used only when necessary: when the Element Type dropdown doesn’t offer the right tag, when changing the tag would break your design or functionality, or when you need to describe dynamic states that native tags can’t handle alone. Following this hierarchy helps avoid common accessibility mistakes such as redundant roles, confusing announcements, or incomplete interactive patterns.

Keep Role Attributes Minimal

Avoid adding roles to elements that already have equivalent native semantics. For example, adding role=”navigation” to a nav tag is unnecessary and may trigger warnings from accessibility testing tools.

Test Regularly

Test with a real screen reader to hear how your site is announced in practice. It’s also helpful to run automated accessibility testing and inspect the rendered markup. If you use Divi add-ons, tools such as Accessibility Bundle may also help visualize structure during development.

Keep Performance And Maintainability In Mind

From a code quality standpoint, leaning on Semantic Elements tends to produce lighter, easier-to-maintain markup with fewer extra attributes. Custom Attributes add only what you specify, but overusing ARIA, adding conflicting roles, or stacking unnecessary attributes can make markup harder to understand and maintain. Aim for the cleanest possible structure: use native tags for the foundation, then add roles or ARIA only where genuine gaps exist.

Semantic Elements And Role Attributes: Better Together

In Divi 5, Semantic Elements and role attributes offer two complementary paths to stronger, more accessible web design.

Semantic Elements provide inherent structure by letting you assign native HTML tags directly to modules. This creates cleaner, self-explanatory markup that browsers, screen readers, and search engines understand automatically, making it the preferred foundation for structural and static content.

Role attributes, added through the Custom Attributes option group, provide flexible, additive enhancements. When native tags aren’t available, aren’t suitable, or can’t fully describe dynamic behavior, roles help fill those gaps without changing the underlying tag.

Try both features on an existing Divi 5 page and use them intentionally. Start with native semantic tags where possible, then add role and ARIA attributes only where they genuinely improve meaning, labeling, or behavior. That approach leads to cleaner code, better accessibility, and a more resilient site structure.

Download Divi 5 Learn More About Divi 5

The post Divi 5: Semantic Elements vs Role Attributes appeared first on Elegant Themes Blog.

The Optimal Divi 5 Workspace Setup For Power Users

Aayush — Wed, 25 Mar 2026 16:00:13 +0000

When you’re building complex sites, a few deliberate adjustments to your environment can save hours each week by reducing friction and keeping you focused on the work that matters.

Divi 5 makes this easier with workspace tools that adapt to how you work instead of slowing you down. In this guide, we’ll walk through the settings and workflow choices that make the biggest difference, with concrete examples, so efficiency in the Visual Builder becomes second nature.

What Divi 5 Brings To The Table For Power Users

The workspace changes go deeper than visual polish. They address the layout bottlenecks that add up when you’re building at scale. Here are some of the quality-of-life improvements we introduced:

Workspace Feature	What It Does
Command Center	Press Cmd + K on Mac or Ctrl + K on Windows to execute commands for adding elements, navigating pages, opening panels, and jumping to settings
Page Manager	Create, edit, duplicate, and delete pages without leaving the builder
Preview Mode	Hide all builder UI elements instantly to preview your design in-app, with an option to generate a front-end preview link
Content Drill Down	Navigate into child elements using the drill-down icon in the breadcrumbs or the arrow keys
Consolidated Page Menu	Access page-level actions, recently opened pages, and keyboard shortcuts from a single menu
Multi-Panel Docking	Open multiple settings panels simultaneously and dock them side by side
Panel Positioning	Dock panels on either side or float them within the workspace
Canvas Scaling	Drag the canvas edge or enter a custom width to preview different screen sizes without leaving the builder
Light & Dark Mode	Toggle the interface between light and dark modes
Settings Search	Type keywords to filter settings and jump straight to matching options
Settings Filtering	Filter settings by modified values, colors, sizes, font families, or font weights
Keyboard Shortcuts	Use key combinations to speed up navigation and common builder actions
Customizable Breakpoints	Set and adjust screen widths for seven responsive breakpoints
Breadcrumb Navigation	See your exact position in nested content with a clickable hierarchy in the settings panel

Arranging Your Workspace

Divi 5’s Visual Builder already comes with a clean, thoughtful layout, but it’s also built to adapt to the way you work. That flexibility matters most before you start building, when a few deliberate choices can shape a workspace that fits your habits instead of fighting them. This section walks through how to arrange your workspace so it supports your process and keeps your attention on the design.

Configuring The Builder Interface

Open Builder Settings using the gear icon in the builder interface. Everything you change here is worth setting up intentionally before you begin.

We’ll get to the initial layout options in a moment. First, let’s focus on appearance. Interface Mode is set to Light by default, but if you tend to build for long stretches, Dark Mode can be easier on the eyes.

You can also use the interface toggle to switch quickly between light and dark modes while you work.

Right below that, Color Scheme lets you choose the accent color used for builder UI elements such as active controls, selected modules, and highlighted options. Blue is the default, and it works well in most cases. But if the site you’re building also leans heavily on blue, switching the UI accent to green or red can make it easier to distinguish the builder chrome from the page design itself. For this setup, we’re sticking with the default blue.

Cleaning Up The Interface

A few additional toggles can help clean up the interface. Collapsing settings groups by default gives you a shorter panel every time you open a module. Dimming disabled elements to 50% opacity makes it obvious which items are inactive at the current breakpoint without forcing you to click into each one. If those defaults suit your workflow, leave them on. We are.

And if you prefer starting with empty modules, turn off the default placeholder content so new modules don’t load with dummy text and images.

Speeding Up Navigation With Prerendering

The last toggle in that group is Speed Up The Builder With Prerendering.

This feature uses speculative prerendering to predict where you’re headed and load that destination in the background before you click. In practice, it speeds up entering and exiting the builder and switching pages during active build sessions. It’s enabled by default, and if you move between pages often, the time savings add up quickly.

Do note that speculative prerendering currently depends on Chromium-based browsers, so Chrome, Edge, Opera, and similar browsers get the benefit, while Safari and Firefox do not yet. Also, each prerender counts as a page request on your server, so you may want to disable it if you need to limit extra background requests.

Customizing The Page Bar

Still inside Builder Settings, the Page Bar Icons group controls which action buttons appear in the top toolbar. Each toggle adds or removes an icon, so you can keep only the controls you actually use visible:

Undo/Redo: Adds forward and back arrows so you can step through recent changes with a click.
History: Opens a timeline of actions from your current editing session so you can jump back to an earlier point.
Export & Import: Lets you export your page layout as a JSON file or import one.
Clear Layout: Removes the entire page layout so you can start fresh.
Add to Library: Saves your current layout to the Divi Library for reuse elsewhere.

We’re turning on Undo/Redo and History and leaving the rest off. Undo/Redo is the control you’ll reach for constantly during spacing tweaks, color swaps, and quick layout experiments.

History goes a step further. Instead of stepping back one change at a time, it gives you a visual action timeline for the current session, so you can jump back to an earlier state without hammering Ctrl+Z. Together, these two tools cover the majority of day-to-day reversions without adding clutter to the toolbar.

When you scroll farther down, you’ll also see the Admin Bar option. It’s off by default, which preserves more vertical canvas space. If you want quick access to the WordPress admin toolbar while building, toggle it back on.

That said, the extra canvas space is usually more valuable, especially now that Divi 5 includes tools like the Page Manager for switching pages without leaving the builder, so we’re leaving it off.

Floating Panels For A Flexible Layout

Not every build needs every panel pinned to an edge. On large monitors, floating panels give you a looser, more flexible workspace. Right-click any docked panel and select Undock Panel to free it from the sidebar, then place it wherever it fits best.

To undock non-settings tabs, you can drag them directly onto the canvas. This works especially well when you want your settings panel closer to the element you’re editing instead of forcing your eyes back and forth across the screen.

On a hero section, for example, float the settings panel near the top of the canvas and turn on X-Ray from the left toolbar. X-Ray outlines the page structure so you can see exactly where one element ends and the next begins while keeping the settings panel close to the work area. When you move farther down the page, drag the panel with you.

You can also float multiple panels at once. For example, you might keep Layers and module settings open side by side without sacrificing your docked workspace.

Docking And Tabbing Your Panels

Floating every panel can get messy on complex pages, so the next step is deciding where your most-used panels should live. Settings, Layers, module options, and page settings all need a home, and the way you place them changes how efficiently you move through a build.

Selecting A Default Panel Position

Back in Builder Settings, the Settings Modal Default Position option gives you three choices: Fixed Right Sidebar, Fixed Left Sidebar, and Float. This preference carries over from session to session, so the builder opens the same way each time.

Fixed Right Sidebar is the default. It keeps your canvas on the left and your settings on the right, which feels natural for most workflows, so that’s the setup we’re using here. If you prefer your settings closer to the left toolbar, Fixed Left Sidebar flips the arrangement.

If you need to re-dock a floating panel, drag it toward either edge of the interface and it will snap into place. Drag another beneath it, and it will stack below the first.

Grouping Panels Into Tabs

You can also group panels into tabs during a session. Undock a panel and drag it onto another open panel to combine them into a tabbed stack.

For content-heavy builds, try tabbing Page Settings alongside module settings so you can switch between global page options and element-level controls without losing canvas space.

Docked and floating panels can coexist in the same session without conflicts. Dock the panels you use constantly, and float the ones you need closer to a specific point on the page.

A layout-heavy page might call for Layers next to module settings. A content-heavy page might work better with Page Settings in the foreground. These tab groupings are session-based, which makes them easy to adapt to the page in front of you.

Setting Up Your Responsive Editing Environment

Divi 5’s responsive editing environment is highly configurable, and the way you set it up affects how accurately and efficiently you work across screen sizes. Here’s how to get it right from the start.

Configuring Your Seven Breakpoints

A breakpoint is a screen width where your layout changes to suit a different range of devices. When a visitor crosses that threshold, Divi applies the styles assigned to that breakpoint. Divi 5 includes seven predefined breakpoints:

Phone
Phone Wide
Tablet
Tablet Wide
Desktop
Widescreen
Ultra Wide

Each breakpoint has a default width you can adjust to better match the devices your audience uses.

Only three breakpoints are enabled by default: Phone, Tablet, and Desktop. Click the ellipsis icon next to the device icons in the top bar, open Sitewide Responsive Breakpoints, and you’ll see all seven options with toggles and editable widths. Desktop always remains enabled.

Start by deciding which breakpoints your audience actually needs. If your traffic skews mobile, enable Phone Wide. If you’re building for teams using larger monitors, add Widescreen or Ultra Wide. Just note that changes in the Sitewide Responsive Breakpoints modal don’t apply until you save them.

Once enabled, you can make device-specific changes by switching breakpoints using the device icons in the top bar, the device selector inside element settings, or the Responsive Editor.

One detail worth knowing: if you later disable a breakpoint, Divi keeps the styles assigned to it. Re-enable that breakpoint later, and those styles come back.

Using Canvas Scaling To Preview Screen Sizes

Canvas scaling gives you a live preview of different screen widths without leaving the builder. Drag the edge of the canvas to resize it freely, or type a specific pixel value into the width field in the top bar to jump to an exact size. Divi scales the preview proportionally either way.

Two keyboard shortcuts make this faster: Ctrl + = zooms into the next smaller preview size, and Ctrl + – zooms out to the next larger one within the current breakpoint.

If you build mobile first, set your default breakpoint in Builder Settings so each session opens at the screen size you care about most instead of defaulting to desktop.

Working Faster In The Visual Builder

Divi 5’s Visual Builder packs in a lot of workflow improvements, and the more comfortable you get with its built-in tools, the less time you spend on repetitive actions. These are the habits and features that tend to save the most time during a real build session.

Finding Any Setting With Search And Filtering

Divi 5 modules include a large number of options, and the search bar at the top of each settings panel keeps them accessible. Type a keyword, and matching settings filter down instantly without requiring extra tab switching or scrolling.

The filter button next to search gives you more control. The Modified filter shows only the settings you’ve changed on that specific element. On a page you didn’t build yourself, such as a starter site or a client handoff, that makes it much easier to see what’s been edited already.

Other filters narrow settings by type, including colors, sizes, font families, and font weights.

That means you can skip long lists of spacing controls and jump straight to typography or color. Between search and filters, you spend a lot less time hunting.

Using Breadcrumbs And Drill Down

Losing your place inside a deeply nested element is one of those small frustrations that slows a build down more than it should. Breadcrumbs at the top of the settings panel solve that by tracking your current position in the content tree. Click any breadcrumb to jump back to that level.

The drill-down icon at the end of the breadcrumb trail takes you deeper into the child elements of the currently selected item.

You can also navigate the content tree with the keyboard. Left and right arrow keys move between parents and children, while up and down move between adjacent elements in the same container.

The Page Manager extends that same idea to page-level navigation. Instead of returning to WordPress every time you need to switch pages, you can open, create, duplicate, or delete pages directly inside the builder. On multi-page projects, that keeps your momentum intact.

Keyboard Shortcuts To Use

The arrow-key navigation above is a great start, but Divi 5 includes a broader shortcut system worth using. The right-click context menu shows relevant shortcuts next to many actions as you work, so you can pick them up naturally. Press ? at any time to open the full shortcut reference inside the builder.

A few are worth learning early:

Cmd + K on Mac / Ctrl + K on Windows opens the Command Center.
Cmd + . on Mac opens Preview Mode.
Arrow keys help you move through the content tree without relying on the canvas.

Action	Windows	Mac
Wireframe Mode	Shift + W	Shift + W
Open History	Shift + H	Shift + H
Open Portability Window	Ctrl + Shift + P	Cmd + Shift + P
Add New Section	S + 1 / 2 / 3	S + 1 / 2 / 3
Add New Row	R + 1 / 2 / 3 / 4 / 5	R + 1 / 2 / 3 / 4 / 5
Change Column Structure	C + 1 / 2 / 3 / 4 / 5	C + 1 / 2 / 3 / 4 / 5
Make Row Full Width	R + F	R + F
Copy Module Style	Alt + Ctrl + C	Option + Cmd + C
Paste Module Style	Alt + Ctrl + V	Option + Cmd + V
Copy-Paste Module	Ctrl + C + V	Cmd + C + V
Padding Nudge (1px)	R / S / M + Arrow Key	R / S / M + Arrow Key
Padding Nudge (10px)	R / S / M + Shift + Arrow Key	R / S / M + Shift + Arrow Key

Using Extend Attributes, Inspector, & Find And Replace

Divi 5 also gives you three tools for handling repetitive styling work quickly. Knowing which one to use keeps bulk edits precise instead of messy.

Start With Inspector

The Inspector gives you a high-level view of an element before you edit it. Right-click any element in the Visual Builder and choose Inspect, or click the Inspector icon in the sidebar.

The panel groups what it finds into three tabs: Styles, Content, and Presets. You can inspect a single element or broaden the view to include its child elements, which makes it especially useful for audits, revisions, and imported layouts.

It’s particularly useful during design audits or client revisions, where you want to understand what has been applied before changing anything. Click a value in the Inspector to update matching instances across the inspected selection. Presets behave similarly, making large-scale cleanup much faster.

Use Find And Replace For Known Changes

Find And Replace is the tool to use when you already know what needs to change. Open an element’s settings, click the three dots next to the field you want to edit, and choose Find And Replace. The current value loads automatically. Enter the replacement value, choose a scope, and run it.

The scope options let you target just that element, its parent container, or the entire page. The element type selector narrows things even further, so you can replace padding only in columns or change fonts only in headings. Turn on Only Replace Identical Fields to avoid matching unrelated settings that happen to share the same value.

Use Extend Attributes For Repetition

Extend Attributes is what you use after styling one element correctly and needing the rest to match. Right-click the styled element, choose Extend Attributes, then define the source, target scope, and exactly what should be copied, such as styles, content, presets, or specific option groups.

It can also work across different element types, which makes it far more flexible than simple style copying.

When To Use Which Tool

Used together, Inspector, Find And Replace, and Extend Attributes remove a lot of the repetitive back-and-forth that normally slows styling work at scale. Start with Inspector when you need to understand what’s already there. Use Find And Replace when you know the exact value you want to swap. Use Extend Attributes when you’ve perfected one element and need to propagate that setup across the page. For a deeper comparison, see this post.

Using The Command Center

The Command Center is a keyboard-driven action bar built into the Visual Builder. Press Cmd + K on Mac or Ctrl + K on Windows to open it, type a command, and press Enter. Actions that normally take several clicks become a few keystrokes.

What You Can Do With It

You can use it to add elements, jump to settings, open modals, switch view modes, navigate between pages, and run common page-level actions.

Queueing Commands For Speed

Command queuing is where the real speed gains show up. Press Cmd + Return on Mac or Ctrl + Return on Windows to queue commands without executing them immediately, then press Enter to run the queue. For example, “Blurb > Group > Button + Primary Preset *2” builds the structure and applies the preset to both buttons in a single flow.

Filtering Command Results

To narrow the results list while typing, use “:” followed by a category name. Type “:modal” and the list filters down to modal commands only.

The Best Workspace Is The One You Don’t Fight With

Your workspace should match the way you think, not the other way around. Divi 5 gives you that flexibility across panels, breakpoints, shortcuts, and navigation tools. Dock your panels one way for a layout-heavy page, then rearrange them for a content-heavy build the next day. Float your settings closer to the canvas when precision matters.

The environment can adapt as your workflow changes from project to project. Set up Divi 5 the way you actually work, and the builder starts getting out of your way.

Download Divi 5 Learn More About Divi 5

The post The Optimal Divi 5 Workspace Setup For Power Users appeared first on Elegant Themes Blog.

Elegant Themes Blog

Divi 5.2 Release Notes

What’s New In Divi 5.2?

Composable Settings

Upcoming Divi 5 Features

Focus Editing, Field Presets & New Form Modules

Changelog

Jump Into Divi 5 Today

How To Create Custom Star Rating Modules In Divi 5

What Are Module Groups?

Step-By-Step Guide For Creating A Star Rating Module

Star Rating Module Example 1 (Layered Design)

Set Up The Group Structure

Size The Groups

Add Design Elements To The Circle Group

Style The Star Group

Add The Star Icons

Apply The Module To An Existing Layout

Star Rating Module Example 2 (Basic Design)

Download The Files

Download For Free

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Start Building In Divi 5 Today!

Everything You Need To Know About Divi 5’s New Menu Features

Building Menus In Divi 5

What Is The Link Module?

Key Features

What Is The Dropdown Module?

Key Features

Understanding Menu Loops

Key Features

New Features In Interactions

Selector-Based Targeting

How To Create A Desktop And Mobile Menu

Create The Top-Line Navigation

Create The Dropdown Menu

Create The Mobile Menu

Add Modules To The Mobile Menu

Configure Interactions

Configure The Main Canvas Interactions

Tips And Best Practices

Use Layer View And Admin Labels

Use Responsive Editing Early

Use Variable Manager For Design Consistency

Use Presets To Reduce Repetitive Styling

Plan For Accessibility

Download The Files

Download For Free

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Build Custom Menus In Divi 5 Today!

6 Collages For Divi 5 (Free Download!)

Preview

Download 6 Collages For Divi 5

Download For Free

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

What’s Included (7 Exports)

How To Use The Collage Sections

1. Import Sections Into The Divi Library

2. Add A Collage Section To Any Page

3. Swap The Content

4. Adjust Styles (Optional)

Tips For Effective Collage Layouts

Use A Clear Focal Point

Keep Image Treatment Consistent

Balance Text And Visuals

Use Whitespace Intentionally

Check The Composition On Mobile

Start Building In Divi 5 Today!

Composable Settings for Divi 5 (Hundreds of New Options)

Every Option For Every Element

How To Toggle Design Settings

Enabling Default Settings Using Presets

Try Divi 5 Today

Have You Tried Complete Site Editing Divi 5?

More Divi 5 Updates Are On The Way

How To Build A Floating Image Animation In Divi 5

What We’re Building

Building The Section

Adding The Image Modules

Styling The Cards