Divi Theme - How To Use Anchor Links

in this divi theme tutorial i want to show you creative ways of using anchor links in your designs but before we get started i'd like to remind you that if you buy divi using my affiliate link you'll get access to my web design formula course a course that teaches you how to design professional looking websites with divi links to that in the video description below let's get started all right so the first thing you need to do here is to install divi i've already gone ahead and installed it so the next step now is to add a brand new page so i'm going to come over here to pages click on add new i'm just going to close out of this and let's give this page a name i'm just going to call this mac and then click on use dv builder all right so we have these three options so what i'm going to do for this example here is to choose a pre-made layout because we don't spend too much time here creating everything from scratch this will take away valuable time because this technique just requires you to just master a few concepts and we're good to go so let's choose a pre-made layout here and again on the pre-made layouts it doesn't really matter what pre-made layout you use you can just choose any because the technique we're going to use here can work pretty much on any layout all right so i'm just going to scroll through this and i'm going to go with whatever comes to mind okay let's go with this one here i'm going to select the layout great so our layout now has been installed which is fantastic so the next step now is to target what we need to add anchor links to so the first thing i need to do here is to find somewhere that we're going to click so we want that when we click here on say for example looking for a job we want this to take us all the way down here to the bottom and go to job listings so this is very very important okay so i'm going to come over here now and i'm going to go into this section setting so i'm going to click here on section settings all right so here what we need to do is to come over here to advanced css id and classes and we need to add our css id here so we need to decide what the id needs to be so i'm going to call this listing like that so it's very important that this is the same spelling with uh where we're going to link it from so now that we have our css id here i am going now to save in fact you know what before we save we want to uh locate this so that we can see that we've made our change so i'm going to come over here to the background and just give this a temporary color so we can easily identify it okay so don't look at this as a design thing okay so i'm going to save here and then now i can go and find this button here so let's go in i'm going to click on this gear icon and we are going to go to button one which is looking for a job and we're going to give this a link so i'm going to come over here to link so here we have button1 url so for that i'm going to add this hashtag and we need to add the word listing so it's very important that this word listing is spelled the same as we had it on the css id of the section otherwise this won't work all right so now that i have it here i'm going to save and to check if this is working i'm going to hit publish and exit the visual builder so this doesn't work while the visual builder is active so now that i've saved this i'm going to exit the visual builder all right so now when i click here look at that it's gone straight to the listing that we assigned this to this is really cool so if we come back here let's do it one more time boom it takes us to hang on let's do it one more time there we go so it's taking us to the listings now this can also be applied to any menu heading so this is really cool so so those websites that you've seen which have say a single page type website you can add your anchors that way you can also use these anchors as links on the actual um text on your website and i'm going to show you how to do this so first of all let's do it on the menu so i'm going to go back over here and we are going to um open this in a new tab so i'm just going to come over here to my dashboard right so what i'm going to do now is let's have a look at our menu so i've got a lot of pages here on our menu so what i want to do is i'm going to simplify this by coming over here to appearance menus because we haven't created a menu here so let's call this main menu so in your case you probably might have your menu already created so now i'm going to click on create menu and notice i've assigned this to the primary menu so all i have to do now is to add all my links to my menu so i'm just going to add these these links here and save menu okay great so now if i come over here to my site and i refresh this we're going to notice that we are going to have our menu here now a bit simplified okay there we go so we have less things on my menu here so the next thing i need to do now is to go to my menu right and i'm on a page called mac so you can see here this is the name of the page so we want that when someone clicks on this link here it takes them to that part of the website okay so i'm going to come back over here and let's find mac and here it is so we need to add a link so for this to work we need to add a private link so i'm going to come over here to custom links and for this one here you need to add the hashtag on the url and it needs to be called listing so let's just call this page listing like that i'm going to add to menu there we go we have it here i'm gonna save so let me refresh this page now so there we go when i click on listing it goes straight to that part of my website now isn't that cool so you can use this over and over again on pretty much any part of your website now let me show you the third way you can use these anchor links so what i'm going to do now is i'm going to go back to my site or to my page enable the visual builder and show you how you can do this with text on your website so for this one here we're just going to scroll down and [Music] let's use this text here so i'm going to go into my text module here and i'm just going to highlight lorem ipsum here okay like that we're going to come over here to this link and i'm going to uh add my hashtag and the word listing click ok and then i'm going to save that so now we have this as a link i'm going to exit i'm going to save it first save the page and exit the visual builder so i'm going to come over here exit the visual builder right so when i scroll down and look for that text here it is and when i click on this boom it's taking us to that section so this is a creative way of using anchor links in your designs to easily direct people who are surfing your website so try them out very easy to implement but just make sure that when you use this you need to make sure that the spellings are right otherwise this won't work all right guys that's all i have for you in today's video thank you very much for watching and i'll see you in the next one take care

Channel: MAK

Views: 884

Keywords: Augustine mak, divi 4.0 templates, Divi 4.0 template, Carflows divi, wordpress funnels, Cartflows tutorial, Mak, tutorLMS, tutor lms, online courses, create online courses, online course business, fluencrm, fluent crm

Id: WLZtoiU8m1w

Length: 7min 31sec (451 seconds)

Published: Sat Nov 13 2021