The Divi Visibility Options give you control over when elements are visible or hidden.
This is helpful when you want to show or hide certain content based on what device your visitor is using.
Within the Divi Visibility Options, you can show or hide content based on viewport device size. You also have the option to control how you display overflow content.
Inside the Divi Visibility Options, you'll find two different ways to help you gain control over how your design looks and works across all screen sizes.
How To Access Visibility Options
Visibility options are available in all Sections, Rows, Columns, and Modules. There are several ways to access the Divi Visibility Options.
Within the Element's Settings
Click on the gear icon
to open the element's Settings modal windowFo to Advanced → Visibility.
You can disable that element on Phone, Tablet, or Desktop by clicking the corresponding checkboxes.
Right-Click
You can also quickly access the Divi visibility options by right-clicking on the design element.
Disabled Elements Display At 50% Opacity
When you disable an element, it will be displayed at 50% opacity in the Visual Builder when you view it on the specified viewport.
Example: If you choose to hide an element on a Tablet, that element will be at 50% opacity on a tablet preview but at 100% opacity on a desktop preview.
How the Divi Visibility Options Work
The Divi Visibility options include hiding elements on device viewport sizes but also the option to hide or show overflow content.
Disabling an Element on a Device
You can hide elements on a specific device with the Divi Visibility Options. This is helpful when a design element looks great on a desktop but not on mobile devices.
In this case, you can use the Divi Visibility Options to hide that element on Phone and tablet devices.
To disable an element per device, click the checkbox next to the device you want the element disabled on.
Device Viewport Sizes
Divi determines device viewport sizes (the width of the device) as follows:
Desktop - Devices with a viewport width
981pxor biggerTablet - Devices with a viewport between
980pxand768pxPhone - Devices with a viewport less than
767px
Setting the Content Overflow of Elements
In CSS, everything is in a box. When content goes outside of that box, it's called overflow.
There are two types of overflow:
Vertical (the y-axis)
Horizontal (the x-axis).
Within the Divi Visibility Options, you can choose how you display overflow content.
Setting the overflow property determines what happens to the overflow content (whether it's hidden or a scroll bar appears).
Take a look at the visual aid below for a demonstration of the overflow property options:
Default
Visible
Scroll
Hidden
Auto
Horizontal Overflow
Horizontal overflow is when the content exceeds the x-axis of its parent element (the content is too wide for the container it's in).
This can occur when the parent element has a specified Width or Max Width that is too small to contain all the content.
Setting an element’s horizontal overflow determines what should happen if the content overflows an element’s container on the X-axis (the horizontal axis).
Default and Visibler - The overflow content is not clipped. It will render outside of the element’s container.
Scroll - A scroll bar will appear for the overflow content.
Hidden - The overflow content is clipped and invisible.
Auto - If overflow content is clipped, a scrollbar should appear to see the rest.
Example: The example below shows text content too wide for the parent element with a max width of 600px. Below are two examples of horizontal overflow: hidden and scroll.
Vertical Overflow
Vertical overflow is when the content exceeds the y-axis of its parent element (the content is too tall for the container it's in).
This can occur when the parent element has a specified Height or Max Height that is too small to contain all the content.
Setting an element’s vertical overflow determines what should happen if the content overflows an element’s container on the Y (vertical axis) axis.
Default and Visible - The overflow content is not clipped. It will render outside of the element’s container.
Scroll - A scroll bar will appear for the overflow content.
Hidden - The overflow content is clipped and invisible.
Auto - If overflow content is clipped, a scrollbar should appear to see the rest.
Example: The illustration below shows a text module with a height of 150px and a vertical overflow set to scroll. Here, you can see that the content is too long for the box, so a scroll bar shows the rest.
Tips & Best Practices for Using Divi's Visibility Options
Simplify Mobile Design
What looks great on desktops sometimes may need to look better on mobile.
Elements can become smushed, too small, and not render well. Simplifying your design for mobile devices is easy with the Divi Visibility Options.
Check out the example below. Here, we have a section designed with two images and a body of text beneath it.
On mobile, stacking two images on one another is not necessary and takes up too much visual space on small mobile devices.
Disabling one image from showing on mobile devices delivers a simplified version of your design that looks great for mobile.
