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

How to duplicate a component to create a different version

Save time and test variations on your hotel website

Key points:

  • Duplicating a component allows you to test variations without altering the original.
  • The duplication is done directly from the Webflow Designer.
  • You can then customize the new version independently.

Duplicating a component in Webflow is an excellent way to create a new version of a block, button, or section without risking changes to the original. This is especially useful when you want to test a new design, different text, or an alternative layout for your hotel website.

Steps to duplicate a component in Webflow

  1. Open your project in Webflow Designer. Navigate to the page containing the component you want to duplicate.
  2. Select the component. Click on the block, section, or button you want to copy.
  3. Duplicate the component. Right-click on the element and select Duplicate, or use the shortcut Cmd/Ctrl + D. An exact copy will appear directly below.
  4. Rename your new component. To avoid confusion, give the new version a clear name (for example, “Hero Section – Variant B”).
  5. Customize the new version. Modify the text, images, or styles without affecting the original component. If you are working with Symbols (Global Components), remember to detach the instance before modifying (right-click > Unlink from Symbol).

💡 Tip: If you want to keep the overall style but change some details, it's better to create a combo class rather than modifying everything. This will allow you to experiment while maintaining the site's visual consistency.

Best practices

  • Always duplicate the version on a test page before adding it to a public page.
  • Rename your classes and components regularly to facilitate maintenance.
  • Keep a version history via the "Backups" panel to revert to a previous version if needed.

Conclusion

Duplicating a component in Webflow is a simple yet powerful way to create design variations on your hotel website. This method allows you to experiment safely and improve the user experience while maintaining a clear and professional structure.