Display Settings: Difference between Hidden and Visibility=invisible?

Hello all. In the Layout –> Display properties of a Container, I am trying to understand the difference between switching the Hidden toggle to the “On” position and setting the Visibility to “invisible”. My assumption (confirmed by the very-often-incorrect guidance from ChatGPT) is that “Hiding” will omit all HTML for the Container completely when I publish, whereas Visibility=invisible just sets a visibility:hidden flag on the HTML, which is still published and visible to screen readers and scripts.

That is not the case for me. When I set the Hidden toggle to “On” the HTML is still published but not visible on the rendered page. Is there a way to truly hide the Container without deleting it from my design file?

Hidden = Gone, vamooshe, no space left where it lived.

Visible = you can see it / you can’t see it, but the space it live stays put. Think of it as clear glass.

But neither remove the html from the DOM.

3 Likes

Thanks @Doobox. For work-in-progress components, I will create a separate page and mark it unpublished.