How To Add a Back To Top Button in Elementor

Buttons are always a huge part of WordPress websites. Elementor buttons are no different. Oftentimes people want to see they have the ability to go back to the top of a page immediately without scrolling. This is where the Elementor back-to-top button comes in handy.

In this tutorial, I am going to show you a simple 5-step process for adding an Elementor back-to-top button inside your Elementor page builder.

Note: To accomplish this process using Custom CSS Classes, you will need to have Elementor Pro installed.

The process of adding a back-to-top button is not difficult and can be accomplished fairly quickly using the steps below.

Add Back to Top Button Using Elementor

Step 1: Click on Section Handle

Click the section handle of the first section on your page to enter its settings.

Click on advanced tab in elementor and add custom css classes

On the section’s “Advanced” tab, enter a name into the CSS ID field, such as “top.”

Note: Remember, to use the CSS you need to have Elementor Pro installed. If you don’t, scroll past this step and continue below.

Step 2: Drag the Button Widget Into A Section

Drag a button widget onto your page wherever you would like it to be placed. I am simply dragging it into the top section of the blank page for the demonstration. You can drag it anywhere you want, including the footer area if you have one built.

Drag and drop elementor button widget

Step 3: Set Button Configurations

Now click on the button section again. Use the “Content” tab to fill out the proper configurations. Type the word “Top” in the button’s text field.

Then, type “top” in the Link field, or whichever CSS ID (Pro) you chose in step number 1 above.

Add appropriate button text

You can now publish or update the page and when a user clicks on your top button it will automatically take them to the top section of the page. This is handy for some users who prefer not to scroll back up to the top of the page manually.

This can be an even more handy tool when a user is viewing your site from a mobile device and they have already scrolled way down the page.

Hide or Show “Back to Top” Button

The hide or show functionality works a little differently. Since this is a tutorial based on the free version of the plugin, it might be best to drag and drop the back-to-top button on the bottom of the page. That way, when a user gets to the bottom, they can just click on it and it will stay at the bottom of the page out of the screen.

That being said, you can also “stick” the button to the bottom of the page if you have Elementor Pro installed and running. You will need to use the “Sticky Scrolling Effect,” which you will have access to in the pro version.

Final Thoughts

Elementor is a fantastic page builder for WordPress. You can do a lot with it, even if you are only using the free version. That being said, sometimes the steps you need to accomplish something in the free version will be different than it would if you are running the pro version of the plugin.

Either way, I hope this tutorial was able to show you how easy it is to add a back-to-top button in Elementor. A few quick clicks here and there and you can easily give your site users the ability to scroll back to the top of any page on your site.

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.