top of page
Round image of the author with a thin blue line around the image

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.

  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.

  1. Go to the breakpoint where the element is not displayed

  2. Open the Layers panel and find the element. To the right of the element you’ll see a gray Hidden icon

  3. 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:

  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.

How to fine-tune your design per breakpoint by hiding and displaying elements.
Why hide elements?
How to hide elements.
How to unhide elements.
Replacing elements at different breakpoints.
Round image of the author with a thin blue line around the image

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

Watch Now

LESSONS & EXERCISES

Title

Description

Start Lesson

VIDEO LIBRARY

Title

Description

Watch Now

LESSONS & EXERCISES

Title

Description

Start Lesson

Ready to start creating?

Search icon
Home icon
LESSONS & EXERCISES
Arrow down icon
VIDEO TUTORIALS
Arrow down icon
External link icon
External link icon
ACADEMY MENU ▶
Search icon

Top searches

People are searching for

Video tutorial introducing the Editor X workspace with an overview of the responsive layouting and design tools.

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 introducing the Editor X workspace with an overview of the responsive layouting tools and design capabilities.

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.

Thumbnail indicating interactions. Orange background with a shaded orange container over it. In the middle of the container is a white logo.

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.

See all results ▶
bottom of page