Skip to main content
All CollectionsDivi 5Options Groups
Understanding the Visibility Options in Divi 5
Understanding the Visibility Options in Divi 5

Learn how to use the Visibility option which provide flexible tools to optimize your modules for any layout or device.

Updated over a month ago

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

  1. Open the Module Settings: Click the gear icon or the module itself to access the settings.

  2. Navigate to the Advanced Tab: Locate the Visibility option group.

Visibility Customization Settings

  1. 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.

  2. 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.

  3. 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.

Did this answer your question?