How To Create On Page Anchor Navigation Links

Updated: July 2, 2018
Filed Under:

 

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>
or if it's on another page: <a href=”pagename#pricing-table”>Link Text Here</a>

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.
liveagent-review

LiveAgent Lifetime - $59

Bring all your customer support channels under one roof with LiveAgent

linkcheeta-review

LINKCheetah Lifetime - $49

Monitor all of your backlinks from one dashboard with LINKCheetah

website-hosting-discount

InMotion Hosting

50% Discount Offer

free-course-offer

Free Course Offer

WordPress Starter Course

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

  1. 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.

  2. 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 *