Visibility

To hide an element, select the box that element is located within. Then in the visibililty panel, click on its correlating rectangle within the panel. A hidden element is shown as a collapsed rectangle with a gray border.

​

Examples

Visibility is most commonly used when designing for different devices. One example is for sections where the placement of an image on desktop is not ideal for mobile. You can hide the image on mobile and replace it with a different image that is optimized for that device.

In this example, there are two icons for the middle feature section. The first icon is hidden on desktop and the second icon is hidden on mobile.

​

Pro tips

You can utilize visibility to deliver completely different content experiences between devices. Simply add all of the content you would want to show and utilize the visibility property per device to customize each experience.

In this example, the desktop feature section is hidden on mobile and the mobile feature section is hidden on desktop.

​

Developer notes

Hiding elements using the visibility control still loads it on a page, keep this in mind when taking into account your page performance.