Add Anchor Links to a Static Page

How to add anchor links to the CMS regions of your Novi website.

Jenn Norman, CAE avatar
Written by Jenn Norman, CAE
Updated over a week ago

Anchor links are a great way to help your members and website visitors find what they're looking for on pages with a lot of content.

What is an Anchor Link?

Anchor links are clickable text or buttons that send the website visitor to a specific section of content elsewhere. The most common example is a group of links or buttons at the top of a webpage that when clicked bring the user further down the same page.

In the screenshot below, the highlighted row of buttons are individually linked to corresponding sections of content on that webpage.

Notice that if you are logged-in as an admin with the editor toggle active, you will be able to see text that has been "anchored" as denoted by the bookmark symbol (see image below).


How to Add Anchor Links

Step 1: Choose where the anchor should begin by placing your cursor in that spot. Then select Insert > Anchor in the editor.

When the window pops up, give your anchor a name that will help you remember the content section you'll be linking.

Step 2: Create the link that will send users to your new anchor.

When adding a new link, click into the Anchors box of the window to see a dropdown of possible anchors. Select the one you added in Step 1 and the editor will automatically generate the correct URL for you.

Step 3 (optional): To make the anchor link a button, follow the steps above and then add formatting to your link.

Highlight the link you want to make a button, select the formatting box in the editor, and use the drop down menus to select a button color from your branding.


Linking to an Anchor on a Different Page

When following the steps above, if the anchor and the link will be on separate webpages, the setup of the link will be slightly different.

URL for Same Page

In the example above for Step 2, the link text is added and the URL is:

#People

URL for Different Page

Using the same anchor text (#People), let's say you want to add the anchor on the About Us page (/about-us) and the link will be on the Member Benefits page (/member-benefits). In this case the URL on the Member Benefits page will be:

/about-us#People

Tip: When adding links to pages on your website (versus a completely separate site), you only have to put the part of the URL that comes after your domain (starting with the slash).


Troubleshooting

Your experience as a logged-in admin user with the anchor tags will differ from your non-admin users since you are seeing the site in "edit" mode. You may experience a jump that appears off if you have the editor toggle on. We recommend turning off the editing toggle when testing anchor links. You could also view the page in an incognito window.

Did this answer your question?