How to Create Anchor Links in Divi

hey everybody its Josh here in this tutorial I'm gonna show you how to use anchor links with Divi now what is an anchor link well essentially it's just a way to link to a certain part of a page without having links that go to separate pages or something else so I'm gonna show you three ways to utilize this the first way is to put anchor links in your menu so let's bounce over to a site that I did recently you'll notice this site here has a one page landing page style layout so instead of these menu links going up two different pages if you click them they're just going to zip you right to that section of the website so it's pretty cool that's one way to use anchor links another way is to put a link in an actual page here's a page layout that I just recently released to the Divi community and it's a team or staff page layout and instead of these profile links going to another page if you click them you'll see it'll zip you right down to that bio so that's another way we can use anchor links and then a third and final way I'm going to show you how to utilize these is to make a link that goes to a certain section of a different page so for example if we go to this client here they have multiple locations and what's cool about this is I have anchor links right here so you could click to you know this link right here and I'll zip you down but they wanted on the front page a way to click to that certain section on that location so for example if we go to the front page they wanted these links to go to that certain section of the office locations page so when I click here at this Columbus East location this had zip me right to that part of that other page so we're gonna click this and in there we go it zips me right to this Columbus East section of the office locations page so I'm going to show you how to do that as well so let's go ahead and dive right into it the way this works is anchor links use an ID so let me go ahead and jump into the visual builder and I'll kind of walk you through how this works and how you can create an anchor link again we're gonna start with the menu but the first thing that we need to do is we need to place where that link needs to go on the page so I've created this little section here called anchor 1 so I'm going to go into the actual section settings I'm going to go to advanced and you'll notice that Divi gives us the option to do either a CSS ID or a class so if you see any my previous tutorials you know that I use classes a lot when customizing things but there's also this ID off set now there's one important thing to know IDs are called by a pound sign or hash tag and in classes are called by a period or a dot that's how the code knows whether it's a class or an ID now if you haven't used these already you need to know that you don't actually put the pound sign or the dot here in these fields this is just what we call upon and so we're gonna put the hash tag elsewhere so for example this section right here we want to call this let's go anchor1 and we need to make sure this is all spelled right so I'm gonna copy this so this now has an ID of anchor1 this section here let's go ahead and save this okay we're going to exit the visual builder and I want to make this services link right here I want to make this zip down to anchor 1 when we click that so I'm gonna go into my menu and I'm gonna find that services link and right here is where we want to actually put the anchor now I've already have a hash tag here so all we need to do is put anchor 1 I'm just gonna copy and paste that so we have hash tag anchor 1 right in the URL and when I save this if I go back out to the site let's go ahead and go back out to the front page let's refresh when I click services this should zip me right down to this anchor 1 section boom and there we go so all I did was add the ID right here and then in the menu I used this hash tag or this pound sign to call that first anchor that I did so let's do one more let's go down to this anchor - let me go ahead and use the visual builder we're gonna go into this and again we're gonna assign this an ID and then we're gonna put that in the menu so it'll zip us right down there so we're gonna go into the section and you can do this with in the text section you can do this anywhere you and you can call it anything what's that's what's really cool let's call this one anchor2 and we don't want to use spaces which is why I always use dashes or underscores so and again we don't want to use the hashtag here we want to save that for when we call it so again we're going to put anchor 2 here we're gonna save that we're gonna go ahead and say that they're going to bounce back over to my menu and let's put this and yeah let's do service 1 we're gonna do hashtag anchor 2 and now we save our menu we're gonna go back out here I want to go ahead and save and exit those changes and now when I go back to the menu and I click this service 1 this should zip us right down to anchor 2 boom there we go so it's that easy guys that's how you can put anchor links in your menu let me show you how to go ahead and do it in a page let's do let's say we want to add a link right here and we want this to zip us down to that anchor - let's go ahead and go in and let's I tell you what we're just gonna add a simple link click here to go to anchor - I'm gonna go ahead and give this a link but of course you can do this with buttons you know any kind of link and again the URL was just going to anchor - we need to add that hashtag or that pound sign there to let that know where to go and we don't want this to go to a new page so we're gonna keep that right there so we're gonna go ahead and save that I'm gonna go ahead and save and once that saves we're gonna exit the visual builder okay and now now of course that link color kind of blends in with a blue but when I click this this is if us right down to anchor to section boom there we go easy peasy and so that's exactly how I have these first two examples set up I have the menu links in here and I put an ID on each one of these sections and these just zip us right around to the website which is a really cool way to do if you if you have a one page or landing page style site and then on this page what I just showed you is how I had these you have an anchor link set right here and then you just create an ID on this section and it'll zip you right there and again you can use any verbage you want you don't have to put anchor you can you anything you want as long as it just is calling the right section now lastly let me show you how I pull this off and how again on this example site you go to click one of these and it takes you right to that section of the site now one thing I want to show you is if you notice when I scroll over these look at the bottom link on the left it says office locations slash then you can see the anchor link that I set so that's essentially going to how we're gonna do this I have created a page here that is using a free layout that you can pick up on my Josh Hall co site if you'd like but what I want to do is I want to do an example here I want to say on the home page I want to have a link that takes them right to this section of the e-book right here so first thing I'm gonna do I'm gonna go ahead and use the vision visible builder again and again I can put this ID anywhere Divi gives us the ability to put an ID or a class on anything which is one reason I love Divi so much so we're just gonna do this whole section I'm gonna click this and I'm gonna go advanced and I'm gonna give this an ID oh it's already got an email signup so yeah let's just do that we'll just stick with that ID of email signup and we're gonna save that and actually we don't need to save it since it was already in there so we're gonna exit visual builder discard an exit now what I want to do is add a link on the front page that's going to zip us right down to this section so you'll notice we take this down a little bit this has a URL of you know my tutorial site and then slash about me and so what we want to do is we want to take this URL and let's go back to the website and let's say we want to I tell you what let's go ahead and make this link go to that section of the page instead of just zipping down to the anchor to so we're going to use a visual builder again and you can do this on the back end doesn't matter how you do this so we're gonna go ahead and we're gonna replace this this link here let's go ahead and look at the link we're going to use that URL that I just put in there but we're gonna put that anchor link right here so what was that email sign up and there we go so we're going to go ahead so this this link is telling it to go to this cite that page that section of the page let's go ahead and click that save and I did ctrl s to save let's exit the visual builder okay and now when I scroll down I actually click this and it should go right to that email signup section on the about page and boom there we go so it's that easy guys all you have to do is anywhere in your website you just create an anchor link and then just call that as an ID with the pound sign and then that will literally take you anywhere so I hope this helps guys if you have any questions on anchored links let me know otherwise you can utilize this and your menus page links or really any way I've showed you today and there might be some other ways so if you get creative show me some examples let me see what you do and have fun making links that zip around your Derby websites alright thanks guys [Music]

Channel: Josh Hall

Views: 114,511

Keywords: Divi, Josh Hall, Web Design, Anchor Links, Elegant Themes

Id: nY673daNCTo

Length: 9min 48sec (588 seconds)

Published: Mon Sep 25 2017