Divi 5 visibility options let you decide when an element is shown or hidden based on the visitor’s device.
You can disable any section, row, column, or module on specific devices so your layout can change structure on tablet and phone without breaking the desktop design.
The visibility controls live in a dedicated Visibility option group. Here you can:
Disable the element on Phone, Tablet, or Desktop, or any other custom breakpoint.
Control horizontal and vertical overflow (how extra content is handled if it exceeds the element’s box)
Divi 5 also uses customizable responsive breakpoints. By default, three breakpoints are active: Phone, Tablet, and Desktop.
In the Visual Builder, elements that are disabled on the current device preview appear at 50% opacity so you can still find and edit them without them showing on the live page for that device.
Where to find the visibility options
You can set visibility on any section, row, column, or module from its settings modal → Advanced Tab → Visibility.
Using the Advanced tab
Hover over the element you want to control and click the gear icon or click on it to open its settings.
Go to the Advanced tab.
Open the Visibility option group.
Under Disable On, check the devices where you want this element to be hidden (Phone, Tablet, Desktop).
Save your changes.
If you hide an element on a phone and Tablet, it will still be fully visible on a desktop.
When you switch the builder preview to Phone or Tablet, that element will appear at 50% opacity to remind you it is disabled for that device.
Previewing visibility in the Responsive Editor
Divi 5’s Responsive Editor and preview system make it easier to see where elements are hidden:
Use the device icons in the top bar to switch between Desktop, Tablet, and Phone previews or anyother custom breakpoints you have defined.
As you switch devices, any elements disabled for that breakpoint will fade to 50% opacity.
You can still click them to open settings and adjust visibility or other styles.
This workflow helps you quickly confirm which version of a section is active for each device.
Device breakpoints in Divi 5
Divi 5 ships with seven possible breakpoints, but only three are enabled by default: Phone, Tablet, and Desktop.
You can enable extra breakpoints like Phone Wide, Tablet Wide, Widescreen, and Ultra Wide if you need more granular control.
By default:
Phone covers the smallest screens
Tablet covers the mid-range
Desktop covers larger screens
You manage which breakpoints are active and their widths in the Sitewide Responsive Breakpoints modal.
Visibility options respect those breakpoints, so if you adjust them globally, your Disable On choices follow the new ranges.
Best practices for using visibility in Divi 5
A few simple rules keep visibility usage clean and understandable:
Prefer one desktop version and one mobile version
Duplicate sections only when you really need different structures. Keep the number of versions small so layouts stay manageable.Use clear labels
Rename sections and rows with admin labels like "Hero – Desktop" and "Hero – Mobile" so you always know which is which.Combine visibility with responsive styling
Use visibility when the layout structure truly needs to change. For smaller tweaks (font sizes, spacing), use the Responsive Editor and design settings instead of duplicating elements.Check overflow when elements are clipped
If content is being cut off, use the Horizontal Overflow and Vertical Overflow options in the Visibility group to choose Visible, Hidden, Scroll, or Auto, so the module behaves correctly on small screens.
Used carefully, the visibility settings in Divi 5 give you precise control over what each device sees, while still keeping your layouts easy to maintain.