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?
To assign an in-page link to individual team members in a collection list on a Webflow page without using individual collection pages, you can follow these steps:
1. Create a Collection: First, create a Collection in Webflow that will store your team members' information. Make sure to include fields such as Name, Position, Bio, and any other relevant details.
2. Add a Collection List: On your Webflow page, add a Collection List element to display the team members' information. Connect the Collection List to the previously created Collection.
3. Set Up the Structure: Within the Collection List, add the necessary elements and design them according to your needs. For example, you could use a div block to contain the team member details, and within that, add elements like an image, name, position, and bio.
4. Create In-Page Links: To create in-page links, you'll need to assign unique IDs to each team member's container. Select the div block that contains the team member's information, go to the Element Settings panel (on the right-hand side), and set a unique ID in the "ID attribute" field. For example, you could use "team-member-1," "team-member-2," and so on.
5. Link to the In-Page Target: Now, you can create the in-page link. Select the element from where you want to link to the team member's information. It could be a button, image, or any other clickable element. In the link settings, choose "URL" as the link type, and enter "#" followed by the unique ID of the team member container you want to link to. For example, if you want to link to "team-member-1," the URL should be "#team-member-1."
6. Styling the Active Link: If you want the active link to have a visual indication, you can use Webflow's built-in CMS classes and the "Current" state. Style the active link using the "Current" state settings to make it stand out.
Using these steps, you can assign in-page links to individual team members within a collection list on your Webflow page. When a user clicks on a link, the page will scroll to the corresponding team member's container, displaying their details.