Elementor - Return to the Top Button as a Sticky Button
ฝัง
- เผยแพร่เมื่อ 26 ก.ย. 2024
- To help users return to the top of a page, you can use a Sticky Button that sends you back to the top.
Elementor - Return to the Top Button as a Sticky Button
- Get Elementor Pro here --- be.elementor.c...
-- And you shouldn't discount Elementor Cloud Hosting either! trk.elementor....
-- Of course, we're affiliated to them, but it helps to pay for resources to keep creating ace content for you :)
Equipment Used:
Softbox Lighting Kit (to focus main light onto me in a dark room): amzn.to/3feqH18
Soundproof Panels (to provide a dark setting, and prevent sound bounce): amzn.to/3HVfwqa
3m Ethernet Cat 7 Cable (to maximise the Internet Connection as the room is upstairs): amzn.to/3GlBvGw
Anker 6 in 1 Adaptor (for the Macbook Air to increase USB-C, USB-A, HDMI, Ethernet Ports): amzn.to/3tiukLA
USB-C to Lightning Port Cable (from my iPhone to my Macbook Air): amzn.to/3K2tGaU
Powerline Adaptor (boosts internet connection from downstairs 380mbs to the upstairs room 120mbs): amzn.to/3r8YcYc
Floodlights (positioned to glow onto the walls): amzn.to/33mRqWD
LED Light stands (either side of me): amzn.to/3Iaerez
Fifine Dynamic Microphone: amzn.to/3osbxu2
Floating Shelves: amzn.to/3Fhxyl1
Hanging Pendant Light Holders: amzn.to/3qgwnhg
Vintage Light Bulbs: amzn.to/3K0bQ8B
Music used:
Track: Will You Be Mine (Remix)
Free download: brokeinsummer....
Artists: brokeinsummer.com
Contact: brokeinsummer....
Music provided by Audio Library Plus
- Get Elementor Pro here --- be.elementor.c...
-- Of course, we're affiliated to them, but it helps to pay for resources to keep creating ace content for you :)
-- Book an Appointment/Consultation: calendly.com/i...
-- LinkedIn: / imran-siddiq-7320a74a
-- Instagram: / batswebsitedesign
-- Twitter: / imranwebsites
-- Facebook: / websquadrontraining
PS: websquadron.co.uk
PPS: Contact us at info@websquadron.co.uk
PPPS: We only build with Elementor Pro
I swear u read my mind with these videos u post up at night! They have been ones that I need in the moment of where I'm at in a project! Love it
You got this!
Can you make it appear when you scroll half way to the botton?
Awesome job! You make it so simple and easy to follow. Thanks!
Hey - I absolutely love your videos! Thanks for being such a great teacher. So - my only issue is that the only option not showing up is 'positioning' everything else is there just not that section... any ideas? Yes I have up to date elementor and wordpress...
Set the width in the advanced tab to be custom and then the field will appear
How can I set this button for every page? I have pages like 100 so it is difficult to create this button for every page. Plese brother tell me how can I do that?
Add the Menu Anchor to the Header. And add the Button to the Header too, and then set it based on Absolute Positioning. Because it's in the Header it will repeat. Or set it as a Page Template for the Entire Site.
@@websquadron Thank you🥰
Is it possible to hide scroll to top button when we're already on top? I mean, showing that button on when start scrolling.
You would add a Scrolling Effect - with Fade - when it fades in after you scroll down a bit/a lot.
@@websquadron how do you do this?
Go to the Advanced Tab > Motion Effects > Fade In/Out and then set your start and end points. I would recommend setting to 50% start and 100% end@@jlingvall
thank you!@@websquadron
Thank you - I really appreciate it!
Thanks, what's the difference between adding this Menu Anchor widget and just setting a CSS ID?
It's just another way of doing it.
Great Job👍
Thank you thank you thank you thank you!
You are so welcome!
Thank you so much for your videos, they help a lot! It seems like I have a problem with my button. I have followed each step in this tutorial, and customized it with colors, but somehow, instead of being green and white plus hovering effects, it shows a a blue simple button on the "live-page". In elementor, it shows as wanted, just not on the actual website. I made it in the page header through Theme Builder, can it have something to do with that or is it something else? I have tried putting it on a regular page too, but that didn't seem to solve it.
Hi. Have you regenerated the CSS?
And purged the site?
@@websquadron I have regenerated the CSS in Elementor. Not purged the site
I've got a problem with this! On my latest Elementor site, my page has a return to the top button as default, but I can't find where to disable/change the icon ANYWHERE! Anyone else? Please help! x
Is it on your header template? Or footer template?
You have to remove it from the options of the original Wordpress template, same thing happened with me.
I'm having problems with mine. When I click the icon it only scrolls up a centimeter on the screen. I followed step by step but I don't know what it could be. Could you possibly know the glitch?
Hey Bernice.
Is the Menu Anchor for the Top set in your Header?
Maybe add it to the top of the page (and not the header).
Thanks @@websquadron. I see when I tried to make it fixed so it doesnt make a gap where it is placed, it doesn't scroll properly. It works now in my blog (on default) :) I'll have to play around to try get it on my entire site.
Hi, is it possible to make it appear from hidden position at the top and in the middle of the page make it scroll with animation and place it at the bottom?
Thanks
Yes if you add a scrolling effect (inside motion effects) based on transparency
@@websquadron Thanks for the reply, have you done any tutorials about this yet?
Great explanation!
Lovely!!!!! Thank you!!
Our pleasure!
thank you bro
thank you
sticky header problem
What kind of problem?
@@websquadron It was scrolling by millimeters in the sticky header. I solved it with css code
@@websquadron Pagination on elementor loop grid, product archive page does not work. I couldn't find how to overcome the problem. Can you please tell me how to solve this problem?
Having the same problem. Can you share the way you solved this issue with the sticky headers?@@tekno7