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.
1. Create a Symbol for the Header and Footer
- 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".
2. Reuse Header and Footer on Other Pages
- 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.