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:
- Select the Text element
- Click on the Styles tab in the sidebar
- Scroll down to the Visibility option
- Click the Devices icon, then select the Mobile option
- Toggle off the Show icon
- 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.