Create Anchor Links Using The Divi Builder

what's going on everybody this is keegan with keegan linear media and today we're going to show you how to do anchor links inside of divi link to them specifically from the navigation menu down to a section in your page super simple super easy let's get into it so we're here in the back end of wordpress again as we do with every video we're going to show you the setup with version 5.4.2 for wordpress and then we're going to go into divi show you the version of divi will work in and you can see here we're looking at version 4.5 and this is july 2020. you can see it on the video timestamp this is what we're working with current brand new bleeding edge version of divi and wordpress here for the tutorial so the first thing we're going to do is we're going to go into the theme builder we've already kind of got a little bit built here and you can see we've got divi supreme installed we've used it in another one of our videos specifically when we're showing how to add icons into the navbar we'll link that video up here and i want to show you the the plugin itself it's supreme modules light it's the free version of divi supreme and it gives us the ability to add icons really super super simple into the nav bar but also in the visual builder make it customizable make it flexible and we can do what we want to do with it so we're going to go under divi into the theme builder and we're going to be messing around in the header so let's let's go in the header there's a few things we're going to do here we're going to do two two different anchors right so one's going to be a replacement for the scroll to top and the other one's going to be an anchor that drops you down into the section we're going to do that more in a page in the page side of things but we'll open up the wireframe here because we're in the header builder now and we're going to delete one of these and one of the icons that's over there on the right here this is what we're using here and we're going to the content we'll go into this icon section and what we want to do is actually add this top and then a scroll to top option and we can maybe call it back to top and the key here is actually on this we're going to link directly to just this hash like just a hashtag we'll hit save and then we're going to save this layout here and exit and go into a different section of the visual builder specifically on the home page all right so we're going to close this we're going to save this layout and let's just test let's test this out so we'll go back into the front end we're going to refresh our home page and you're going to see over here with the options that we had you saw the two icons or the two modules those are going to change we've got this back to top option you see as we scroll down we don't have this as a fixed header so we need to put this as a fixed header but you can see as we do this it's going to scroll right back into the top view which is cool so it doesn't matter where you are let's actually make this thing fixed real quick i'll show you how to do that as well that'll be great because once we scroll all the way down to the bottom of the page that link is going to be up at the top and it's going to be an easy way to get back to the very tippy top of the page so we'll go under the section settings under advanced and position and we're going to change it from relative to fixed i'm going to put it right up at the top with no offset z index we're going to go all the way up to 500 that way it stays on top of the rest of our content we'll hit save and then we'll be able to exit and refresh the front end of our website and we'll see this in action save here just to be double safe and we'll refresh the front end of our site so now we'll have a website where you can scroll where it wasn't fixed before when this refreshes we reload our page now we scroll we've got that menu that just stays at the top which is pretty cool right simple and then we'll hit back to top it takes you right back all the way to the top of the page super quick super super easy to to implement works well and you could do this at the bottom as well you know if you wanted to put something in in your your footer you could do that you could do it specifically on blog pages if you wanted to do that have a section at the bottom where you had a back to top and you could just have that to worry when you click on it brings you back to the top that one's easy and that is a version of anchors but what we're gonna do here is tie this icon into uh into another section so let's enable the visual builder we're gonna open that up so we're looking at the dvpr firm this is just a landing page and we've got a button here that you can see we've already kind of started working with so we're going to open up this button section if you looked at the bottom what we're going to do here is mess only with the link so the item you're going to click to jump to a different section all you have to do is add in a link like this in this case it's just a hashtag and then get started so this links to an id so a section id a module id a row id a module id whatever you put in that little hashtag and then give it a name so we're going to call it the get started section like say there was a contact form at the bottom of your page could be the get started part of your site that's what we're going to link to so we're just going to call it get started we're going to link to that class and we'll copy whatever we use here and we'll hit save so then we'll come down and say this is our get started section this is where we want the page to drop down to to where we can make this section visible we'll open up the sections here and you go under advanced under css ids and classes you want to add that right here so get started as the id it's amazing because when you hit save will exit the builder and show you exactly what it does so exiting out of the visual builder going back into the front end and this part right here just makes it very very easy to jump down so you know we've got our back to top that we set up here set up here a minute ago now we hit get started you can see down in the bottom left-hand corner the link shows up and it's got that forward slash and after our site and then get started that links to the id that we set for that section at the bottom so when we click it just jumps right down brings this into interview and this can be if you decide to do a one-page site you can create your menu and you could have this as one section so it could be hashtag about that would be the link in the menu and say maybe this is the about section so when you click here we drop down to here the blog let's say it took us down here imagine this was a blog this could be the next section and then the contact could take you down to here that's how people build one page sites inside of divi extremely easily but that's the perfect example you know we've we set the link to the id class or to the id that we have on that section and then you just put the id inside of the section make sure those two match and that's all you've done is you've linked to a section of a page as opposed to another page or an external website very very easy to do super quick to set up but extremely powerful in what you can accomplish so we can go back to the top like that so again i i super appreciate each one of you the subscriber count clearly you guys are sharing this and clearly people are finding the channel and getting some value in it the comments are starting to grow the subscriber number is starting to grow which is which is cool but not what this is all about i'm all about bringing the value to you teaching you some tricks making divi development a little bit easier and hopefully giving you the skills that you need to take this and make this a side hustle or or a full-time job to change your life if you can make enough money off of off of website development it's just going to make it to where you can have freedom of location you control of your schedule time to spend with your family time to spend with your friends time to do the things that really bring you fulfillment and joy as a human being that's what we're about here that's what the channel's always been about it's not about making money it's not about growing subscribers and being youtube famous could care less about that to be completely truthful um actually would prefer not that kind of kept me from doing youtube videos for a long time but my drive to want to teach you and and help keep people from making the same mistakes that i made along the way i did a lot of trial and error if i can give you a quicker trip a quicker journey to a good end result that's what i'm here for so if you like that and that resonates with you please be sure to hit the subscribe button stay in tune with the channel come back for the latest videos because it's always going to be our purpose here is to bring value leave comments below of things that you would like to see related to any of these videos videos that you would like for their own topics you know things that that are hurdles for you come over to twitter keegannell media follow us talk to us tell us what you're doing with your websites i want to check out your projects so again i can't tell you enough how much i appreciate you being here does mean the world to me go out there chase the dreams chase the life that you really want stay safe stay kind to the rest of the people around you and see you in the next video have an awesome [Music] you

Channel: Keegan Lanier

Views: 2,991

Keywords: create anchor links using divi, divi, wordpress, divi tutorial, how to create one page Divi website, wordpress tutorial, how to link to sections in Divi, divi 4, divi visual builder, divi builder tutorial, how to build a one page site, build one page site using Divi, keegan lanier media, wordpress website, divi website, how to use the Divi Builder, create links in divi, anchor links, web design, divi anchor links, how to create anchor links in divi, web design tutorial

Id: NshNg4cdJ9Q

Length: 10min 31sec (631 seconds)

Published: Sat Aug 01 2020