Skip to main content

Have questions? I can help!

< All Topics
Print
Table of Contents

When to use visibility options

Sometimes you need to change the visibility on any section, row or module. This comes handy if you don't want to show any of the template elements on your website but you don't want to delete it from your template.

Visual Builder offers the option to hide your chosen modules on specific devices. These devices and their respective sizes (viewport width) are as follows:

Desktop: 981px or bigger
Tablet: 980px and not smaller than 767px
Phone: 767px or less

Note: Modules that are hidden on a device will display at 50% opacity in the Visual Builder.

Divi's visibility options allow you to control when and how a module is displayed and how it handles content overflow. These settings are essential for optimising the user experience across different devices and layouts.

Divi 5 - Visibility Option Group

Where to Find the Visibility Options

  1. Open the Section/Row/Module Settings i: Click the gear icon or the module itself to access the settings.
  2. Navigate to the Advanced Tab: Locate the Visibility option group.

Visibility Customisation 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.

Note: The option is available on all sections, rows and content modules, except for columns.