ฝัง
- เผยแพร่เมื่อ 3 ต.ค. 2024
- Are you keen to know how easy it is to create the off-canvas menu with Elementor PRO?
It takes very little effort to switch from horizontal to vertical navigation that works on each and every device. Such navigation doesn’t need to deal with responsiveness and makes your site header clean. Instead of the classic horizontal navigation, there will be a button that triggers the appearance of the menu. You can also use your off-canvas “thing” as a sidebar and fill it up with all kinds of data; links to the social profiles, maybe an address, recent posts, google ads - whatever suits your needs. Either way, I hope you’ll find this tutorial useful.
Thumbnail credits:
Freepik: www.freepik.co...
**** To watch next: Horizontal to the off-canvas menu in Elementor PRO ****
• Horizontal to the off-...
10:05 Anyone who don't know how to access the Popup Settings should watch this first. Thank you for the tutorial.
Thanks buddy!
Thanks man, was looking for this!
Really can not appreciate enough these informational videos. About how to create a slider menu in WordPress using elementor. I watched hardly 30 videos but those were not informative as this video.
Doing great man. Thanks for your valuable support.
I would have liked to seen it being used on mobile/tablet just to see it. Great job. The style was really dark and clashy imho because i would never design that black menu but it was completely viewable as a tutorial. Thanks.
If I had found this hours ago it would have saved me.... well... hours. THANK YOU!!!
I had to comment after leaving a critical comment on the music in the other (newer?) side bar menu. This is the way ALL videos should be done. Your content is too good to have to compete with any mind numbing music loop. This video was thoroughly enjoyable!
There you go! It's always sunny after the rain...
Finally! As a newbie to WP design, I went through so many other tutorials to accomplish a desired result...that this tutorial takes me from beginning to end in a very understandable manner! Thanks so much!!
Glad it helped, and welcome!
Thanks for a great tutorial and for also mentioning the bugs and how to work around them.
At the end, you mentioned about not being able to think of any drawbacks to a ham'bar'ger menu on the desktop. One is that people have to click two buttons to get to a page. First the menu button and then the place where they want to go.
Thanks again. Much appreciation.
👍
You saved the day again! I had missed that the type should be Drop Down. I wish there was easier control of the second tier of navigation, to make it smaller.
Really can not appreciate enough these high quality tuts. 👍, I hope one day you become able to do videos more often, thank you!
I love your video. This is the First video I watched from your channel. I earnd $80 for implementinh the offcanvas menu on my client website. Thank you!
This was super helpful! I was trying to start working on another section of my website when your video was suggested to me. I thought to myself, "what the heck, I need to make one of these menus anyways so ill try out the video". Turns out, your channel is super helpful and has been very impactful for my development work tonight. Thank you so much!
Thanks for the feedback... and thanks for watching!
The quality of your tutorial was without equal.
Thank you for the clear and structured tutorial !!!
Best Regards from FRANCE.
Thanks, buddy! Greets back to France!
Thank you OB! I came back and watched the tutorial again! The way you explained it made me feeling going back to school again and I totally enjoyed it!
Hey, man was stuck on this for like 2 days. My Off-Canvas menu wasn't working on Mobile particularly. You really saved me.
Thanks.
Oh, I'm glad to read if I did!
This was hugely useful in helping me replace the pretty bad default menu options with a nice hamburger slide-in - thank you so much for the time and effort making this video.
Thanks buddy!! I was looking for this solution for over a month now. What a relief that I found your video.
Glad I could help!
Thank you very much! This is certainly very interesting and pretty darn cool. The part where you give your feedback on the advantages and the drawbacks is really interesting. I don't believe I have ever heard any one else giving that type of input. We'd really like some more videos man! Hook it up, bro!
Glad it was helpful, thanks for watching!
Super helpfull
appreciate the way you say menu - its great
….belated new year greetings sir 🙏🏾 😃 Just brilliant! Keep up the good work. Currently using Betheme, 🤔 with Elementor Pro & Blocksy 😂 “..busy man here” 😉 But I’ve always wondered how to customise your off canvas menu via Betheme 😫 “Guess I know now” Thanks Again ‘OB’ 🙏🏾👊🏾
This was brilliant, been looking for this tutorial for a while. Many thanks
Please keep helping us all the time, Thank you
beautiful tutorial
Straight forward and very useful.
Well done! You have a clear concise way of explaining things. I look forward to more videos from you.
Man this is exactly what I've been looking for! The tutorial is excellent.
Glad it helped!
"HamBARger icon" !!! Haaaa! Love it!
Top notch tutorial again, Thank you!
One thing that bothers me is that the nav menu isn't showing up in the page code as long as the pop up isn't activated.
So SEO wise a big no go.
Is there a workaround for this issue perhaps?
Only clumsy workaround that I can think about is to hide the original menu by using the Z index, but I'm not sure if Google might penaltize that cos it's hidden.
this is really awesome tutorial for us...
love your explanations and clear instructions, thank you for the wonderful vids!
Fantastic I love your teaching style. God bless you & Big thank you
One issue I can foresee with this method, of creating a custom menu is that adblock extensions could block it from opening. But overall a very creative and clean solution.
That's not a Browser popup! So no need to be afraid of ad blockers...
I'm so glad I came across your channel. Thank you so much for this. Great tutorial!
Glad to read it was helpful!
Thank you for the nice tutorial, keep up the great work!
This was super helpful - thank you so much for this. Even though Elementor has made a few changes to the UI since you filmed this, I was still able to get a fantastic looking menu on my DIY website.
Glad it was helpful!
Hi ! Clear & Simple, it was helpful, thanks ! Keep doing good tuts like this please :)
what a tutorial thank you so much God bless you
Glad it was helpful!
Using this in 2022. Thank you!
Hello, nice video as usual. Since we use a pop-up to display the main menu, does it bad for the SEO of our website? Thank you and take care 🙂
That's not a Browser popup, it's an element of DOM and as such it can only bring more value to the SEO.
Thank you so much, this was awesome, really helped me out a lot :)
Exactly what I was looking for. Thank you for this great tutorial. 👍
Glad it was helpful!
Excellent video. Very well explained and super useful. Thanks
Awesome! Great guide!
Thank you, works perfectly
Amazing work ✨💫
thank you, great value, subscribed.
I KNEW SOMEDAY I WOULD FIND YOU.
I'm soooo glad you did 😁
Very comprehensive tutorial! Thanks a lot!
You're very welcome!
@@OoohBoi Thank you so much! Good Luck!
great video and I love the explanations as you're working, great teaching method Oooh Boi
Thank you a lot for the video!! I really appreciate it :)
Just saved my day 💜
Great this is what i was looking for couple of days. thank you soo much for putting such great efforts many thanks.
Great Video and Loved
Glad you enjoyed it
very helpfull really looking for it and u made my thank you soo much with my heart
I'm so glad!
Thank you. It's a helpful tutorial.
Glad you think so!
Excellent tutorial, very clear - Thank you
Glad it was helpful!
Exactly what I was looking for! Thank you!!!
Glad I could help!
Super helpful!! Thanks so much
great tutorial. I appreciate your humor.
Excellent Tutorial! Really helpful. Thank you so much!!
As always great work. Like this short & sweet tech stuff. What's next?
Thanks! The next one? We'll see...👽
thanks so much for this video. you are an excellent teacher. : )
Спасибо бро! Крутые уроки у тебя! Единственный минус такого меню, на мой взгляд, на широких мониторах пользователю придется поворачивать голову вправо, а люди ленивы.
Great Tutorial man! You saved me a couple of hours !! I did click on the bell :D
Awesome, thank you!
Great stuff. Thanks
What’s the game type noise background?
It’s a good choice, not distracting but fills in the silence ( and good for Bluetooth)
I found it quite relaxing so would like to have it on in background while I’m working and not watching your vids!
Excelent tutorial bro!!! Thanx!!
Glad you liked it!
Great stuff. Im ur fan and utilising elementor with ur videos. Thank you for your works. 🙏
Awesome, thank you on the feedback!
This is so amazing! Thank you!
your channel is the bessssst
Great job. This is an awesome tutorial.
Thanks very much his was very helpful👍👍
Superb! Thank you!
ps: what's the background noise? a game?
It helped me a lot!
Hey mate :) Great vids, keep it up! May I ask if it is possible that the canvas/popup closes automatically once a line item is getting clicked in it? Or will the popup always have to get closed via chevron or other icon?
JUST AMAZING!
Again, an outstanding video with content that cannot be found anywhere else. Thanks. One question: Will popup blockers block an off canvas menu as the one from this example?
Thanks! Here you are not dealing with the popup window that is the browser object. This is so called modal window so no worries about blockers.
Awesome video bro 👌 Keep up the good work going 💪👍
Bien hecho! felicidadades! gracias
I learned in 3 videos from you more than in 20 other picks.
Something i would love to learn is how to use SVG animation within elementor.
Im working with After Effects and saw some vids available but nothing that would come close to any quality from your videos.
If you know a little about SVG animation, i would like to watch you explaining. Have a great day and keep it up, leaving a like and sub.
I'll give my best to include SVG animations to one of my tutorials!
Oh Boy...!! Excelente... Muchas Gracias!!!
You are TOP! Many thanks my friend!
Glad to help!
Another great tutorial. Thanks!
Thank you so much dude
Happy to help
@@OoohBoi 😘
Great as always.Thank You!
Thanks for watching!
So i am having some issues with linking popup on button. when ever i click on that wrench and try to type name of my popup whole box disappear. any reason why i am having this issue?
Very well done 👍 Thanks so much!
Really nice tutorials and love the way you teach.
One thing I would sincerely request you to do is if you can show us how to make an off-canvas menu WITHOUT using the Elementor popups. I love Elementor and have Pro however popups are blocked by adblocks. The number of times I've seen an Elementor site without a working menu is eyewatering. Yes, I along with millions of others use adblockers religiously...why, is another conversation.
Anyone in the website building business knows this, however, a lot of self-builders use Elementor and are NOT aware of this huge negative for using popups, especially for a menu. I would therefore humbly request for a tutorial on how to make a nice off-canvas menu where the popup feature is not the core function. Thank you in advance
EDIT: plugin addons should not be a solution because there are a whole host of other issues around using those, again a different conversation, but the recent issue with a certain well-known plugin with a vulnerability allowing site takeover by hackers, is just one reason.
This is not the Browser popup mate, it has nothing to do with the popup blocker!!!
@@OoohBoi ok, but I beg to differ. If you switch on an adblocker (I've tried a few particularly ublock origin on chrome ), then see how the menu's made using elementors popup method, are blocked. Turn the adblock off, and menu works.
Great video! Thank you for sharing.
Thanks for watching!
Amazing. Thank you!!!
You're so welcome!
Hi, it's great ... I hope I applied it well ...
I hope so too!
That was great ❤❤
The UI has changed at some point. I don't see the "popup settings" title at the top of the settings area. The Layout Settings just looks like any other template settings and there is no 'overlay' or 'close button'. To see these settings, you need to click on the settings sprocket down in the left corner, now.
OK... but wasn't it always down in the left corner? I didn't use it for a long time, maybe I'm wrong.
Very nice!! The only issue maybe rise is the fact that pop up method is not quite effective method to use and maybe affect seo and Google ranking crawlers, negatively. As I read in internet blogs these days.
Oh cmon, do you really think that Google algorithms are that picky? Everyone is scared of what the ranking crawlers will say and then what Google will think about my website and shit. It sounds like an inquisition story. Content is the king. It was, it is and it'll always be. The traffic and backlinks make the other half. Period. Everything else is bullshit.
Thank you so much, you are incredible!
You're very welcome!
Hi There, Great Video! I'm using a single-page layout and want the canvas / pop-up to close automatically when a line item is selected. Looking forward to your feedback, Thanks in advance
awesome vid thanks!!
Thanks so much for your video. Really helped with mobile menu I’ve been struggling with. But the problem now is that. The close bottom not working. When the menu popup/menu opens. It doesn’t close when I click the X. Please help.
Exactly what I needed x
Awesome, thanks for watching!
Great tutorial!!! Please keep posting more videos like this, you explain things very clear and easy. =)
Thanks, buddy, I'll do that. It might even happen today...
The submenu indicator is too near with the text. How to make the indicator available at the far right
Thank you. Great tutorial :)