GSAP FULL-SCREEN MENU (OFF-CANVAS) - Elementor Wordpress Tutorial Flex Container
Vložit
- čas přidán 30. 07. 2024
- CODE: ohwow.club/how-to-build-a-ful...
TEMPLATE (Icon list widget): ohwow.club/template/
The template for the WP Menu widget will be released in the following days ;)
Timestamps:
00:00 Intro
01:40 Demo
23:23 Outro
Thank you for watching!
🟠 TRY ELEMENTOR
be.elementor.com/visit/?bta=2...
🟠 SUBSCRIBE TO THE NEWSLETTER:
newsletter.studioegli.com/
🟠 TRY HOSTINGER
hostinger.com?REFERRALCODE=1ANDREEA61
🟠 WORK WITH ME
www.studioegli.com/
🟠 YOU CAN FIND ME HERE TOO
TWITTER - @AndreeaEgli
LINKEDIN - / egliandrea
INSTAGRAM - / egliandrea.studios
🟠 FOR BUSINESS ENQUIRIES
contact@studioegli.com
Disclaimer - Some links in my videos' description box may be affiliate links, meaning I will make a commission on purchases you make through my link. This is at no extra cost to you to use my links/codes, it's just one more way to support me and my channel! :)
#elementortutorial #elementorpagebuilder #elementortipsandtricks
Awesome! Great Tut and it works more than fine! I tried to study how to launch the "closing menu animation" also when you click on the menu voices... but know no good result🤣! But I changed the toggle button in "MENU" when closed and "CLOSE" when the menu is open! LOL
I am also a big fan!
I’m your fan! ❤
superrrrrrrrrr!!!!
🥳
I'm your fan too! ☝️☺️👏👏👏👏🥰
🥳 whoop!
Me too!!!
@@Daniel.M.Trapanese
did you try to give thi sdeefault letter spacing like below as it could be css override issue by elementor
.elementor-icon-list-item:{letter-spacing:2px !important;}
Great video!! Just a quick one: is it just me or the menu doesn't seem to work on Safari? It stays inside the parent container and doesn't fill up the screen. I've added -webkit-clip-path to the overlay and webkitClipPath to the JS too, but it still won’t function. Any ideas? Thank you 😁
Hi Andrea! awesome tutorial
Yes, you should be able to use Lottie but of course, you need to make some code adjustments
I love you ❤
😊
Hi Andrea, cool tutorial. Everything work fine but I have a "elementor red" background color on my burger icon when i'm hovering it and when it's active. Do you know how can I change the color and the background color of the burger icon ? I saw you said to replace the .elementor-icon-list-text with .elementor-icon-list-item everywhere in the GSAP/JS code but it didn't worked for me. I'm using Hello Elementor theme. Thanks !
Yup, that happened to me too 😉 go to site settings > typography > link > hover and turn the color down to transparent (this will affect all your links tho) OR add this to the code: .burger:hover { background: none !important} . Add this to .burger:focus too { background: none !important} . Hope this helps
@@andreaegli Thanks it worked !
@@TheBlopog
Hey Eli,
thank you for sharing this tutorials with us.
I have purchased the template for this menu, but the menu does not open up, when I click the toggle button.
I have just inserted the JSON file and did not changed anything. Hope you can help here :-)
Greets!
Hey! You’re welcome! Thanks for the purchase, can you send me an email so I can better follow up on this? Also, please include the link to your project where you have inserted the menu 😉 in the meantime, do you have set a z-index on the container you have inserted it?
@@andreaegli Done :-) Thank you for the fast response!
Fantastic! Curious if you sell your amazing creations? It would be so great to have a purchase link to each of your ‘products’ in every video description
Thank you🤓 I do actually, there's a link in the description of this video for that: ohwow.club/template/ More templates will be added in the near future
Hey Andrea, Where do you get all your codes from.donyou code it or source it from some website? One last question please show how to optimise some of your designs for mobile responsiveness.
Love your work and keep uploading good videos.
Hey! From all over the place and add my own twist to it, most of the times I need to code some extra stuff to make it work in elementor. Sometimes I do code from scratch. I wish I had more time for that but in general mobile responsiveness is all about stacking elements so, I don’t think is that hard. I created templates (more will added soon) of my most popular features/effects/ designs which are mobile responsive. Have a look on oh wow . com under templates/shop
Thank you so much for your support 😉
Hi again! :D I've already didcthe entire menu and it looks so cool, but I have a big last question: when menu is active, and by mistake scroll it, the X button and the logo scrolls up... I searched a lot a way to keep sticky just when is active, but I can't get it!
Hey Nicolas! Nice! Ok, that one is easy: set the container to fixed and the vertical orientation to %. If need be, set a z-index on the container too. I would go as high as 9999 just to make sure that it is always on top of everything you have on the page ;) hope this helps!
Hi,why is there no close menu button? Is it not in the code?
What do you mean? There is one, you probably skipped the video. Everything you need is there and if you can't make it work, you can always purchase the template
Thanks, Andrea! It looks great. Now I'm trying to make it but i have some issue. When I try to add on the icon list those internal URL, when I type 3d and the other.. nothing appear and I don't know why :( Does anybody know why?
Hey! You are very welcome!!! Oh, that’s just how one of my internal links is called 3d carousel….you need to type in your own link/page name that you want to link to 😉 hope this helps
@@andreaegli Oh, now I understand 😁 thank you 🙏
@@jaklinalevi You are very welcome
oh damn
everytime you upload smth i want to add it to my website 😂😂, i will never finish it
😂 I feel you, I do this to myself as well! I think this menu is going up on the new studio website tho
Hey Andrea! For some reason, the burger icon gets a blue background when i hover over it and makes it impossible to open and close the menu. How can i fix this?
Also this affected all of my other icon lists as none of them are visible now and only reappear once the menu is opened.
What theme are you using? I’m asking this because the hover effect happens with the hello theme but there is a fix for it, let me know what’s your theme. As for the icon list not being visible, let me see if there’s a solutions for it. You could use the WP Menu widget in the meantime 😉
Ok, replace the .elementor-icon-list-text with .elementor-icon-list-item everywhere in the GSAP/JS code.
@@andreaegli Im using the astra theme and the blue bg seems to appear only on mobile. Plus, i changed the text to item in the code but it didnt have any effect on the not visible item lists.
Great, but I hope you don't forget the motion page🙂
Thanks! I might make a few more motion page tutorials but doing things without plugins is priority on this channel. Motion page is too expensive for many ;) what would you like to see made with motion? Give me some ideas...
@@andreaegli I will suggest some to you in the future. Thank you for these interesting videos
is this elementor pro ?
Yes, you could do this with elementor free but you need a code snippets plugin
It does not move / interact anymore because the value 8 is the same entered in the css code.
12:12
.elementor-icon-list-item:hover {
letter-spacing: 8px;
transition: all 0.5s ease;
}
it wont move because it already is.
True but if you lower one of the values, either in the css code or elementor, the effect does not work
@@andreaegli maybe it is because elementor is fidling with the option all of a sudden thus maybe by adding !important in the css code ? or by doing eveything by code like this
.elementor-icon-list-item {
letter-spacing: 8px;
transition: letter-spacing 0.5s ease;
}
.elementor-icon-list-item:hover {
letter-spacing: 15px;
}
best to give it a class or an ID to target only the menu : )
@@Yannick.D yup, will try a few things 😉
@@andreaegli got it to work
.elementor-icon-list-item {
user-select: none;
cursor: pointer;
letter-spacing: 8px;
transition: letter-spacing 0.5s ease;
}
.elementor-icon-list-item:hover {
letter-spacing: 15px;
}
If you have created a tutorial, make it easy for everyone to follow. Don't skip any of the conversion steps. Just because you understand them doesn't mean everyone else does. Don't skip explaining the top and bottom rearrangements when adding containers. Regardless of your assumptions about our understanding, be sure to explain everything carefully. In the tutorial from the link below, you will find that each step is explained carefully and not skipped at all. That's the kind of detail we need. Now, how do we understand the chain if we often skip over the detailed steps? If you want students to learn effectively, don't be superficial. Explain everything carefully.
Check out the link below. For others, learn how to explain in detail step by step so that people can understand. Study it.
czcams.com/video/M6NbkNeOQ18/video.htmlsi=yvd9xvg6UesLa0Bz
Thanks for your feedback! Let me break it down: Firstly, the video you referenced is 3-hour-long. Of course, it goes into detail step by step. Secondly, most folks watching aren't looking to become students-they just want a quick tip or a cool trick. If I wanted to teach a full course, I'd make one, simple as that. Thirdly, I'm not starting from square one here. If the video doesn't cover what you need, it's cool to move on. Fourthly, everyone's got their own style, but that doesn't mean you can knock a creator's hard work just because YOU are not getting what you want. Putting together content, whether it's five minutes or twenty-five, takes serious effort AND I don't cater to everyone. Having said that, we're here for you whenever you need us!
I think that this kind of content is a pill as well as an exercise in style to be customised through study. Certainly this content is not aimed at those who have no basic knowledge of either WordPress or Elementor and to make a tutorial explaining the basics of html, css and javascript is a minimum of 10 lessons' work, if that. I have been using Elementor for about 6 years now and many things are still a mystery but I study what I need from time to time. I have been following Andrea for a long time and I have asked her many things that were not clear to me, she has been willing to explain them to me. Not for everyone making CZcams video tutorials is the main job, it often takes a lot of time away from other things. Let's not forget that everything taught here is free.
And I wish I was your OnlyFan