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

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

PGlmcmFtZSB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUuY29tL2VtYmVkL1N6X0ZpNGh6bFdvP2F1dG9wbGF5PTEmc2hvd2luZm89MCZ2cT1oZDcyMCZjb250cm9scz0wIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3dmdWxsc2NyZWVuPjwvaWZyYW1lPg==
PGlmcmFtZSB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUuY29tL2VtYmVkL0l4NDZjTmNPMFlvP2F1dG9wbGF5PTEmc2hvd2luZm89MCZ2cT1oZDcyMCZjb250cm9scz0wIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3dmdWxsc2NyZWVuPjwvaWZyYW1lPg==
Are You Ready To Succeed?
If you have any questions or would like to find out more about our services please fill out this form and we will get back to you as soon as possible.
Your Information will never be shared with any third party.
This form collects the information you enter here so that we can provide you with exciting news in the future. Read our Privacy Policy to learn how we manage and protect your submitted information.
Hi there! We’d love to help you out. Leave us a message and we’ll get back to you as soon as possible.
Write a review
We would love to hear your feedback. Please take a moment and fill out this form.
Your Information will never be shared with any third party.
PGlmcmFtZSB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUuY29tL2VtYmVkL2ZrcURZbVRZVVowP2F1dG9wbGF5PTEmc2hvd2luZm89MCZ2cT1oZDcyMCZjb250cm9scz0wIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3dmdWxsc2NyZWVuPjwvaWZyYW1lPg==
Your Information will never be shared with any third party.
Thank you!
Your message has been sent.
We will get back to you in the earliest convenience.
FOLLOW US
Server settings:
Requirements
  • PHP 5.6 or later
  • upload_max_filesize (256M)
  • max_input_time (300)
  • memory_limit (256M)
  • max_execution_time (300)
  • post_max_size (512M)
PHP.ini Settings:
  • php-xml or/and php-dom
  • XMLReader
  • PHP CURL module
PHP Modules:
  • allow_url_fopen
  • allow_url_include
A regular license allows an item to be used in one project for either personal or commercial use by you or on behalf of a client. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.
Extended license
An extended license allows an item to be used in unlimited projects for either personal or commercial use. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.
Regular license
License details
Subscribe Now
Join our mailing list to receive the latest news directly to your inbox.
    
DiviEstate
Premium WordPress Divi Child Theme for real estate professionals, experts & agencies.
Testimonial Slider
Testimonial Slider is a highly customizable Divi Plugin that will help you add a slider of various testimonials received from customers, partners or valuable users.
Bruno
Premium Divi Child Theme
BRUNO is perfect for various business domains such as web design, online courses, coaching, agency, finance and many more.
Adventure: A Free Divi Layout
Win Free Marvel!
Join our mailing list and get a chance to win 1 of 5 free licenses for Marvel Theme! All subscribers will also receive a huge discount code on the product release date!
    
PGlmcmFtZSB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUuY29tL2VtYmVkL3JrZmZsbXp3VUpvP2F1dG9wbGF5PTEmc2hvd2luZm89MCZ2cT1oZDcyMCZjb250cm9scz0wIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3dmdWxsc2NyZWVuPjwvaWZyYW1lPg==