How do I hide sections in "Display" on duplicated pages from a parent Webflow template/layout without affecting other pages?
TL;DR
- Unlink Symbols or Shared Components before editing to prevent global changes across pages.
- Once unlinked, use Display: none to hide sections and optionally create page-specific class names to isolate styles.
When duplicating pages in Webflow that come from a parent template or layout, hiding sections in the Designer panel (under Display settings) can unintentionally affect other pages if you're editing Symbols or Shared Components.
1. Identify If the Section Is a Symbol or Component
- Symbols and Shared Components are global elements in Webflow. Any changes (including hiding via Display: none) will affect all instances site-wide.
- To check, select the element and look for a green label that says Symbol or Component in the Navigator or top bar.
- If it's a Symbol, you'll need to detach it before making changes.
2. Detach or Convert to Editable Elements
- Select the Symbol or Component you want to modify.
- Click the dropdown arrow next to its label and choose Unlink from Symbol or Detach instance.
- This will make the section specific to that page, and changes won’t affect other pages.
3. Hide the Section on the Duplicated Page
- With the section now individualized, you can safely apply Display: none from the Style panel without impacting other pages.
- You can also use custom class names if needed to manage styling variations.
4. Use Page-Specific Classes (If Needed)
- If the section is not a Symbol but still shared across pages due to identical class names, create a duplicate class with a suffix (e.g.,
section-name-page2) so styles can be modified independently. - Click the class name field in the Style panel, then choose Duplicate Class.
Summary
To hide sections on duplicated pages in Webflow without affecting others, unlink any Symbols or Components first. Then, apply Display: none to those sections, optionally using page-specific class names to keep styling isolated.
