Ensuring your website looks great and functions well on all devices is essential for providing a positive user experience. Divi’s Visibility Options allow you to customize and optimize your layout for smaller screens, such as tablets and mobile devices.
In this article, we will guide you through the process of using Divi's Visibility Options to display different layout structures on smaller screens.
Notes:
Divi uses the following Breakpoints to define a device:
Desktop - devices that have a browser viewport larger than 980px
Tablet - devices that have the browser viewport between 768px and 981px
Phone - devices that have the browser viewport less than 768px
The visual Builder will display Elements hidden on a device at 50% opacity.
Divi Builder offers the option to hide your chosen element (Section, Row, Column, or Module) on any of the above devices.
Accessing the visibility options can be achieved in two different ways:
By Accessing the Element's Settings → Advanced Tab → Visibility
By right-clicking on an element and choosing the Disable option from the Contextual Menu
Accessing the visibility options using the Advanced Tab
Open the Element's settings by clicking on the Gear icon
Go to Advanced Tab → Visibility
Choose on which device the element will not be Visible
Example: In this example, the Heading module is not visible on the phone or tablet. That means the module will not be visible if the device used to browse the page has a viewport (the screen) size less than 981px.
Accessing the visibility options using the Contextual Menu
Right-click on any element in your page layout
From the Contextual menu, choose the Disable option
Choose on which device the element will not be visible
Example: In this example, the Row has been right-clicked and was set to not be visible on Phone and Tablet devices. That means if the viewport (screen) size of the device used to browse the page is less than 981px, the Row will not be visible.
Example of how to use the Visibility Options
Let's assume that in your page layout, you have a Section that contains two Rows. Each Row has two Columns. In the first Row, Column 1, you have a background image, and in Column 2, you have a piece of text.
In the second Row, Column 1, there is a piece of text, while in Column 2, there is a background image.
On the Desktop, the layout would be as shown in this screenshot:
However, on Tablet and Mobile, you will get a layout that is not quite correct:
Note: The columns are not stacked.
To fix this, we can use the Visibility options. First, we need to duplicate the section that contains the two rows and use the Visibility options to set the original section to only be visible on the desktop:
And the duplicate version to only be visible on tablets and phones:
With that setup, we can then change the column orders in the duplicated section to create a better layout for Tablets and Phones. The result on Tablet and Phone will be:
