hello guys this is Diane here from design creative and today I'm gonna show you how to create an off the canvas menu using Elementor give you an example of what an off the canvas menu looks like here is a website that I built using Elementor and if you click here it flies out with a really neat handy menu now these type of menus are pretty good for menus that may not be able to fit the actual website so for instance all of this all of these all of these links here in a menu may be way too long yes you can use dropdowns or whatever but this kind of makes it look a little bit more sleeker a little bit more nicer and it's very easy to do using elemental and the elemental pop-up feature so let's go straight into it so this is elemental and I have my sites title here and I have my menu plug-in now this is the normal menu module sorry not menu plugin menu module all I've done is I've changed the layout to drop down okay like this now we're not going to be using the menu module in this course we're going to be using something completely different okay so what I need you to do is press command + E or ctrl + E on your keyboard and we're going to type in pop and we're going to add a new pop-up I'm gonna leave this page and we're going to create our menu we are in the menu now as you can see they've got different loads of different things that you could use as a template I think I'm going to just start from scratch because I want to show you exactly what you need to do so here we have our but this is the box that's gonna fly out there's different ways that you could have it fly it you can have it fly up from the left on the top and the bottom it totally is up to you but we want it to kind of come out from the left and we want it to fit to screen okay simple and the entrance we can have it just ever fade in or we can have it zoom in right like that there's different entrances that we can have I'm gonna have it fade in from the right sorry like that okay so that's nice and neat you can choose the width of your of how much it flies out you could choose it by pixel or you can choose it by viewpoint with I kind of like to do it on viewpoint width and have it at 30% I think 30% is an okay sweet spot but you could change that so obviously this is what it's going to look like when it's on desktop but if you come over to here and you click on the tablet view you can of course change what it's going to look like on tab tablet view as well so I could have it actually come out the full width like that if I wanted to I'm gonna have it come out about let's say 60% on my on tablet and on mobile again I think I'm gonna have that viewpoint width about about 80% on viewpoint with okay and you can also change the position so if I wanted it to come to the right sorry the left on mobile I can do if I wanted it centered I can do so you do have some customization here in terms of what you can make it look like depending on which device it's coming from so I'm gonna change the background to black because I like the color black I'm gonna go to one F one oops one F is a good color that I'm going to use and from in here I can literally do things like you know add in I'm not going to add any particular styling per se but I am just gonna add some bits and pieces just to kind of show you what could be added in here you see let's drop that in there let's drop a button in there and we could put our menu in here if we wanted to okay we can have that vertical some main menu we don't want it to we don't want the toggle on there cuz currently the toggle is loaded on mobile so let me just bring this out into desktop view so I could see exactly what I'm doing like I can add some padding in here so it's not completely flush to the left and right maybe like a 40 pixel padding there's a a close button at the top you can't actually see that but you can if you click here where it says settings down here you can choose the styling for the close button you can make it bigger as well and you can make it white so it kind of stands out okay so from here you would just add in whatever you want to add if you want to add a form in there you can do anything that you want so once you've added all of the bits that you want in there obviously style it to however you want to style it once you've decided that this is how it's going to look then you want to click on the publish button now it's going to ask you about conditions it's going to ask you about triggers it's going to aren't sure about advanced rules none of these needs to be checked all you need to do is click on save and close and leave it like that okay now we're going to press command + E or ctrl + E on your keyboard and we're going to go back to the header right so from here I'm gonna get rid of this completely because we don't need that and what I'm gonna do is I'm going to add an icon I'm gonna drag that icon over and I'm going to use the bar icon and I'm going to line that to the right and humor it says dynamic you see it's got the dynamic button here I can click on that scroll down and i can choose pop-up now this is going to open the pop-up and the pop-up that we need is called menu now we can update that and now if we look at our website it's right there when someone clicks it goes and that is you created an off the canvas menu using elemental pop-up .
In this tutorial I will teach you how to create a neat off-canvas menu using Elementor and Elementor Pro with Elementor Popups feature. This is sooooo simple to do.
If you are using this menu and you have submenus use the DROPDOWN layout instead and the Toggle Button to display NONE.
If you have any questions please leave them in the comment section below .
Other Videos That Might Interest You
Add a dynamic date in your footer with Elementor
Create an off-canvas menu with Elementor
Create a mega menu with Elementor
Edit your images in WordPress
Use WordPress on your Local Machine
Migrate your WordPress Site
Help Me Get Paid
I love creating websites and I love to teach.
If this video or my channel has helped you in anyway you can pay for my Wifi, and tequila by clicking on one of the links below.
Elementor Pro –
Met Forms Pro-
Piotnet Pro –
Other Page Builders
Beaver Builder –
If you wanna be extra generous you can help purchase equipment for me on Amazon. If you do, please contact me after so I can offer you 60 minutes of coaching.
Contact me to get one on one coaching in WordPress
Contact me to get your website designed
Contact me to review your product on my channel
Contact me for a consultation on your own website.
Thanks for watching!
Stay Tuned for more videos so make sure you subscribe and don’t forget to hit the notification button.