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.

2 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

Submit a Comment

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

Pin It on Pinterest