Skip to content
English - United States
Nous Contacter
  • There are no suggestions because the search field is empty.

If I modify a global component, does it change on all pages?

Ensure consistency and save time on your hotel website

Key points:

  • The global components are synchronized across all pages.
  • Any change made to a global component is automatically updated everywhere.
  • You can also detach or customize a component on a specific page.

Global components (formerly known as “symbols”) are one of the cornerstones of Webflow for ensuring consistency and rapid maintenance of a hotel website. They prevent repetitive modifications and guarantee that each update remains consistent across all pages of the site.

1. A global component: a single base, multiple instances

When you create a global component in Webflow, you create a unique reference. Each time you add it to a page, you insert an instance of that component. So, if you modify the component in one place: ✅ All other instances of the same component will be automatically updated.

💡 Concrete example: You update the “Book now” button in the global header → the change is instantly reflected on all pages of the site.

2. How to modify a global component

To make changes:

  1. Select the component in Webflow Designer.
  2. Double-click to enter edit mode.
  3. Edit the text, links, images, or styles.
  4. Click Save Component to confirm. All pages containing this component will update automatically.

💡 You can view all the components of your site in one click via the Components Panel to better organize them and avoid duplicates.

3. Create variations or exceptions

If you want to customize a component on a single page:

  • Select it.
  • Click on Unlink from Component to detach it. You can then modify it freely without affecting other pages.

Another option:

  • Duplicate the component from the Components panel.
  • Rename it (e.g., “Footer – Contact Page”). This allows you to keep multiple versions while maintaining the basic structure.

4. Check the changes before publishing

Before publishing, check how the component renders in the views:

  • Tablet, Mobile Landscape, Mobile Portrait.

  • Style changes (margins, size, colors) also apply globally. 💡 Tip: If a specific page needs a visual adjustment, create a combo box class (.header-global.mobile) rather than breaking the component.

Best practices for hotel websites

  • Use global components to:
    • The header (menu, logo, Book button).
    • The footer (address, legal notices, social media links).
    • Call-to-action banners (“Book your stay”).
  • Use clear naming conventions (“Header Global FR”, “Footer EN”) to facilitate maintenance.

Conclusion

Yes, any change to a global Webflow component is automatically applied to all pages where that component is used. This is what makes Webflow so effective for hotel websites: you save time, maintain brand consistency, and ensure a smooth and professional experience across your entire site.