Back To Top Elementor Pro

Рет қаралды 13,668

Күн бұрын

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

Пікірлер: 44

@KayCinho 4 жыл бұрын

The sticky transparent (and blurred) menu comes from this tutorial: kzfaq.info/get/bejne/i6h2g8yjnN6dgJs.html

@bradleyshoemaker 3 жыл бұрын

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.

@KayCinho 3 жыл бұрын

Thanks for the nice tip Brad! Glad you enjoyed the tutorial

@user-uu4ss6xh6r 3 жыл бұрын

@@KayCinho just add a link for the icon #top )

@meisterleise 2 жыл бұрын

This is a cool tutorial! Thank you Kaycinho. It did have a small disadvantage but with this trick of Brad it's perfect now! 🤠

@instamike8288 3 жыл бұрын

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.

@KayCinho 3 жыл бұрын

Good tip!

@cidinhamoss453 3 жыл бұрын

I needed to learn how to put the back to top button on every page. It was nice you included that at the end.

@Eggsec 2 жыл бұрын

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.

@wimrotor 3 жыл бұрын

First hit on searching for "back to top with Elementor" :-) Thanks for sharing this one !

@KayCinho 3 жыл бұрын

You're welcome!

@MadOldBiker Жыл бұрын

One of the best tuts about!! thank you so much very clear and very easy to follow !!! thanks !

@kevinlefournis6293 3 жыл бұрын

Hi just to let you know that your vidéo about "back to top" is the best on KZfaq for me ... 🙂

@KayCinho 3 жыл бұрын

Hey Kevin, thank you for your kind comment. Glad it helped :)

@dennisemeka4568 2 жыл бұрын

Thumbs up, you just solved my problem

@KayCinho 2 жыл бұрын

My pleasure!

@ilonawylie8473 3 жыл бұрын

thank you! this is great.

@susangemayel-tapper3794 4 жыл бұрын

Great tutorial! THANK YOU!!!

@KayCinho 4 жыл бұрын

You're welcome :)

@mr.mahadi6326 4 жыл бұрын

Your Videos are always interesting. 💓

@KayCinho 4 жыл бұрын

I appreciate that! Thanks so much

@manpo645 3 жыл бұрын

Great tutorial! Thank you!

@KayCinho 3 жыл бұрын

Thank you for watching and for taking the time to comment!

@linda_sue 3 жыл бұрын

Perfect. Thank you!

@KayCinho 3 жыл бұрын

You're very welcome :)

@nicholastinelli7840 2 жыл бұрын

Fantastic! Thanks for the tutorial!!

@KayCinho 2 жыл бұрын

Glad you enjoyed it!

@amrobbie 3 жыл бұрын

Thank you! Very snazzy

@KayCinho 3 жыл бұрын

Glad you like it!

@nooramin8526 4 жыл бұрын

Great as always!

@KayCinho 4 жыл бұрын

Thank you so much Noor

@geovanyhernandez8640 Жыл бұрын

You could also just add the class ID to the navbar and it’ll work throughout the whole website

@antonio0000x 3 жыл бұрын

Great! Thank you!

@KayCinho 3 жыл бұрын

Glad you liked it!

@DevPalliSri 3 жыл бұрын

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.

@emmanuelgonzalezcontreras9917 3 жыл бұрын

Thanks!

@KayCinho 3 жыл бұрын

Very welcome!

@MarekSzulikowski 4 жыл бұрын

good job!

@KayCinho 4 жыл бұрын

Thanks! Glad you enjoyed it :)

@empachado69 4 жыл бұрын

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!

@KayCinho 4 жыл бұрын

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?

@empachado69 4 жыл бұрын

@@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?

@3mediastudiodesign 3 жыл бұрын

Milestone!

@michaelfrymus Жыл бұрын

*** 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.