The Visibility options in Divi give you control over when and how a module is displayed and how it handles content overflow. These settings are essential for optimizing the user experience across different devices and layouts.
Where to Find the Visibility Options
Open the Module Settings: Click the gear icon or the module itself to access the settings.
Navigate to the Advanced Tab: Locate the Visibility option group.
Visibility Customization Settings
Disable On:
Choose to hide the module on specific devices:
Phone
Tablet
Desktop
Check the box for any device where the module should be hidden.
Horizontal Overflow:
Control how the module handles content that overflows its left and right edges:
Visible: Displays overflowing content outside the module.
Scroll: Adds a horizontal scroll bar for navigating the overflow.
Hidden: Hides the overflowing content.
Auto: Let the browser decide whether to display a scroll bar.
Vertical Overflow:
Manage content that overflows the top and bottom edges of the module:
Visible: Displays overflowing content below the module.
Scroll: Adds a vertical scroll bar for navigating the overflow.
Hidden: Hides the overflowing content.
Auto: Let the browser decide whether to display a scroll bar.
Best Practices for Using Visibility Options
Device-Specific Content: Use the Disable On option to hide modules with large images or detailed content that might not display well on smaller screens.
Manage Overflow: Set overflow to Scroll for modules containing tables, text blocks, or images that might exceed the module's dimensions.
Test Responsiveness: Preview changes on different devices to ensure your settings enhance user experience without hiding critical content.
The Visibility options provide flexible tools to optimize your modules for any layout or device, ensuring your site remains user-friendly and visually appealing.