How can I add anchor links to different subtopics of a CMS page in Webflow?
TL;DR
- Assign unique HTML IDs to each subtopic section on the CMS Collection Page.
- Create links pointing to those IDs using the #id-name format from within the same page or external pages for anchor navigation.
To add anchor links to subtopics on a CMS page in Webflow, you’ll need to assign unique HTML IDs to elements within a Collection Page and then link to those IDs using the anchor link format.
1. Define Sections with Unique IDs
- In your CMS Collection Page, drag in a Div Block or use an existing element that represents a subtopic heading or section.
- Select that element and go to the Element Settings panel (gear icon in the right sidebar).
- In the "ID" field, give it a unique name (e.g., features, pricing, faq).
- Repeat this for each subtopic you want to link to on the page.
2. Create Anchor Links
- To create a link that jumps to one of these IDs, use the format #id-name.
- You can place the link in:
- A rich text field within the CMS (manually enter
#features) - A button or text link element inside the Collection Page
- A menu or navbar that exists on all pages
3. Link from External Pages (Optional)
- If you're linking to an anchor from a different page (e.g., your homepage), format your link as:
- your-collection-slug/item-slug#anchor-id
- Example: /blog/how-to-use-webflow#features
4. Use Scroll Behavior (Optional)
- If you prefer a smooth scroll transition, apply a custom page scroll interaction or use the built-in smooth scrolling behavior on modern browsers.
Summary
To set up anchor links on a CMS page in Webflow, add unique IDs to subtopic sections and create links pointing to those IDs using the #id-name format. This allows users to jump directly to specific content within a CMS Collection Page.