By using Elementorforum.com’s services you agree to our Cookies Use and Data Transfer outside the EU.
We and our partners operate globally and use cookies, including for analytics, personalisation, ads and Newsletters.

  • Join the Best Unofficial Elementor Support forum

    Provide or get advice on everything Elementor and Wordpress, ask questions, gain confirmation or just become apart of a friendly, like minded community who love Wordpress and Elementor


    Join us!
elementor official

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

bryanhiggs

bryanhiggs

New Member
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
 
elementor official
Koni Kodes

Koni Kodes

Member
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?
 
elementor official
bryanhiggs

bryanhiggs

New Member
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?
 
elementor official
Koni Kodes

Koni Kodes

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

bryanhiggs

New Member
I'm surprised at the lack of response here.

Anyone else have any ideas about this?
 
elementor official
Koni Kodes

Koni Kodes

Member
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.
 
elementor official
bryanhiggs

bryanhiggs

New Member
Thank you. I posted this in the Facebook Elementor Community group, and was rewarded with a solution immediately. Great response!
 
elementor official
Koni Kodes

Koni Kodes

Member
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.
 
elementor official
bryanhiggs

bryanhiggs

New Member
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!
 
elementor official
Koni Kodes

Koni Kodes

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

Latest posts

Other Elementor Resources

elementor official
elementor official
Top