How to temporarily hide an element for future [re]use

[bryanhiggs]

I often find it useful to create an element on a webpage that would normally be hidden, but that I can make visible when I need it. For example, a banner announcing something new, but of limited duration -- snow cancellations, an upcoming concert, and so on. I like to have the element available for reuse, as it saves time setting it up.

I have added a custom CSS class using the Customizer:

/**
* Hide a particular element
*/
.hide {
display:none;
}

In Gutenberg/the WordPress Block Editor, I have found that setting the hide class on an element causes it to stay visible in the edit page environment, but it disappears (as desired) in the live page. This is very convenient.

In Elementor, however, when I try to do the same thing on an element, the element disappears in the edit page environment, making it a little troublesome to find later. Is there a better way to accomplish what I want to do in Elementor?

Help appreciated!

Thanks, Bryan

 

[Koni Kodes]

I use Elementor to create section templates. That makes it easy to add on a page in the text editor with the elementor-template id.

Is this similar to what you are wanting to do?

 

[bryanhiggs]

Perhaps, but it seems rather heavy duty.

Thanks!

I use Elementor to create section templates. That makes it easy to add on a page in the text editor with the elementor-template id.

Is this similar to what you are wanting to do?

 

[Koni Kodes]

I know. I just stumble around until something works right.
But the templates have been very helpful for me.

 

[bryanhiggs]

I'm surprised at the lack of response here.

Anyone else have any ideas about this?

 

[Koni Kodes]

This forum is still very new to usage. You may get a better response from the Facebook Elementor Community group - only because it is monitored more strongly.

 

[bryanhiggs]

Thank you. I posted this in the Facebook Elementor Community group, and was rewarded with a solution immediately. Great response!

 

[Koni Kodes]

I am so glad that you got what you needed! Thank you for letting me know.

Could you please post the solution here, so others traveling through with the same issue can benefit from your experience? Thanks again.

 

[bryanhiggs]

Here is the solution posted on the Facebook Elementor Community group:

Georgian Butonoi Well, if you go to Responsive from the advanced tab, you can hide an element or an entire section/column from desktop/tablet/mobile. I would just disable all 3 of them. That way, they'll be hidden from the users but you'll see them in the editor.

Thank you Georgian!

 

[Koni Kodes]

This is so helpful! I am still learning every day.
Thank you for sharing.