Artistry Labs Support

Follow

How to Add Anchors on a Page

This article will step you through how to add HTML anchors to your website.

What is an Anchor?

An anchor allows you to link to specific elements within a page. Normally a link will take you to another page, but with anchors, you can link to a specific element on a page (whether the same page or a completely different one). Most often you will use anchors to create a Table of Contents or a list of Frequently Asked Questions. This article will take advantage of anchors to show you how they work.

1. Setting the Anchor Name

1.1. Find the content box that you want to link to and click on the pencil to edit the box. Within the Administration Console, scroll down to where the text area is.

Find the content box that you want to link to and click on the pencil to edit the box. Within the Administration Console, scroll down to where the text area is.


1.2. Highlight the words that you want to be the anchor and then click on the anchor button.

Highlight the words that you want to be the anchor and then click on the anchor button.


1.3. In the pop-up window, give the anchor a name and then click "Ok".

In the pop-up window, give the anchor a name and then click "Ok".

Note: the anchor name needs to distinct from any other anchor name on the page. The anchor name can be whatever you choose, just remember the name that you have chosen.

2. Getting the Address of the Page

Getting the Address of the Page

We need to get the address of the page that contains the anchor we just created. To do this, go up to the address bar and select all of the address for the page. Then right-click and select copy.

Take note of this address because you will need it again in a few minutes.  In our example the address is http://demo1.artistrylabs.com/about-us.

3. Creating the Link

The final step in creating our anchor for our Table of Contents is to create the link. Make sure that you have followed step 2 and obtained the address of the page that we are going to link to.

In the window that pops up, click on the drop down box and choose the page where the anchor was placed.  In the box type the address that you would like to link to followed by a "#" and your anchor name.  In our example, this would be http://demo1.artistrylabs.com/about-us#testanchor.

3.1. Go to the content box where you would like to place the link.  Click on the pencil to edit the content box and scroll down to the Body section.

Go to the content box where you would like to place the link.  Click on the pencil to edit the content box and scroll down to the Body section.

3.2. Here you will highlight the word that you would like to be the link and click on the "insert/edit link" button.

Here you will highlight the word that you would like to be the link and click on the "insert/edit link" button.

3.3. Set the link

Set the link

In the window that pops up, click on the drop down box and choose the page where the anchor was placed.  The Url box will automatically populate after that type a "#" and your anchor name.  In our example, this would be /about-us#testanchor

4. Save all of your changes

Save all of your changes
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

Powered by Zendesk