Add toggle switch to hide/show section/element

[mkerost]

Prerequisites

• I have searched for similar features requests in both open and closed tickets and cannot find a duplicate.*
• The feature is still missing in the latest stable version of Elementor ( Elementor Pro. )

*NOTE: This IS a duplicate of feature request 6666, however I don't see how I can add additional, helpful discussion to this feature request without creating a new ticket.

What problem is your feature request going to solve? Please describe.

We have a number of pages on our website that have elements/sections that we hide and show depending on a number of reasons. It could be old content we don't want to delete, new content we are prepping for launch, seasonal promotions, etc. We are currently using the hide all responsive modes feature in advance in order to hide these sections. There are currently 3 main problems with this:

1. There is no visual indicator in the editor of what sections are shown/hidden. It is tedious to check all elements on a page, one by one, to see if there is anything hidden/showing that we don't want. Even though we could keep the preview page open and compare what we see on the live page to what is showing in the editor, this is mistake-prone especially for pages with lots of elements and a brain game that we'd rather not play.

2. HTML in hidden sections is still being rendered to the browser. Sometimes we have hidden sections that are being prepped for product launch, etc. We would feel better knowing that this content was not showing at all on the webpage (even if you have to view source code to see it).

3. Show/hide work-around is cumbersome. When you do a lot of show/hide of elements/sections, it gets tedious to go through the steps to do this, you lose time, and it increase chance of mistakes. You have to click on advance settings, expand the responsive section, and click on all three responsive buttons. We've already made a bad mistake where one of our editors toggled two of them visible but left mobile hidden, probably frustrating website visitors who didn't see full content.

Describe the solution you'd like

1. Add show/hide toggle and put it on content tab or some other place very easy to click and see without multiple clicks to change. It is not an advance setting.

2. Provide visual cue in editor that shows a section/element is hidden. Perhaps something like a red dashed border. I understand this may be tricky depending on the website style/colors, but dash border in a strong color are pretty uncommon on websites.

3. If a section/element is hidden, don't include it at all in the HTML when rendering the webpage

Describe alternatives you've considered

There is the alternative to hide content in all responsive views, and it is better than nothing, but it is a "hack" and has drawbacks as listed above.

[black-eye]

+1

[bainternet]

@mkerost

Please take a look at #7099 (comment) which gives you 1 and 3 in your list and with a little customization you can get it to add a class to the section which you can style to give you a visual cue you are asking for.

hope this helps.