Create Better Mobile Menus With Elementor Popups
HTML-код
- Опубликовано: 14 июн 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 
Хобби
👉👉 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?
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.
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 for the clear and detail explanation. Solved a big issue with Elementor.
Thanks! 🙏
I truly enjoyed your delivery. Easy to understand content. Thanks alot
This is a much better solution to the basic mobile menu. Thanks so much for sharing!!!
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!
Great tutorial! Amazing approach, thank you!
Nice tutorial. I have plenty of Elementor knowledge, yet, I learned some new things here. Thanks a lot!
Thank you for this tutorial. Just was I was looking for.
It was just soooooooo helpful! Thank you Jeffrey!
Wow. What a Great Tutorial man. Thank you so much. Never thought that one can do so much with Elementor
Excellent friend, you have given me a new inspiration! 💪
Thank you. It was a huge help to my web designing.
Hi Jeffrey, thank you very much for your tutorial, you look it very easy and functional. Greetings from Bogotá, Colombia!
Thank you so much, brother. You solved a problem I was having here with your tip. Thank you very much.
This tutorial is exactly what i needed !!! I'm so thankfull !
Awesome!
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 🙏
Dope video! Thanks a lot for the info.
Hey man, thanks for this! Really helpful. Quick question, what font are you using on that website? It looks really good.
Amazing tutorial, simple but with multiple design opportunities, thanks a lot!
Thanks 🙏
Gooood thank you so much!!!!. Greetings from Barcelona!
thank you so much! that was so 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.
Thank you so much! really! I made a website with this nav menu, and looks awesome.
it helped a lot and it workes ! thanks man
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
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
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 🙏💜
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
Jeffrey, you are the best. Best regards from Brazil
Thanks for the tip. This is very useful!
YOU ARE THE MAN! Thanks a bunch!!!
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.
Thanks a lot for this video! 👍👏
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 ??
super helpful! THanks you. Really easy to work though alongside the video
VOCE É UM SALVADOR!!!!! VALEU IRMAO
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! 🙏
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 😊😊
Thank you !
Hello! How can I add sub sub category? I have main categorie Sport, then Leggins and then Blue leggins. Thank you for your help!
Hi ! Great video, stupid question, what font did you used and size for the menu you did?
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!
I used this video every single project I do, great stuff!
That’s awesome! Really cool to hear 😎
dude! thank you so much! great video keep up the good work. subbed!!
Thanks for the sub! Much appreciated!
Best tutorial on menus for elementor I've found. 👌
Love You 😍 thanks a lot
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?
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
That's awesome! Thanks for the sub and welcome to the Lytbox community!
manny manny thanks you bro,,,
Thank You for Your SUPER contents!!!
Many thanks! 🙏
great, that’s exactly what I wanted to do!
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
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?
Thanks for this great help❤️
🙏
Great video. Exactly what i wanted.
Thanks! 🙏
Amazing tutorial
Hi Jeffrey, new subscriber here. I like the fonts you use in your menu. What fonts did you use? Thanks in advance!
Thank you for your video, it was soooo useful for me 😊
Thanks! 🙏
Great video, great explanation, thank you!
Thank you Jenny I appreciate that
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 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
Thank you so much!
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?
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.
it is possible to create another popup triggered by an element (like an elemento of the menu) of the first one?
This is an epic tutorial 😍
great job! you now have a follower from Brazil.
Alright! Much ❤️ for Brazil! 🇧🇷
@LytboxStudio Can you explain how to implement slidein menu for hiearchical menus?
Man this is top notch stuff
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.
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! 😊
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.
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
thanks mann, so helpful tutorial
Thanks for the new approach.
I appreciate that thanks 🙏
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’
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!
Thanks, Today i have learned something new.
That’s great! Thanks!
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?
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?
question: what to do if I use anchor, for one page scroll. Would be this the right version?
very helpful
Thank you.
Wow man you are a Elementor Rockstar its awesome thansk so much
Great video thanks. Is there a solution to make the menu pop back in after the menu item is clicked?
...the most surreal experience right now! I just punched into RUclips 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!
Great video, this helped me to build a fullscreen menu.
Thanks Jeff
Awesome thanks!
Hi everyone, is there anyone who could help me out here? I'm using this in my projects and i just noticed something that i don't how to get around it. In a single page project with a navigation made with anchors, when you select one of the items in the menu, the popup doesn't close. Is there any way around this?
Any tutorial you can recommend for menu template
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.
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.)
Loved it
Thanks!
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
On Iphone, Chrome, the popup glitches a bit for me. It flashes, and then opens. Do you know this bug and know of a way to fix it?
Basically this is a: Let's draw Mona Lisa, grab a piece of canva, well I already I done some of the work so we get this thing flow, next step, you now have to put it in a frame. Amazing Video about how to draw
Is there anything wrong with not using the menu widget to create menus? instead just aligning text up with links?
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.
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