Studio Editor: Designing Across Breakpoints

The Studio Editor lets you tailor sites per breakpoint, so they always look great. Breakpoints are screen size ranges, representing the possible screens and devices that visitors tend to use (e.g. tablet, mobile).

The design you create on desktop trickles down to tablet and mobile. However, you can create overrides to make the design fit smaller screens. Click a breakpoint icon at the top to get started. 

The Studio Editor comes with 3 built-in breakpoints, which you can customize and re-define at any point:

You define the breakpoints separately for every site page and every global section. This means that a global section and the page it's on can have completely different breakpoints. 

For example, the page below has 5 breakpoints defined:

... While the global header on that page has 3 breakpoints defined: 

The Studio Editor uses a cascading concept when it comes to designing across breakpoints. Changes you make on larger breakpoints trickle down to smaller breakpoints, but changes on smaller breakpoints don't affect larger breakpoints. 

For example, a button that is designed to be purple on desktop is automatically purple on tablet and mobile. If you change its color on mobile, the button is still purple on tablet and desktop.

Some types of actions automatically apply to all breakpoints, and cannot be customized to a certain viewport.

When editing the content of an element, you're effectively changing its data. For example, changing an element's link or the source of an image applies to all breakpoints. 

Another example is when you replace or delete elements from the page – the element is automatically replaced / deleted on all breakpoints.

Changes to an element's place in the hierarchy of your page. For example, when you stack elements together or move an element to a different cell, you're changing the page structure and it is reflected across all breakpoints. 

An override occurs when you make changes to an element's design on a specific breakpoint. Meaning, it no longer draws design values from the larger breakpoint above it. However, these overrides do trickle down to smaller breakpoints.

There are 2 types of overrides you can create:

You can always reset the design and layout of an element back to its properties on the largest breakpoint.

The properties of the element on smaller breakpoints are not affected, just the breakpoint that contains the element that you are reverting back. For example, if you're removing overrides on tablet, it does not affect mobile.