GSAP FULL-SCREEN MENU (OFF-CANVAS) - Elementor Wordpress Tutorial Flex Container

Рет қаралды 4,403

Күн бұрын

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

Пікірлер: 57

@officialmusicbg1 2 ай бұрын

I’m your fan! ❤

@dobrystudio 2 ай бұрын

I am also a big fan!

@teuccio73 2 ай бұрын

superrrrrrrrrr!!!!

@andreaegli 2 ай бұрын

🥳

@kamessytta 2 ай бұрын

I'm your fan too! ☝️☺️👏👏👏👏🥰

@andreaegli 2 ай бұрын

🥳 whoop!

@Daniel.M.Trapanese 2 ай бұрын

Me too!!!

@andreaegli 2 ай бұрын

@@Daniel.M.Trapanese

@capitannikolai 2 ай бұрын

Hi Andrea! awesome tutorial

@andreaegli 2 ай бұрын

Yes, you should be able to use Lottie but of course, you need to make some code adjustments

@ar_dani_ 2 ай бұрын

oh damn everytime you upload smth i want to add it to my website 😂😂, i will never finish it

@andreaegli 2 ай бұрын

😂 I feel you, I do this to myself as well! I think this menu is going up on the new studio website tho

@evangretz 2 ай бұрын

I love you ❤

@andreaegli 2 ай бұрын

😊

@thewebstylist Ай бұрын

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

@andreaegli Ай бұрын

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

@user-hl5vm5wo7m 2 ай бұрын

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.

@andreaegli 2 ай бұрын

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 😉

@capitannikolai Ай бұрын

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!

@andreaegli Ай бұрын

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!

@grapemovement9415 5 күн бұрын

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!

@andreaegli 5 күн бұрын

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?

@grapemovement9415 4 күн бұрын

@@andreaegli Done :-) Thank you for the fast response!

@TheBlopog 2 ай бұрын

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 !

@andreaegli 2 ай бұрын

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

@TheBlopog 2 ай бұрын

@@andreaegli Thanks it worked !

@andreaegli 2 ай бұрын

@@TheBlopog

@TheGoncaloSa Ай бұрын

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 😁

@ib4112 Ай бұрын

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;}

@lidamashhadireza 12 күн бұрын

Hi,why is there no close menu button? Is it not in the code?

@andreaegli 12 күн бұрын

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

@waelajam9627 2 ай бұрын

Great, but I hope you don't forget the motion page🙂

@andreaegli 2 ай бұрын

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...

@waelajam9627 2 ай бұрын

@@andreaegli I will suggest some to you in the future. Thank you for these interesting videos

@Shorticulous 2 ай бұрын

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?

@Shorticulous 2 ай бұрын

Also this affected all of my other icon lists as none of them are visible now and only reappear once the menu is opened.

@andreaegli 2 ай бұрын

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 😉

@andreaegli 2 ай бұрын

Ok, replace the .elementor-icon-list-text with .elementor-icon-list-item everywhere in the GSAP/JS code.

@Shorticulous 2 ай бұрын

@@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.

@jaklinalevi 2 ай бұрын

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?

@andreaegli 2 ай бұрын

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

@jaklinalevi 2 ай бұрын

@@andreaegli Oh, now I understand 😁 thank you 🙏

@andreaegli 2 ай бұрын

@@jaklinalevi You are very welcome

@frolien 2 ай бұрын

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. kzfaq.info/get/bejne/g5x-lc5_yrW1YWw.htmlsi=yvd9xvg6UesLa0Bz

@andreaegli 2 ай бұрын

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!

@Yannick.D 2 ай бұрын

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.

@andreaegli 2 ай бұрын

True but if you lower one of the values, either in the css code or elementor, the effect does not work

@Yannick.D 2 ай бұрын

@@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; }

@Yannick.D 2 ай бұрын

best to give it a class or an ID to target only the menu : )

@andreaegli 2 ай бұрын

@@Yannick.D yup, will try a few things 😉

@Yannick.D 2 ай бұрын

@@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; }