The Avada Visibility System

Last Update: December 3, 2025

Avada has an intuitive Visibility System for all Design Elements that you use on your website (not to be confused with Avada Conditional Rendering). This easy-to-use system lets you choose when Elements are displayed and when they are hidden, based on the screen size where they are viewed.

For example, if you want a section of your page to display only on mobile devices and not on desktops, our Visibility System lets you do so effortlessly. Continue reading below to learn more about Avada’s Visibility System.

Container, Column, and Element Visibility

The ‘Visibility’ option is available for all Avada Design and Layout Elements, including Containers and Columns. This option is called ‘Container Visibility’ for Containers, ‘Column Visibility’ for Columns, and ‘Element Visibility’ for all other Elements. By default, visibility is set on all three screen sizes, but you can turn on or off any number of screen sizes in the options.

How To Use The Element Visibility Options

Step 1 – On any Container, Column, or Element, locate the ‘Element Visibility’ option and select which screens you’d like to display the element for. You can choose more than one option, but at least one must be specified. If you want to hide a container completely, use the ‘Container Publishing Status’ options instead.
Step 2 – Once finished, click ‘Save’.

Expert Tip – The Container Visibility option will be disabled/hidden when using the 100% Height option for Containers.

Container Publishing Status Options

These options are available only in Containers and are another helpful tool for controlling the visibility of Elements within the Container. This can be very useful with seasonal content.

There are four states a Container can have:

Published – the Container is visible. This is the default.
Publish After – Conversely, if you select this, you can select a date, on which the Container will go from Draft to Published. This is useful to automate publishing of seasonal content.
Published Until – If you choose this, you can then select a date, on which the Container will revert to Draft status, and only be then visible to logged-in users with the capability to publish posts.
Draft – If you select draft, the Container is temporarily invisible, except to logged-in users with the capability to publish posts.

Element Responsive Breakpoints

When you navigate to the Avada > Global Options > Responsive tab, you can set responsive breakpoints for small, medium, and large screens and specify when your site switches to a different screen visibility. For example, if you set 640 pixels for the Small Screen’s custom width settings, then when your site is viewed at a resolution of 640 pixels or lower, any Element with the ‘Small Screen’ option enabled will display.

How To Set Element Responsive Breakpoints

Step 1 – Navigate to the Avada > Global Options > Responsive panel.
Step 2 – On this panel, locate the ‘Element Responsive Breakpoints’ section.
Step 3 – Set the Small Screen’s custom width by entering a value in the text box, or by dragging the slider. When your site is viewed on a resolution that is less than or equal to the width set on this field, then the small screen visibility will take effect.
Step 4 – Set the Medium Screen’s custom width by entering a value in the text box, or by dragging the slider. When your site is viewed on a resolution that is less than or equal to the width set on this field, then the medium screen visibility will take effect.
Step 5 – The Large Screen’s custom width is automatically filled in depending on what width you’ve entered for the Medium Screen option. When your site is viewed on a resolution that is greater than the Medium Screen width, then the large screen visibility will take effect.
Step 6 – Once finished, click ‘Save Changes’.

Element Sticky Visibility Option

You can find the Element Sticky Visibility option in some Elements. This is a dependent option that appears only when the parent Container is set to Sticky. It allows you to determine when the Element will be visible based on whether the Container it is in is in Sticky mode. You can choose from Normal and Sticky visibility, and by default, they are both selected, meaning the Element is always visible. But if you deselect the Normal option, the Element will ONLY be visible when the parent Container is in Sticky mode.

This can be used in many creative ways, particularly with Header Layouts, but generally as well. The Column Element also has this option. In the above example with an individual Sticky Container, you would set the Column Element Visibility to sticky only, so the entire Column would display only when the parent Container entered Sticky mode.

An example of this technique can be seen in New Header 5, one of the Prebuilt Headers for Layouts. In this Layout, as shown below, there are two Containers, with the second set to Sticky. The two outside Columns on the second Container have their Element Visibility set to Sticky only. In the normal state of the Container, these two Columns and the Elements within them are not visible. Still, when the Sticky Container activates, the logo and the Woo Menu suddenly appear in the Container.

Currently, this option is only available for the following Elements: Columns, Nested Columns, Alert, Breadcrumbs, Button, Icon, Image, Menu, Search, Separator, Sharing Box, Social Links, Title, and Text Block.

Normal Container

Container in Sticky Mode