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

I'd like to create a reusable block, how do I do that?

Save time and ensure visual consistency for your hotel website

Key points:

  • Create a global component (formerly "symbol") in Webflow.
  • Reuse and modify this block on all pages.
  • Simplify maintenance and ensure site uniformity.

On a Webflow hotel website, certain elements appear on multiple pages: the booking banner, the footer, the navigation, or even a promotional banner. Rather than manually recreating them each time, Webflow allows you to create a reusable block. This component system makes your updates faster and ensures perfect consistency across the entire site.

1. Identify the block to be made reusable

Start by identifying the elements that appear on multiple pages:

  • The header (logo, menu, "Book" button).
  • The footer (address, contact information, social media links).
  • A call-to-action banner (“Book your stay now”). 💡 Tip: Group all the elements of this block into a Div Block for better organization.

2. Transform the block into a global component

In Webflow Designer:

  1. Select the desired block.
  2. Right-click, then choose “Create Component” (or use the shortcut Cmd + Shift + A / Ctrl + Shift + A).
  3. Give the component a clear name (e.g., “Global Footer” or “Reservation Header”). This block now becomes a reusable component: any changes to it will be automatically reflected across the entire site.

3. Add the component to other pages

To use your block on other pages:

  • Open the relevant page in the Designer.
  • Go to the Add panel (A) → Components.
  • Drag your reusable block to the desired location. 💡 The component retains all its properties (styles, interactions, links), ensuring perfect visual consistency.

4. Modify a reusable block

If you wish to change the content or style of the block:

  • Select it in the Designer.
  • Double-click to edit the component.
  • Once the changes are saved, they are automatically applied to all instances of the component on the site. 💡 If you need a different version for a specific page, use “Unlink from Component” to customize it without affecting the others.

5. Manage and organize your components

  • Open the Components Panel tab to view all your reusable blocks.
  • Use a clear naming system (e.g., “Header EN”, “Footer FR”, “Summer Promo”).
  • Remove old, unused components to keep your project clean and fast loading.

Best practices for hotel websites

  • Create a global booking component with a button that is always visible.
  • Centralize your contact details and legal notices in a single, shared footer.
  • Use a dynamic offers banner that you can update with one click (weekend offer, promo code, seasonal offer).

Conclusion

Creating a reusable block in Webflow is essential for maintaining the consistency and visual quality of your hotel website. By using global components, you simplify content management, save time, and ensure a smooth and consistent experience across all your pages.