How can I add anchor links to different subtopics of a CMS page in Webflow?

To create anchor links for different subtopics within a Webflow CMS page, you’ll need to point links to specific elements using unique section IDs. Here's how to do it effectively.

1. Add Unique IDs to CMS Elements

• In your CMS template page, select the element (like a Section, Div, or Header) that marks the start of your subtopic.
• In the Element Settings panel, set a unique ID in the “ID” field (e.g., subtopic-1).
• Do not reuse IDs—each subtopic should have its own unique anchor target.

2. Create Anchor Links

• Create a Link Block or Text Link wherever you want the navigation (this could be at the top of the CMS template or in a reusable Symbol).
• In the link settings, choose Page Section as the link type.
• In the field that appears, type # followed by the exact ID you assigned earlier (e.g., #subtopic-1).
• This creates a smooth scroll link to that subtopic when clicked.

3. Use Dynamic Collections with Care

• If your subtopics are created dynamically inside a Rich Text element, inserting anchors requires custom scripting or manual use of Embed components within the CMS.
• To manually add an ID inside Rich Text:
• Use a Custom Embed element instead of the Rich Text for each subtopic heading.
• Insert an HTML heading with an ID (example: <h2 id="subtopic-1">Topic Title</h2>), but note Webflow will sanitize HTML in native Rich Text, so use Embed elements for this.

4. Preview and Test

• Publish your site (anchor links won’t work in the Webflow Designer preview).
• Click the anchor links and confirm they scroll to the right subtopic sections within the CMS page.

Summary

To add anchor links in a Webflow CMS page, assign unique IDs to each subtopic element and manually create links referencing those IDs using #your-id. For dynamic content, you may need to use Embed elements to inject specific anchors.