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

Channel: WPCrafter.com WordPress For Non-Techies

Views: 153,207

Keywords: HOW TO CREATE ANCHOR LINKS, ONPAGE LINKS, how to create anchor links in html, how to create anchor links in divi, how to create anchor links in ELEMENTOR, how to create anchor links in BEAVER BUILDER, how to create anchor links in wordpress, wpcrafter

Id: CivIs8O7cUE

Length: 7min 2sec (422 seconds)

Published: Mon Jul 02 2018