Elementor Vertical Navigation & Vertical Scrolling for FREE

have you ever wondered how they create those supercool single page websites one that when you click on any of the links it jumps to a full screen full page layout when in today's video I'm gonna show you how you can use elemental and free plugin to do just that so stick around and I'm gonna take you through every single step - Paul see and this is wptouch the channel where i help you create beautiful WordPress websites if this is your first time on the channel please consider subscribing and smashing that Bell icon below to become part the WB crew I mean notify every time new content is added so let me preface this video by saying you need two things both of which are free you need Elemento you don't need the pro version you can just use elemental and we also need to grab the free plugin we're going to use for this particular example so what you do is head over to your add plug-in section of your website and simply search for premium add-ons for elemental once you done that just install it activate it and you are good to follow along I've already covered premium add-ons for elemental before and I said this is one of those plugins that you really need to grab it's completely free there is a pro version but we don't need that for this particular video it is completely free it has a ton of really cool options today we're gonna take a look at just one and that allows us to create this single page navigation so if it install that we've got everything set up we're good to go so what you need to do is head over to the templates section of Elementor and come into the save template section now I've already created our three templates but let's create a fourth one now and I'll show you how easy it is to create that template and then how we can bring that in and start using it so I do is we're gonna come say add new template with a set this to be a page but you can use sections if you want to bring a stick to pages I'm gonna set this to be page 4 create our template that'll take us into elemental and we have basically a blank page other than some elements we don't actually need so we're gonna do is we're gonna get rid of those we're gonna come down to our settings page there you can see a set a default we're gonna say we want this to be elemental canvas because we don't want any content on here whatsoever once you've done that we can now come in and say we're gonna put in a simple single row column once we've done that we're gonna come through and choose just a couple of options to make sure that this works the way we want first one is we're going to say we want no gap on column next that we're going to come to our height and this is an important thing we have fit to screen we have a minimum height now normally fit the screen would be the kind of thing you think you'd use to get sort of full height full width so no matter what device you're looking at it would be a full screen however that works fine when you're dealing with desktops and tablets once you switch to mobile this doesn't work very well so what we need to do is come through and say we want to use minimum height once we've done that you can see we have three values you can work with we've got pixels vh and VW we're gonna click on VH for our height we're gonna come through to that I'm gonna specify we want a hundred percent you can see now that fills out the entire page even though there's nothing to be seen you can see that our content is sitting in the middle we've got a full screen no matter what size were working with so if you've done that we can now come through and specify the background of some other content so we're gonna come over the Style section jump into our background area and choose our background image and we're gonna come down and we're gonna choose something we think actually looks quite nice I'll choose this particular one doesn't really matter insert our media you can see there's our background image in this and now we just need to configure that so position will say we want this to be for this example we're gonna say bottom center because I want to show the actual street next up we've got the repeat we're gonna say we don't want any repeat on there because we're going to be just the image not a repeated image on larger screens and finally we're going to come down and we're going to say we want this to be cover so that we set everything up in there we can go ahead and put whatever content we want so we could use any of the normal widgets and build up any kind of layout we could also go through and use templates if we want to let's keep this really simple let's just drop a simple heading in there and we can drag and drop that over and we'll just say however people we can just style that so we've set that to be centered and we'll come through and we'll just choose white for the text color and we'll just come in and quickly edit the font so we want that to be months alright tie in with all the rest we'll bump the size up a little bit and we'll just reduce the thickness of that font and also we'll just adjust the line height slightly and the letter spacing okay so there's the first part let's just quickly drop in a simple intersection we're going to split that out to her three columns and we just say add new column what we're going to do is we're just gonna drop in an image into the first section choose our image and we're gonna find one of just some people so it doesn't really matter too much so I say insert that media and we'll come in and just duplicate that and duplicate that again and we just quickly change those oops change those images so we've got it's a nice content so there we go we've now got our new section in there so in do when a hit or publish on this so that'll save that we've now created our new section so once we've done that we can go through and create the page that's actually going to contain all our different sections so let's go ahead and do that just come back out of this we'll exit to our dashboard we now have our four templates in place go to our pages section we're gonna say we're gonna add a new page in there and we're gonna say vertical navigation okay again we're gonna come over and we're gonna specify we want this to be elemental canvas but obviously if you have a header and footer set up on the end you want to use those in your design you can do you just don't need to hit publish on there and then we'll just jump into element or start creating our page so this is our blank page all we're gonna do now is come over and search the widgets for vertical and you can see there's premium vertical scroll which the plug-in we're going to use drag and drop that onto our page and you can see that now inserts this gray bar at the top so what we can do now is go through and specify all the different things we want this to do what pages you want to use the templates and so on so we take a look on the left hand side you see is content type element or templates or section ID we create a templates we're gonna use those we click on add item once we do that you can see it says what's the elemental template you want to use we click and there's all the templates we have so we're gonna click on page 1 to start off with you can see now that drops that into the page for us there's a couple of things we need to do you can see we've got a border around this it is not sitting on full screen so we can change that what we need to do is click on the actual row column we're gonna come through there and specify we want this to be full width and we're also going to come down the column gap and say no gap so that now gives us a full screen layout without any of those distractions there's the first part come back over now we can reactivate the actual vertical scroll widget come down and add our additional items so we've got four we're going to work with so we'll add in page two page three and finally page four so now we've got our four pages you can see if we scroll those pages will now show up as we'd expect them to we want to reorder any of those we can simply drag and drop them into the positions that we want so you can see now we've got there's our our people and then we've got the actual subscription thing at the bottom okay so that's the first couple of things now where's the navigation and how do we actually put the different types of navigation on here very easy what we're gonna do is come down to navigation and you can see we've got navigation menu and dots so at the moment we can't actually see the dots because our design is pretty much all in black so let's come over to these style options or you can see we've got a ton of options on here we can its style the tooltips the dots the containers all those kinds of things so first of all let's click the dots and we're going to say the dot color is going to be white once you do that you can now see our dots on the right-hand side so we've now got a visual representation of the navigation on the site itself now with these dots we can do quite a few things if we take our mouse over at the moment it just says undefined so how do we deal with that easy there tooltips I wanted to do is come back over to the content section you can see it says dots tooltips if you deactivate that nothing will show up on this you can see now when your mouse over there's nothing popping up but if you've got a site that you want people to sort of visually see what they're clicking on especially if you have a lot of different sections it's advisable to put the dots tooltip on so what I need you to do what you've done that is simply drop in the name of the different sections or pages or however you want to refer to them into this dot tooltip and just separate them by a simple comma so I click and drop that in there you see now that's just put home our work our people and subscribe I take our mouse over now you can see each one of those sections with your nice overlay showing us exactly what each of those dots refers to chord styles again you can also come into the dot section and you can specify what you want your active dot to look like so you can see we can make our active dot blue so very easy to do we can also change the dot border color if you want to so you can easy set that to anything you want so you say a white border so now you can see that our dot is a blue in the middle when it's active a white outline on the outside edge very easy all very simple to do we'll take a look at the navigation menu in a moment once we finish with the dots way of navigating around now the container actually applies to the different section on the right hand side the navigation dots so we can do is we could put a background color in there and we'll say we're going to put something like this black color in there would make it semi-transparent and if we just scroll down the page we can see we've got something different in the back and you can see that there's now this black overlay over it now obviously I'm working on quite a small resolution on my screen and you can set this add to make sure that they don't get hidden this would normally be on a larger screen but like I say you could easily configure things on here to make this main section a little smaller and make this a bit more evident on the right hand side or the left hand side depending on where you want to put it we can also come in and put a nice border radius on this and we now get a more pill-shaped look if you want to put a drop shadow in we can do that as well so we've got a very simple way of styling the way those dots work if you want to adjust the position of those it's very easy to do we just come onto the navigation tab on the left hand side and we scroll down you can see we've got dots horizontal position and you can see we can go to left or right and we can also go to top middle or bottom so depending on how you want this to be displayed you can control that very easily directly inside here okay so let's put that back to the middle and there's the basic stance so it's a very easy plugin to work with okay so let's take a look at this in action let's click on update once we've done that we can then open up the page and take a look at it so this preview our changes and you see there's our dots on the right hand side we click and we can easily jump through to any of those sections all very nice and simple but how do we get the navigation at the top like had in my example well I should jump back into the dashboard and see how easy it is to add that back in okay so much the same way that we added the various sections in for the actual content itself we need to do the same thing for the navigation table to the navigation section and you can see we've got men new items and we've got add item clicking there you can see we can now simply drop in that the different names we want to work with we're just gonna call this home had a new item and we're gonna call this I will work then we've got our people and finally we've got subscribe okay so there's our four sections and you can see once we start typing those in we now get our navigation appear at the top of our page we can go through and we can adjust the offset the position and so on so we could say we want to put this over to the right-hand side we can adjust the offset from the top if we want to to get this exactly where we want and I will layout so I put that to 10 and we do the same on the right again I set that to 10 as well so there's how easy it is to add those in and they'll work in exactly the same way if you click it'll take us with that section all very easy and the nice thing is it sticks at the top of the screen so we don't have to do anything else with it so now we can go through and style those if we want to such up with the style tab we've got our navigation menu and you can see we can control the normal and the active in much the same as you expect with any kind of link so we're gonna do is going to come into the typography we're gonna specify that this is going to use montserrat again we're just going to quickly adjust a few settings on here so we set that to 14 we'll set that to be 300 pixels actually 300 wait we'll upper case those actually set those to 400 they stand off a little better I will adjust the line spacing or the character spacing a little bit in there we set that to 1 okay so we've styled the text now we can go through and just choose of the various different things we've got the normal in the active States the text color the hover we're gonna set that to be blue and if we mouse over you can see that now highlights in blue so it's very easy to go through style everything exactly same way you'd expect with anything to do with elemental so you can simply update your page make sure everything is in place we'll apply that to make sure that all those changes are applied update we're now pretty much finished so we just jump over to our page and refresh this you see we know how our navigation in the top corner we can click on any of these sections or we can use the little dot navigation on the right hand side and we can jump around on our single page layout all done inside Elementor and just that free premium plugin for elemental so it really is a super simple method of creating these single page layouts it's all completely free which makes it an added amazing bonus so i'd recommend downloading the plugins checking it out for yourself and seeing how easy it is to start building the single page layouts well if you enjoyed the video give it a thumbs up if you didn't give it a thumbs down but let me know in the comment section below what you did or didn't like about the video speak in the comment section so any feedback on this or anything you like to see covered in future videos please pop those comments in the comment section let's get that conversation started and we can share all the different skills and knowledge that we have and we'd all benefit from those amazing things as always when it's in pour see this has been WP test and until next time take care

Channel: WPTuts

Views: 55,806

Keywords: elementor vertical navigation, elementor vertical menu, elementor vertical nav menu, elementor vertical scroll, elementor vertical scroll widget, elementor page builder, elementor page builder tutorial, elementor review, elementor tutorial, elementor wordpress, elementor wordpress tutorial, premium addons for elementor, premium addons for elementor plugin, leap13, WPTuts, PsmegTV, wordpress tutorial

Id: QsMO2zL-Vig

Length: 14min 6sec (846 seconds)

Published: Mon Mar 11 2019