A simple way to improve user experience on your website is by adding a “back to top” button. Some users love this button since they can simply press the button to back to the top of the page they are reading without performing a mouse scroll. Some WordPress themes — such as Divi and Newspaper — have a default feature to add a “back to top” button.
If you use Elementor and the WordPress theme you use has no such feature, you can add one yourself. Adding a “back to top” button is pretty easy in Elementor.
First off, edit the page you want to add the “back to top” button to with Elementor. Click the section handle of the top section to turn it into the editing mode.
Go to the Advanced tab on the left panel and add a CSS ID by typing it on the CSS ID field.
Add a Button widget (or any widget that has an option to add a link such as Text, Icon, or even Image) to your page. You can place it anywhere.
Type the CSS ID of the top section you have just specified above on the Link field. Add the “#” symbol as the prefix.
Now click the button and, voila! You did it.
Set the button position
Of course, before updating your page you need to set the position of your button. Normally, you place the button on the bottom-right corner.
With the Button widget selected, go to the Advanced tab on the left panel and open the Positioning option. Set the Width to Custom and Position to Fixed. This way, you can freely set the position of your button by dragging it anywhere you want.
Drag the button to the area you want to place it (bottom-right corner, for instance).
Or, you can also set the horizontal offset as well the vertical offset to get a more precise position.
That’s it. You can go to the Style tab to style your button. Don’t forget to update the page once you are done.
The bottom line
A “back to top” button is a simple yet useful feature you can add to your website. This feature allows your visitors to effortlessly return to the top of the page. If you use Elementor Pro, adding a “back to top” button to a custom single post template is a great idea.
8 thoughts on “How to Add a Back to Top Button in Elementor”
Is there a way to have the button on every page of your site?
Hi Travis,
You can use Elementor popup builder to achieve it. You can set the position of the popup on the bottom-right corner (or any location you like). Make sure to set the display condition to Entire Website. Lastly, you can disable both the overlay and close button
I fixed the problem! Had to add the “top” in te link in the header section.
I insalled everything exact the same as you mentioned in your article. When I press the button, everything scrolls down instead of up. What did I do wrong? What can I adapt?
This worked perfectly.. thank you!
You are welcome, Eric!
Thank you!! This is the easiest and most precise explanation on the WEB!!!
Glad our article could help!