Team

Solutions

Work

Blog

Engage

Team

Solutions

Work

Blog

Engage

How to add back to top button with Elementor Popups

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email
Create a modern and unique back to top buttons using Elementor Popup Builder. Follow these simple steps in our illustrated guide. We will walk you through the complete process from creating popup container, setting up triggers to adding scrolling effect. Bonus tip at the bottom!

We recently started a new project for one of our regular clients who needed a simple website to showcase his new business. Our choose for this was Hello theme, a plain-vanilla theme from Elementor, and Elementor Pro Page Builder. We love this combination as Hello theme is perfectly compatible with Elementor and popular WordPress plugins, and Elementor Pro Page Builder is the most powerful and complete solution when we talk about drag and drop page builders for WordPress.

But, there’s always a catch, since Hello theme is very lightweight – it comes almost empty of styling and scripts – it doesn’t support back to top functionality which we needed in this project. For this particular website, there are some longer pages predicted in its structure and we found useful for UX to have this option. Now, there are plugins that can help us with this, but we always try to keep a list of active plugins on websites we build as short as possible and work on the solution inside the theme or, in this case, page builder options.

Elementor Pro Page Builder doesn’t have a native widget for this. One can find a very simple solution on how to achieve this functionality in Elementor “How to” series article. But with this solution, you need to repeat the process for all pages or posts where you want to have back to top available. You have to add it manually.

To make this more practical with some modern features like entrance animation or visibility after certain scroll range, we are going to use Elementor Popups Builder to add back to top button on all website pages and posts. You can also adjust where this button will be visible based on your website design, and we are going to show you how to do that.

How to create a popup with Elementor Popup Builder

The first step for creating back to top button is to create a new popup with Elementor. From WordPress dashboard navigate to Elementor Templates -> Popups:

WordPress dashboard with Elementor Popups opened

This will lead you to Elementor Popups window from which you can control and edit your already built popups or create a new one by clicking on Add New Popup button.

Click on Add New Popup. The new window will appear where you can choose Template Type and Template Name. Template type will be preselected as you have clicked on the button for creating a new popup. For template name, you can set whatever you like. We preferred simple Back to top button. After setting these two parameters, click on the Create Template button.

You will enter Elementor Editor and see already created popups inside Elementor Library. These are premade popups for you to use, but mostly for the situations where you need a contact form, subscription form, cookie policy notification, sales popup or anything familiar. Just close this window with the X button on the top right corner as we are creating our back to top button from scratch.

Setting up a popup container

When you close the Elementor Library window, you will land on Elementor Editor and starting point for popups with default settings that will look something like this window:

If you can’t see Popup Settings, just click on the gear icon in the bottom left corner:

Elementor Popups settings

We should choose these Layout settings:

  • Width – Set to 100px.
  • Height – Set Fit to Content.
  • Position Horizontal – Set to Right.
  • Position Vertical – Set to Bottom.
  • Hide Overlay and Exit Button.
  • We will leave animation effects for back to the top element itself.

In the Style setting, we need to set:

  • Background colour to fully transparent.
  • Turn off Box Shadow by clicking on the Back to Default button.

In the Advanced tab settings just set “Prevent Closing on ESC key” to ON. This is just in case if the visitor accidentally presses the ESC button while he/she is scrolling on the page. We want to prevent the button from disappearing if this happens.

Now we have our popup container for the back to the top button placed in the bottom right corner, which is its most common location.

Adding back to top button

We refer to this as a button but you can use any element from Elementor widgets list that supports links. Best elements to use here are Button or Icon widget. In our example, we are going to use the Icon widget.

Elementor Icon widget

Drag the Icon widget to a popup container and drop it. Our preferred settings for Icon content options:

  • Icon – choose the icon you like or have in your website design. Migration to Font Awesome 5 Elementor now offers more than 1500 icons, you can add your custom icons too. For our purposes, we will use the “Caret square up” icon.
  • Link – you need to specify an ID of the section at the top of your page that will be used as an anchor link for back to the top button click action. In our example, we have used markup of Uncode theme that is used on our demo website. The header in this theme has an ID “masthead” so it comes really handy to use here. For our client site, we created a header from Elementor Theme Builder which gives us complete control over everything, including adding of custom ID to the section. You will need to find what works best for you by inspecting your website source code or, if your pages are built with Elementor, just add Menu Anchor widget in top of your pages and posts with appropriate ID.
  • Alignment – we choose Right to move the button to the right and create space around the right and bottom margin.
Elementor Icon content settings

Style icon to match your website design. We are going to leave this in default Elementor settings and proceed to Advanced options.

In Advanced options, we want to set Entrance Animation for our back to top icon. Find what works best for you. Here is our example:

Elementor Icon animation settings

When you finish customizing your back to top button click Publish.

Setting popup conditions and triggers

Now that we have everything ready from the design and development stage, we need to set up where and when to show our back to top button. First settings window that will appear after clicking the Publish button is Conditions or where to show the popup. You can choose from several options:

  • The Entire site – popup will be visible on all post types on your website including archives. This is our prefered setting.
  • Archives – popup will be visible only on archives pages and you can further control these by post content type.
  • Singular – show popup on all single pages, posts or any other post types including authors and 404 pages or just on specific post type. For example, if you only want to show back to the top button on your blog posts.
  • WooCommerce – if your website is shop based and runs on WooCommerce, Elementor will provide you with separate option to control popup visibility for an entire shop or by 10 other different options.

Set your condition or several conditions if you need more advanced control over popup visibility and click Next. Triggers are the next thing you need to set, meaning what action or actions your visitors need to do in order for the popup to open. There are several options to choose from and you can also combine them with Advanced Rules to create the best scenario for your site. But, in our case, we want to keep this very simple and only trigger we need is On Scroll trigger.

Our setting – 40% with direction down – means that when users scroll down to 40% of the page length, the popup will open. It’s all we need for now. You can skip Advanced Rules and click on Save & Close right from this window. Give Elementor couple of seconds to publish your new popup that will act as a back to top button.

Elementor Popup Publish notification

Visit your website frontend and start scrolling through pages and posts to see back to top button in action.

How to add scrolling effect

While this is a working solution and does what is supposed to do, we can make it a little nicer and add some scrolling effect to it. Place the following CSS code into your prefered custom code editor:
html {
  scroll-behavior: smooth !important;
}

This will add nice scrolling behaviour to your website and when someone uses back to top button it will have something like this:

Bonus tip just for our readers: Use Export Template options from Popups window to export your popup for back to top button and easily reuse this solution on every website you build using Elementor Pro Page Builder.

Conclusion

While most popular WordPress themes support back to top functionality, there are times when you will want to use something different. Like we did here where we used plain vanilla theme and Elementor Pro Page Builder to build a website for our client. In that case, you can use this solution to improve your website UX whit nice back to top button that you have full control over it. You can add this button to the entire site or just on some parts of it. You can design it how you like and reuse it over and over on website you build using Elementor Pro Page builder.

Hope you liked this article and solution we showed you here. Please let us know in comments how this worked for you!

Part 2

In part two of our “back to top” button guide find out how to control button visibility depending on where your visitors are positioned on the page.
Do you want our team to design and develop a stunning website for you? Send us the details and we'll start discussing a strategy for your project!
Nemanja Tomanovic

Nemanja Tomanovic

Nemanja is a certified PHP Developer specialized for WordPress development. His main skills are HTML, CSS, PHP, and JavaScript. His IT career starts as a Marketing Analyst working on frontend, maintenance, SEO and different marketing tasks. At Roshem his main area of work is WordPress development.
Nemanja Tomanovic

Nemanja Tomanovic

Nemanja is a certified PHP Developer specialized for WordPress development. His main skills are HTML, CSS, PHP, and JavaScript. His IT career starts as a Marketing Analyst working on frontend, maintenance, SEO and different marketing tasks. At Roshem his main area of work is WordPress development.

Leave a Reply

Comments

  1. Hey there,

    your Guide on adding this Button is really good. I just have one Problem: If I click on it, I get a bit of a delay (about ~2-3 seconds) before the page scrolls up. Adding the Custom CSS didn’t fix this. Do you have an Idea how to fix this?
    Thanks!

    1. Author

      Hi Phil and thank you for your comment. I haven’t seen this kind of behaviour on websites where I use this solution. Is it possible for you to send me a link to your website at nemanja@roshem.com? I will give my best to find a problem and a solution.

  2. Hi Nemanja

    I think you forget to mention to enable option “Prevent Closing on Overlay”. Without this, button disappears when someone clicks outside of the button area.

    1. Author

      Thank you for your comment, Andrzej. Actually, this info is there from the beginning under Setting up a popup container heading, paragraph after Style settings list. Thank you for reading my article and it’s good to highlight these important settings.

  3. Hi! I don’t seem to have the choice to make the background transparent? It remains white…

    Popup Settings > Style > Popup > Background Type > and then the choices are either a color or gradient, and no color is white. How do I solve this?

    1. Author

      Hi, Sigrid. Thank you for your comment. Every Elementor Color Picker popup has two sliders under color preview:

      https://roshem.media/wp-content/uploads/2021/03/elementor-color-picker.jpg

      The first one can help you to find the perfect color and the second one, highlighted with a green box on this image, is to control transparency. By moving this slider all the way to the left you can make the background color completely transparent. Let me know if this helped you solve the problem.

    1. Author

      Thank you for your comment, Justin. My apologies for the late response. Can you please send me the link to your website to have a look?

      1. Yes, excellent article! Thank you! However, I’m having the same issue. It might be because the header is a scrolling header. What do you suggest?

        1. Author

          Thank you for leaving a comment, Rick. I’m using this solution on two projects with a sticky header and I’m not having any issues with it. Please contact me at nemanja@roshem.com with a link to your website and I will do my best to see what could be the problem. Thanks

  4. I am going to go ahead and bookmark this article for my brother for a study project for class. This is a attractive web page by the way. Where do you pick up the design for this web page?

    1. Author

      Thanks. The design of this website is a project of our in-house team.

  5. How to disappear the ‘Scroll to top’ button when you scroll manual to the top within the 40%?

  6. excellent tutorial, and works like a charm.

    just a little question, where is the custom-code-editor box to insert/type CSS code “scroll-behavior: smooth !important” ?

    thank you

    1. Author

      Thank you for your comment, Totok! I suggest that you place this line of code in your theme’s custom CSS stylesheet. This stylesheet is loaded on all your pages/posts. Navigate to Appearance -> Theme Editor and look for theme custom stylesheet.

  7. I personally like your article and thumbs up to you for sharing such a defined knowledge. this guide helped me to easily add back to the top button using Elementor popups. Thank you.

  8. Like!! I blog quite often and I genuinely thank you for your information. The article has truly peaked my interest.

    1. Author

      I’m glad to hear this was helpful. Thank you for leaving your comment!

  9. thanks for this usefull guide. how can hide this button if user scroll back to top without clicking?

  10. After a few websites with instructions how to do Back to Top, yours is easy, simple and functional.
    Thank you!

    1. Author

      I’m glad my guide helped you. Thank you for your comment, Jacob!

Leave a Comment

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email