How can I hide the contact section and headers in design view in Webflow?

TL;DR
  • Open the Designer tab in Webflow.
  • Click on the element to hide and set its display setting to 'None' to hide it from design and live view.
  • For design view only, create a combo class (e.g., "hidden-design"), set its display to 'None', and apply it temporarily.
  • Remove the combo class or reset display settings to default to view or edit hidden elements.

To hide the contact section and headers in design view in Webflow, you can use the visibility settings to manage the display of specific elements while working on the design.

​

1. Access the Designer

  • Open your project in Webflow and navigate to the Designer tab.

​

2. Select the Element

  • Click on the element you want to hide. This could be your contact section, headers, or any other specific element.

​

3. Adjust Display Settings

  • In the Style panel on the right, locate the Display Settings.
  • Choose 'None' from the display options. This will hide the element from both the designer view and the live site.

​

4. Use Display:none for Design View Only

  • To hide elements in design view while keeping them visible on the live site, create a new combo class (e.g., "hidden-design").
  • Set the display property to None for this combo class.
  • Temporarily apply this class to elements you wish to hide while designing.

​

5. Toggle the Element Visibility

  • When you need to view or edit the hidden elements again, simply remove the combo class or reset the display setting to its default.

​

Summary

To hide certain elements like contact sections or headers in Webflow's design view, adjust their display settings to 'None' or create a temporary combo class for design-phase visibility control. This ensures elements are hidden during design but remain on the live site when necessary.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I create a responsive grid in Webflow, where a 3x3 grid of images on desktop becomes a 2x2 grid on tablet and a 1x1 grid on mobile?
How can I track the number of people who click the "Book A Free Consultation" button on my Webflow site and are redirected to a separate website for scheduling appointments?
How can I add a custom thumbnail over the Vimeo player in Webflow, similar to how it is done on Squarespace?
Is it possible to use an outside hosting service instead of Webflow's hosting service for my basic 6-page personal portfolio website? If so, what is the step-by-step process to do so and would this mean I don't have to pay Webflow's monthly fee?
What code can I use to deactivate the zoom in on my phone when I focus on the form (text input) elements in Webflow?
Can someone provide a detailed tutorial on creating a 2-page sign-up form on Webflow? Specifically, the tutorial should include information about passing data from page 1 to page 2, having a custom waiting text on the 'next page' button, adding a pause on the first 'next page' button, implementing basic validation for email and phone number, and utilizing the form success message setting. Thank you!
How can I create a hover interaction in Webflow to make my gifs start playing when hovered over?
Is it possible to add the Google Tracking code in Webflow Standard forms for a short success message without a redirect page?
How can I make the text in the dropdowns of my FAQ in Webflow break to the next line when the screen size changes?
How can I create a background image with two pictures, a white line, and a blue background in Webflow? The current method I'm using with one big background image is not accurate in terms of size, scalability, and quality. Is there a better way to achieve this in Webflow? Thank you for your help.
How can I make a button on my Webflow website download a PDF file without redirecting the user or opening a new tab?
How can I fix the issue with the section link scroll on my Webflow site when using Tablet to Mobile breakpoint where the page scrolls past the intended section? I have already tried changing the image load settings to Eager but it didn't work. Thank you!
How can I achieve smooth scrolling when linking to another section within the same page in Webflow?
Why do my hero images on my live Webflow site appear heavily compressed and blurry even though they look great in the Webflow Designer?
Why doesn't the Page Load Animation work when I click on the associated links in Webflow?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?