Create Better Mobile Menus With Elementor Popups
ฝัง
- เผยแพร่เมื่อ 2 มิ.ย. 2024
- 🟣 ////// Learn Powerful SEO for WordPress
lytboxacademy.com/seo-for-wor...
===================================
🟢 ////// Master Elementor with Better Designs
lytboxacademy.com/design-with...
===================================
🔵 ////// Learn to Build and Sell WordPress Maintenance & Care Plans
lytboxacademy.com/maintenance...
===================================
🏆 ////// Become a Lytbox Pro Member
lytboxacademy.com/the-academy/
===================================
🌟 ////// Personal 1-On-1 Elementor Training
tidycal.com/lytbox/elementor-...
===================================
////// The Hosting I use:
👉 Hostinger (Best for beginners & smaller budgets)
www.hostg.xyz/SHDX8
👉 Cloudways (Best for scaling web businesses)
www.cloudways.com/en/?id=485185
👉 RunCloud (Best for professionals)
runcloud.io/
////// WordPress Tools I use:
👉 Bricks Builder
bricksbuilder.io/
👉 Elementor
be.elementor.com/visit/?bta=4...
👉 Breakdance
breakdance.com/ref/390/
👉 Crocoblock
crocoblock.com/?ref=2021
👉 SEOPress Pro
www.seopress.org/?ref=854
👉 Perfmatters
perfmatters.io/?ref=1230
👉 WP Umbrella
wp-umbrella.com/?fpr=jeffrey83
👉 InstaWP
instawp.com/?via=jeffrey
Thank you for supporting my channel 🙏 - Jeffrey @ Lytbox
#elementormenus #elementorpopups elementor tutorial - แนวปฏิบัติและการใช้ชีวิต
![โอ้มายก๊อด! ไม่ถึงชั่วโมงหมดเป็นแสน 😅 [cc] แดนแพทตี้ SS2 | EP.42 |](http://i.ytimg.com/vi/OH2ShXfO6tA/mqdefault.jpg)
👉👉 Important disclaimer - This method for adding menus is intended for mobile use only. Please do not use for desktop menus as it can have a negative effect on SEO as the popup is not visible in the code for Google to find until the popup is triggered. As long as you have a regular desktop menu though, no SEO harm will be done using this method for mobile menus. I have more videos focused on SEO with Elementor in the works!
I haven't seen the video yet (I always look at a few comments first). I thought that the latest Google algorithm focussed on mobile more so than desktop? I could be completely wrong but my belief is that by not having a burger menu and instead having a button / clickable graphic would have a very negative effect on your SEO.
Please do correct me if I am wrong. Great work that you do, thank you.
What about having a popup menu for mobile and tablet, would that have an effect on SEO?
@@Ititchiwhatititchi Yes, it does as it is triggered by a button which is not recongnised as a menu. The default menu hamburger symbol is recongnised as a menu.
@@Ititchiwhatititchi Yes. I would like to have a pop-up menu but, having looked into SEO impact, I am not.
How do you even find out these little details?
Thank you! I've been trying to get my mobile menu to overlay without forcing me to show it full width, this is great!
Thanks, man!
...
I 've looked for this tutorial for a lot of time.
While I use Elementor for almost three years.
Now I know what's the popup for mobile.
You've been really helpful.
Amazing video. Thanks so much mate. Would you know how if I can add buttons and social media icons to the bottom of the menu? I tried adding those but for different size displays, it appears at a different height. Is there a way to fixate it to the bottom so it appears at the same exact location for every size mobile display? It would be much appreciated.
This is a much better solution to the basic mobile menu. Thanks so much for sharing!!!
Thanks for the clear and detail explanation. Solved a big issue with Elementor.
Thanks! 🙏
Thank you very much I will test. But I have a small question: I have already seen this style of mobile menu which is really better than what elementor offers. I would still like to keep an animation on the burger menu icon. For example if on click on it, there is a fluid animation which transitions to the cross to close the menu.
This is really clean work, dude. Thank you so much for this! Helped me come up with a better solution for a client that wanted a unique navigation bar that just didn't translate well on mobile. You have a new subscriber! :D
Wow. What a Great Tutorial man. Thank you so much. Never thought that one can do so much with Elementor
Hey man, thanks for this! Really helpful. Quick question, what font are you using on that website? It looks really good.
Great video, this helped me to build a fullscreen menu.
Thanks Jeff
Awesome video!!! Thanks for all of this, really helped me out. Watched it once when searching and second when editing. Thanks man!
So good to hear!
Nice tutorial. I have plenty of Elementor knowledge, yet, I learned some new things here. Thanks a lot!
This is the best video to understand and build a sidebar menu! Thank you.
How did you make the content move when the menu pops up? 14:48
Hello! How can I add sub sub category? I have main categorie Sport, then Leggins and then Blue leggins. Thank you for your help!
I truly enjoyed your delivery. Easy to understand content. Thanks alot
Hi jeffrey, great video. I did it exactly as you described in the video for one of our pages. After I switched the menu to this one here, I recognized that we don't hit the Core web vitals anymore based on some layout shifts when loading the page. Not sure how to solve that issue and maybe you have an idea. I can send you he url if it is somehow possible for you to check
Thank you for this tutorial. Just was I was looking for.
Dope video! Thanks a lot for the info.
Thank you so much! I was trying to do that for a couple of days now and thanks to you now i finally got it, thank youuuu ;)
Thanks! I’m so glad it helped 🙏
Hello,
I think we can add a trigger on only show in mobile, that way we can just only have one header. Also can we add some pictures of the product in the mobile menue like mega menu?
Great tutorial! Amazing approach, thank you!
Thanks, man. Nice to search and find exactly what direction I needed in the first go!
So glad to hear this! I love it when that happens
Hi, Thank you so much for this tutorial. It has given me the flexibility for the menu that I was looking for without using any extra plugins. I now encounter one problem in the accesibility in google page speed and it is showing me that the ID in aria has been duplicate so it advice me to change it but I don´t know how to fix it . Have you heard about this problem before? Thanks 😊😊
Excellent friend, you have given me a new inspiration! 💪
This is great, thank you! I can't seem to be able to right align the menu though. Works in the editor but not IRL
I have been using this for a while and I also noticed, that not using the default mobile menu widget gives you about 10% boost in performance on Google Page Speed. But there might be an issue with accessibility and crawling the site as the popup is not part of the DOM until it shows up. Not really sure how to fix the accessibility part, but for indexing it should be OK having all the links in the footer. It also often breaks with caching so always test after enabling cache.
As long as there's a menu in the desktop version indexing will be fine, the nav is still in the markup to crawl. The only indexing issue would come from having both the desktop and mobile in a popup menu. I'll be looking more into the accessibility
Thank you. It was a huge help to my web designing.
Really helpful video bro, thank u so much! I would like to ask for a little bit more of help.
I did the mobile menu and it works good, I'm using it with anchors links 'cause the is an one page and when clicking on any of the anchors and later close the mobile menu it takes the user back to top of the page.
Do you have any idea how to avoid this? thanks forehand!
Would haven't ever thought about using popups as mobile menus, it looks great. Thanks!
Glad it helped. Cheers!
I'm using it but facing issues when ever any linked clicked on website the popup menu arrives and that's making it wired what should I do to make it only click with icon on header ??
It was just soooooooo helpful! Thank you Jeffrey!
Hi ! Great video, stupid question, what font did you used and size for the menu you did?
Thanks for the amazing video Jeffrey. I followed all the steps but when I click the hamburger menu on my phone the pop-up is not showing. When I make my desktop browser small it does show up. Any fix for this?
VOCE É UM SALVADOR!!!!! VALEU IRMAO
OMG this is awsome I was facing defiulties when I make mobile menu but now its so easy for me thank you for such amazing tip. :)
Many Thanks 🙏💜
Thank you so much! really! I made a website with this nav menu, and looks awesome.
Hace tiempo que quiero saber como hacer para esconder la url que aparece al hacer mouse over en el icono que abre el popup.. sabes como se puede lograr? Es que es muy molesto para mi ver una url larguisima al poner el mouse sobre el icono. Excelente video por cierto. Muchas gracias! 😊
This tutorial is exactly what i needed !!! I'm so thankfull !
Awesome!
Thanks for the tip. This is very useful!
thank you so much! that was so helpful!
Thank you for the tutorial! When I hit "back" on my phone, it opens a previous page WITH the popup still open. Any way to prevent it from happening? TIA
Took me some time to figure out the menu section template itself,, however putting everything in the place was very easy due to this video. Thank you again!!!
Any tutorial you can recommend for menu template?
When creating the Template, in the Section you hand-coded the menu... If you were to place in the Menu widget there, is there a way to have it automatically open when the popup loads? Without doing that, currently one has to click the hamburger button to trigger the popup, and then within the menu, they have to click the new hamburger button to expand the entire menu. Can you have it expanded by default?
Amazing tutorial, simple but with multiple design opportunities, thanks a lot!
Thanks 🙏
Thank you for your perfect contents!
I have a question. why did you first create your menu design into a section template and not in pop up?
Thanks and great question. I designed in a section template to have a better canvas with the full page view. But to be honest, in retrospect, I see it could have been productive to build the menu directly in the popup as well.
it helped a lot and it workes ! thanks man
Gooood thank you so much!!!!. Greetings from Barcelona!
Great video! It worked, but it seems on my side the close button isnt working, do you know about this error? I'm using the latest version of Elementor
Thanks a lot for this video! 👍👏
Hi Jeffrey, thank you very much for your tutorial, you look it very easy and functional. Greetings from Bogotá, Colombia!
YOU ARE THE MAN! Thanks a bunch!!!
Fantastic and thorough tutorial, thank you for that! What I seem to miss is - how do I have the menu close when I click on a jump link? I have some of my menu links jump to different sections on the same page. When I click on those, the menu does not disappear, but I close it manually, then I see that the jump to the section has been made.
Best tutorial on menus for elementor I've found. 👌
dude! thank you so much! great video keep up the good work. subbed!!
Thanks for the sub! Much appreciated!
super helpful! THanks you. Really easy to work though alongside the video
Thank you brother for this content, I tried it on my work it looks fantastic and great for user experience.
I’m so glad to hear! Big thanks! 🙏
Love You 😍 thanks a lot
I used this video every single project I do, great stuff!
That’s awesome! Really cool to hear 😎
Hi, love your vids! I Have a different elementor that is showing me a different interface and I can't change the pop-up X - "close" icon size or color can you please help me?
Great video thanks. Is there a solution to make the menu pop back in after the menu item is clicked?
This is very nice. but has a big issue here, the links in the menu you have created are not dynamic. Meaning, when you update the menu under Appearance > Menus, it won't update this menu, since it is created with "icon list", which has no dynamic source. This especially wrong when you let your customer manage his own site.
Hey Shir, it all depends on the situation, every site is different. Some I would use a menu widget so it's dynamic and some I would use something more custom that a menu widget can't do. Good point though on setting up for the client and I agree, I would use a menu widget if it's being turned over to the client to manage themselves. Though I hope most of us manage the sites we build for our clients with Maintenance Plans and make that extra MRR 😉
Hi Jeffrey, new subscriber here. I like the fonts you use in your menu. What fonts did you use? Thanks in advance!
...the most surreal experience right now! I just punched into TH-cam some keywords and your video popped up. You may or may not recall, but I bought your Dell XPS from you a few years back. In fact, I am typing on it right now. I am correct, right? Haha!
Jeffrey, you are the best. Best regards from Brazil
Love this design! Thank you so much for this helpful tip - have implemented into our design.
I do unfortunately have a problem it's strangely only showing up on my home page but not on the rest of my pages! Any tips on how to troubleshoot this?
Thank you
Aw thanks! And yes, sounds like an issue with Display Conditions. Check to make sure no other headers templates have conditions and that your header with this pop up has the condition for ‘Entire Site’
Great video. Exactly what i wanted.
Thanks! 🙏
Thank you !
Hey man thank you so much for this I was wondering how I could create a better user experience. It looks a lot more smoother and better and much more professional. Thank you for this. I was stuck on creating a hamburger drop down for hours because I also had a colour changing header and so the padding got messed up because it would not show the hamburger drop down menu because the header sections would go behind the page section and wouldn't show up and after 2 hours of trying to find a fix I come across this life saver of a video! Learned a valuable lesson here as well, education is key and learning from people who have already done it instead of trying to find another way by reinventing the wheel!! MAJOR KEY! Very good video! Keep up the good content!!
I'm so glad to hear you found a good solution. A mobile menu plays a big part of the UI and user experience.
Hi there!! Wonderful tutorial. However, I can't get the menu to appear when I switched to mobile view... On the desktop, it appears perfectly (I just switch for the test, I want it to be my default menu). Could you have some ideas about this issue, please? Thank you, keep going!
Change z index
Worked for me
Thank You for Your SUPER contents!!!
Many thanks! 🙏
manny manny thanks you bro,,,
Thanks for this great help❤️
🙏
It would be extremely helpful to show how you created your template. For example, the horizontal lines under the nav links. They look great.
he used the elementor "icon list" widget as far as i can tell. The lines are the dividers you find in the widget settings.
Guy literally made a video for people to learn and skipped a giant step. I’d love to say “thanks for your help,” but now onto the next video that realizes not everybody navigates elementor easily - which is why we’re watching this video.
@@patricksheridan2829 I agree that it was very necessary to show how he created the template. He did hover over the section and it did turn out to be an icon list, but I would've liked to see how he set up his own template.
Es muy sencillo de crear ese menú muchachos, cosas básicas de Elementor 😂
Using Iron list for the menu items has the drawback of not being linked to your WordPress menu settings. I can’t ask a client to use element or template editor every time they wanna add a menu item.
This video really helped, thanks. Was wondering if you could help with a many that has sub menus. How would you add that to the menu you created?
It depends how many items are in the menu. The main thing is making it easy for the end user. Usually the menu widget with the dropdown is good enough but if there are lots of submenu items I would rethink how to structure them. Here's a tip, I would build the mobile menu and test every step on my phone and adjust layouts and spacing based how it comes out on my phone. This will improve usability.
@@LytboxStudio thanks man. I found a way to add drop-down using tabs. Works great
great, that’s exactly what I wanted to do!
Hey, Jeffrey! I just start designing on elementor recently but I'm kinda overwhelming I don't know when to start and what should i learn first, I find your design approach with elementor the easiest and the best out there so can you guide me a little bit on how can I structure my web design process?
Thanks Emir. I think a good start is to join our Facebook community ‘Building Businesses with Elementor’. Here’s a link to join and look forward to connecting with you there - facebook.com/groups/buildwithelementor/
@@LytboxStudio I request to join the groups a few weeks ago but I didn't get accepted yet?
@@emirbasha1410 I’ll take a look first thing in the morning and make sure you’re in.
This is an epic tutorial 😍
The Wizard is here 😉 I have been looking to for long time. I wonder if you have a tutorial on how to use Elementor fully like covering everything.
Thank you for your video, it was soooo useful for me 😊
Thanks! 🙏
Supper Cool Jeffrey! 👍👍 took me a couple of tries, as sometimes I like to fiddle as I work. 😂 but I feel it's way better than the hamburger in Elementor. Keep the tut comming.
I also like to fiddle, that's how we learn! Glad it helped!
Thank so much for the tip!. I have a question, is it a good practice to add the menu in the footer when using a menu like this on the desktop to fix the SEO problem?. Greetings from México! 🙌🏼
Thanks Diego and great question. As long as you have your menu on the desktop version your SEO will be fine with no harm.
@@LytboxStudio Oh! great, that's great, especially when you get the opportunity to do something a little more creative. Thanks for your tips!
great job! you now have a follower from Brazil.
Alright! Much ❤️ for Brazil! 🇧🇷
Great video, thank you !!!! One question: how do i configure to close the pop up after clicking in one of the menu buttons?!
Hey Bruno! That's a great question. I'm currently creating another mobile menu tut around the design of menus. I'll have a look and see if I can find a solution. Cheers!
Great question. I've created a menu from a pop up for a one pager..... I've linked the menu titles to anchors throughout the page. Its very annoying that once I click on the menu title, I then need to close the menu to view where it landed on the page. Any help would be appreciated Jeff! Love the content!
@@malcolmgoodwin690 big thanks! I’ll need to play with this one and find a solution. I’ll get one asap.
Great video, great explanation, thank you!
Thank you Jenny I appreciate that
Amazing tutorial
Hi Lytbox,
Really Nice video! It helped me a lot! But is it also possible to have a drop down in de Pop up mobile menu?
BR,
Hidde
Great video! Thanks!
Regarding popup menus on desktop and SEO... couldn't you just "arrange/hide" a WP menu under the "image menu popup" with Z index and the you'll get the best of two worlds..?
Google caught on to using these kind of tricks, best to play it safe 😉
Thank you so much!
thanks mann, so helpful tutorial
Great video! How did you import the svg-file? I don't find a way to do that with Elementor pro.
Thanks! Go to the Elementor settings in the dashboard > Advanced tab > turn on ‘Enable Unfiltered File Uploads’
I do this and can additionally add the Safe SVG plugin and it removed all the SVG issues
@@LytboxStudio Thank you!
Thanks, Today i have learned something new.
That’s great! Thanks!
Hello and thanks for this tutorial!
I saw that the menu can be dragged left-right, how can I make the menu non-draggable?
And, with this, can I make everything under the opened popup non-draggable as well?
Try to add max-width: 100% to the entire page css
@LytboxStudio Can you explain how to implement slidein menu for hiearchical menus?
Man this is top notch stuff
thanks very useful tutorial , i wanted to knwo how i can give a different anumation and settings on mobile menu than desktop ,, from your video i get that i can make a different menu for mobile
Is there anything wrong with not using the menu widget to create menus? instead just aligning text up with links?
Thanks for the new approach.
I appreciate that thanks 🙏
thanks man, i'm brazilian and your explanation is very clear and objective.
Glad to hear that! Thanks!
Nossa, eu adorei tbm!!! Amo a didática dele!
Note: For people who are experiencing problems with the close button in a pop-up menu opened on mobile not working, set the entrance animation only in the desktop version and delete all entrance animations in other platform settings to make it work. (Because the animation set in the desktop is used by default in all responsive versions, even if the animation is deleted from mobile, tablet, etc., the animation set in the desktop version is displayed.)
Hi Jeffrey - thanks for the tutorial! I am also struggling with adding a sub menu. Do you have a workaround for this maybe? Thanks fpr your great work!
Solved this with the nested accordion widget - in case anyone is having the same problem. : )