How to Customize the Back to Top Button in Divi

There are several elements on your website that make Divi framework recognisable. If you want to make your site unique and don’t want people to know that it has been built with Divi, then all these elements should be customised so that they do not resemble the basic appearance.

How time flies! Over a year ago I published my first tutorial. It was on how to transform the back to top button into a button that triggers a contact form. In this tutorial, I will show you how to stylize the back to top button. At the beginning, we will change its shape to round, and color, and then we will add some hover effects. I will also show you how to change its position and add a fancy ripple effect.

To get started, we will need to enable the Back To Top Button option. To do that, go to the Divi/Theme Options tab located in your WordPress dashboard and make sure the option is enabled. In the next step, we will be adding custom CSS that will completely change the appearance of our back to top button.

Note: All examples below contain custom CSS which should be added to Divi/Theme Options/Custom CSS

1

Circle Button with Hover Animation

In this example, I will show you how to make our button circular, change its color, and add a nice hover effect that will move our button up smoothly and add a subtle box shadow on mouseover. We will also change the in and out animation. By default, the back to top button slides in from the right. We will change this animation so it will slide in from the bottom. To add this improvement to your site, simply add the following code to Divi/Theme Options/Custom CSS or to your Divi child theme if you have one (recommended option). You can edit all values to match your company brand.

2

Using Centered GIF Image

Using an image or a GIF gives us the unlimited possibilities because we can design our back to top button just like we want and use it instead of the default style. To make it even cooler, we can animate our image and save it as a GIF. In this example, I will show you how to replace the back to top button with a GIF or image and place it on the middle bottom of the screen. We will also change the animation. For this example, we will use a premade GIF image that I have prepared earlier. It can be downloaded here. The package contains 10 awesome premade GIFs that can be used on your website, and the working copy of the After Effects file which can be edited.

1) Upload the desired image to your Media Library and copy its URL.

2) Add CSS to Divi/Theme Options/Custom CSS or your child theme stylesheet and replace image url with the url you have copied in the previous step.

3

Back to Top Button with Arrow Icon

In this example, I will show you how to replace the default back to top icon with an arrow. Divi has a great collection of icon fonts already built in, so we just need to replace the code for the icon. Full list of icon font unicodes can be found here: The Elegant Icon Font – 360 Of The Best Free Icons For The Modern Web

4

Horizontal Button with Back To Top Text and Icon

In this sample, we will use a rounded button with Back To Top text and add an arrow icon. To accomplish this, we will use :before class to add an icon and :after class to add a button text.

5

Vertical Button with Back To Top Text and Icon

This last example features a vertically aligned Back To Top button with text and an arrow icon at the top. To achieve this style, we will need to add custom CSS and javascript to our Divi website. As usually, the custom CSS should be added to Divi/Theme Options/Custom CSS or child theme stylesheet while the script can be added in the Divi/Theme Options/Integration tab or to the footer.php or header.php file located in your child theme if you use one.

Custom CSS code:

In the next step, we need to add custom JavaScript code. To do that, go to the Divi/Theme Options/Integration tab and add code to < head > of your blog section (as in the image below).

Custom javascript code:
And this is it… All styles presented in this article can be used on your website with no restrictions. You can use them as it is or you can try to combine the above styles to create your own unique Back To Top button. Hopefully, you enjoyed this article. To get more free resources, please sign up to our newsletter list!
Maciej Ekstedt

Maciej Ekstedt

Creative Director

Maciej is the founder and CEO of B3 Multimedia Solutions. He is a self-made web designer and marketing expert, and he loves his job so much that he barely leaves the office. He transforms creative ideas into effective strategies for his company and for his clients. Maciej is fascinated by the phenomenon of megalopolis. He notices patterns and details which make up the whole thing, and he uses these skills in his work.

Marvel is a versatile, responsive and high-performance Divi Child Theme with a modern design and functionality.

14 Comments

  1. Nelson

    This is nice tutorial! I often change the styling as well, but these extra styles will go great on some of my projects.

    Reply
    • Maciej Ekstedt

      Thanks Nelson! Hopefully this will be useful 🙂

      Reply
  2. barry

    Thanks so much for your this great tutorial, I hope everyone appreciates the amount of detail and work you have done for the Divi community. This is a terrific terrific resource.

    Reply
  3. JW Smith

    I followed, and further customized slightly, the code for the #4 design above. All looks pretty good after publish. But, when I return to the browser and looked at the Homepage, the default Divi BtoT button appears. I went back to the custom CSS screen and the new button shows as expected.
    In short, what code or setting is nec’y to be sure the newly created button replaces the default Divi/WP? Thanks for sharing the code and for any help you can give to solve my problem.

    Reply
  4. Alex Lp

    awesome, what if i want the back to top button to the left instead of to the right? what’s the ccss code??

    Reply
    • Maciej Ekstedt

      Hello Alex,

      You would need to tweak some CSS. The following code seems to be working (change right to left and add width property):

      .et_pb_scroll_top.et-pb-icon {
      left: 30px;
      width: fit-content;
      }

      Reply
  5. Bill Even

    Awesome! Thank you!

    Reply
  6. Md Shojon

    great. It help me a lot. Thanking for the great article

    Reply
  7. nandanvartak

    Hey! Nice effects and easy to integrate. Thank you so much

    Reply
  8. Phil Simon

    @Maciej – Thank you, sir. This. Is. Awesome. I didn’t like the default option and wanted something a little more…me.

    Reply
  9. Jonas Heinzerling

    Excellent, got the results I was looking for. Thank you very much for this information.

    Reply
    • Maciej Ekstedt

      I’m glad to hear it was helpful 🙂 Have a good day!

      Reply
  10. Jasmin

    Hi,
    really great buttons, thank you!!
    May I just ask how to change the starting point of animation “2 Using Centered GIF Image” a bit later.
    If the site is long the arrows fade in too early.
    Thanks for your help.
    Jasmin

    Reply
  11. Marcos Morales

    The code worked great but is not working on mobile. Any idea how to fix it?

    Reply

Leave a Reply to barry Cancel reply

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

Sign up to our newsletter list

Pin It on Pinterest

This site uses Cookies to improve your online experience. By continuing to use this site without changing your cookie preferences we will assume that you are agreeing to our use of cookies. For more information visit ourPrivacy Policy.
Understood