Use Screen Settings to create unique experiences across devices. Each element's styles and visibility can be independently edited for Desktop, Laptop, 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 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
Scroll down to the Visibility style menu in the right sidebar
Disable the toggle next to the Mobile option
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.