In Webflow, is there a way to add unique Div IDs for each collection item in order to redirect users to corresponding workspace detail on another page?

Published on
September 22, 2023

In Webflow, you can definitely add unique Div IDs for each collection item to redirect users to corresponding workspace detail on another page. Here's how you can achieve this:

  1. After creating your collection and adding all the necessary fields, go to the Collection Template page where you want to display the details of each item.

  2. Select the Collection List wrapper element that contains the collection items, and open the Collection Item settings panel on the right-hand side.

  3. Under the Settings tab, you will find a field called "Collection item URL." Click on the dynamic field picker icon next to it.

  4. In the dynamic field picker, select the field that contains the unique identifier for each item in your collection. This could be a slug field, a reference field, or any other field that holds the necessary information. For example, if you have a field called "Workspaces ID," select that field.

  5. After selecting the dynamic field, you will see a preview of the URL structure. By default, it will be something like "/collection-item/[slug]." You can modify this structure as per your requirements. For example, if you want the URL to be "/workspaces/[workspace-ID]," change the structure accordingly by clicking on the "Text" dropdown and selecting the desired field.

  6. Now, to add the unique Div IDs on the collection item wrapper, select the wrapper element and click on the settings gear icon. In the settings panel, go to the "Attributes" tab.

  7. In the Attributes tab, click on the "+" button to add a new attribute.

  8. In the Name field, enter "id" (without quotes). This is the HTML attribute responsible for providing the unique ID to the element.

  9. In the Value field, click on the dynamic field picker icon and select the same unique identifier field that you used for the Collection item URL. For example, if you selected the "Workspaces ID" field, select that field here as well.

  10. Save your changes and then publish your site. Each collection item will now have a unique Div ID based on the selected field.

By following these steps, you will be able to add unique Div IDs for each collection item in Webflow, allowing you to redirect users to corresponding workspace details on another page.

Additional Questions:

  1. How do I create a collection item URL in Webflow?
  2. Can I customize the URL structure for collection items in Webflow?
  3. What is the purpose of a Div ID in Webflow and how can it be used for SEO optimization?