How To Create On Page Anchor Navigation Links

Want to create a link that will take your visitor to a specific place on your website? In this tutorial I will show you how to create anchor links.
by Adam @ WPCrafter   |   Last Updated: April 29, 2019
Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

If you are looking for how to create a link to jump to a specific part of a page, then this is the post for you. Depending on what tools you use on your website, there are several ways you can do this.

My prefered way is to create them in my page builder, Elementor. But here is a manual way to create them.

1. Name the Target Area

Choose the exact spot you want to send your link to, choose and element near it (a div, header tag, paragraph.. whatever as long as it's in the right spot), add id=”something”, you can call them anything you like as long as the names are the same in the link and the target ID and preferably no spaces (spaces change to %20 in the address bar and look a tad messy).

An example would look like this: <div id=”pricing-table”>The content of your div here.</div>

2. Link To Your Anchor Target Area

To link to your anchor simply use:

<a href="#pricing-table">Link Text Here</a>

If you want to take your visitor to a specific part on a different page then where the visitor currently is:

<a href="pagename#pricing-table">Link Text Here</a>

For my website, if I wanted to take someone to a map on my contact page, it would look like this:

<a href="contact#map">Visit Us</a>

Video Transcript

Adam @ WPCrafter

Adam @ WPCrafter

My passion is making the best quality video tutorial online, for non-techies. When I am not behind the camera, I am usually helping out one of my YouTube subscribers.

13 thoughts on “How To Create On Page Anchor Navigation Links”

  1. Wonderful! Easy and nice explanation.
    Most of all, your pronunciation is very clear to understand easily even for non-natives beginner like me. Much appreciate, Adam.

  2. Hi Adam, I’ve created anchors on one of the pages of my website however unless I’m on that particular page the drop-down menu links won’t go to the anchored sections. Is it possible to make that happen?

  3. Hi, Is there a way to position the anchor an offset higher or lower than where it actually? Adding gap?

  4. Hi Adam,

    May I ask if we can use anchor link to open another page under the same page name? Example, someone click on the elementor button and it opens to another page for the description but I want the page name to appear the same. At present, although my permalink sets to post name but it still comes out with wp-admin…%… like that instead of the page name. Thank you.

  5. Adam, maybe I am not understanding this correctly. I followed your video but in trying to link two words of text in a paragraph on a different page from the anchor all I get is “page cannot be found”. I am using Elementor. can you please help.

  6. Adam, can you please do a tutorial for Pods plugin and Elementor 2.0 … Precisely on how to create a template for a new post type (NOT the existing default post types).

Leave a Comment

Your email address will not be published. Required fields are marked *