Elements Tree in Structure Panel - Show / Hide

Definitely need a quick show / hide for each element in the structure panel, to show / hide element on canvas while building. Can’t believe this isn’t already implemented, unless I’m missing something here.

Use Case: Aside from being able to show / hide on builder canvas (visually), things work well in builder but not so much on frontend.

Sometimes you may have 2 or 3 or more ‘versions’ , ‘styles’ of an element. Being able to show / hide them quickly, and then preview on front-end is paramount.

Extended Use Case: In addition to above, when in ‘hide’ don’t show in canvas OR on frontend. And not a CSS display:none, but a true DONT RENDER on the frontend!


Untitled-1

6 Likes

Old time Elementor user here. Am I really seeing that there is no element hide available for the workspace? Uff…You did a mockup there? I’m new to Bricks so I might don’t get but I see A LOT of settings shown in FAQs/Docs/here that are not there anymore where they were.

In structure panel not available.
For layout elements ( Section container block and div) hidden option is under display in content tab.

For other elements Style tab > layout > Mic

Yes, thanks but this aint it. I guess the TS is talking about the workflow tools. At least I am. Like I was working as 3D artist for a long time and using 3D apps and Photoshop for decades the layer manager (structure manager u would call it here) is the second main tool to efficient workflow. There is always had a hide button present as you then can focus on specific elements better and keep revisions and so on. This was a no brainer why Elementor got it as I was introduced to it. But surely is now not seeing one in Bricks. I thouge this is a bug really.
It is not about hiding elements for the front end user but organizing work. The TS said it already nicely. One needs to try out different approaches.

2 Likes

Nice👌

bricks team please add this feature. Something like Photoshop

1 Like

How would you unhide an element to work on it?

This feature is only used in the builder.

Yes I realised that, but still - How do you unhide the element or elements when you need to see them again?
I just don’t understand how it would work in practise without introducing more complex and confusing UI.

Make sure to upvote it here :wink: Ideas – Bricks

1 Like

I guess they would get grayed out or dimmed in the structure panel so you can just unhide them from there. They would just hide inside the builder canvas. At least that’s how I would expect this to work.

Ah ok I misunderstood. I thought the intention was to hide the element in the structure panel not on the canvas.

Once again… advanced themer to the rescue.

I know this is ‘kinda’ old, but what you said is exactly what I meant in original post.

I was looking for this feature today and realized that it is not possible (yet). I is really useful to have!

Worst of all, I discover today:

SQL QUERIES ARE RENDERED for elements with display:none at content tab on the background. Check it with Query monitor plugin.

Those hidden elements should not only Show/Hide but also be quiet on the backend to improve performance.

Hidden query filters, or elements with bizarre conditionals, can be performance intensive. And how many times we forget about them, hidden on a container during production.

We may consider they are inactive , but they aren’t.

1 Like

Confused when you say, “the content tab on the background”. A content tab on the background?

Sorry my english, I meant elements which are “disabled” from display:none at content tab…

Not sure if there is a better way to disable an element on the template, while being totally quiet at DOM, frontend, Bricks canvas, and important: !!!SQL query quiet!!!..

Ahh… I see what you mean. Yea you’re right, display:none she not be computed whereas visibility:hidden should be.

display:none is just CSS, so we can show it with JavaScript later (or interactions)… [think pop-ups]

To remove it from DOM on front end, we’d use conditionals.

Please correct me if I mis-read your points…

Right now we can fake it so it’s never rendered on front-end until you want with something like:

The eye to hide/show would be useful as @BGdev mentioned to remove from DOM and quickly enable / disable elements… let’s say you want to quickly enable for special sales.

To remove it from the DOM in the backend… maybe Bricks could “sleep” it when you load the template… but templates are usually pretty fast on my end (I try to not make them too heavy…)… and would cost extra dev time…

2 Likes

Yeah, the trick works great. Hope that Bricks provide us with a more elegant way to achieve this.

2 Likes