How can I add an ID to content within the post body (RTF) in Webflow for easy external linking?
TL;DR
- Add an Embed block in the Rich Text Field to insert a header element with a custom ID (e.g.,
<h2 id="your-id">). - Link to that ID using anchor URLs like
https://yourdomain.com/page#your-id, and use custom CSS if needed for scroll offset.
To create deep links or anchor links to specific sections inside a Webflow Rich Text Field (RTF), you’ll need to manually add IDs to elements within the content. This isn’t supported natively via the CMS editor UI, but there’s a reliable workaround.
1. Enable Custom Embed Code in RTF
- Within the RTF editor in the CMS, insert an Embed block.
- To do this in the Webflow Designer, select your Rich Text field, click the pencil icon, and choose + Add Embed.
- You can now manually write basic HTML, including elements with custom ID attributes.
2. Insert HTML Headers with IDs
- In the Embed block, type a header element (e.g.,
<h2 id="pricing">Pricing</h2>). - Keep IDs short and descriptive (no spaces or special characters).
- This tag is now linkable using #pricing.
Note: Webflow strips out certain tags and attributes unless they’re wrapped in the Embed block—don’t type <h2> directly into the RTF text content.
3. Link to the Section Using Anchor URLs
- Anywhere on your site, you can now link to the section like this:
https://www.yoursite.com/post-name#pricing. - These links will scroll the page directly to that header.
4. Use RTF Custom CSS (Optional)
- If needed, add padding or offset for in-page anchor linking so the section isn’t hidden behind the navbar.
- Add a combo class to your headers (e.g., "anchor-offset") and use custom CSS in the Page Settings or Embed to style the scroll behavior.
Example:
#pricing { scroll-margin-top: 100px;}Summary
To deep-link to content inside a Rich Text Field in Webflow, use an Embed block with a header element and custom ID. Then, create anchor links to #your-id from within your site or externally.