How to Create Anchor Links
Learn how to set links that lead to different sections within your page
When we have a lot of information on a page, we can make it more user-friendly by adding anchor links which lead to particular sections of a page. This allows website visitors to quickly jump to the section they are looking for, without having to read through a lot of text or scroll for a long time.
You can even link to an element on another page (within the same domain). Click this anchor link to jump to instructions on linking to an element on another page.
How to add anchors within the same page
- 1. See the example page: Christmas with Pets
- 2. Create a Table of Contents like on the example page, or add text like, 'see more about...' (where you would then add an anchor link).
- 3. Determine the target element you want to link to. Click on the element on the page. If you have an element that is hosted within a Content Element, like a header or text, you need to click on the Content Element (instead of the header/text element).
- 4. In the inspector (right side) click on the second tab, to find the identifier. It is located under Meta data. e.g. 3e6beeeb-e479-47b5-a1c9-ee0f2ffe6818
- 5. Copy the identifer
- 6. Highlight the text in your Table of Contents (or where you want to add the anchor link) and then click on the link button. Type in a '#' then paste the identifier into the link space. E.g. #3e6beeeb-e479-47b5-a1c9-ee0f2ffe6818 (If you forget the '#' it won't work!)
See image below:
You can do the same thing on other page types. E.g Promotion pages, in elements like Heros, Teasers or CTAs. Simply add '#' and the identifier to the button link of any element. See the link below as an example:
How to add an anchor Link that leads to an element on a different page
Please note, this only works for pages within the same domain.
- Get the identifier (found in the 2nd tab of inspector) of the element you want to link to (from a different page, but within the same domain.)
- Highlight the text you want to add a link to. Then click the link button in the top left corner of the content canvas. First paste the URL of the page, and then add a '#' plus the element identifier
- Example: This link leads to the victim stories of this page: https://www.four-paws.org/campaigns-topics/topics/companion-animals/buying-a-puppy#aa564ff8-55a0-431e-8af7-e0d1f9964c78