Ultimate Elementor Horizontal Scroll Tutorial: Free & Pro (Step-by-Step 2024)

Поделиться
HTML-код
  • Опубликовано: 13 дек 2024
  • НаукаНаука

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

  • @davidevans1308
    @davidevans1308 9 дней назад

    I love how you set up your example in the beginning with what appears to be a panoramic background. Phenomenal demo! Sabine, would you be willing to do another video demonstrating how you accomplished that feat? Awesome. And BTW your step-by-step guide worked flawlessly for me. Even more important, your explanations made it easy to make adjustments. THANK YOU

    • @lechclick
      @lechclick  8 дней назад

      I'm so glad you enjoyed the demo and that it worked out well for you. I will definitely consider this in one of my next tutorials. Thanks for your feedback!

  • @daviddrummer7522
    @daviddrummer7522 Месяц назад

    Keep it up!

  • @wp-doctor
    @wp-doctor Месяц назад

    Perfect!❤❤❤ Thanks

    • @lechclick
      @lechclick  Месяц назад +1

      You're welcome 😊

  • @chris_0815_chris
    @chris_0815_chris 5 дней назад

    Hello Sabine, works perfectly on PC and tablet, THANK YOU, but on my smartphone, neither Samsung nor Apple, I can't scroll vertically. do you have a tip for me. Thank you!

    • @lechclick
      @lechclick  5 дней назад +1

      Hi Chris it is CSS issue. please check the link to Code. I have added a fix. It must work now.

    • @chris_0815_chris
      @chris_0815_chris 5 дней назад

      @@lechclick Thanks alot! It works!

  • @babayaga-m7o
    @babayaga-m7o Месяц назад

    cooles video

  • @pixelturm
    @pixelturm 21 день назад

    GSAP is really nice to play around, for commercial usage unfortunately again additional costs for a customer, for my opinion it rather would be better to make nice effects only with CSS & JS, kr

    • @lechclick
      @lechclick  20 дней назад +1

      Hey, you’re absolutely right-GSAP is such a great tool! 😊 According to their official license, you only need a commercial license if you’re creating a product that is sold to multiple end users, like a website template or a game with paid features. For most other use cases, like building custom websites for individual clients or e-commerce sites that sell physical products, the standard license is completely fine.
      Also, it’s worth mentioning that GSAP offers both free and paid tools. The core GSAP library (with animations, timelines, etc.) is completely free to use for almost all projects. But some advanced plugins, like ScrollSmoother or MorphSVG, are part of the paid membership (Club GreenSock). These are optional and only needed for very specific effects or complex animations.
      So unless you need those advanced features or are developing something to be sold to multiple users, there’s no need to worry about extra costs for GSAP.

  • @MarkTaffs
    @MarkTaffs Месяц назад

    Hi Sabine. Thanks for this fabulous tutorial. One issue is that I am getting the words scroller-start/end at the top right of the screen.

    • @lechclick
      @lechclick  Месяц назад +1

      HI Mark, thanks for watching. These are the markers. I described it at 10:37 in the video. Just type in "false" and they will dissappear ;-) Hope that helps. Let me know if you have any other questions.

    • @MarkTaffs
      @MarkTaffs Месяц назад

      @ thank you. I worked it out. It’s working well.

  • @pradnya1788
    @pradnya1788 18 дней назад

    Hi! It only working only on Desktop version, isn't working on Mobile or Tablet device. What is the solution

    • @lechclick
      @lechclick  18 дней назад

      Hi, Elementor has some bugs since the new version. Please repeat all the settings especially the Grow/shrink and everything related to size and all width and height values for tablet and mobile. It seems elementor is not saving it, at least i have the problem since the new version. Then also clean your browser afterwards. Hope that helps, but it is working on mobile!

    • @MissVinkaaa
      @MissVinkaaa 8 дней назад

      @@lechclick I have the same issue :( and I was following each step very carefully

    • @lechclick
      @lechclick  8 дней назад

      HI, I have just updated my Code Page. I included now all our settings made in the Elementor UI in the CSS code. Try it out and let me know if it worked ! Don't forget to clean browser in case you tried it already out or try in inkognito mode.

  • @zmauriaN
    @zmauriaN Месяц назад

    How can we make the "Start" text disappear before the slide begins on the side? Thank you

    • @zmauriaN
      @zmauriaN Месяц назад +1

      finded, edit in gsap code "markers: true," to "markers: false,"

    • @lechclick
      @lechclick  Месяц назад

      great that you find it.

    • @lechclick
      @lechclick  Месяц назад

      I have also changed it in my code, so that it comes without the markers :-)

  • @monimokala
    @monimokala 29 дней назад

    Hello, thank you for your good tutorial, but the problem I have is that I did all the steps exactly according to your tutorial, but when scrolling, it only displays red color and then it does not display any color. I mean the 3 section panels, am I except I don't want to install gsap on my wordpress or not, thank you for your guidance

    • @lechclick
      @lechclick  29 дней назад

      Hello, please check if your scroll container is set to column row horizontal and that your size options in the advanced step are set correctly. Also a problem occurs if in the code a comma is missing. I hope that helps!

    • @lechclick
      @lechclick  29 дней назад

      And also make sure that the HTML widget is at the end because all elements need to be loaded before the Javascript code comes.

    • @monimokala
      @monimokala 21 день назад

      @@lechclick I have followed all the steps but I am still having problems. I definitely want to use this method for my site. How can I contact you to resolve this problem?

    • @lechclick
      @lechclick  21 день назад

      I’m sorry to hear you’re having trouble! You can reach out to me via my email listed in the channel description, and I’ll do my best to help you resolve the issue.

  • @a.v.n.ssripavan5506
    @a.v.n.ssripavan5506 12 дней назад

    Didnt work for me

    • @lechclick
      @lechclick  10 дней назад

      I'm sorry to hear that! Can you share what specifically didn't work for you?

  • @moisesvasquez5077
    @moisesvasquez5077 Месяц назад

    Not working :( follow all the steps but it does not work correctly, the cut or transition is done wrong

    • @lechclick
      @lechclick  Месяц назад +1

      Thank you for your feedback! It’s interesting because this method has worked for others and it worked for me in three different elementor setups, so there may be a small setting or detail causing the issue here. If you’d like, feel free to share the exact steps you followed, and I’d be happy to take a closer look and help troubleshoot!