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>
Hey Adam,
I am using the envision theme. I have used the anchor code examples link have them. I get something like this
https://www.sitename/#terms” in the browser URL bar. Do you know why? The page will not go to the anchor point on the page.
The code did not show up in the message. I get an ” at the end of the site url and the page will not go to the anchor point.
Can you please help. Have you experienced this?
Hi Adam,
You provide the easiest to understand description of how to place a page anchor I can find on the web.
Now for my question. How can I anchor a location on a different tab within Elementor? I can’t figure out how to identify a different tab within the same page.
Thanks,
Mark
It’s the same concept. Affix the anchor link to the full link. So if you have a contact page and an anchor link for a section called directions. To take someone there you would use the full link to your contact page + the anchor link.
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.
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?
I think I explained how you would do that in the post. You have to put the full link to the page and include the anchor. I just added an example to the post for you.
Hi. Wondering if you would know of a way to add a functional anchor on the menu for a Brizy site
It’s pretty much the same thing, you just need to find where in a section you can add the ID for that section.
Hi, Is there a way to position the anchor an offset higher or lower than where it actually? Adding gap?
Not that I am aware of unfortunately.
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.
Yes you sure can! Your links to the various pages should not say WP-admin.
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.
Yea that’s fine. You would the link to domain.com/different-page#anchor
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).
It’s coming for sure. Just waiting on Elementor 2 to have better integration with PODS.