Visibility

Not every element belongs on every screen. You can hide an element on phones, show a different logo in dark mode, keep a draft section off the live site, or show an element only to some visitors. This page shows the ways to control visibility, from the simplest to the most flexible.

Hide on a device

Select the element, open Behaviour → Visibility and turn on Hide on desktop, Hide on tablet or Hide on mobile.

A common pattern is two versions of one section, for example a large image slider for desktop and a simple image for phones: hide the first on mobile and the second on desktop and tablet.

In the editor, a hidden element stays visible on the canvas so you can still edit it.

Hide in dark or light mode

With dark mode on, Hide in dark mode and Hide in light mode let you show different elements per color scheme. For example, add a dark logo and a light logo to your header, hide the dark one in dark mode and the light one in light mode.

Hide on the site, keep in the editor

To take an element off the live site without deleting it, for example a section you are still working on, hover its row in Layers and click the eye (Hide on the site). It shows faded and grey on the canvas and is not output on the live page. Click the eye again to bring it back.

Show only under conditions

Behaviour → Conditions decides on the server whether the element is part of the page at all, based on rules such as:

• the visitor is logged in or out, or has a certain role;
• a date or time range, or days of the week (for example opening hours or a limited offer);
• a URL parameter such as utm_campaign, the referring website or a cookie;
• the kind of page, the post type, a category or a custom field;
• the browser, operating system or language.

Rules in one set must all match; add Or another set for alternatives. The editor always shows the element. See Display conditions for elements.

Show after a click or a scroll

To reveal an element when visitors click a button or scroll, turn on Start hidden in Behaviour → Interactions and show it with an interaction. See Interactions.

Which one to use

Related