Use anchor links on a page

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. 

  1. Highlight the text you would like to use as the "anchor."
  2. Within the Link menu, select Add Anchor.

add anchor.png

Writing an Anchor Name

When clicking Add Anchor, an Anchor Properties window will come up.
naming an anchor .png
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:

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. 

  1. Create a new anchor (from Step 1 above). 

  2. Click the Add Link icon in the editing toolbar. 
  3. In the Anchor tab, select the destination anchor from the dropdown. 

anchor tab in link properties.png

Anchor in a different Content element on the same page

  1. Create a new anchor (from Step 1 above).
  2. 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).
  3. Uncheck the box next to Open link in a new tab.

anchor link URL in link properties.png

Anchor and anchor link are on separate pages

  1. Create a new anchor (from Step 1 above).
  2. 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). 

Was this article helpful?
2 out of 5 found this helpful

Comments

0 comments

Please Sign in to leave a comment if you don't see the comment box below.