Σ Sigma Hosting is mainly a video tutorial website

Σ Sigma Hosting is mainly a video tutorial website that make it easier for you to search within the transcript of videos for solutions of problems you might face during your journey in dealing with different webhosting companies. So, we are very sorry if the text is not well organized and we may work on it in the future but for now we hope you get the benefit mainly from the video then you may need to have a look on the transcript. Thanks for your understanding 🙂

hey everyone welcome to this video my name is Tom and this is WP learners where I teach you how to build websites without code and so in today's video we will be creating this menu effect here and off canvas menu and so basically what happens is you click this icon and for off from the side of the canvas a menu slides in and it looks pretty cool it works some mobile really well too so you don't have to have two menus or adjust any settings really for mobile – a few things but no real extensive settings needs to be changed there and so to do this what you are gonna need is your gonna need elemental you will need elemental pro and so that is a visual drag-and-drop builder that allows you to build websites without touching code really and so the link for that is in my description I am using a theme called Astra Pro I use that for all my sites so if you are in the process of building yourself a new website I would recommend jumping on Astra Pro I will link that in my description as well and so those are the two kind of tools that you will need for this tutorial in order to follow along but first things first I need you to go and jump straight into your WordPress dashboard okay and so that is the back end of your website where you add pages and all of that so I'm just gonna move my camera just a second there we go and I I'm gonna jump straight over to appearance and then menus and so once we load into the menus we're going to create a menu that we are gonna add into our off-campus menu so you can see here that I've made one to create a new menu all you need to do is click create a new menu there so I will show you just how to do that now I'm going to create a new one called off canvas demo click create on that menu okay so once that's done you can add your pages in for the purposes of this video I'm gonna add some custom links because that means I don't have to go through the process of adding pages into my into my website it just makes things just a little bit quicker and so I'm gonna put a hashtag in here because that will when you click the link it won't send anyone anywhere it will keep them on the same page and so I'm going to put home Oh jumping over to the wrong tab there about let's go portfolio and let's throw a contact link in there as well once you've done that just click Save that menu will then save into WordPress for you and then you can use that menu to add into your off-campus menu in just a second and so we're gonna go over and create our off-campus menu now so if you hover over templates on the left this is an elemental feature by the way you are going to want to go to pop-ups it is an elemental pro feature that's why you need to have Pro installed and you can see I've made a demo one there which is the one you saw just a moment ago I'm gonna add a new one now off canvas to make sure pop-up is selected by the way click create on that and we'll just wait for that to load up it's going to launch you straight into elemental so it's going to launch the drag-and-drop builder for you okay so once this loads up it's going to load in the default template selector here you're going to click off of that and you'll be left with this pop-up in the middle of your page okay and so in order to kind of get this to work the way we needed to do we need to change a few settings now normally in elements or you will throw in an intersection and you can change all the settings here you can still change all the settings here but we don't add a section yet in fact we go to the bottom left where the Settings icon and that will give you all the settings for this little pop-up okay now first thing we need to do is we need to make this pop-up fit the size that I like the height essentially of the screen from the top to bottom okay and you can see there's a height section here and if we select a fit to screen it does that for us okay and then I am going to align this menu to the right okay and so under the position section and the horizontal tab you want to click on a line to the right now for me this is too wide okay so I want to reduce the width here just a little bit so I'm gonna drag this slider in to around about there and then I want to change the background as well so if you click on the style tab at the top and go to classic color I'm gonna switch this to black we can then start adding things into this off canvass section here okay obviously it's not off canvas yet you'll see how that works in just a little bit but for now we're just creating the structure to get this in place so it click the top icon in the right-hand corner of the editor this will bring up the elements panel and another element or pro teacher is this nav menu okay and so search for the nav and throw it in over here now by default it's going to load the links up across the top okay and so you can select one of a menu you want so I've got the off-campus demo menu there just like that and it's applied some basic styling based on what's already on the theme so we're going to just change just a few things okay first things first I want this to be vertical not horizontal and so there is a layout section just on the left hand side here and you want to click the drop down and click vertical okay and then I don't want this underlined underneath all of this so there is a pointer section here and underline I'm going to click done and then I just want to change a few things about the text so I want to change the font honest – my favorite font which is railway if this drop down and decides to work there we go railway I then want to make this font weight so the boldness at the font to 200 so it's pretty low I quite like the light effect here and then we're gonna turn up the size and it's gonna look quite squash for just a second so let's go with around 40 on the sizing 40 pixels then we want to add some vertical padding some some space between the top and bottom of each item okay so let's drag that all the way to 50 I want this text to change when we hover over it as well so I am going to make this white so just to do that you click the hover and then change the text color and you can see that change takes effect once you do that one more thing I want to change the background color here of the pop-up itself to semi-transparent so that you can see the content underneath it so if we go back into the settings cog at the bottom left and click on style click on color and just drag this little slider over to the left and you can see that the content starts to appear underneath the menu just slightly and so this is the structure of everything here and there is just one thing left that we need to do so you can see on my test version here that we've got this nice little fade in animation and so on our one that we're building right now if you go back to settings so there's a little bottom left icon here and click on settings on the top left you can see that you've got an entrance animation the one I'm using in my demo is fade in right okay and so you can add an exit one as well which I haven't done and the other one but I'm going to do that now and we're gonna go fade out right and so if you just select that you'll get that nice kind of fade slow animation in every time that you click the menu and so that's all we need to do to set this up on in terms of the structure of the off canvas menu there's just a couple more things we need to do to make this work and make it live so click publish and you are gonna want to set a trigger so you want to set an event that when that happens the menu is shown okay and so you want to do that when someone clicks on it so click on the on button here for on click I'm just gonna move my camera again so that you can see this and so then all you want to do is click next and ignore about you don't need that save and close that and that will be done let's move my camera back ok and so what you're gonna want to do now is just exit to your dashboard again and we are now gonna add this into the header of the website ok so I'm going to create a new header for you guys so you can see how that that works so again on the templates you've got theme builder ok so you're gonna want to click on that and you'll see that when I load this I've already got a menu here ahead of sorry and I'm just gonna create a new one so you guys can see how this works so i'm gonna click add new select a header and i'm gonna name this template a new header demo create that and then once that loads up it'll do the same thing your projector straight into elemental and we can start building that there i'm going to create a similar effect to what i have in the demo version that i showed you at the start of this video but i'm just gonna show you guys how that's made okay again by default what happens is is when elements are launches you into this into this mint into this window the templates sure we're not going to use any of those just to make this quick so i'm going to click on x i'm gonna throw an inner section in over here in a section is just give me gives you more flexibility on the structure of your columns in your rows and so i always use an intersection and now on the main section the top-level one i'm just going to set a background color of white so i click on that and then go to style background type classic and then color drag it up to white and in the left-hand column here I am going to show you how to add a header so you go back into the element selector and then it's just this heading element here so right into that column and then I'm just going to type in place holder logo in the text let's change that to black so that we can see it again let's change the font switch that over to railway font weight of 200 awesome and now this is where things are just a little bit different to normal instead of adding and menu in here we're gonna add an icon so we go back to the element selector and search for an icon it's just top left one here throw it into the column on the right and then once that's loaded click on icon library and search for bars okay that will give you the same sort of effect that we have in our demo version move you back there we go and so you see that we've got this this bar here in the middle of this common but I want to make this smaller so we click on style go to size and let's just find a size that I like 26 will do and then I'm gonna align this to the right but it's too far to the right so I want to add some margin in here so I'm going to add 40 pixels worth of margin on the right hand side there and I'm going to change the color so that you can see the difference between the the demo version I showed you and the one that we're making now switch this with the orange color that the theme is using that'll do and now this is where magic happens ok so you can see that there is a link section here and to the right you've got two icons one represents link options the other represents dynamic tags you are going to want to click on the dynamic tags option and you'll get upload of options that you can kind of load in to the link pad here but what you want to do is you want to click on pop-up it's under the actions tab and what that is going to do I don't know wise launch that let's click off that I've got pop-up there and then I want to click on that again it will give you a drop-down now under the pop-up section here click on the drop down and search for your pop-up that you made so I call this off canvas – and now every time we click this this icon the the off canvas menu will show and so if I click publish now and if I add a condition for the entire site let's move the camera so I can see the button save and close we preview that now we will see our finished product okay so this is all loaded now and so let's see this work in action so if I click on this icon it fades in and if I click on the X it fades out quite nicely this works on mobile too but you'll see that we have a one problem here ok and that's that we get a mobile collapsible menu and we resize the screen this is a really easy fix okay so if we hover over edit with elements are in fact no let's go back to our dashboard and if we navigate back to our pop-up settings and relaunch our pop-up we will be able to change that setting I wanted to show you guys what happened there just so you could see it in a real-world example so if we click Edit with elements or again and load our pop-up back up it's just one setting that changes this ok ok so we are back in our pop-up settings and what you are going to want to do is you want to click on the menu guys to select that and make it appear on your editor tab on the left now you'll see on the mobile drop down options here that there is a breakpoint option now basically what this means is is that when it reaches the maximum defined pixels so in this case it's 1025 pixels if your screen is 1025 pixels or less it will collapse the menu into a mobile menu now you want to select that as not and have we update that again we don't need to set any more triggers so just click the Save and close what we can now do is go back into our header let's refresh this page you can now see that the menu doesn't collapse but it still works pretty nicely on mobile and so it's really that easy to build an off-campus menu it's not hard at all and it works pretty well in my opinion so if you have found this video helpful please let me know in the comment section I have dropped all the links that you will need in the description and if this has helped you – I'd love to hear from you but that's for now thanks for watching this video and I'll see you again soon .

Video Discription

In this video, we create a slide in off-canvas menu in Elementor. The tools used in this video (links below) are Siteground hosting, Elementor Pro and the Astra WordPress theme.

Please let me know if you have any questions!

Elementor Pro:

Astra Pro:

Siteground Hosting:

#wordpress #elementor #webdesign

 

Leave a Reply