Need to temporarily hide certain elements in design view

I am using a template which includes a “contact” section that springs up from the bottom of the site. In real world use it works perfect. The problem is that in design view it is always displayed, which severely limits the amount of available space for editing and many of the other elements end up behind it (again, only in design view). The same problem exists for the 2 headers, one being the scrolling header for mobile and one fixed for other devices. The visibility settings on the style and settings tabs have no effect whatsoever on the contact section or the headers. This makes things very difficult to edit and renders over half the screen useless in design view. How can I hide these in design view?

Select your element and click on display:none so it’s out of your sight.

Make an interaction called “display:block onLoad” that does exactly that, display:block onLoad, and affect it to all the elements you want to hide during the design phase.

1 Like

Thanks for the reply-

“Select your element and click on display:none so it’s out of your sight.” If you mean click on one of the items in my screen shots to do this, that is my problem as it doesn’t have any effect at all on the Contact or headers. Regarding your second suggestion, that is beyond me at this point. I would need step by step as I have only been using this for less than a week.

Can you please share your project’s public link so it’s easier to understand your issue?

Learn how to do it here: Share a read-only link | Webflow University

OK - the link you sent just went to a generic help page but I think I figured out how to share the site, although I don’t see how this would help you unless it gives you the ability to get into the designer portion??

Sharing your public link will give everyone a read-only access to your project’s design tool. With this access, people can see exactly what you have done in your project and we can troubleshoot your problem easier.

Exactly like @PixelGeek said: it’s like being you… and then we can record a screencast showing how to do certain things.

Fantastic!! I am certain you will find that I am an idiot, and it is something very simple to correct… :blush:

No worries. We are here to help you become a WF master. Now go ahead and paste your public link here so we can further assist you. =)

Is this what you are looking for?
flytesting.webflow.io

No. please follow the instructions provided here to get your public URL:

https://preview.webflow.com/preview/flytesting?preview=199dce87c66b6f814b6ddf93838ea83e

Just double click your contact form symbol, the set the display to none.

When you’re done editing the page you’re working on, just find your contact symbol layer at the bottom of the layers panel. Then remove that display setting to bring it back.

Here is a screencast to further explain: 2015-04-23_1014

Good luck =)

1 Like

Double click, there is the key - that’s why I could never find a way to hide them.

THANK YOU THANK YOU

2 Likes