Setting up device visibility of sections and elements

There is an option to set up Device visibility that is to select which devices will display a particular section or element:
— all devices
— PC only
— mobile devices only

It is often useful if you are creating a site for different devices.

For example, you have a section that looks great on PCs but is not suitable for mobile devices.

It’s convenient to browse menu tabs on the large screen.

But the same menu looks differently on a small smartphone screen. Logically the photo should display the first menu item but the image doesn’t actually match the content.

In this case, it's better to select visibility on PC only and make an alternative section with the menu for mobile devices.

You won’t have to create two sites (for PCs and mobile devices) as it will be enough just to set up visibility of each section for different devices.

When Device visibility is enabled in a section, a green device icon appears in the top right corner.

Sometimes there is no need to change the whole section — it’s sufficient to hide or add an element. Moreover, the number of sections influences the page load time so it’s always preferable to set up an element instead of duplicating a section.

For example, a Call button on the first screen is useful only on mobile phones because it enables customers to place orders using their smartphones.

If a customer is using a PC, it’s most likely that an order will be submitted on the site; and if they decide to make a call, they will dial a number. That’s why the Call button is unnecessary on PCs: it’s advisable to hide it on PCs and set up its visibility on mobile devices only.

There is an option to set up Device visibility for any element. To do that, click on the “…” icon in the top right corner of the required element.

When Device visibility is set up, a green device icon appears in the top right corner of this element.