If you have ever wanted to direct your users to a certain part of your page, anchors are a great way of doing this.
The HTML element is a great way to add custom anchors into your page. A good example is included below, which can be added into your page anywhere you would like an anchor. Be sure to change my-heading to a unique ID!
Once you have your anchors set up within the HTML element, it's time to link to this. There are a couple of ways that you can do this!
- Open the page using the URL with the anchor attached
- Add a Button element to your page for users to click on. For same-page anchors, you can simply insert "#my-heading" into the URL field of the button. For linking to an anchor on a different page, you will need to use the full URL.
- Add a hyperlink to your Text element
Why are my anchors not working?
There are a couple of reasons why your anchors may not be working correctly on your page.
- Your anchors are not unique - each anchor must have a unique ID
- Your anchors will not work in our editor, or on page previews - these will work on the live page
- Your anchors will not link to content inside of tabs that are not currently active
- Your anchors may drop the user to a higher point in the page if the page contains a large amount of images - since lazy loading only loads images when they come into view, this means that the page height is not fully calculated until all images are loaded
- In rare occasions, this may be a theme conflict - in which case, please get in touch with our support team who can investigate: firstname.lastname@example.org