How can I assign an in-page link to individual team members in a collection list on a Webflow page without using individual collection pages?

TL;DR
  • Add unique identifiers in the collection list, such as a text field or the "Name" field.
  • Configure IDs for each collection item using a div block that dynamically sets the ID based on the identifier.
  • Add in-page links by linking to the IDs, setting the link type as "Page" and selecting the ID as the target.
  • Customize link appearance for clarity and test functionality by publishing or previewing the page.

To assign an in-page link to individual team members in a collection list on a Webflow page without using individual collection pages, follow these steps:

1. Add Unique Identifiers

  • Open your Collection List in the Webflow Designer.
  • Add a Text Field or reference an existing unique field like "Name" to serve as identifiers for in-page links.

2. Configure IDs for Each Item

  • Drag a Div Block or similar container inside the collection item.
  • Set an ID for this container that corresponds to the unique identifier (e.g., if using the "Name" field, set ID to the text in that field). Use the "Get Text from" option to dynamically set this ID based on the collection item's data.

3. Add In-Page Links

  • Identify the element (e.g., a button or link block) that will act as the link to the in-page anchor within the collection item.
  • Link it to the ID set in step 2. When configuring the link, choose the Page link type and then select the previously set ID as the link target.

4. Customize Link Appearance

  • Ensure the links are styled consistently and visually indicate they are clickable, using your preferred design settings in the Webflow Designer.

5. Test the Functionality

  • Publish or Preview your site to ensure that clicking the in-page links scrolls to the appropriate section of the page.

Summary

You can integrate in-page links for collection items by using unique identifiers and assigning IDs dynamically. Link configuration and styling complete the setup for intuitive navigation within the page.

Rate this answer

Other Webflow Questions