April 10, 2020
How To Make OnPage Anchor Navigation Links With WordPress, Any Page Builder Or Custom Code

How To Make OnPage Anchor Navigation Links With WordPress, Any Page Builder Or Custom Code

In this video initially how to make on page
anchor links so any page on your website you can have a specific link that will take your
visitor exactly to where you want them to go on a particular page of your website let
me demonstrate this for you I got a page here and you seen this before and there’s some
menu navigation link someone clicks on one of these like for example be reviews a link
right here and it scrolls him down to a specific point on the website that is what I am going
to show you how to do in this video you’re to be able to do it with custom code if that’s
what you want to do or if you have a page builder of an issue how to do it in those
as well hi my name is Adam from WPCrafter.com were make WordPress tutorial videos for non-techies
if you’re new here consider clicking on the subscribe button and click on that notification
bill for notifications are’85 Jump on into this one right here so first I will show you
how to do it with page builder so ministry specifically Elementor animal to show you
specifically how to do it with Beaver Builder so here I am I’ve got this website it’s built
with Elementor it’s very nice and when I scroll down there is a specific section right here
called course packages and that is the section that I want to create this link for so what
I’ll do is click on edit with Elementor and it will jump me right on into Elementor so
that we can go ahead and get this started now this same concept of of what I’m going
to show you you can carry into any page builder so if you’re using Divi which I’m I can assure
you in this video or visual composer or any of the various page builders the same concept
applies so for someone to scroll down to the specific section that I want to link to and
that’s this course packages so what I’ll do is I’m in a pull up this section settings
and by just clicking right here and then I’m going to the exact advanced tab now with Beaver
Builder’s can be the same or to go to this advanced app so whatever page builder you’re
using there’s probably some form of an advance the tab know what were looking for is this
spot right here it says CSS ID and this should be blank for you and this is where you can
put whatever you want and this was going to be what’s called the anchor link in this will
be used in the URL so for this I would shall just go ahead and enter course packages now
here’s the thing you don’t want to have spaces sunset of a space just go ahead and put a-okay
so I entered course packages and also keep in mind what you put in years go to be part
of the visual link so you don’t want to put something in here that is embarrassing so
that’s why like to have something be friendly by saying course packages that’s very normal
so I’ve got that there and I’m a go ahead and click on update so this is the first step
now what we can do next is we can just have a link that goes there or where to put a link
in this video to put a link into the menu that will take a someone asked specifically
here to course packages so what I’m gonna do is go back to the dashboard click on appearance
and go to menus because that’s where all of our WordPress menus are here is my word for
lists of the menus right here and what we want to do is create what’s called a custom
link and there’s this option here for a custom link normally you would pulling from poster
pulling from pages and have it automatically pushed and there were not doing that here
working to create a custom link so the first thing we would do is give the link a name
and this is just going to be that name as we see it in the menu so why don’t I go ahead
and choose packages okay and so now what I’m to do for the actual URL I’m going to go ahead
and hit the pounds six sign and then enter in exactly what I put for that ID there it
is right there course packages are click on add to menu and then I’ll just go ahead and
drag that up to the top why not I’ll click on save menu and then on the front end of
this page right here I’m in a go ahead and get out of Elementor them to go here and exit
the dashboard and now I will click through on the link to take a look at the website
and you can see we already have this packages menu link already added so what happens is
when I click on it it’s gonna scroll me write down exactly to course packages and this is
regardless of what page you are on the website that will take you straight to the course
packages so this is how you do it in Elementor now with Elementor there’s also a specific
module that allows you to do this it’s called the menu anchor module so let’s go ahead and
pull that up and then will jump into how to do this with Beaver Builder so let me just
go ahead and search for it there it is menu anchor so what I could have done is scroll
down to the section like this and I could’ve put the anchor right here at the top and then
right here I would enter the ID so this is just an alternative way to do it I prefer
the way that I showed you the first way that I showed you okay off to Beaver Builder so
it’s going to be the same thing am I going to the Beaver Builder editor right here and
working to see that when I scroll down I haven’t used Beaver Builder on the site yet when I
scroll down say to this section right here to go to my row settings I want to click on
the ranch right here click on advanced and when I scroll down I’m going to see the same
option underneath the HTML element it says dental services are means is ID and it just
happens to have dental services filled out and this is where you would enter the ID using
Beaver Builder same things in the same concept would apply if you’re using a different page
builder I have to do is go to the developer and say hey how do I enter custom ID for a
module for section 4 column XYZ how do I do that okay now on my website I have a link
let me pull it up right here and this is going to be the post on my website with all the
instructions so for if you wanted to if you’re not using page building you just want to do
a straight up code I have the instructions right here so essentially it involves making
a div and you will have the ID specified in the diff like this and you can just go ahead
and have that link work just the same way using custom code this way so that is all
that I have for you in this video let me know what you think if you have any further questions
in the comment section down below feel free to ask me there have you found any value in
this video you could give it a thumbs up and maybe share it on the Facebook group or share
it with a friend I’d really appreciate it and other than that I will see you in the
next video

86 thoughts on “How To Make OnPage Anchor Navigation Links With WordPress, Any Page Builder Or Custom Code

  1. Hi Adam, thank you for this. I've always been using the Elementor "Menu Anchor". I like your first example using the Section menu to set up the anchor link–that's my new go-to way for making anchor links.

  2. This is perfect timing Adam, thanks! I was trying to wrap my head around how to do this on so you saved me a lot of potentially wasted time.

  3. Do you build custom websites for customers or do you just make WP videos. I am learning from you but I need something built that is beyond my abilities and in fact is not for non experienced person

  4. Hi Adam, I have this one page website with onpage anchors and I am finding hard time in creating a sitemap using anchors (just like pages) for google, any help would be appreciated.

  5. Love your content like always Adam. Can you tell me which video editing software you use to make your YouTube video please.

  6. where exactly? I'm very new to this. In fact, I have a question. I have installed the Electro Theme v2 on wordpress for my website. How can I display the Vendor store logo and store name on the product page? Is there a custom code for this.

  7. Where exactly can I find this? Also, I have a question. I have installed the Electro Theme v2 on wordpress for my website. How can I display the Vendor store logo and store name on the product page? Is there a custom code for this.

  8. Where exactly can I find this? Also, I have a question. I have installed the Electro Theme v2 on wordpress for my website. How can I display the Vendor store logo and store name on the product page? Is there a custom code for this.

  9. Hi Adam, do you have a solutions for sticky header or nav bar as the anchor seems to under it. I use this bit of css to allow for it, but you may have a better way. #anchor { position: absolute; top: -80px; }

  10. Good video Adam as usual. However you say 3m57s into the video: To enter the url for the menu you put the pound sign £ in, plus the css id name. However it's the hash sign # and the css id name. It's difficult to see the text on the page builder because the video is a little fuzzy. So you tend to hang on every word. Other than that very helpful and informative. Thank you.

  11. Nice useful tip, Adam. Thanks for taking the time to show us. I've added the anchor links as a TOC at the top of a page, but I haven't yet done with a menu. And I haven't done it with a page builder yet. Good to know.

  12. Hi Adam. I followed this tutorial and went with the custom link menu page "way". My menu link works on the homepage to direct to the section I want (which is also on the home). However, when I click on other pages of the site, the custom menu link does not redirect back to that specific section of the homepage. I see the correct browser URL with the "#contact" but it just doesn't go. What could be the issue here?

  13. Hi Adam I need help I want to know how you created boxes on your site with button on your reviews page

  14. How to create a page with left side the links and right side the contents for the specific link ??On click of the link the content will showed up.
    Kindly make a video on this.

  15. Hi there, I was trying this with ordinary HTML code an noted that, altough the link is placed exactly where it should be, it only works correctly in Safari on my iPhone. In Firefox and IE the link points rather far down below where it should be. Could this be a Theme issue? Could it be solved with some custom CSS?

  16. I've seen so many people explain this using <a name> or <id> but this is without doubt the quickest and smartest way to do page links. I always wondered what the CSS ID box was for! Well done and thanks for saving me huge amounts of time. One other thing, this way of linking content is much more precise – using those other methods I found myself sticking spacers in to get the link to arrive at the correct spot.

  17. Adam THANK YOU! I was using the Elementor Menu Anchors and they weren't working! I was beyond frustrated! But this worked like a charm!

  18. Hi Adam, great tutorial 🙂 Would you shed a light on how to use anchor links in the main menu of a non-one-page website? Basically, I have a website where all menu items are home page sections but one is a separate "Our Projects" page. Once there, the custom links don't work…

  19. what if we dont want in menu. coz i want a create link which goes to another page and in that page i want it to link a perticular section..

  20. Hey there, what is your preferred page builder ? I utilize several though my favourite is undoubtedly Oxygen.
    Thanks for your work with this video production – wonderful stuff!!

  21. Adam, can you recommend a simple WordPress TOC plug? Or I guess I do have Elementor built into my theme but I'm not sure – from what you showed in this video, can I accomplish the TOC for blog posts? I did try to do the anchor text code but it jumped to the wrong spot.


  22. Thank you for the video! I have a question: I am using Elementor to build a multi page website. On the landing page I have a couple of Anchors linked to the menu, and another couple in another page. The problem I'm having is that the menu item brings me to the Anchor only if I'm already on the page where the Anchor is located but doesn't work if I click on it from another page. Any suggestions on how to fix this? Thank you!

  23. Thank you so much man! What if I want to do this with an image in a circle? Like different places in a circle, I click and go to different section of the page. Can you make a video about it? or maybe share some tips? Thanks!

  24. Thank You Adam for your great tutorial,

    I’ve watched this several times and still can’t “for the life of me” get the link to work when I’m on another page! What am I missing? Please help thanks 20/03/2019

  25. Ive used your first example….It works only if I'm on the selected page, I want to link to any of my dropdowns directly?? My boss got me Elementor pro, its cool…but I cannot link directly to any of my dropdowns? Please help!!!

  26. Hi Adam thank you for the great tutorial, I have a question that hopes you could help me out. I set the anchor on home page, and if I am on a different page how can i click the menu and jump back to home page and go to that anchor?

  27. Great video Adam, I wish to add the anchor to an already exist menu and not add a new menu. How can I do that? Will really appreciate your help.

  28. Hi Adam, you could also explain how to create the icon that links back, from bottom to top in the onepage navigation always with elementor ?
    sounds easy but with elementor I don't think we can do, how is that possible?
    Thanks a lot

  29. Hi Adam, brilliant concept. but if I understand clearly this method does not navigate you to a different page. Instead You have to include the URL of the page with the Anchor CSS ID, and it should be like this: "http://domainname.com/pagename/#anchor-ID"

  30. Hi – great video – but what if I want to klick on a menu item and jump directly down to a page, that is under this menu item?

  31. Hi adam, tnx for the video! quick question, if im on page on my website and click on the anchor nav link set up for another page, it wont take me there… any suggestions? tnx

  32. Hello, do you have a clue how to do the anchor menu so it goes to specific section but also generates url?
    Example: yourcourse.com/packages
    PS I use elementor

  33. Hey great video, can this anchor link be used on my social media? So in your case if you had a link on your twitter, and someone clicks on that link and he would go straight to course packages?

  34. Hello…I like your videos…They are very helpful for me. I have an Question for You: I have used one page scroll anchor navigation links on my wordpress website. (example:"Contact"-custom links in menu) and I also have used checkout and shop – pages in menu…but if I click on shop page, after that…. I can"t click back on "contact"-custom links /anchor navigation links. It"s doesn"t works. I have to click on Logo…and after I can click on "Contact"-custom links /Anchor Navigation Links/ works. Do you have some advice? Thank you. 🙂

  35. I already knew about Anchor Links and how-to create but liked watching this video, you teach this very well Adam. Keep up the good work.

  36. Hi Adam! Curious what you use to make your youtube thumbnails. If you'd be so kind as to share… that would be GREATLY appreciated. Thanks!

  37. Hi!
    This does not work for me either on the same page or on another. There must be a way? I did it once before and aded links somehow but don´t remember how. It just won´t work putting id and then linkname #id.

  38. Thanks for the information, but I was looking for something else. I made a List of Contents on the top of a post, and I want readers to navigate to the paragraph when they click on that particular topic in the list of contents. Can you please show how to do that. I'm new to WordPress. And I found your videos very Helpfull

  39. i have created a custom link in my menus, my theme shows a default page for that custom link, can i edit that page in custom link created page?

  40. Dear Sir, all your tutorials are simply superb. Can you please help me how to use Image alt attributes in elementor post which is very important for Yoast SEO.
    It's showing below message Image alt attributes: Images on this page do not have alt attributes that reflect the topic of your text. Add your keyphrase or synonyms to the alt tags of relevant images! Thanks & Good Luck.

Leave a Reply

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