The Responsive Editor in Divi 5 simplifies how you design for different devices. Instead of switching back and forth between different devices, you can now see the option's value from a unified modal window without actually switching to a specific breakpoint.
Changes made in a selected device view apply only to that device, giving you faster control and fewer steps compared to Divi 4.
The Responsive Editor feature streamlines your workflow, helping you fine-tune layouts, typography, spacing, and module styles for each screen size without leaving the Visual Builder.
Try the Divi AI Agent
The Divi AI Agent can set a value at one breakpoint without disturbing the others, and read the page at phone width and list anything cramped before you decide what to fix.
Open the Divi AI Agent from the Visual Builder sidebar, describe the result you want in plain language, and it inspects your page, makes the changes, and stops for your approval before anything destructive.
Prompt: Set the hero heading to 48px on desktop, 36px on tablet, and 28px on phone.
The AI Agent is part of every Divi AI subscription. See The Divi AI Agent in Divi 5 to get started, and How to Redesign an Existing Layout With the Divi AI Agent for a full walkthrough of this workflow.
Responsive Editor Use Cases
Fine-tuning Text Sizes: Adjust heading or body text for each enabled breakpoint from a single modal window.
Find modified values quickly: See at a glance what setting has additional modified values when the responsive editor icon turns blue.
Streamline the responsive editing: You no longer need to move your mouse to the top of the screen to switch view modes and make responsive changes.
How to use the Responsive Editor
Open settings for the section, row, or module you want to adjust.
Locate the Responsive Editor icon
next to a setting and click it. Review all available states (device, hover, sticky) shown together.
Edit values for any state directly in this panel.
Use Reset in the panel to clear unwanted overrides on a state.
Watch for the icon turning blue - it signals alternate values exist.
(Optional) Toggle the Modified Settings filter to surface all changed settings, then open the editor on any you need to fix.
Quickly Identify And Change Values
Divi 5 Responsive Editor also lets you know that a setting has additional modified values when the responsive editor icon turns blue.
You can easily identify settings with alternate values and quickly modify or reset them in the responsive editor.
