An anchor is a type of html inserted that allows you to create a hyperlink to a specific section of a page. Anchor links are helpful because you can use them to send a site visitor to a targeted area of your site (the anchor).
In this Article
Anchor vs anchor link
An anchor has two parts: the anchor itself and the anchor link. The visitor will click on the anchor link and be directed to the anchor on another area of the same page.
- Anchor: This is the destination or point within a page where you want the visitor to be directed to when clicking on the anchor link.
- Anchor link: The button/link that is clicked is called the anchor link. It takes the user to the destination where you have set down or placed the anchor.
Step 1: Create an anchor
Anchors are created within the editor in a Content element. This is the place you want your visitor to "jump" to when clicking from the first spot. Here's how to create an anchor.
- Highlight the text you would like to use as the "anchor."
- Within the Link menu, select Add Anchor.
Writing an Anchor Name
When clicking Add Anchor, an Anchor Properties window will come up.
Choosing the Anchor Name is important! Just like a URL slug, the anchor name should NOT have any spaces. Use anchorName or anchor_name, rather than anchor name. Also, anchors are case sensitive.
Step 2: Create an anchor link
Once you have an anchor, you can create the corresponding anchor link that visitors will click to be directed to the anchor you've placed in Step 1.
The method will vary depending on whether the anchor and the anchor link are:
- Anchor within the same Content element
- Anchor in a different Content element on the same page
- Anchor between elements on separate pages
To link to an accordion or tab panel using a direct link, follow the instructions in Customize an Accordion or Tabs element.
Anchor within the same Content element
Sometimes the anchor and anchor link are in the same content element on the same page.
-
Create a new anchor (from Step 1 above).
- Click the Add Link icon in the editing toolbar.
- In the Anchor tab, select the destination anchor from the dropdown.
Anchor in a different Content element on the same page
- Create a new anchor (from Step 1 above).
- On the URL tab within the Link Properties window, use that full page's URL with a hashtag (#) followed by the destination anchor's name, (for example: www.yourdomain.com/pagename#anchorname).
- Uncheck the box next to Open link in a new tab.
Anchor and anchor link are on separate pages
- Create a new anchor (from Step 1 above).
- On the URL tab within the Link Properties window, use the full page URL with a hashtag (#) followed by the destination anchor's name (www.yourdomain.com/pagename#anchorname).
Important Note during Deployment
If your site(s) are still in deployment, do not include your domain URL on the link but only the relative link (/pagename#anchorname).
Comments
Please Sign in to leave a comment if you don't see the comment box below.