Webflow sync, pageviews & more.
NEW

How can I get the header and footer from other pages to appear on a new page in Webflow, and ensure that the same header and footer appear on any new pages I create?

TL;DR
  • Create Components for your header and footer by selecting each and using "Create Component" in Webflow.
  • Add these Components to every page via the Components panel to ensure consistency and centralized updates.

To ensure the same header and footer appear on every page in Webflow, you should use Webflow’s Symbols (also known as Components) to create reusable elements.

  • Open a page where you’ve already designed the desired header and footer.
  • Select the header section (e.g., the entire <header> or nav element).
  • Click Create Component (or "Create Symbol" in older versions) from the Webflow right-click menu or the top toolbar.
  • Name it something like "Global Header".
  • Do the same for the footer, creating a component called "Global Footer".
  • Go to the new page where you want the header and footer to appear.
  • Open the Components panel (on the left side, puzzle piece icon).
  • Drag the “Global Header” and “Global Footer” components onto the canvas in the desired positions (usually top and bottom of the page).

3. Ensure Future Pages Use the Same Header/Footer

  • When you create new pages, always add the "Global Header" and "Global Footer" components from the Components panel.
  • Any change you make to a Component will automatically update it across all pages where it’s used.

4. Optional: Use a Page Template Approach

  • Create a Starter Page with the header, footer, and typical layout pre-included.
  • Duplicate this page via the Pages panel to quickly create new pages that already contain the shared components.

Summary

Use Components (formerly Symbols) to turn your header and footer into reusable elements. Then drag those components into every new page you create to ensure consistent layout and allow centralized updates.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I remove Unused Javascript in Webflow to improve my Time to Interact?
How can I improve the load time of my website on Webflow?
How can I create a dynamic schema in Webflow?
Is there a more efficient way to update images in Webflow without having to change the image file on each individual webpage? How do others navigate this issue, especially when dealing with multiple pages?
Where can I find Javascript code to make a GIF start animating on hover in Webflow?
Can an unspecified number of images be loaded through the CMS in Webflow to display on a webpage, such as in an image slider, without using workarounds like adding multiple images to a rich text field or setting conditional visibility?
What could be causing payment conflicts when trying to upgrade from a free trial on Webflow, and how can this issue be resolved?
Can Webflow integrate with the dropshipping method offered by this store?
Why does the whole page styling on my Webflow site change when I publish it, including the Navbar, after adding the uploadcare widget to a form?
How can I link each of my CMS collections, "stays_austria" and "paris", to the items on the travel selection section on my Webflow homepage?
How can I make the lottie animation embeds in Webflow full screen and responsive like this example codepen.io?
Can the x-frame settings in Webflow be edited to allow my site to be displayed in an iframe?
How can I add email validation to the subscribe form in Webflow?
How can I remove the scroll bar from the Calendly booking tool in Webflow?
How can I easily place elements where I want them on Webflow without using containers, div blocks, or blocks? I'm having trouble aligning a logo to the left side of the page.
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I dynamically redirect to a CMS created after form submission in Webflow?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
How can I close a dropdown in Webflow when clicking on a link?
Is there a more optimal way to create a portfolio section with a sticky image container that changes as you scroll, similar to the design on Deveb's website, that works across different web browsers, especially Safari, using Webflow or any other JavaScript tools?
How can I implement a multi-select field with a pre-selected option in a popup form on a collection page using Webflow?
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?