I agree, instead of hiding the div or item with the display setting, which actually changes the way your page renders, allow us to hide the layer in the Navigator so that you don't see the item in the designer but it still shows up when the page is rendered. Would be great for overlay menus and page transition designs.

Maciej is correct.

I researched more:

- I can see that the existing visibility toggles add the w-hidden-main class etc.

- There is already a w-hidden class

- To implement my idea we simply need to implement another toggle, but not for specific device but global

- Then we just need to expose this toggle in the Navigator

Sounds to me like something simple to implement, since the whole logic exists, just need more params

@WebflowTeam I looked into the settings panel, and the difference in my use case is that I need to hide/show on all devices with one click. Think of another toggle there that hides the element on all devices and grays out the specific per-device visibility. 

There are 2 major use cases:

1. As an advanced user of Webflow, I work a lot with jQuery custom code to enhance Webflow capabilities for prototyping and building simple apps, faster and better than in Axure or Justinmind

2. As a graphic designer I want to work on comples animated designs in Webflow that use layers

Example 1: Layered animations

Complex animations require several layers... Think of things like this https://dribbble.com/shots/2970992-Firefox-loading-animation For such design we need to work with layers similarly to a graphic design software like Photoshop, toggle other layers so that they won't get in our way. 

Example 2: Overflown elements

If I have components with overflow hidden or overflow auto, and there are multiple divs inside, its hard to edit the elements that are cropped. It would be great to hide them temporarily with one click.

Example 3: Modals

I have a modal-wrapper element on a page, that should be hidden when page loads.To show the element I use custom code. To edit this element I need to show it in Webflow. So in Webflow I add a combo class "is-hidden" with "display: none" to temporary show or hide it. After my edits are finished I need to remeber to hide the element so that it is not shown when page loads and repeat the slow procedure of adding a "is-hidden" class. It would be much faster to do this with keyboard shortcut.

Example 4: Custom dropdowns, popovers etc.

Sometimes I want to add an interaction, that when you click something, a popover appears. It should be hidden on load, but to edit it I need to show it temporary in Webflow. Toggling the class is long and relatively slow, I need to select the class field, delete the "is-hidden" class.

Example 5: Customized input elements, checkboxes, radio buttons etc.

I prototype complex apps, so I need styled form elements. I build my own micro-components, for example custom select dropdowns that have icons inside, subtexts etc. (see attachment).  The selected items are just divs, but hidden. But to edit them I need to temporary show them in Webflow. 

Recap on the idea: now when I think about it, the eye icon should actually not be temporary, but just a shortcut for toggling a system class "w--is-hidden" that has "display: none !important". This would make this feature simpler to understand, so that what you see is what you see on screen is what you get on the published page, but still allows for better workflow for all above use cases.

This would be an interesting feature.  Currently we have the visibility options in the settings panel already.  Can you help explain a use case for this feature?

- Nelson, Customer Success Specialist

Old related forum thread https://forum.webflow.com/t/add-layers-toggle-visibility-show-hide-like-in-photoshop/24352/2 

And it would be useful to have a keyboard shortcut to toggle visibility of selected element, for example Cmd + H