The Responsive Editor in Divi 5 simplifies how you design for different devices. Instead of switching back and forth on 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.
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.
