Using Anchors
Did you know you can link to different sections within the same webpage? You can also use these links on other pages to direct users to a specific section of content. This guide provides step by step instructions on using Anchors to do just that.
Steps for Creating an Anchor
Place the Anchor
The first step is to identify a point on your page where you would like your link to direct users. This is called the "Anchor."
To create an anchor, highlight your target text and click the link button.
.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiVkpYZmJhLUlUbjNxWWQiLCJpYXQiOjE3MTYyMTA4OTYsImlzcyI6Imh0dHBzOi8vc2xpdGUuY29tIiwianRpIjoiR3pROUV0OFZDNkkwS1kiLCJleHAiOjE3MTg4MDI4OTZ9.sA-75xU8wFQRYXfg9Ie0JeUqUC3QGlXrGPzr_R62bOg)
A popup box will appear. Click on the arrow next to "Advanced" to reveal a box labeled "ID."
.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiVkpYZmJhLUlUbjNxWWQiLCJpYXQiOjE3MTYyMTA4OTYsImlzcyI6Imh0dHBzOi8vc2xpdGUuY29tIiwianRpIjoiR3pROUV0OFZDNkkwS1kiLCJleHAiOjE3MTg4MDI4OTZ9.sA-75xU8wFQRYXfg9Ie0JeUqUC3QGlXrGPzr_R62bOg)
Name the Anchor
In the "ID" box, give your anchor a name. Try to be short yet descriptive. Spaces are not permitted but dashes (-) and underscores (_) are.
Note: this text is case sensitive so be mindful of capital letters.
Click the green checkmark. This will create your anchor.
.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiVkpYZmJhLUlUbjNxWWQiLCJpYXQiOjE3MTYyMTA4OTYsImlzcyI6Imh0dHBzOi8vc2xpdGUuY29tIiwianRpIjoiR3pROUV0OFZDNkkwS1kiLCJleHAiOjE3MTg4MDI4OTZ9.sA-75xU8wFQRYXfg9Ie0JeUqUC3QGlXrGPzr_R62bOg)
Create a Hyperlink to your Anchor
Find the place where you wish to link from. This is typically somewhere higher on the same page, but could also be on another page. Highlight the text that you wish to use for your hyperlink, and once again click the link button.
.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiVkpYZmJhLUlUbjNxWWQiLCJpYXQiOjE3MTYyMTA4OTYsImlzcyI6Imh0dHBzOi8vc2xpdGUuY29tIiwianRpIjoiR3pROUV0OFZDNkkwS1kiLCJleHAiOjE3MTg4MDI4OTZ9.sA-75xU8wFQRYXfg9Ie0JeUqUC3QGlXrGPzr_R62bOg)
A popup window will appear. Type the name of the page you're working on. A list of choices will be presented as you type. Choose the correct one.
Note: once you click a page it will change the name to "/node/" and some numbers (e.g. /node/39669). Please don't worry! This is done to keep the link from breaking in the event that your page name changes.
.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiVkpYZmJhLUlUbjNxWWQiLCJpYXQiOjE3MTYyMTA4OTYsImlzcyI6Imh0dHBzOi8vc2xpdGUuY29tIiwianRpIjoiR3pROUV0OFZDNkkwS1kiLCJleHAiOjE3MTg4MDI4OTZ9.sA-75xU8wFQRYXfg9Ie0JeUqUC3QGlXrGPzr_R62bOg)
Add # followed by your anchor name. In this case, since we named our anchor "resources" we would add "#resources" to the end of the URL.
.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiVkpYZmJhLUlUbjNxWWQiLCJpYXQiOjE3MTYyMTA4OTYsImlzcyI6Imh0dHBzOi8vc2xpdGUuY29tIiwianRpIjoiR3pROUV0OFZDNkkwS1kiLCJleHAiOjE3MTg4MDI4OTZ9.sA-75xU8wFQRYXfg9Ie0JeUqUC3QGlXrGPzr_R62bOg)
Your text should now show a link, which will take users to the area where you placed your anchor. Click save when you're finished.
.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiVkpYZmJhLUlUbjNxWWQiLCJpYXQiOjE3MTYyMTA4OTYsImlzcyI6Imh0dHBzOi8vc2xpdGUuY29tIiwianRpIjoiR3pROUV0OFZDNkkwS1kiLCJleHAiOjE3MTg4MDI4OTZ9.sA-75xU8wFQRYXfg9Ie0JeUqUC3QGlXrGPzr_R62bOg)
Note: You can direct your users to these anchored sections from any of your webpages. They are not limited to being used within the same page. To do so, simply follow the steps for creating a hyperlink. When typing the URL, choose the one that corresponds to the page with the anchor, add the # and corresponding anchor name (e.g. #resources), and click save!