All Collections
Getting Started
Next Steps
Use screen settings to create unique page viewing experiences across devices
Use screen settings to create unique page viewing experiences across devices

Screen settings allow you to adjust your design for widescreen, desktop, tablet, and mobile views.

Updated over a week ago

Use Screen Settings to create unique experiences across devices. Each element's styles and visibility can be independently edited for Widescreen, Desktop, Tablet, or Mobile screen sizes.

How to Toggle Between Device Views

You can preview your content at common device sizes using the toggles at the top of the editor. We recommend checking these views throughout the page building process to help ensure everything is looking good and as expected for all screen sizes.

Where to Change an Element's Screen Settings

The Screen Settings feature allows you apply different style settings to elements based on different screen sizes. Once an element is selected, click on the Styles tab in the editor's sidebar. Click on the Devices icon next to the style you'd like to edit. This will give you the option the apply styles specifically for desktop, laptop, tablet, or mobile-sized screens.

Hiding and Showing Elements Based on Screen Size

 If you'd like to set an element to be hidden on a specific screen size, the Show toggle in the Visibility style setting can be used. Disabling the toggle will hide the element from the selected screen size.

In the above example, the text in the hero was set to be hidden on mobile. The following steps were taken to achieve this:

  1. Select the Text element

  2. Click on the Styles tab in the sidebar

  3. Scroll down to the Visibility option

  4. Click the Devices icon, then select the Mobile option

  5. Toggle off the Show icon

  6. When previewing each device view, you'll now see the Text element is no longer visible on mobile, but is still present in other views.

Did this answer your question?