How to hide & display elements per breakpoint

Why hide elements?

Depending on your design, you might want elements such as images, text and buttons to appear at a certain breakpoint, but not at others. The ability to hide or display elements gives you that control.

On Editor X, design changes you make at larger breakpoints trickle down to smaller ones, but changes at smaller breakpoints won’t affect the breakpoints above. This is known as the cascading rule.

The cascading rule has some exceptions. Changes to a site’s data or structure affects all breakpoints. This means:

• Deleting an element will remove it from all breakpoints

• Rewriting text and changing an image or link is reflected at all breakpoints

To remove or replace an element at certain breakpoints, you can hide the original element, add a new one and customize it as needed.

How to hide elements.

1. Navigate to the breakpoint where you want to hide an element

2. Select it, then click the 3 dots from the floating action bar to see More Actions. Choose Don’t Display

3. Alternatively, you can open the Layers panel, then click the dots beside the element and choose Don’t Display from there

Note: Hiding an element cascades down. If you want the element to appear at smaller breakpoints, you’ll need to unhide it there.

How to unhide elements

Go to the breakpoint where the element is not displayedOpen the Layers panel and find the element. To the right of the element you’ll see a gray Hidden iconClick on the icon to display the elementTip: Keep your layers panel organized by renaming elements to indicate which breakpoints they’re displayed or hidden on. Double-click the element in the Layers panel to give it a new name.

Replacing elements at different breakpoints

When you want to replace or edit the content of an element, follow these steps:

1. At the desired breakpoint, select and hide the original element. If you’re keeping the original element’s style, you can duplicate it first and then hide it*

2. Add a new element in its place and customize as needed

*Note: When adding a new element to a smaller breakpoint (e.g., mobile), it's automatically set to Don’t Display on larger breakpoints (e.g., tablet). The exception is when you duplicate an existing element. If you duplicate an element at one breakpoint and then customize it, remember to go back and hide it at other breakpoints where you don’t want it displayed.