How to Add a Back to Top Button in Elementor

Updated: May 25, 2021

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 Agency Plus 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.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

8 Comments

Leave a Reply

Your email address will not be published.

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Scroll to Top

It's a minute already. Thanks for staying

Subscribe to get regular articles about page builder plugins and WordPress in general