How to Customize the Back to Top Button of Divi (Two Ways)

Updated: September 27, 2021

Divi is one of WordPress themes that comes with a built-in back to top button. So, if this button matters to you, you don’t need to install an additional plugin. By default, the back to top button of Divi comes in a grey and is located on the lower-bottom right side of your website. If you don’t like the default look and location, you can customize it. This article will show you how.

The back to top button itself can be enabled from Theme Options page. You can access the page by going to Divi -> Theme Options on your WordPress dashboard. On the General tab, scroll down to the Back To Top Button option and toggle the switch.

Customizing Back to Top Button via Custom CSS

This method is a bit tricky as you need to have CSS knowledge. But no worries, we will provide the necessary CSS codes. Here are three examples of the back to top button, along with the CSS codes. You can place one of the codes below to the Custom CSS field on the General tab of the Theme Options page of Divi.

1. Circle Button with Hover Animation

The code:

/* Default button appearance */
.et_pb_scroll_top.et-pb-icon {
    right: 30px; /* space from right */
    bottom: 30px; /* space from bottom */
    padding: 8px; /*padding size*/
    border-radius: 30px; /* make the circle */
    background: rgb(0, 101, 253) /* button color */;	
    font-size: 32px; /* icon size */
    transition: all .1s ease-in-out; /* add transition */
}
/* Button Appearance on Mouseover */
.et_pb_scroll_top.et-pb-icon:hover {
    bottom: 32px /* space from bottom */;
    background: rgb(7, 69, 160) /*button hover color*/;	
    transition: all .1s ease-in-out; /*add transition*/
    box-shadow: 0 10px 15px #162c4e4a; /*box shadow on hover*/
}
/* Animation tweaks */
.et_pb_scroll_top.et-visible {
    -webkit-animation: fadeInBottom 1s 1 cubic-bezier(.50,0,.160,1);
    -moz-animation: fadeInBottom 2s 1 cubic-bezier(.50,0,.160,1);
    -o-animation: fadeInBottom 1s 1 cubic-bezier(.50,0,.160,1);
    animation: fadeInBottom 1s 1 cubic-bezier(.50,0,.160,1);
}
.et_pb_scroll_top.et-hidden {
    opacity: 0;
    -webkit-animation: fadeOutBottom 1s 1 cubic-bezier(.77,0,.175,1);
    -moz-animation: fadeOutBottom 1s 1 cubic-bezier(.77,0,.175,1);
    -o-animation: fadeOutBottom 1s 1 cubic-bezier(.77,0,.175,1);
    animation: fadeOutBottom 1s 1 cubic-bezier(.77,0,.175,1);
}

2. Back to Top Button with Arrow Icon

The code:

.et_pb_scroll_top:before {
    content: "\21";/*select icon*/
} 
.et_pb_scroll_top.et-pb-icon {
    right: 20px; /*right space*/
    bottom: 20px; /*bottom space*/
    border-radius: 0px;/*border radius*/
    background: #838ab1;/*button background color*/
    padding: 20px;/*space around the icon*/
    font-size: 24px;/*icon size*/
    transition: all .1s ease-in-out; /*add transition*/
}
.et_pb_scroll_top.et-pb-icon:hover {
    background: #6078ff;/*background color on hover*/
    transition: all .1s ease-in-out; /*add transition*/
}

3. Horizontal Button with “Back To Top” Text

The code:

.et_pb_scroll_top:after {
    content: "Back To Top";/*button text*/
    font-family: "Open Sans",Arial,sans-serif;/*text font*/
    font-size:12px;/*text size*/
} 
.et_pb_scroll_top:before {
    content: "\21";/*select icon*/
    font-family: ETmodules !important;
    font-size:12px;/*icon size*/
    margin-right: 5px;
} 
.et_pb_scroll_top.et-pb-icon {
    padding: 0px 20px 17px;
    right: 20px;
    bottom: 30px;
    border-radius: 100px;
    background: #1dbbe1;/*button color*/
    box-shadow: 0 10px 20px #37798940;
    transition: all .1s ease-in-out;
}
.et_pb_scroll_top.et-pb-icon:hover {
    background: #00ceff;/*button color on hover*/
    transition: all .1s ease-in-out; /*add transition*/
}
/*Add Animation from Bottom */
.et_pb_scroll_top.et-visible {
    -webkit-animation: fadeInBottom 1s 1 cubic-bezier(.50,0,.160,1);
    -moz-animation: fadeInBottom 2s 1 cubic-bezier(.50,0,.160,1);
    -o-animation: fadeInBottom 1s 1 cubic-bezier(.50,0,.160,1);
    animation: fadeInBottom 1s 1 cubic-bezier(.50,0,.160,1);
}
.et_pb_scroll_top.et-hidden {
    opacity: 0;
    -webkit-animation: fadeOutBottom 1s 1 cubic-bezier(.77,0,.175,1);
    -moz-animation: fadeOutBottom 1s 1 cubic-bezier(.77,0,.175,1);
    -o-animation: fadeOutBottom 1s 1 cubic-bezier(.77,0,.175,1);
    animation: fadeOutBottom 1s 1 cubic-bezier(.77,0,.175,1);
}

Customizing Back to Top Button Using a Plugin

If you have no CSS knowledge and seek for an easier way to customize the back to top button of Divi, you can use a plugin. One of the Divi plugins that you can use is Divi Switch. You can get it on Divi Marketplace. The plugin comes with some extra customization options. One of which is the ability to customize the back to top button.

After installing and activating the Divi Switch plugin, you will see a new block called Divi Switch on theme customizer (Appearance -> Customize). Simply scroll down to the back to top section to customize the back to button. You can set things like the button color, position, border radius, and so on.

The Bottom Line

Back to top button is a simple yet useful feature of Divi. It allows your website visitors to effortlessly back to the top section of the page they are visiting. If you have a one-page website (which usually has a long homepage), you can combine this feature with a one-page navigation. Divi offers no option to customize the back to top button. To customize it, you can use one of the methods we covered above.

Original posted on: September 27, 2021

This page may contain affiliate links, which help support WP Pagebuilders.

Leave a Reply

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

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Support Us

Consider subscribing to help us grow. Get the regular articles about page builder plugins and WordPress in general.