How can I add anchor points within the CMS rich text in Webflow?
TL;DR
- Embed HTML anchor tags (e.g., ) directly into CMS Rich Text using custom HTML embeds.
- Link to these anchors elsewhere on the page using hash-based URLs (e.g., #your-id) to enable in-page navigation.
Adding anchor points within a CMS Rich Text field in Webflow requires a workaround, as Webflow’s native CMS editor doesn’t support setting HTML anchor IDs directly. Here’s how to set it up.
1. Use Custom Embed Components in Rich Text
- Enable custom code embeds inside the rich text by wrapping the field with a Rich Text element configured with "Allow custom HTML and embeds" in the CMS Editor.
- In the CMS item’s Rich Text field, insert an HTML embed wherever you want the anchor point.
- Use a simple anchor tag format like:
<div id="section-name"></div>
or<a id="section-name"></a>
2. Add Link Elements That Point to Your Anchors
- Anywhere else in the CMS item or on the page (e.g., in a menu or table of contents), insert links pointing to these IDs.
- Set the Link URL to:
#section-name
This will scroll to the anchor within the rich text when clicked.
3. Style the Anchor Area (Optional)
- To prevent the anchor from being hidden under a fixed header, you can:
- Add padding-top to the element after the anchor, and
- Offset the page scroll position using scroll-margin-top in custom CSS (via page settings or global custom code).
4. Be Aware of CMS Editor Limitations
- Webflow’s Rich Text editor strips out certain HTML in the CMS Editor interface. Simple
<a id="...">or<div id="...">usually works, but more complex elements might be sanitized. - Test on the live site to ensure the anchor IDs persist.
Summary
To add anchor points inside CMS Rich Text, embed small HTML snippets (e.g., <div id="your-id">) directly in the text via custom embeds, and link to them using standard hash-based URLs (#your-id). This creates in-page navigation even within CMS-generated content.