# How to add an id to a heading in the rich text editor for anchor scrolling?

**URL:** <https://forum.builder.io/t/how-to-add-an-id-to-a-heading-in-the-rich-text-editor-for-anchor-scrolling/5528>\
**Category:** Visual Editor Help\
**Tags:** visual-editor\
**Created:** [May 8, 2024, 12:07pm UTC](https://forum.builder.io/t/how-to-add-an-id-to-a-heading-in-the-rich-text-editor-for-anchor-scrolling/5528 "2024-05-08T12:07:23Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![oemeran](https://avatars.discourse-cdn.com/v4/letter/o/4bbf92/32.png) [@oemeran](https://forum.builder.io/u/oemeran)\
**Post date:** [May 8, 2024, 12:07pm UTC](https://forum.builder.io/t/how-to-add-an-id-to-a-heading-in-the-rich-text-editor-for-anchor-scrolling/5528/1 "2024-05-08T12:07:23Z")

</div>

Can you add an `id` to a header inside the richt text editor without custom code? I don’t want to edit the HTML code directly, as there is a warning that it can be overwritten on the next save from someone else.  
There only seems to be possible to add links to a given text, which produces a `href` correctly. Basically, I want that adding an anchor to the url, would scroll to the correct position, e.g.: `my-website.com#first-heading`

---

<div class="post-metadata">

**Author:** ![JuliusGD](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/juliusgd/32/2523_2.png) [@JuliusGD](https://forum.builder.io/u/JuliusGD)\
**Post date:** [May 8, 2024, 3:31pm UTC](https://forum.builder.io/t/how-to-add-an-id-to-a-heading-in-the-rich-text-editor-for-anchor-scrolling/5528/2 "2024-05-08T15:31:41Z")

</div>

Hello oemeran,

There are a few ways to add an id to an element. Aside from the method you’ve mentioned, which may be overwritten depending on your team’s workflow, I would suggest entering the id into the field pictured, below:

You may select the layer/element you would like to add an id to and find the id property dropdown on the `Styles Tab` under `HTML Attributes`

 ![3AE437CF-DE4C-48C3-9880-449C71A4E7DC](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/5/553a9ad7fe9f83a9b0b02c0f4d17058d54fd78b8.jpeg)

Let me know if you have any difficulties doing so or if I’ve misunderstood anything about your request.

---

<div class="post-metadata">

**Author:** ![oemeran](https://avatars.discourse-cdn.com/v4/letter/o/4bbf92/32.png) [@oemeran](https://forum.builder.io/u/oemeran)\
**Post date:** [May 12, 2024, 11:23pm UTC](https://forum.builder.io/t/how-to-add-an-id-to-a-heading-in-the-rich-text-editor-for-anchor-scrolling/5528/3 "2024-05-12T23:23:14Z")

</div>

Unfortunately, I think you understood it wrong. I want to add an id to a heading INSIDE the rich text editor. Take a look at my screenshot. I want to add an id to “First Header” without affecting the rest. Does this make it more clear what I want?

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/b/b89b50817bec02a84a128b04e43371d1a8d79831.png)

---

<div class="post-metadata">

**Author:** ![JuliusGD](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/juliusgd/32/2523_2.png) [@JuliusGD](https://forum.builder.io/u/JuliusGD)\
**Post date:** [May 13, 2024, 3:23pm UTC](https://forum.builder.io/t/how-to-add-an-id-to-a-heading-in-the-rich-text-editor-for-anchor-scrolling/5528/4 "2024-05-13T15:23:35Z")

</div>

Thank you for clarifying. The way to do this would be to use the Edit As Code button:  
 ![40C320C9-F48B-4ECA-B3FE-AF72228CDC18_4_5005_c](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/e/e26801b533b40d0e743090649eca43340f26317c.jpeg)

The warning indicating that changes made may be overwritten is just indicating that changes made using the Visual Editor UI will overwrite changes made using the Edit As Code feature and vice versa.

---

<div class="post-metadata">

**Author:** ![oemeran](https://avatars.discourse-cdn.com/v4/letter/o/4bbf92/32.png) [@oemeran](https://forum.builder.io/u/oemeran)\
**Post date:** [May 14, 2024, 8:12am UTC](https://forum.builder.io/t/how-to-add-an-id-to-a-heading-in-the-rich-text-editor-for-anchor-scrolling/5528/5 "2024-05-14T08:12:24Z")

</div>

That’s what I wanted to avoid. I ended up creating headers now for each block and add an id to each one via HTML Attributes. I think this is more safe and allows non-devs to mess things up using the visual editor.
