Anchor component

Elements
1

Hi guys. Any suggestion where to find the anchor component inside Elements? The AI bot told me it’s there :(( But I am struggling to find it. Thanks.

2

There is no anchor component per se. In most (if not all) components, there will be an ID box in the advanced section of the component inspector (picture below is from container):

Screenshot 2026-02-20 at 14.41.05
Screenshot 2026-02-20 at 14.41.05854×434 61.6 KB

Enter an anchor id there, and then in the link section, you can set the anchor there to go to it.

3

Hi Steve. Thanks a lot for that. I also found that option after asking the bot again but a real human reply I absolutely prefer :)) One more question: is there a way to control the distance of the self-made anchor. I wanted to land at a specific point but it jumps right in the middle of the specific text box. With foundry I was used to control where the anchor leads me. Thanks a lot

4

I am not sure and I haven’t seen that issue with my site. I use anchors to get to a particular section on a page, and when button is clicked, it goes right to that section. Anchor is set on a text box used as a heading for a section of the page.

5

Thanks Steve. Hopefully someone else will have an answer how to fine-tune where the anchor leads to. I am using a button and the corresponding url/#text

6

See the video on YouTube, easy but you need to publish the site to make it work, not just preview it - https://youtu.be/VEqrlcXydTs?si=AzD7FaWbvib-Mhle

7

… and here’s the link to setting up an Anchor in the manual!

1 Like
8

You should write in the manual must publish to see it work.

9

Anchors work fine locally, unless you are linking to a full web address like https://www…

1 Like
10

To ensure your anchor links stop just below the header, you can use the Scroll Padding Tailwind Utility class. Here’s how:

  1. Add Scroll Padding: On the component you’re scrolling to, go to the Advanced settings and add a class like scroll-mt-[100px] in the CSS Classes box. Adjust the 100px to the height of your header or the space you want.

This will create an offset, ensuring the component doesn’t hide behind the header when you scroll to it. Tailwind makes it easy to customize this to fit your design perfectly!

1 Like
11

Thanks guys, for all your tipps. You are amazing! After selecting the corresponding container and not the text column inside it, everything works fine now.

1 Like