BACK TO TOP BUTTON ELEMENTOR FREE & PRO: Scroll To Top Button Elementor

hey guys what's going on Tyler here and today we're talking about how to make a scroll to the top button in element or free as well as element or pro let's jump into the video alright guys so like I said today's video is going to be all about how to make that scroll to the top button but Before we jump into it I do just want to mention if you're interested in upgrading to element or pro at any time I do have a link down below in the description so be sure and check that out and see what kind of deal you can get there Elementor pro has just been an incredible plugin I love all the various features that they have enabled in the pro version and just there's so much to build out and to use into design in your website so be sure and check that out down below in the description and now let's go ahead and jump into the tutorial so I'm sure you've probably seen on some websites when you're scrolling through the page you'll see a little button pop up and usually typically the bottom right-hand corner where it says to the top or return to the top or something like that a little top button that you click it and it's Auto Scrolls your whole page right back up to the top that's essentially what we're going to be creating in this tutorial is that little button and I'm going to show you some different variations of how you can kind of adjust it and tweak it and make it fit for your website but the very best part of this whole tutorial is going to be this is going to be mobile friendly as well so it's going to be a very simple and quick tutorial but a little bit in-depth so follow along closely and yeah you're gonna have that scroll to the top button in no time for those that are new to the channel please consider subscribing I really am trying to grow my YouTube channel grow the fam right now and we've got a lot of awesome people here that are helping and contributing in the comments and liking video so thank you guys so much and if you're new please consider subscribing so let's go ahead and jump into my computer and start the tutorial alright guys so let me just show you exactly what I'm talking about this is just an example page that I've created right here and as you scroll down you'll see a little to the top button or pop-up right down here at the bottom right and as you keep scrolling it just stays there in the bottom right-hand corner no matter where you are on the page as long as you've scrolled down a little bit and then you can just simply like that and it will scroll you right back up to the top section of the page so that's what we're gonna be making in this tutorial and it's super like I said it's super easy to do if you just follow this tutorial it is a little bit in-depth but just stick with this tutorial and you'll be able to make this in no time so as we basically what I'm gonna do is show you exactly how I made this one right here so let's go ahead and just start editing this section right here what you're gonna want to do is go ahead create your whole page out build out exactly everything that you need on the page and then what you're gonna need to do is you're gonna go into the first section the very top section of the page and this could either be this section right here if you're using element or pro you could even go ahead and edit the header I'm not gonna go over that right now but you could go in and edit the header if you wanted that to be the very top but for this we'll just go ahead and use this top section here we're gonna go ahead and click these six little dots where you would click and drag to move the section we'll go ahead and click that to get into the settings here of this section and we'll go ahead and go over to advanced and then right in here we need to edit the Advanced tab under the advanced the section here and the CSS ID we need to name something unique for this example and tutorial I'm just gonna name it top so I went ahead and did that I just typed in t.o.p there and hit enter or just kind of got out of that field and it's all set ready to go right there so now this whole section right here has the unique CSS or a styling code to get not get to get too technical here but the unique ID of top so that's pretty much how we set that there and then we're gonna go ahead and just jump right into how to set up the button now the button is very pretty simple to make all we're gonna do is this let me go ahead and actually just delete this button here all we're gonna do is go ahead and create a new section at the very bottom of our page so we created a new section right here and then I'm just simply going to add a button so I will just click and drag this button right in here drop the button perfect it looks you know we style it whatever color we want anything like that what I did is I went into the icon library here and this might be only an element for pro feature but you can find an icon in the free version I'm looking for Chevron arrows and it's basically these like arrows that are just like a angle I'm gonna use the Chevron up arrow and insert it there and then I'm simply going to change the text to top let's capitalize everything so it looks a little cleaner there we go top and then the link all we're going to do is put a pound sign or a hashtag sign and then put the name of the CSS ID that we set for the top section so in my case I just named it top simply I'm gonna put hashtag top or pound top just like that and then to align the button we simply just select do we want it Center mid middle I'm sorry left center or right let's go ahead and just keep it on the right there that's kind of where you typically see these and that's where I want mine there so we'll go ahead and line that up so that is good to go we can actually just start using it just like this if you don't want the button to be stay on the page or stick to the page you can actually just use it just like this and it will function the exact same way just not scroll with the page so let's go ahead and add it and make it sticky make it stick to the to the window so it's its move its so when the page is moving behind it it's staying in the same spot so let's go ahead and do that we'll go over to advanced now there's two ways to do this typically we would go to motion effects and we would go to sticky and we could select the bottom and that way when we scroll it will stick to the bottom however you notice when you get to the actual element it sticks back to its location of where it is on the page and that's not exactly what we want so we're not going to do that you could switch it to top and it would stick to the top here so if we're scrolling down and you see behind my head here it's actually sticking to the top of the page until it gets back to the element spot and it switches back so that's again not exactly what we're wanting if you want to do it that way you certainly can that's no big deal it might be kind of nice here if we switch at the bottom let's add a little bit of an offset here again this is just one option for you you're scrolling it only sticks there until it gets to the bottom of the page where the extra element resides so your users are scrolling and there's it's not floating down here when they're in like the footer menu or anything like that that's kind of nice but for this example we're not even going to need that so we'll just hit not in there so what we're going to do here is we will use scrolling effects that is something that we'll use let's go ahead and just set this up before we get there let's go ahead and close that and go back to positioning here or go to positioning here and what we're going to want to do is we're going to want to set the position to fixed now whenever you set a fixed position on something that means no matter where they're scrolling or anything like that is is going to be locked on the window and not be moving anywhere so we have it set to fixed we're going to go ahead and push it to the right here and push it to the bottom here and so you can see when we pushed it to the right and when we pushed it to the bottom it pops up right here and it is now fixed on the page and congratulations we've pretty much done that and it is going to be right there so that is if we actually go ahead and update this you can see and we refresh our preview over here we can actually see that it is stuck to the bottom right of the page no matter how wide the window is it's going to be stuck to that very bottom right corner so that's exactly what we want all we need to do next is just add a little bit of an offset which means it's just like a little bit of a padding or margin around the edges so let's go ahead and add just maybe like a I think I went with like a 25 pixel padding I think on the last one so there's 25 pixels now you can see it's off the edge a little bit that looks really good everything should be working it should be functioning just like we intend it to what else do we need to add let's just add the final effect let's update it make sure everything works before we do this so go ahead that's refreshed okay so we scroll down and we click the button and it Scrolls this right to the top just that easy guys if you have other you know sections you want to name like maybe a middle section or something like that you could definitely do that and then offset this a little bit higher you I mean the possibilities are endless here but for this example we'll just leave it like that it works well now we need that fancy little effect so it's not popping up right when we load the page so we have this top section here obviously if we click this it's just going to scroll to the top section if we're right here and we click it it's just going to scroll back to the top section so it's really gonna do nothing so we don't necessarily need to display it right here so let's go ahead and just make that little effect so what we're gonna do is go back here well while this button is still selected we'll go ahead and go back into motion effects here and go to scrolling effects and then we're gonna want the transparency effect and we're going to want the direction to fade in and the level to be ten so what we're going to do now this is this percentage is where the scrolling effect is going to start and this percentage is where the scrolling effect is going to stop so what it's going to do is start on a scale of zero opacity up to a one opacity meaning not they're like completely transparent all the way up to fully there and present so basically it's going to fade over in that's gonna fade in over that scrolling amount of time so I'll just show you really quick when we get to twenty percent you can see now this button is starting to become visible here as we keep scrolling as we keep scrolling and we get the 80% of the page scrolled it's fully visible and that's how that works what we're gonna do is just make this appear a lot faster so we need to shorten the amount of time that it's fading so we'll start this may be like at 15% again if it doesn't isn't making any sense just follow along and just adjust these as you need them fifteen percent and we'll bring this all the way into maybe like 20 percent so there's only about a five percent of the page that this will actually fade so now when we start scrolling you can see we're scrolling it's it fades in a lot quicker because there's now only a five percent section that it's that it's allotted for the face so it fades in a lot quicker just like that and it's fading in there so what I noticed is we're already a little bit lower than I want it to be so I want it to be maybe like around here so let's just pull this over a little bit more so we'll go to 12% let's just go to like 11% and maybe 16% or we could even go less maybe like 14% okay there we go so now when we scroll it comes in a little bit sooner and it fades in a little bit faster even faster yeah there we go and and what's ready to go now we could even move it in just a little bit more let's move it maybe to 9% and like oh I don't know maybe eleven twelve percent something like that so now there we go just as we leave the top section we are ready to go and that button is visible and ready to go it fades in a little too fast I'll pull this back just a little bit so I'm at nine percent and thirteen percent now in case you guys want to know what numbers I'm at perfect so let's go ahead and update this and I'll show you what it looks like again that's the only difficult part of this and you're pretty much done from here on out so let me show you really quick what this looks like we're here oops it didn't reload sorry about that let's go ahead and reload it perfect so there's nothing here you can't even see it we start scrolling and it fades in just like that and it is present there all the way down the page and we get back to the top there's nothing there because we don't need it there because we're at the top and then as soon as we leave the top it comes in and you can just simply click it and auto scroll back up alright guys thank you so much for watching be sure to check those links out down below in the description if you're interested in element or pro at any time and please consider giving this video a like if it helped you it really helps boost my video in the YouTube algorithm and if you're not subscribed already be sure and smash that nice-looking red subscribe button so you can join the fam and see future videos just like this one thank you guys and make today and this week just make it all awesome

Channel: Tyler E Morrison

Views: 16,807

Keywords: elementor, back to top button wordpress, elementor tutorial, elementor page builder, elementor pro, back to top button elementor, scroll to top button wordpress, scroll to top button elementor, scroll to top, how to add a back to top button on wordpress, elementor wordpress, how to add a smooth scroll back to top button, elementor page builder tutorial, scroll to top elementor, elementor scroll to top button, elementor back to top button, back to top button elementor free

Id: VKCuRCq92_M

Length: 13min 10sec (790 seconds)

Published: Mon May 18 2020