How can I add anchor links to different subtopics of a CMS page in Webflow?
TL;DR
- Assign unique IDs to subtopic elements in your CMS Template page.
- Link to them using the #id format in link settings to enable smooth scroll navigation within the same page.
To create anchor links that navigate to different subtopics within a CMS page in Webflow, you need to strategically assign unique IDs and link to them.
1. Add Unique IDs to Subtopic Elements
- In your CMS Template page, select the element (e.g., a Heading, Div Block, or Section) that represents a subtopic's start.
- In the Element Settings Panel (D), locate the "ID" field.
- Enter a unique ID (e.g.,
subtopic1,faq-section, oroverview). - Use lowercase, no spaces, and avoid special characters.
- Repeat this for each subtopic block you want to link to.
2. Link to Anchor Targets
- Anywhere on the same CMS page (like a table of contents, menu, or button), select the element you want to turn into a link.
- In the Link Settings, choose “Page Section”.
- Type in the matching ID preceded by a #. For example, enter
#faq-section. - This creates a smooth scroll anchor link to that subtopic on the same page.
3. Use Dynamic IDs in Rich Text (Optional)
- If your CMS content includes subtopic headings inside a Rich Text Block, anchor linking becomes tricky.
- To link inside a Rich Text, use Custom Code or Embed Blocks inside the CMS rich text, but this requires advanced setup and could break Webflow’s visual editing.
- Alternatively, structure your CMS Template using Collection Lists and static elements outside the Rich Text for better anchor control.
4. Test Your Anchor Links
- Publish your site and navigate to the CMS page.
- Click on each anchor link to confirm it properly scrolls to the correct subtopic.
Summary
Add anchor links by assigning unique IDs to subtopic elements within the CMS Template page, then link to them using the #id format in buttons or text links. This enables smooth navigation within long-form CMS pages.