How can I unlink elements in a Webflow collection to have different formats for each item's page?
TL;DR
- Use Conditional Visibility with custom CMS fields to switch layouts within the shared Collection Page template.
- For more control, unlink elements from CMS or create separate Collections with unique templates.
- For full layout flexibility, use static pages and manually embed CMS content.
To use different formats or layouts for each Collection page in Webflow, you'll need to unlink the elements from the CMS or use special techniques to vary the design per item.
1. Understand How Collection Pages Work
- Webflow’s Collection Pages (also known as CMS Template Pages) are generated from a single template that applies to all items in a given Collection.
- By default, all item pages share the same structure, content bindings, and layout.
2. Use Conditional Visibility
- To show or hide certain elements based on specific content, use Conditional Visibility.
- Example: If you have a field like "Layout type" in your CMS, you can add multiple elements and set visibility rules (e.g., Show this section if Layout type is “Gallery”).
- This allows different layouts to display conditionally on the same template page.
3. Create Custom Fields to Control Layout
- Add a custom field in your Collection, such as Layout Option (Plain Text or Option field).
- Create multiple versions of components on the template page — each designed differently.
- Use Conditional Visibility to control which component appears for which item.
4. Unlink Individual Elements
- You can unlink individual elements from dynamic CMS data, making them static.
- Select the element, click the purple CMS field label, and choose Unlink. Now the element is editable as static content.
- Note: This change affects all items since the template is shared. If you want unique designs that aren’t CMS-bound, this alone won’t be enough.
5. Create Separate Collections (If Needed)
- If designs differ dramatically, consider creating multiple Collections (e.g., “Case Studies,” “Projects,” “Events”) rather than using a single one.
- Each Collection gets its own Template Page, allowing totally different page formats.
6. Use Static Pages with CMS Data
- For complete layout freedom per item, don’t use the Collection Page at all.
- Instead, create static pages (e.g., /project-apple, /project-banana) and manually insert CMS content via embeds or copy.
- This gives you full control over layout but removes CMS automation benefits.
Summary
To display different formats for each CMS item, use Conditional Visibility with custom fields, unlink selected elements for manual overrides, or consider separate Collections or static pages for complete layout control. Collection Pages use a shared template, so layout variety requires workarounds like visibility rules or custom structuring.