Bookmarks / Anchor Links

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 Bookmarks to do just that.
Note: This functionality used to be called "Anchor Links." The name has changed, but the functionality remains the same.
﻿
Table of contents
Steps for Creating a Bookmark
Step 1: Set a Bookmark Target
1a: Create a Bookmark Target within a Text Area
1b: Create a Bookmark Target to Another Component (not a Text Area)
Step 2: Create a Hyperlink to your Bookmark
Linking to your bookmark from the same page
Linking to your bookmark from another page
Steps for Creating a BookmarkCreating a bookmark (formerly called an anchor link) is a two-step process. In the first step, you'll name the precise location you want to link to (e.g., "toefl" for the TOEFL section of an admissions page). This creates the bookmark. The second step is to create a link that references this bookmark name, whether from elsewhere on the same page or from a different page entirely.
Step 1: Set a Bookmark Target The first step is to identify a target point on your page where you would like your link to direct users. This is called a bookmark, and was previously known as an "anchor." 
The type of component you're linking to determines how you will create your bookmark. 
1a: Create a Bookmark Target within a Text AreaYou can create a bookmark to a specific line of text within a Text Area or any other component that includes a Bookmark icon in the text editing toolbar. To create one, place your cursor at the beginning of your target and click the bookmark button from the text area toolbar. 
﻿
The Text Area toolbar in the editing interface. To the right of the link button is a new button for "Bookmark."The Text Area toolbar in the editing interface. To the right of the link button is a new button for "Bookmark."
A popup box will appear. It contains an area where you can provide a name for your bookmark.   
﻿
The text area editor shows a popup box where a Bookmark can be named.The text area editor shows a popup box where a Bookmark can be named.
Note: Bookmarks are case-sensitive, so "toefl", "Toefl", and "TOEFL" are 3 different bookmarks. Additionally, spaces are not permitted, but dashes (-) and underscores (_) are allowed in bookmark names.
Click the "Insert" button. This will create your bookmark.
﻿
The Bookmark has been placed ahead of the text.The Bookmark has been placed ahead of the text.
1b: Create a Bookmark Target to Another Component (not a Text Area)Bookmarks/Anchor links are now built into all components, such as Color Bands, Postcards,  Spotlights, and more. Instead of placing a bookmark at a specific area of text, you'll copy the built-in bookmark from the top of the component.
To locate this built-in Bookmark, click the 3 dots in the top right corner of the component. Choose the "Copy Bookmark" option from the dropdown list.
﻿
Editing interface showing a Color Band with open menu options. Copy Bookmark is the third choice in this dropdown menu.Editing interface showing a Color Band with open menu options. Copy Bookmark is the third choice in this dropdown menu.
Step 2: Create a Hyperlink to your BookmarkFind the place where you wish to link from. This is typically somewhere higher on the same page, but could also be on another page. 
Linking to your bookmark from the same pageHighlight the text that you wish to use for your hyperlink, and click the link button. 
﻿
The text area editor shows highlighted text and the "link" button in the text area toolbar.The text area editor shows highlighted text and the "link" button in the text area toolbar.
A popup window will appear.
If you created your own bookmark in a Text Area: Type # then the name of the bookmark you created, without any spaces. 
If you are linking to a Bookmark within the same Text Area component you can also select the Bookmark from the Bookmarks section at the bottom of the Link popup window﻿﻿
﻿
Add a caption...
﻿
Add a caption...
If you are using a built-in component bookmark: Type # then paste the bookmark that was automatically copied to your clipboard in step 1b above. 
When finished, click the green check mark.
Note: The # symbol is critical. It is what tells the link where to land within the page.
﻿
The text area editor shows highlighted text and a popup box where a link URL can be added.The text area editor shows highlighted text and a popup box where a link URL can be added.
Your text should now show a link, which will take users to the area where you placed your bookmark. Click save when you're finished.
﻿
The text area editor shows linked text. The cursor is hovering above the link to reveal the link target, which is the bookmark added further down the page.The text area editor shows linked text. The cursor is hovering above the link to reveal the link target, which is the bookmark added further down the page.
Linking to your bookmark from another pageTo direct users to a bookmark on another page, you'll  follow the same steps to create the bookmark⁠ .
Next, go to the page from which you wish to link. Follow the same process to create a link by highlighting your text and clicking the link button.
To find the correct link URL, start typing the name of the page where your bookmark is located. Once it populates in the box, click it. 
﻿
The text area editor shows highlighted text and a popup box where a link URL can be added. The example demonstrates how the target page is displayed when its name is entered into the Link URL box. The text area editor shows highlighted text and a popup box where a link URL can be added. The example demonstrates how the target page is displayed when its name is entered into the Link URL box. 
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 if your page name changes. 
Next, add the bookmark to the end of the URL.
If you created your own bookmark in a Text Area: Type # then the case-sensitive name of the bookmark you created, without any spaces. 
If you are using a built-in component bookmark: Type # then paste the bookmark that was automatically copied to your clipboard in step 1b above.
Do not use any spaces. Click the green checkmark when you are done.
﻿
The text area editor shows highlighted text and a popup box where a link URL has been added. A # was included after the URL and was followed by the case-sensitive anchor name that was created earlier in the process. The text area editor shows highlighted text and a popup box where a link URL has been added. A # was included after the URL and was followed by the case-sensitive anchor name that was created earlier in the process. 
The link to your bookmark on another page has been created! Click save when you're done and test it out to confirm it works as expected.
﻿