Setting Up Anchor Links to Specific Locations on a Page
One common way to set up the user interface on a website is by using something called anchor links. The idea behind anchor links is that you could have a link in your header or on a specific page that directs to a specific location on a specific page. That link could be a button or an image, or it could be a simple text link or menu item. Here’s how to do it:
Set up the target location
Where do you want the user to end up? You’ll want to start by setting up the target location using a simple bit of code called an ID. You can set an ID on any module, column, or row in the page builder, although the most common use case is for a row.
- Launch the Page Builder on the page where your target location is.
- Find the row you want the user to end up on and click on the row settings icon.
- In the Advanced tab of the row settings, find the ID field and enter an ID. It must be lowercase with no spaces, dashes only. (i.e. contact-us)
- Once your ID is set, publish your changes. Now your target ID is set up.
Set up the anchor link
So you have a target location, but now you need to set up the anchor link that leads users there. This can be an image, a button, or a simple text hyperlink. For this example, we’ll use a button.
- Launch the page builder and add your button to the page (if you don’t already have one).
- Setup your button as desired, but for the link field, enter the ID you set above, preceded by a slash and a hashtag. (i.e. /#contact-us)
- If your target link is on a different page, you may need to add that page slug as well. (i.e. /about/#contact-us)
- Publish your page and exit the page builder.
As always, it’s a good idea to refresh the page one more time and test it out. You might even want to check it out using an incognito or private browser window to quickly verify that it’s working for anonymous users on your website.
If you have any further questions, feel free to reach out to our support team via chat or submit a ticket.