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.
You can often optimize Divi layouts by changing the values of different Design options using Divi's Responsive options. However, there are cases when you might need to hide different sections, rows, or modules on different devices:
Desktop
Tablet
Phone
For those cases, you can use the Visibility options
Access the Visibility Options using the Advanced Tab
The Visibility options are located in the Advanced Tab of any element:
Section
Row
Column
Module
Open the element settings by clicking on the Gear icon
Go to Advanced Tab → Visibility
Choose on which device the element should be Disabled on
Access the Visibility Options using the Contextual Menu
Right-click on the element for which you want to access the Visibility options
Click on the Disable option
Choose on which device the element will be disabled by clicking on each corresponding device icon
Notes:
In the example above, the Element is disabled on Phone devices, so it is not visible on those devices.
For more information about Divi's Visibility options, please check the How to Use the Visibility Settings in Divi article.