Hiding and Revealing Elements

The layer manager can be used in powerful ways to optimize a page layout for different devices.

For example, you could have a large, wide image displayed on desktop, but hide it on mobile devices and instead reveal a smaller, narrower design for mobile. This feature allows you to create a different visual experience based on screen size using the built-in viewports (Desktop, Large Tablet, Tablet, Large Mobile and Mobile).

Here’s how you can do it.

The initial screen in the builder is the Desktop layout. Start by adding all the different viewport layouts onto the builder. In this screenshot you can see, we have a different layout for each viewport available.

After initially adding each element, navigate to the layer manager in the top right hamburger menu.

Then you select each layout for the smaller devices. After selecting each element, it will be highlighted in the layer manager as seen below.

From there, click the “eye” icon to hide these elements intended for smaller devices. You should notice they will disappear while on the desktop view now. (Note: they will remain hidden until un-hidden)

When hiding elements, keep in mind the builder cascades downward. So if you hide an element on desktop, it is hidden on all the remaining viewports below desktop (unless you make that element visible on one of the smaller viewports). Using a combination of the viewports and layers, you can show and hide elements across all 5 screensizes.