Webflow sync, pageviews & more.
NEW

How can I unlink elements in a Webflow collection to have different formats for each item's page?

TL;DR
  • Use Conditional Visibility with Option or Switch fields to show/hide different layouts per CMS item.
  • For completely unique designs, create static pages and manually link CMS items using custom redirects or routing.

To use different formats or layouts for each CMS item in Webflow, you’ll need to unlink item-specific content from the default Collection Page template and create custom static pages or conditional layouts. Here's how to do it:

1. Understand Collection Page Limitations

  • All CMS items share the same layout on a Collection Page template (e.g., the Blog Post Template).
  • You cannot unlink elements on the template page to behave differently across CMS items unless you use conditions or custom routing.

2. Use Conditional Visibility

If the layout differences are minor, use conditional visibility to change content or sections per item.

  • Add multiple sections or elements with different styles.
  • Use Conditional Visibility in the settings panel to show/hide based on a CMS field (e.g., a “Layout Style” Option field).
  • This way, specific layouts only appear for items matching that condition.

3. Add a Switch or Option Field

  • Go to your CMS Collection, add a Switch (e.g., “Use Custom Layout”) or an Option field (e.g., "Layout Type" with choices: Layout1, Layout2).
  • In the Collection Page, bind sections to this field using conditional visibility.
  • This allows layout changes to be controlled at the entry level.

4. Build Static Pages for Full Layout Freedom

If you need completely unique designs for certain items:

  • Create static pages manually in the Pages panel (e.g., “Post 1 Layout”).
  • Manually add the specific content you want.
  • Optional: Include a redirect field to route users from the CMS item to the custom static page using a custom link setup.

5. Use CMS Reference Field with Custom Routing (Advanced)

For more scalable custom layouts:

  • Set up a Reference or multi-reference field pointing to another collection that holds layout data.
  • Use conditional fields or embed code to pull in layout-related content or structure.
  • This approach requires careful structuring and sometimes custom code.

6. Avoid Symbol Reuse for Variable Layouts

  • If you’ve used Symbols across your template, unlink them in individual instances if possible.
  • But remember: changes made to a Symbol affect all instances unless you use Component Overrides.

Summary

To unlink or customize layouts per CMS item in Webflow, use Conditional Visibility, Option/Switch fields, or custom static pages for full layout control. CMS templates apply globally per collection but conditional rendering allows flexible design changes per item.

Rate this answer

Other Webflow Questions