How can I unlink elements in a Webflow collection to have different formats for each item's page?
TL;DR
- Use Conditional Visibility and layout reference fields to display different layouts per Collection item within the same template.
- Remove dynamic bindings from elements to manually customize content, or use static pages for complete design control.
To display custom formats for each Collection item page, you need to unlink dynamic elements and manually format each one. Here's how to do it in Webflow:
1. Understand Template Pages vs Static Pages
- Collection Pages are dynamically generated from a Collection Template. Every item shares the same layout.
- If you want unique designs per item, you’ll need to work around the dynamic template or use static pages instead.
2. Options for Unlinking or Customizing Layouts
- You can’t fully "unlink" individual Collection item pages from the template structure.
- Instead, use one of the following approaches:
- Use Conditional Visibility to show/hide different layouts per item based on a Collection field (e.g., a “Layout Type” switch or option field).
- Build multiple custom components inside the same Collection page and conditionally display them.
- Convert Collection items into static pages if you want full design freedom (not ideal if you have many items).
3. Use Conditional Visibility for Custom Layouts
- Add multiple versions of your layout (e.g., hero sections, image placements, typography).
- Create a reference field or option field in the Collection (e.g., “Layout Style”).
- Use Conditional Visibility on each layout version:
- Select a section or div.
- In the settings panel, enable Conditional Visibility.
- Set rules based on the Layout field (e.g., “Layout Style is ‘Version A’”).
4. Avoid Dynamic Binding for Manual Edits
- To remove a dynamic link (so an element can have custom content instead):
- Select the element (e.g., Heading or Image).
- In the Settings panel, locate the purple dynamic field.
- Click it, then select “Remove Binding” or clear it.
- You can now enter custom static content.
5. Consider Static Pages for Full Flexibility
- For completely different layouts per item:
- Manually create static pages in the Pages Panel.
- Copy relevant content from the Collection if needed.
- Note: These won’t auto-update with the CMS and can be time-consuming.
Summary
You can’t unlink items from a Collection Template directly, but by using Conditional Visibility, layout reference fields, and removing dynamic bindings, you can create distinct visual formats. For full design freedom, consider using static pages.
