Elementor Lottie Menu (Pro) Tutorial

Поделиться
HTML-код
  • Опубликовано: 14 дек 2024
  • Elementor Lottie menu tutorial with Elementor Pro: kaycinho.com/e... (affiliate)
    If you are looking for a simple way to create a fullscreen menu with a hamburger icon that animates as you open and close it, look no further!
    That's precisely what i'll be covering in today's tutorial.
    Elementor Pro comes with Lottie animations, and that's great, but it doesn't give you a straightforward way to use Lottie animations to show the open and close states of an hamburger icon.
    Sure it could be done with code, but today I'm just oing to show you a nice little trick that you can complete in minutes.
    BG SHIFTING MENU TUTORIAL:
    • Full Screen Menu Eleme...
    TOOLS I LOVE:
    Elementor Pro (affiliate): kaycinho.com/e...
    Astra Pro (affiliate): kaycinho.com/a...
    Crocoblock (affiliate): kaycinho.com/c...
    Wirementor (my own tool): kaycinho.com/w...
    MORE LINKS:
    Wirementor demo (built by me): kaycinho.com/w...
    A2 Hosting (affiliate): kaycinho.com/a...
    ONE PAGE WEBSITE FREE COURSE
    • Elementor Pro Tutorial...
    GET MY HELP:
    kaycinho.com/s...
    ALL MY RECOMMENDED RESOURCES:
    kaycinho.com/r...
    DOWNLOAD MY FREE BRAND GUIDELINES TEMPLATE
    kaycinho.com/b...
    DISCLAIMER: I often review / link to products & services that I love and think you may find of interest. When you purchase a product/service through one of my link, I receive a commission, which helps me producing free content (you don’t pay anything extra!).
    Also, I am the creator of Wirementor.
    #webdesign #freelancing #elementor

Комментарии • 60

  • @KayCinho
    @KayCinho  3 года назад +2

    And if you want to combine that with the background shifting full screen menu: ruclips.net/video/5B22kObI6d0/видео.html

  • @Kipcab
    @Kipcab 2 года назад +9

    If the trigger is onclick within the pop up how is it animating when the pop up opens? Also does the link need to be close pop up?

    • @motobandit5345
      @motobandit5345 Год назад +4

      Exactly, ist doesnt work - you basically need to trigger the second lotti as well. Really cant figure out how to do it. Spent hours on it

    • @kunalkothari3245
      @kunalkothari3245 4 месяца назад

      @@motobandit5345 did you find a solution to this?

    • @motobandit5345
      @motobandit5345 4 месяца назад

      @@kunalkothari3245 no, unfortunaly not

    • @lukaszischke
      @lukaszischke 3 месяца назад

      @@motobandit5345 Don't know if you're still looking for an solution: After copying the header to your pop up, you have to set the link of your menu button to "close popup". Then it will open it when you click it and close it when the menu is open. Hope this helps.

  • @vladnoskov
    @vladnoskov Год назад +1

    If the link to the anchor is in the menu, then the popup does not close. Can you tell me how to fix it? Thanks!

  • @AngelaKooij-w7z
    @AngelaKooij-w7z Год назад +9

    Nice tutorial! The only problem I have is that when I close the popup, the hamburger menu of the header is still in the close icon instead of the hamburger shape. Anybody else had this problem and can give me the solution?

    • @kunalkothari3245
      @kunalkothari3245 4 месяца назад

      did you find a solution to this?

    • @lukaszischke
      @lukaszischke 3 месяца назад

      ​@@kunalkothari3245 Don't know if you're still looking for an solution: After copying the header to your pop up, you have to set the link of your menu button to "close popup". Then it will open it when you click it and close it when the menu is open. Hope this helps.

  • @JorgeAlbertoSuárezEscárcega
    @JorgeAlbertoSuárezEscárcega 3 месяца назад

    Hello, good day, I need help, when I want to close the popop it does not return to the main page, but instead it repeats the click on the hamburger menu

  • @fabianwolfgang1554
    @fabianwolfgang1554 Год назад

    Great video! Thank you very much! But maybe add a marker at the video next for the time, when the actual tutorial about the burger menu starts

  • @adamnriddle
    @adamnriddle Год назад +1

    Nice effect although it was very frustrating watching the video over and over trying to figure out what I was missing...only to find out the information was not included.... .....

  • @alexandrasalas1198
    @alexandrasalas1198 Год назад

    HELP PLEASE!!
    OHHH the other thing that I didn't understand is that the new header created with elementor Pro is going to replace the old header of Astra? So what happens if I just create the header with Elementor instead of creating it with Astra?

  • @nubenegra809
    @nubenegra809 3 года назад +7

    awesome!!!, but is not closing :( ... i ahve repeated this tutorial 3 times and i cant seem to make it close the menu... still awesome, i know its me :)

    • @nubenegra809
      @nubenegra809 3 года назад +6

      just solved it!!! you have to change the action of the button inside the popup to close... that part is missing in the tutorial, still awesome!

    • @mosmanya
      @mosmanya 3 года назад

      @@nubenegra809 thank you

    • @MrNesumToj
      @MrNesumToj 3 года назад

      @@nubenegra809 thanks for the solution, i also made it 3 times and was not sure if its a bug or am i missing something!

    • @atoz2749
      @atoz2749 2 года назад +8

      on menu:
      start point = 0
      end point = 100
      action = open menu
      inside popup:
      start point = 50
      end point = 100
      action = close menu
      Hope it will work now. Thanks :)

    • @MadMarcTV
      @MadMarcTV 2 года назад

      @@nubenegra809 So if you add the lottie to your header, you need to add a 2nd one to your popup to close it? Or am I missing something??
      I want the menu to be a full-page popup.

  • @bleachmaniac4692
    @bleachmaniac4692 Год назад +3

    Might be the last video i watched from you. Bro please if you do a Tutorial then shoooow us everythiiiiing. It does not work like u said

  • @arezz7
    @arezz7 3 года назад

    Great video, thank you.
    Can you also make a video on how to do this with code as you mentioned? Or is this your preferred way?

  • @huddynz5979
    @huddynz5979 Год назад

    the lotti menues end up being like 2 pixels big for me, unsure what I'm doing wrong

  • @thewebstylist
    @thewebstylist Год назад

    Beautiful! 🎉

  • @neodirect2678
    @neodirect2678 Год назад

    Great! I must test multilevel menu in the fullscreen layout :)

  • @Rebenvolio
    @Rebenvolio 3 года назад

    Amazing video! keep them coming.

  • @kuljeetbhatia9460
    @kuljeetbhatia9460 Год назад

    when i click hamburger, it does not stay on close sign, it turns to 3 lines hamburger again. any idea

  • @CapriccioMusic
    @CapriccioMusic 2 года назад +1

    Great tutorial!

    • @KayCinho
      @KayCinho  2 года назад

      Thank you! Cheers!

  • @advinwong6590
    @advinwong6590 8 месяцев назад

    help.....the action in popup had set to "close popup" pls still dont work....help pls

  • @katlegoseanmahaye3309
    @katlegoseanmahaye3309 2 года назад

    thank you soo much for this man

  • @logarik7645
    @logarik7645 2 года назад +1

    this guy is really a sick

  • @pana_____
    @pana_____ 3 года назад

    tips&tricks, good job

  • @codemilestone7697
    @codemilestone7697 2 года назад +2

    Not closing

  • @framer-web-love
    @framer-web-love 4 месяца назад

    I tested the same thing
    it doesn't work :( new video wainting

  • @rawsimage6604
    @rawsimage6604 Год назад

    thank a lot!

  • @bitfx3439
    @bitfx3439 Год назад

    hi iam unable to close my header menu after it opens

  • @thekhaliloux
    @thekhaliloux Год назад

    Merci !

  • @mosmanya
    @mosmanya 3 года назад

    thank you

  • @1957dim
    @1957dim 3 года назад +1

    amazing

    • @KayCinho
      @KayCinho  3 года назад

      Thanks Moshe 😀

  • @PaulDewseth
    @PaulDewseth 2 года назад

    So clear, good work. This can use for lot of things

  • @instillust
    @instillust 2 года назад

    Cool 👍👍👍👍

  • @motobandit5345
    @motobandit5345 Год назад

    It doesnt work like you explained my friend

  • @SuperABOALAA
    @SuperABOALAA 9 месяцев назад

    the idea is great but the instruction isn't clear at all your explanation give me headache

  • @codemilestone7697
    @codemilestone7697 3 года назад +1

    First Comment 🤘🤘🤘🤘🙂🥰

    • @KayCinho
      @KayCinho  3 года назад +1

      Thanks for watching :)