One Page Navigation With Anchor Menu In WordPress with Elementor

hello and welcome so in today's video what we want to do is we want to be able to go into our web page and click anywhere on the menu and to jump to that specific point in the page this is using what are called anchor points or anchor tags in wordpress as well as in regular html so if you're interested let's get started now if we go to our main page spotivity.com you'll notice that we've already done this to a degree in this in the previous videos so when we click on this button it will move down to the next section when we click on this button it will move down to the next section but the challenge here is how to incorporate that into our menu so what i'm going to do is i'm going to click edit with elementor and that will allow us to view how the page is currently set up now as you may remember from previous videos the way that we add these individual anchors are by using a widget in elementor our page builder called anchor or menu anchor and so we drop these little individual anchors in and you'll notice that what we did is we gave it an id so an id is how javascript and css the individual components that are sort of working behind the scenes and our web page find the specific point on the page and allow us to move right there so we called this the about section so we would just go like here about and we would update this we'll say this could be our old example just so that we have a point of reference i'm gonna hit update again and so we actually have two anchor points this is old example and this one here is called about then what we did is we went to the space that we want to link this id to this this point on the page in our case it was this learn more button and so then we use a pound sign and the label that we had which is about but we could also call this get old so if we scroll up we'll call this get old we'll scroll up wait for it to save update again and now when we click on this section it will move to the get old section here but we actually don't like this naming we preferred the original naming the naming of about so we're going to delete that first anchor we're actually we're going to delete that first anchor and then we're going to change this back to the about section so it will be hashtag about we can click update and then if we scroll down here at this point when we click on this button it says more info and it will move to this anchor here which is more info and then there should potentially be another anchor here which we could add so it could say we could call it projects and again i'm not using a pound sign for when i'm creating the id only when i'm calling the id when i add it to the place that we want to link and then we could add one more here which we might call join we'll just call this join all right so far we've reviewed how to add anchor points and then we've gone ahead and we've reviewed how to call those anchor points using the button terminology or the link terminology of the hashtag in the name so next what we want to do is we want to create a custom menu in order to create a custom menu you would go to appearance and then let's go to menus next what we can do is we can go to this link here which says create a new menu and we're going to give this a name so we'll call it main page menu something like this we're going to click the create menu button and then while that saves we're going to come here and we're going to think about what individual items we want on our menu so we'll probably want an about section we'll want a more info section we'll have a project section and a join section so in order to do that we'll go back to our menus and in order to add menu item we can go over here and we can go to custom links so here we're going to call it about and it is case sensitive so if you want about to appear with a capital a you'd want to type that here in this text box and that adds the about next we'll call it more info and you'll notice i put that actually in the wrong section so i'm going to go here and then we come back to this page and we just want to make sure that we shop or collect the proper identification so i'm just going to copy and paste and then again remember we want to have this pound sign so that it actually calls the correct point on the page if you don't have a pound sign it would actually won't work next we have the courses page i think by courses i mean projects although our projects are courses so i guess we could have named that better projects we hit add to menu we'll go back here and this i believe is called join so we'll go through the same process call this join and you could say join join us this is again what's going to appear at the top of the menu now if we were to go back here and now go to splatitivity.com you may suspect correctly that the menu is not going to appear it's not going to appear for two reasons so we still have that old menu now what's the first reason it doesn't appear the first reason it doesn't appear is because we did not indicate that it should be our primary menu so we want to switch that by checking this box and then hitting save menu and then we actually did those two steps here so now when we refresh it it should have that new functionality so essentially we had to click this box and then we had to hit save menu that was the first and second steps if we had done neither of those or if we hadn't done both of those we essentially wouldn't be here so now crossing our fingers if we click the about button or the about link it will bring us down there if we hit more info it will bring us to that section if we hit projects it will bring us to this section and then lastly if we hit join us now we could choose to have a sticky menu which is the topic for a separate course but if you notice here when we click about it will bring us to that section or if we click learn more it'll bring us that section we already have a button here which moves us down then here you probably want people to read so maybe you don't want them to be able to get the product section you scroll down and you have our courses now the cool thing about this option is we still have our button here for our courses so if someone clicks there it will still open uh the external link to our udemy course page all right so in this video what we wanted to learn how to do is we wanted to review the step of creating these anchor links so when we are in elementor we can go to the edit page section in order to edit in elementor and then once we're in elementor once this beautiful page decides to load then we reviewed how to add these anchor points here and essentially if we wanted to add new one we would just go to elementor and then we would type in anchor we would try to spell that correctly we drop it in we give it a name then we go to the link or the place that we want to add that and we add a pound sign what we ended up doing is we ended up going to the menus section we created a new menu which we had here then we went and we added these custom links with the pound signed and we said about and then we gave it a name like this we hit add new i'm not going to do that because we already have an about section although if we wanted to we could hit add menu and then we could just remove that link if on the off chance you gave it the wrong address or the wrong link you could adjust it here you could also change the name or you could remove it as we did there we then went to save menu we added it as a primary menu we click save menu again or at least you would and then when you go to your home page which will go here we now have a new primary menu when you click any of these links it will move down to the proper section of the page all right so if you have any questions or comments feel free to add them in the comments section below if you are interested in seeing additional wordpress and web development videos as well as videos around learning how to learn please join us in subscribing to this channel otherwise we'll see you again for another video and as always thanks for watching

Channel: colearnable

Views: 1,823

Keywords: One Page Navigation With Anchor Menu In WordPress with Elementor, elementor tutorial, elementor, elementor anchor links, elementor anchor link, single page menu, One Page Navigation, one page website wordpress elementor, elementor wordpress, wordpress anchor menu, wordpress anchor links within page, menu anchor elementor, elementor wordpress tutorial, elementor page builder tutorial, colearnable, colearnable video, https://colearnable.org/, colearnable tutorial

Id: jNNaQJzzLHs

Length: 9min 50sec (590 seconds)

Published: Tue Sep 08 2020