
Joshua Sotomayor
Customer Care - Editor X
,
December 8, 2022
Hiding and displaying elements.
Follow along with customer care expert Josh as he explains how to show or hide different elements to create a custom design at each breakpoint.
How to fine-tune your design per breakpoint by hiding and displaying elements.

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.
Navigate to the breakpoint where you want to hide an element
Select it, then click the 3 dots from the floating action bar to see More Actions. Choose Don’t Display
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 displayed
Open the Layers panel and find the element. To the right of the element you’ll see a gray Hidden icon
Click on the icon to display the element
Tip: 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:
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*
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.


Joshua Sotomayor
Customer Care - Editor X
My name is Josh and I’m on the Editor X Customer Care team. I’ve got a passion for helping other creatives realize their website ideas and dreams. Aside from enjoying getting creative with web design on Editor X, I love playing music, camping and paddleboarding, and exploring different restaurants around the world.
Did you find this lesson helpful?
Thank you for your feedback!
Related learning resources.

VIDEO LIBRARY
Title
Description
▶

LESSONS & EXERCISES
Title
Description
▶

VIDEO LIBRARY
Title
Description
▶

LESSONS & EXERCISES
Title
Description
▶

Ready to start creating?

Top searches
People are searching for
VIDEO LIBRARY
Introducing Editor X
Discover the Editor X workspace. Get an introduction to your advanced layouting tools and an overview of responsive web design features like breakpoints, flexbox and CSS grid.
VIDEO LIBRARY
Getting Started
Learn the basics of creating a site on Editor X. Get a step by step walkthrough covering the key features and capabilities.
LESSONS & EXERCISES
Hover Interactions
Design dynamic web experiences by adding a variety of interactions to any element on hover. Customize the interaction settings for every breakpoint, from transform adjustment to advanced design capabilities and timing control.