⚡ Create a Sticky Scrolling Effect Using Elementor

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

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

  • @LordRigon
    @LordRigon 5 лет назад +42

    Love the simplicity. Background music is pleasing and talking is reduced to only the instruction for creating the site page. This is how instructional videos should be done. Great video!

  • @mariodengue
    @mariodengue 5 лет назад +87

    This is Elementor PRO. If anyone is searching for this on the free version.
    good video anyway.

    • @logicaloffensive1050
      @logicaloffensive1050 4 года назад +1

      I was searching for the same :(

    • @WoutScheper
      @WoutScheper 4 года назад +1

      @@logicaloffensive1050 Just get the gpl of pro (open source)

    • @logicaloffensive1050
      @logicaloffensive1050 4 года назад

      @@WoutScheper Thank you, can you please provide download link?

    • @SkynetJoe
      @SkynetJoe 4 года назад

      Get free Elementor Latest version from this website theresearchwork.com/free-download-latest-version-elementor-pro-2-10-2-plugin/

    • @nouraaltahhan2772
      @nouraaltahhan2772 4 года назад

      @@SkynetJoe Does it work without problems?

  • @susangemayel-tapper3794
    @susangemayel-tapper3794 5 лет назад +5

    Elementor Team you guys are the BEST !!! THANK YOU !!!

    • @nextlevelintactivism8195
      @nextlevelintactivism8195 4 года назад

      How about a button that sticks. Why is that so fucking hard? God damn why do people put up with such garbage.
      When I hit the GOD DAMN STICKY BUTTON????
      IT SHOULD FUCKING STICK!!!!

  • @thegrowtheffect
    @thegrowtheffect 2 года назад +6

    FOR EVERYONE WHO IS HAVING ISSUES with the sticky image OVERLAPPING THE FOOTER:
    If you are using your theme's footer (vs. Elementor's footer) then head over to your theme's additional CSS and add:
    footer {
    position: relative;
    z-index: 9999;
    }
    (Special thanks to Alan B. in the Elementor community who cracked the code!)

  • @DevPalliSri
    @DevPalliSri 4 года назад +3

    Love to see same page design how shows up on mobile.

  • @elizabethg7806
    @elizabethg7806 6 лет назад +1

    Very enjoyable but more than I'll ever need for my needs. I didn't realize you could name the sections in the navigator so thanks for that. :)

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

    So Cool! Even if I was watching it in the year 2022!

  • @tom4398
    @tom4398 6 лет назад +2

    Great tutorial Saar. More tips and tricks with Elementor would be really appreciated!

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

    Phone Button also going down. But Amazing Tutorial!

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

    Meeee encanta!!!! Gracias por el tutorial, pero ¿podríais hacerlo adaptado para MOBILE? ❤

  • @bobbyryandra
    @bobbyryandra 4 года назад +4

    Great tutorial! Perfect pacing, pleasant to watch and full of nice tips and tricks. Everyone can learn from it, from beginner to pro.

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

    Hello, very very nice thank you!! BUT it is not responsive... can you show a responsive version as well?

  • @andreasrosenhammer3858
    @andreasrosenhammer3858 3 года назад +3

    Thank You, how do you handle this on Mobile D
    evices?

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

    This is awesome. Thanks for posting this.

  • @bryanwinters4720
    @bryanwinters4720 4 года назад +2

    I tried for a whole afternoon to replicate this, on a later Elementor version, and could not do it. Of course I had to use my own smartphone images. And I'm reasonably competent.
    Elementor parallax is a great idea, but so far I've found it very difficult to build much - and I'm using the Pro version.

    • @johntruestone3127
      @johntruestone3127 4 года назад

      I have had similar difficulties, what is shown in videos seems to take forever to make, I just usually close everything and take a beat

  • @Kovek1988
    @Kovek1988 2 года назад +4

    Why i dont have scrolling effect menu?

  • @dear_erika
    @dear_erika 2 месяца назад

    this was very helpful!

  • @akintola.design
    @akintola.design Год назад

    Amazing tutorial. Although I’m curious. How well does this work on mobile?

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

    now how to do this on this new container element? I cant find any tutorial to do this anymore.

  • @kerenkeiz
    @kerenkeiz 5 лет назад +6

    Thank you very much for the excellent and enriching guide!
    I will be happy to clarify how do you design the Sticky Scrolling Effect on mobile?

    • @emberN
      @emberN 4 года назад +1

      it's the same, just look for the "eye" icon that switches screen sizes and can be tweaked for responsive devices. but only can do 3 (web, tablet, mobile and you can't be too specific)

  • @9090RF
    @9090RF 6 лет назад +1

    The second viewd great tutorial from Saar. Like it

  • @MarceloMarconcini
    @MarceloMarconcini 6 лет назад +3

    Very nice tips. Tks so much !

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

    OMG! This is the most awesome design AND effect I have ever seen in my life!! Truly fantastic website design. :-)

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

      Thanks philler82🤩 Stay tuned, there are more awesome videos coming this way!!!

  • @EricRounds
    @EricRounds 6 лет назад +1

    Thank you for posting this! If Elementor creates and sells templates like this, I will gladly buy!

  • @ilosttheinternet1750
    @ilosttheinternet1750 4 года назад

    Seriously good tips. Elementor is the most excellent thing to happen to WordPress and Web Design. #Liked and #Subbed

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

    Stunning! 😲😮

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

    Very elegant!

  • @GardeniaLimo
    @GardeniaLimo 4 года назад

    Crazy cool, Excellent Job. Thank you

  • @saurabhsoni5962
    @saurabhsoni5962 5 лет назад +3

    hello sir, Greetings from india.
    I cant find scrolling effect in my elementor. I dont know your using a pro version or not but iam using basic version. how can i find that?.
    Please let me know and your video is awesome!

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

      I'm facing the same issue, did you get it resolved? please let me know

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

      @@kingindenorth it is only elementor pro, i am searching for the ccs/ html too add it without needing a subscription. I found this channel today it was exactly what i needed: ruclips.net/channel/UCFpbEX8ifXoFiGuARrkr_ewruclips.net/channel/UCFpbEX8ifXoFiGuARrkr_ew
      channel name is Developer Crazy!!!
      If anyone in the future knows how the ccs html pleaase let me know

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

    This is great, but how would this particular layout look on mobile?

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

    Thanks you so much...👍🏻🙏🏻

  • @Bull-In-A-Bear-Suit
    @Bull-In-A-Bear-Suit 2 года назад

    love this, how taxing is it on load speed?

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

    Greate bro.
    But how can make phoen stop for another section. Please help me know. Thanks so much!

  • @dewitonline
    @dewitonline 5 лет назад

    Clear, concise and just fantastic.

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

    This Luis from Chile.
    Fantastic....
    Such a good design that I always want to use it on one of my pages.
    Only that there is a small detail that I have not been able to eliminate and it is a small very minimal portion that is seen when I get to the hide section.
    Could you help me please?
    I have done the exercise more than 5 times without being able to correct the problem.
    Thank you
    . I have the Elementor PRO subscription

  • @cmqta
    @cmqta 5 лет назад +3

    Man, you're so good that I'm mad at you :-)

  • @ashrafularman2173
    @ashrafularman2173 5 лет назад

    I love Elementor.

  • @lucsalles.youtube
    @lucsalles.youtube 5 лет назад +1

    Congrats! But... problems on responsive mode. How can i fix this? Need i create two models?

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

    Great video, how can I hide the last phone from the footer that I have on the whole page?

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

      I have the same question. If you know how can you let me know 🙏

  • @jamess1712
    @jamess1712 5 лет назад +2

    Great.. but how would it look on a mobile?

    • @dimitridehouck9506
      @dimitridehouck9506 5 лет назад

      I'm also wondering. But from my experience, this would look like crap :-) you'll have to tweak the mobile settings too i guess.

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

    How can I get this effect to be mobile responsive?

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

    Great! Can this be adopted to a side bar?

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

    Neat trick, thanks !

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

    you forgot to hide the side buttons of the mobile images as you scroll down... Lol But this is great!

  • @ИванИванович-ю7у
    @ИванИванович-ю7у 4 года назад

    Thanks! I`ts realy cool !!!

  • @kreativscope
    @kreativscope 4 года назад +1

    Do you mind to show on hp mode ?

  • @martinhermann
    @martinhermann 6 лет назад +1

    Great tutorial and a super cool effect!

  • @MajidiOmar
    @MajidiOmar 6 лет назад

    Thank you for redoing this amazing tutorial.

  • @charlieboy13
    @charlieboy13 5 лет назад +1

    This is great, thanks! I have a sticky sidebar and want it to stop either before the comments or at the footer. Is there any way to do this or is the only way to make it slide behind them using the z-index? Thanks!

  • @lukeallen615
    @lukeallen615 5 лет назад

    Cool effect man nice work

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

    Really great tutorial. Thanks

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

      Happy your found it helpful Sabbir😊

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

    Hello, for some reason the Motion effects are not available for me. Only entrance animation is there. On every page, for every element. Non of the others shown in the section. I am using Elementor 3.15.3 with Zircona theme on WP 6.3.1. What should I do?

  • @sharing-caring45
    @sharing-caring45 4 года назад

    informative and creative....

  • @abbyboling359
    @abbyboling359 4 года назад

    Fantastic video!

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

    Thanks!
    Beautiful trick! I'd like to create a similar effect horizontally.
    It's possible?

  • @KillahManjaro
    @KillahManjaro 4 года назад +3

    I found this tutorial at the perfect time. Elementor is sick!!
    Thanks for the tutorial!!!💥💥💥💥💥💥
    Update :( No column opacity option in the new update where we can find it?

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

    wow very informative..enjoyed it all the way. I have a question
    how can I make something like this on a custom map background image, whereby the map pin jumps from one location to another like left, right, up, or down as I scroll down the page.

  • @wellnix53
    @wellnix53 6 лет назад

    A link to grab some cool phone images would be great, otherwise, excellent and will definitely use this effect.

  • @DavidBenamou
    @DavidBenamou 6 лет назад +2

    Very usefull - thanks

  • @DonaldSimsProduction
    @DonaldSimsProduction 5 лет назад

    Very well presented. Thank you.

  • @chpatrocinio
    @chpatrocinio 5 лет назад +1

    Thank you! Its an awesome work!

  • @LaVueltaalMundosinPrisas
    @LaVueltaalMundosinPrisas 6 лет назад +1

    Wow! Amazing. Thanks for the videos to learn! Cheers!

  • @ArmandoSalasmoreno
    @ArmandoSalasmoreno 5 лет назад

    woooo, que gran trabajo...

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

    Is there a way to have ONLY the inside of the phone scroll and the phone frame be still? Thanks

  • @danielroels7446
    @danielroels7446 6 лет назад +4

    Looks great! Tutorial how to make it work on mobile (3 columns) would be much appreciated!

    • @danielcase7258
      @danielcase7258 5 лет назад

      set the column width to 33 (under layout when you click the grey layout button)

  • @JasonMatthew07
    @JasonMatthew07 6 лет назад +2

    Do not know if the 2018 version of Elementor has a change because my advance setting doesnt display the scrolling effect option. Shall i need to install any plugin ?

  • @srceko
    @srceko 6 лет назад +1

    Great tutorial! Could you please clarify what does the "Effects Offset" option under "Scrolling Effects" do?

    • @Elementor
      @Elementor  6 лет назад +2

      Thank you, Matija. The Offset sets the point from which the element (mobile image) stops scrolling together with the rest of the page.

    • @OaksFr
      @OaksFr 6 лет назад

      The Offset use is clear. But what is the Effect Offset utility? What does it do please?

  • @lo3biyat746
    @lo3biyat746 5 лет назад

    Subbed immidiatelly

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

    I love it

  • @jerome271
    @jerome271 6 лет назад

    Amazing does required Pro?

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

    Can this be viewed using a mobile version?

  • @Nobel0
    @Nobel0 5 лет назад +1

    wow, very interesting.
    thank you so much..

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

    Hi, is Scrolling Effect available only on Pro version. I can't find it on free version.

  • @iamchiragarora
    @iamchiragarora 6 лет назад +1

    Amazing design.

  • @emjoko
    @emjoko 5 лет назад

    Where do I find the scrolling effect option? There is nothing under my advanced features.

  • @shaikabubaker7141
    @shaikabubaker7141 5 лет назад

    Is scrolling effect option available for elementor pro only or is there any plugin to get this option

  • @JimClermonts
    @JimClermonts 5 лет назад

    Scrolling effect and sticky top is not there anymore. Has it been moved?

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

    How to make this design fit for mobile view devices, it's is responsive but it is not able to hide in mobile view so how to hide Mobile in mobile view. Plz do reply I'm waiting.

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

      Hi Rahul, from the Advanced Tab, under Responsive, toggle Hide On Mobile to HIDE. Check out this video for more information: ruclips.net/video/U9dMTkBgsjg/видео.html

  • @80hamza8080
    @80hamza8080 6 лет назад

    cool! but how it looks on mobile?

  • @abhishek0116
    @abhishek0116 5 лет назад

    really awesome

  • @alvarez958
    @alvarez958 5 лет назад

    hooo yeahh baby yeahhh you are amanzing man thanks a lot.. going subscribe !!!!!!!!!!!!!!!!!!!!!!!!!!

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

    I don't see these options in Elementor Free

  • @rachittripathi2618
    @rachittripathi2618 4 года назад

    How did you get that mobile pic?? from where can i get that image?

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

    How responsive is it on Mobile Devices?

  • @HarmanSingh-hq5rp
    @HarmanSingh-hq5rp 2 года назад

    Is there any way we can make it look same in mobile size...when i switch to mobile site it doesn't show 3 columns in one row 😶

    • @HarmanSingh-hq5rp
      @HarmanSingh-hq5rp 2 года назад

      never mind.. figured it out.. had to change column width by 33% manually

  • @StrangerRecords
    @StrangerRecords 6 лет назад

    Are the images you use for the phone etc any particular size?

  • @emberN
    @emberN 4 года назад

    im still lost. because im not following on the z index. and still wondering if this is responsive.

  • @kelartesgrowth
    @kelartesgrowth 5 лет назад +4

    Show de Bola ! Mas você poderia ter alguns professores que ensinasse em pt-br

    • @andreiof5
      @andreiof5 4 года назад

      Se ficou com alguma dúvida amigo eu posso traduzir pra você, só dizer a parte. Só nao vale dizer que é todo o video kkkkk

  • @GYANIBABASPORTS
    @GYANIBABASPORTS 4 года назад

    I am getting horizontal scroll bar in mobile responsive view though i have no horizontal view

  • @boniprakarsa5090
    @boniprakarsa5090 5 лет назад

    This is Cool !!!

  • @anikhasan5788
    @anikhasan5788 5 лет назад

    Pretty,,,,but i didn't find your code on video description..
    Could any body please help me finding that....?

  • @MaryamMarjanKA
    @MaryamMarjanKA 6 лет назад +1

    Just wow!

  • @kingslavd661
    @kingslavd661 5 лет назад

    this is awesome

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

    I don't have "Sticky" as an option in my Elementor Pro Advanced settings. Only: Vertical Scroll, Horizontal Scroll, Transparency, Blur, Rotate, and Scale. Is it something that needs to be enabled?

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

      I don't have the scrolling effects option at all in my elementor advanced tab for images, is it only available in the pro version?

  • @ОксанаЛожкина-и5ш
    @ОксанаЛожкина-и5ш 6 лет назад

    Thanks!

  • @andy-v
    @andy-v 6 лет назад +12

    The buttons of the overlay image are still scrolling along with the page on the third phone. This is a flaw I personaly wouldn't be selling te a well paying customer because they deserve better.

    • @guitarholixx
      @guitarholixx 6 лет назад

      I think we can put the hide section under the button part of the last phone image

    • @danielcase7258
      @danielcase7258 5 лет назад

      Set Both of the columns next to the final phone to Z Index 10 (or whatever above 'hide mobiles section') and move the 'hide mobiles' section below them up to behind the buttons on the final phone.

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

      easily corrected by just more negative margin on the "hide mobiles section", that's all.

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

      Bro you’re charging someone for something you got off a tutorial video on RUclips. That’s way worse. Figure out that last little bit yourself.

  • @michaelpalombo470
    @michaelpalombo470 6 лет назад

    Super great

  • @highinspiration9988
    @highinspiration9988 5 лет назад

    is this scrolling top fix option available in pro version???

  • @mdashrafuddin2825
    @mdashrafuddin2825 5 лет назад

    wow, amazing......

  • @shahzadhaider9195
    @shahzadhaider9195 6 лет назад

    Great but a little bit difficult))