How do I hide sections in "Display" on duplicated pages from a parent Webflow template/layout without affecting other pages?

To hide a section on duplicated pages in Webflow without affecting other pages using the same parent layout or template, you need to use unique combo classes or page-specific custom code. Here's how to do it cleanly.

1. Understand Why It Affects All Pages

• When you duplicate a page that uses the same layout or symbols, any edits to Symbols or global classes will affect all pages using them.
• To isolate changes, you need to detach the Symbol or apply unique styling that only applies to the duplicated page.

2. Use Combo Classes for Unique Styling

• Select the section you want to hide.
• In the Style panel, click next to the current class name and add a combo class (e.g., Hero Section page-2).
• With this combo class selected, set Display: None.
• This hides the section only on the page where the combo class is applied, without affecting the original.

3. Use Page-Specific Custom Code (If Necessary)

• Go to Page Settings of the duplicated page.

• In the Before tag Custom Code field, add inline CSS targeting a section ID or class:

  Example:
  <style>#hide-on-this-page { display: none; }</style>

• Make sure the section on that page has a unique ID or combo class like #hide-on-this-page.

4. Avoid Editing Symbols Directly

• If the section is a Symbol, you should either:
• Unlink the Symbol on the duplicated page (Right-click → Unlink from Symbol), then hide it directly.
• Or adjust visibility via a combo class as described above.

Summary

To hide a section on duplicated Webflow pages without affecting others, use a combo class or unique ID with Display: None, and avoid changing global classes or Symbols directly. This maintains layout independence across pages.