Conditional Rendering vs Visibility Options in Avada

When you’re building responsive layouts in Avada, you’ve got two tools that can look similar—but behave very differently under the hood – Visibility Options and Conditional Rendering. Let’s have a look at the core differences between conditional rendering and Element visibility options in Avada, and when to use them. Also, watch the video below for a visual overview.

The Element Visibility option is found on all elements, including columns and containers. So, when you hide an element or a section on a specific screen size, you’re not removing it; you’re just hiding it with CSS. So the content still loads. The browser still processes everything. It’s not necessarily as efficient as the page can be in terms of code loading – but it is convenient and predictable. And because every visitor gets the exact same HTML, that makes it completely safe for caching, even when using full-page caching.

This method is often used in header Layouts, where a column or container is duplicated and then hidden on desktop and tablet, while the original element is hidden on mobile. This way, a separate column or container can be designed just for mobile.

Now Conditional Rendering works differently. This is also found on all elements, on the extras tab, and one of the conditions it can render on is based on device type.

Using this condition to render content based on screen size is very efficient. It doesn’t hide content; it prevents it from being rendered in the first place. If a condition isn’t met, that section simply doesn’t exist. No markup and no unnecessary assets, which is great for performance.

Device-type conditional rendering is superior performance-wise for uncached sites, or for sites using asset caching and/or object caching.

So there is not one right workflow, as it depends both on your view on hiding content on some screen sizes, and potentially paying a small performance hit, or having full-page or HTML caching correctly configured to handle conditional rendering.

Generally, conditional rendering is a better approach especially for heavy components, like sliders, videos or other components you don’t want on mobile. And Element visibility is fine for small responsive changes and lightweight elements.

Don’t hide everything by default. But don’t conditionally render everything either. Use the right tool for the job.