Can I duplicate a block to create another version?
Save time while testing variations on your hotel website
Key points:
- Yes, it is possible to duplicate a block in Webflow.
- Duplication preserves the design, styles, and interactions.
- Ideal for creating multiple versions of content without starting from scratch.
On a hotel website, it's common to want to test different presentations of a section—for example, a "Summer" version and a "Winter" version of a banner, or a "Special Offers" section tailored to each market. Webflow allows you to duplicate a block with a single click, simplifying the creation of variations without altering the original.
1. Duplicate a block in Webflow Designer
In Webflow Designer:
- Select the block you want to duplicate (for example, a section, a div, a card, a button).
- Right-click and choose Duplicate.
- The copied block appears immediately below the original, with the same structure, content, and classes.
💡 Tip: You can also use the keyboard shortcut Cmd + C / Cmd + V (or Ctrl + C / Ctrl + V under Windows) to copy and paste the block onto the same page or another.
2. Create an alternative version of the block
Once the block is duplicated:
- Modify its content (text, images, videos) without affecting the original.
- If you only change the text or media, the CSS styles remain shared.
- If you want a slightly different design, create a new class:
- Select the block.
- Click in the CSS class field and add a combo class (e.g., .banner + .winter). 💡 This allows you to customize only this version while preserving the basic styles.
3. Duplicate across multiple pages
To reuse the block on another page:
- Select the block → Cmd + C / Ctrl + C.
- Open the target page → Cmd + V / Ctrl + V.
- Styles and interactions will be automatically preserved. 💡 You can also save the block as a global component if you want it to remain synchronized across the entire site (useful for headers, footers, or CTAs).
4. Managing variations of the same block
If you wish to create several themed versions (e.g., “Valentine’s Day Offer”, “Family Offer”, “Business Offer”):
- Duplicate the original section.
- Simply change the visuals, text, and links.
- Hide unused versions with Display: None until the desired campaign is ready.
💡 This allows you to plan your seasonal updates without having to rebuild sections each time.
5. Check consistency and performance
After duplication, check:
- The block should remain responsive on mobile and tablet devices.
- Ensure that no animation or interaction is triggered twice.
- Ensure that internal links point to the correct pages.
Best practices for hotel websites
- Use duplication to create campaign variations or test different layouts (“A/B testing”).
- Maintain a consistent style: colors, typography, alignment.
- Regularly remove unused duplicates to avoid slowing down the project.
Conclusion
Yes, you can duplicate a block in Webflow to quickly create a new version of a section without starting from scratch. It's a simple, flexible, and ideal method for evolving the design or testing new marketing approaches on your hotel website while maintaining perfect visual consistency.