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

How to replace one component with another

Modernize an element without disrupting the structure of your hotel site

Key points:

  • Replacing a component allows you to test a new design without starting from scratch.
  • The operation is performed from the Webflow Designer.
  • You can keep the same styles and interactions.

Replacing a component in Webflow is a common action when you want to modernize your hotel website, adjust a section, or test a new version of an existing block. The goal is to update the content or structure without impacting the rest of the page.

Steps to replace a component in Webflow

  1. Open your project in Webflow Designer. Navigate to the page containing the component you want to replace (for example, a "Hero" block, a button, or an offer card).
  2. Select the component to replace. Click on the element in the canvas or use the Navigator panel to locate it precisely.
  3. Delete or hide the existing component. If you want to remove it completely, press the Delete key. 💡 Tip: You can also simply hide it (Display: None) to keep it in reserve while you test the new one.
  4. Add the new component. From the Add (+) panel, drag the desired component (section, div, symbol, or custom block) to the same position as the old one. You can also paste a component already used elsewhere in your project to maintain design consistency.
  5. Apply the styles or classes from the old component. If you want the new block to retain the appearance of the previous one, simply copy its CSS class or recreate a combo class (e.g., “Hero Section – New”).
  6. Reapply interactions and animations. Open the Interactions panel (lightning bolt icon) and reattach existing animations to your new component.

Best practices

  • Always keep a backup before making any structural changes.
  • If the component being replaced is a Symbol, detach it before deleting it to avoid impacting other pages.
  • Check the mobile and tablet rendering before publishing: some components behave differently depending on the device.
  • Use clear and consistent names for new items to make maintenance easier for your marketing team.

💡 Tip: To test multiple versions of the same component (for example, two versions of a “Reservation” block), first duplicate the page, then make your replacements on the test version.

Conclusion

Replacing a component on Webflow is a simple way to modernize your hotel website without starting from scratch. By maintaining a clear structure and reusing existing styles, you save time while ensuring perfect visual consistency.