What are Anchor Links…And How to Use Them on Your Website

One of the most important aspects of your website is the navigation! How do visitors journey through your site? Is it easy to get around? Do they get stuck on a page and not know what to do next?

Remember, we don’t want our visitors to have to think too hard.  Your website should have text that’s clear and concise. It should be visually appealing. Most importantly, visitors should easily be able to find the information they’re looking for. 

Make it Easy for Your Visitors

As I’m coaching website-building students, one common mistake is that people want to give too much information. Why does this happen? Well, business owners are passionate about their products and services. They want their visitors to know all about who they are and what they have to offer.

However, too much text can be overwhelming to a visitor. Remember, they don’t want to think or hunt for the information they’re looking for. They want to be able to find it in seconds…with the click of a button.

That’s where anchor links are a fantastic tool!

What Are Anchor Links?

An anchor link is a link on a webpage that will take you to a specific section of that page. Anchor links are also referred to as jump links. This is because anchor links will instantly “jump” you to another part of that page. 

Watch this video below for a visual explanation of anchor links:

An Example of Anchor Links

I have a simple example of anchor links on my FAQ page for the Website Creation Workshop. When you click on the Website Creation Workshop (Beginner Course), it will take you to that page section. Likewise, when you click on the Website Marketing Workshop (Intermediate Course), it will jump you to that section of the page.

I’ve also added anchor links to this article, so you can go exactly to the section that applies to your website – classic editor anchor links, block editor anchor links, or Divi builder anchor links. 

The Benefits of Anchor Links?

Anchor links are commonly used in longer, in-depth articles because they allow readers to jump to the section they’re most interested in, without having to scroll and scan. As a result, your visitor has a better experience and is more likely to stay on your well-organized website. 

In addition, anchor links can make it easier for visitors to share specific sections of your article with others.

How to Add Anchor Links to Your Website (the Techie Details)

The process for adding anchor links will vary, depending on whether you are using the Classic Editor, the Gutenburg Block Editor, or the Divi theme. Here’s how to add anchor links in:

1. Classic Editor
2. Block Editor / Gutenberg
3. Divi Builder

1)  In the Classic Editor:

We do this with the Classic editor and the Advanced Editor tools plugin (TinyMCE Advanced)

1. First, specify the “anchor” (the destination of the anchor link). Place your cursor where you want the anchor link to be linked to.
2. Click on the “Anchor” tool in the toolbar. (If you don’t see the Anchor tool in the toolbar, you may need to click on the “Toolbar Toggle” button to expand the toolbar.)
   
   
3. Next, in the “Anchor” popup window, enter a unique name for the anchor to identify the location and click “OK.” You’ll see a little anchor icon where you inserted the anchor.
   
   

4. To create an anchor link that links to this destination you just created, select the text where you’d like to insert an anchor link, and while the selected text is highlighted, click on the “Insert/edit link” button in the toolbar.
   

5. In the “Paste URL or type to search” link box, enter the anchor name you just created in step #3 above, preceded by a “#” and click the “Apply” button. You’ve done it! The anchor link is now created.
   

---

2)  In the Block Editor / Gutenberg

We do this by Adding Anchor Links to a Different Module in the Block Editor

1. First, insert the cursor within the block where you want the anchor link to be linked to (ie. destination).
2. Next, in the block setting panel, click on Advanced to expand that section.
3. Now go to the “HTML ANCHOR” box and enter a unique name for the anchor to identify the location.
   

4. To create an anchor link that links to this destination you just created, select the text where you’d like to insert an anchor link, and while the selected text is highlighted, click on the “Link” button in the toolbar.
   

5. Finally, in the box that pops up, enter the anchor name you just created in step #3 above, preceded by a “#” and press Enter. Your anchor link is done!
   

---

3) In the Divi Builder:

Adding Anchor Links in the Divi Builder (to a different section/row/module)

1. First, click on the gear of the block (or section or row) where you want the anchor link to be linked to (ie. destination).
   

2. Under the “Advanced” tab, click on the “CSS ID & Classes” to expand the section.
   

3. In the “CSS ID” box, enter a unique name for the anchor to identify the location. Save the change.
   
4. (When adding an anchor link to text) To create an anchor link that links to this destination you just created, go into the module where you want to insert an anchor link and select the text. While the selected text is highlighted, click on the “Insert/edit link” button in the toolbar.
5. Next, in the “Paste URL or type to search” link box, enter the anchor name you just created in step #3 above, preceded by a “#” and click the “Apply” button. The anchor link is now created.
   
   

6. (When adding an anchor link to a section/row/module) Enter the anchor name (also preceded by a “#”) in the “Module Link URL” in the Link section.
   

 

Final Thoughts on Anchor Links

Finally, anchor links can increase Search Engine Optimization. While titles and headings are important when writing a blog article, anchor links in those headers will increase your opportunity to appear on search results pages. 

Here’s an example of Google displaying multiple anchor links in the search results. These “jump-to links” in search results will increase your click-through rate and drive more traffic to your website

.

People are busy. Many times people visit websites like they visit a quick grocery store trip. They want to get in and get out with what they need as quickly as possible. As a result, anything you can do to help them achieve that goal is a win-win!

Anchor links are a valuable tool for improving navigation on your site and creating a better visitor experience. In addition to a better user experience, anchor links can improve SEO and drive traffic to your website. 

Follow the steps above and try out some anchor links on your website on your longer pages.