Divi Responsive Helper

Disable Inline Content Editing Per Breakpoint

By default, Divi allows content to be edited independently on each responsive breakpoint. In other words, if you edit text or replace media while viewing a specific breakpoint, those changes apply only to that breakpoint. While powerful, this can easily lead to accidental breakpoint-specific changes to text or images.

This feature allows you to disable inline content editing on selected breakpoints, so content changes can only be made where you intend them.

How To Configure The Settings

Go to the feature settings in the Responsive Content Editing tab to the Responsive Content Control subtab. Locate the settings to disable inline content editing, and enable the toggle for each breakpoint you want to disable editing. It’s recommended to enable this on all breakpoints except desktop, so that you can make all your content edits from a single, consistent breakpoint while preventing accidental changes to the others.

What You’ll See In The Builder

Open the Divi 5 Builder and switch to a breakpoint where inline content editing is disabled. Select a module that contains text or media, open the module settings, locate a content field such as a text input or textarea, and observe the changes:

• Text and content fields appear grayed out
• Inline editing is blocked
• Content cannot be modified until you switch to an allowed breakpoint

This makes it immediately clear that content editing is intentionally disabled and prevents accidental changes.

Disable Hover State Editing

Divi’s Hover state allows content to be edited while previewing hover styles, but these edits affect the front end. For example, if you change some text while the hover option is selected, you could accidentally make the text change on the frontend when hovering over the text. This behavior is easy to miss and can lead to unintended changes.

This feature lets you disable content editing while viewing the Hover state, since it’s quite unusual to need content changes on hover.

How To Configure The Settings

Go to the feature settings in the Responsive Content Editing tab to the Responsive Content Control subtab. Locate the settings to disable hover-state editing. The first setting is a simple on/off toggle, which disables inline text editing when hover is selected, and the second is a dropdown to choose how the hover field appears in the Responsive Editor window.

What You’ll See In The Builder

Open the Divi 5 Builder and select the Hover option from the dropdown menu that appears in any section, row, and module beside the Content, Design, and Advanced tabs.

This activates the hover state for all supported settings. Select a module that contains text or media, open the module settings, locate a content field such as a text input or textarea, and observe the changes when the hover state is active:

• Text and content fields appear disabled and grayed out
• Inline editing is blocked

This makes it immediately clear that hover mode is disabled and should be used strictly for styling, not content editing.

Control Fields In The Responsive Editor Window

When you hover any content field in a module, such as a text input field, you will notice a small responsive icon. Clicking on this icon opens the Divi’s Responsive Editor popup, which is where all breakpoint-specific fields are displayed together.

The Responsive Editor pop-up window is designed to make it easier to edit multiple breakpoints without clicking each one individually, reducing the number of clicks. However, this can be confusing, as it shows all fields, and it could lead users to think they need to change each one. In reality, text should almost never be edited for each breakpoint, so seeing all the fields here can make it confusing and lead to mistakes.

Divi Responsive Helper lets you control how fields behave inside the Responsive Editor on a per-breakpoint basis.

How To Configure The Settings

Go to the feature settings in the Responsive Content Editing tab to the Responsive Content Clarity subtab. Locate the settings related to the Responsive Editor window. There you will find a dropdown for each breakpoint, with options to choose how you want each breakpoint to appear (or not appear) in the Responsive Editor window.

For each breakpoint, choose one of the following options:

• Default — the field will appear and behave normally, remaining editable by default.
• Gray Out — the field will be visible but disabled and grayed out 50% opacity, with a tooltip indicating you cannot edit them.
• Hide — the field will be completely removed and hidden from the Responsive Editor.

Select the option the desired option for each breakpoint, and save the settings.

What You’ll See In The Builder

Open the Divi 5 Builder, select a module that contains text, open the module settings, locate a content field such as a text input or textarea, and click the responsive icon. This opens the Responsive Editor window. When opening the Responsive Editor, you will see:

• Default breakpoints are accessible and editable, like usual
• Disabled breakpoints are visibly restricted
• Hidden breakpoints are fully hidden

The editor is now easier to scan and safer to use. This allows you to guide editing behavior without overwhelming the user. The screenshot below shows some examples of fields disabled and other are completely hidden.

Make Breakpoint Switching Intentional

Divi 5 allows you to switch between responsive breakpoints quickly using the icons in the builder toolbar. While this is convenient, the small icons can sometimes make it difficult to see which breakpoint is currently active, and it can also be easy to switch breakpoints accidentally.

Divi Responsive Helper includes two features that make breakpoint switching clearer and more intentional while working in the builder. You can either highlight the active breakpoint icon using the builder’s accent color or replace the icon bar entirely with a clearly labeled dropdown selector that shows the current breakpoint name.

Both approaches help you stay aware of the device context you are editing, reducing the chance of making changes on the wrong breakpoint.

Replace Breakpoint Icons With A Dropdown Selector

If you want an even clearer way to switch breakpoints, you can replace the icon bar entirely with a labeled dropdown selector.

To enable this feature:

1. Go to the Responsive Content Editor tab to the  Responsive Content Clarity subtab.
2. Enable the Replace Breakpoint Icons With Dropdown Selector setting.

After enabling this setting, the breakpoint icons in the builder toolbar will be replaced with a Current Breakpoint dropdown.

The dropdown displays the full breakpoint name along with the icon, making it much easier to see which device is currently active. You can click the dropdown to quickly switch between breakpoints. This dropdown also replaces the small three-dot breakpoint menu, bringing all breakpoint controls into a single, clearer interface.

 Highlight The Active Breakpoint Icon

If you prefer to keep Divi’s default breakpoint icon bar, you can enable a visual highlight to make the active breakpoint much easier to see.

To enable this feature:

1. Go to the Responsive Content Editor tab to the Responsive Content Clarity subtab.
2. Enable the Highlight Active Breakpoint Icon In Builder setting.

Once enabled, the currently active breakpoint icon in the builder toolbar will be highlighted using the Divi builder accent color.

This makes the selected breakpoint stand out clearly against the dark builder interface so you can immediately see which device view you are editing.

Responsive Content Change Indicators

In Divi 5, content can be edited independently on each responsive breakpoint. In other words, if you edit text or replace media while viewing a specific breakpoint, those changes apply only to that breakpoint. While powerful, this can easily lead to accidental breakpoint-specific changes to text or images.

There is no built-in way to clearly see when content differs across breakpoints, which can lead to inconsistent content across devices.

This feature adds a responsive indicator badge inside the module settings whenever content differs from the Desktop value. The badge appears next to the module title and option group titles.

How To Configure The Settings

Go to the feature settings in the Responsive Content Editing tab to the Responsive Editing Clarity subtab. Locate the settings for responsive content indicators and enable the toggles.

What You’ll See In The Builder

Open the Divi 5 Builder and select a module, then open the module settings. If content differs across breakpoints, a responsive indicator badge appears next to the module title and option group titles. When interacting with the badge, a tooltip displays which fields have different values and shows those values across each breakpoint.

Improve Clarity In The Responsive Editor Window

The Responsive Editor window in the Divi 5 Builder relies on tiny icons to indicate breakpoints, which can be hard to see and interpret at a glance. It’s very easy to be confused about which breakpoint a field belongs to, or which one is currently active.

Confusing, isn’t it? To solve this, the Divi Responsive Helper adds several features to improve clarity and confidence while editing.

How To Configure The Settings

Go to the feature settings in the Responsive Content Editing tab to the Responsive Content Clarity subtab. Locate the settings related to improving clarity in the Responsive Editor window. There you will see three separate settings to enable labels, color highlighting, and a badge.

Display Breakpoint Label Beside Each Field

Enable this setting to show the name of each breakpoint next to the field in the Divi 5 Responsive Editor (e.g., “Desktop – Body”, “Tablet Wide – Body”). Instead of relying only on icons, fields are clearly labeled, making it much easier to understand which breakpoint each field applies to and preventing confusion and accidental content changes on the wrong device.

Show “Current” Badge On Current Breakpoint

Enable this setting to display a small “Current” badge next to the active breakpoint’s field label inside the Responsive Editor. This adds an additional visual cue, making it unmistakably clear which breakpoint is currently selected when multiple breakpoint fields are visible.

Show Builder Color Highlight On Current Breakpoint

Enable this setting to visually highlight the active breakpoint field using the Divi builder’s accent color. When working in the Responsive Editor, the currently active breakpoint is highlighted, directing your attention to the correct field and reducing the risk of editing the wrong breakpoint.

What You’ll See In The Builder

Open the Divi 5 Builder, select a module that contains text, open the module settings, locate a content field such as a text input or textarea, and click the responsive icon. This opens the Responsive Editor window. When opening the Responsive Editor, you will see:

• Helpful, clear breakpoint labels on each field
• The current breakpoint is highlighted with the builder accent color
• A “current” badge indicating the current breakpoint

These improvements are small, but super helpful, and we hope you enjoy them!

Using These Features Together

These settings are designed to work together, not replace one another. A common workflow might include:

• Allowing content edits only on Desktop
• Blocking inline edits on mobile breakpoints
• Graying out restricted fields in the Responsive Editor
• Turn on responsive content change indicators
• Enabling breakpoint labels, highlights, and the Current badge for clarity

Together, these tools make responsive content editing in Divi 5 far more predictable and less error-prone.