Back To Top Elementor Pro
Vložit
- čas přidán 8. 07. 2024
- Back to top Elementor Pro tutorial! In this tutorial I'll show you how to create a sticky back to top icon with Elementor Pro. - Get Elementor Pro: kaycinho.com/elementorpro (affiliate link)
Of course it will work on the desktop, tablet and mobile versions of your Elementor Pro website. And as an added bonus, I will show you how to make it go from transparent to regular, once the user starts scrolling down the page.
DOWNLOAD MY FREE BRAND GUIDELINES TEMPLATE
kaycinho.com/brandingtemplate
ELEMENTOR NAVIGATION PLAYLIST:
• Elementor Navigation
OTHER LINKS:
- Wirementor demo (built by me): kaycinho.com/wirementordemo
- A2 Hosting (affiliate): kaycinho.com/a2hosting
ALL MY RECOMMENDED RESOURCES:
kaycinho.com/resources/
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.
#backtotop #elementor #elementorpro #navigation #webdesign
The sticky transparent (and blurred) menu comes from this tutorial: czcams.com/video/UBFPir7x9Pg/video.html
Easiest way to make this work on all pages without individually adding the #mytopdiv to each and every top element on a page is to add a top section to the very top of the header template that has 0 padding, 0 margin no content and is only there for one purpose. To add the ID #mytopdiv . Don't make it sticky, just let it stay at the top of the page and you will have accomplished the same thing without adding so many ID tags to every top element on each page. Great tutorial. I never understood why Elementor would leave a Back to Top button off in the first place.
Thanks for the nice tip Brad! Glad you enjoyed the tutorial
@@KayCinho just add a link for the icon #top )
This is a cool tutorial! Thank you Kaycinho. It did have a small disadvantage but with this trick of Brad it's perfect now! 🤠
Thanks for the tutorial KayCinho! Tip for others If you have/are using a single page template and want this button to work on every page, just add a 'menu anchor element' on top of the single page template and name it mytopdiv.
Good tip!
I needed to learn how to put the back to top button on every page. It was nice you included that at the end.
You could also just add the class ID to the navbar and it’ll work throughout the whole website
Thank you you're the best. Coming from a coding background when you utilize both your years of experience coding from scratch and incorporating into elementor plus is marvelous.
I'm new using WordPress but I'm so glad I found your Chanel keep it up.
I'm going to codepen to look for projects (will give credit )and try to incorporate into the custom code. Thank you.
First hit on searching for "back to top with Elementor" :-) Thanks for sharing this one !
You're welcome!
Hi just to let you know that your vidéo about "back to top" is the best on CZcams for me ... 🙂
Hey Kevin, thank you for your kind comment. Glad it helped :)
Great tutorial! THANK YOU!!!
You're welcome :)
Thumbs up, you just solved my problem
My pleasure!
Perfect. Thank you!
You're very welcome :)
One of the best tuts about!! thank you so much very clear and very easy to follow !!! thanks !
Great tutorial! Thank you!
Thank you for watching and for taking the time to comment!
thank you! this is great.
Your Videos are always interesting. 💓
I appreciate that! Thanks so much
Fantastic! Thanks for the tutorial!!
Glad you enjoyed it!
Great as always!
Thank you so much Noor
Thank you! Very snazzy
Glad you like it!
Great! Thank you!
Glad you liked it!
Thanks!
Very welcome!
good job!
Thanks! Glad you enjoyed it :)
Thanks for the video.
I have a query.
1) Same process as mentioned in the video but the scenario is header sticky topped. Now Top button function not working properly.
Thanks.
Kay, great tutorial, thank you very much!
I have a great question, how can you completely hide the scrollbar on the right, I see that it also has a hover effect, if you can tell me if it is with code or through a plugin, thank you very much!
Hi Martin, thanks for the kind comment. Not sure I understand it right though. Are you mentioning something you saw in my demo website, or asking me a general question?
@@KayCinho yes prnt.sc/te9lo6 I ask how to make the scrollbar on the right totally transparent, is it with some snippet or with some plugin?
Milestone!
*** PROBLEM, Need Help ***
I have Worpress with the 'Elementor Pro' and 'Hello Elementor' as the theme. The theme should be a completely blank theme, but for some reason I see the scroll to top button on the bottom of my page.
Nothing I do removes it
- When I click 'cuctomize' the is nothing there to disable or enable in the settings
- "scroll to top' is DISABLE in the settings when I edit with Elementor (enabling it turns on a different scroll to top button)
- There is nothing in the footer
- Changing global button settings doesn't effect it
- Appears to be visible in mobile version only - possibly in tablet mode too, not in desktop atm
I don't even know where to look on how to disable it.
A problem with this is also that when I edit, I can see its a gray box with a black arrow pointing up. But, when I have the site published, you don't even see the arrow anymore, so its just a floating box.