Search

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

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.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Editorial Staff

Editorial Staff

WordPress page builder tutorials, tips, and resources
Want to save yearly expense up to $219? why not?

2 thoughts on “How to Customize the Back to Top Button of Divi (Two Ways)”

  1. Thank you for this. For Accessibility using text instead of an icon is very helpful. Screen readers do not detect Icons well. (They replace them with a number so the divi up arrow as a 2, the arrow you have is a 21).

    Is there a way to remove the icon completely? Its nice to have the text as well but I would prefer no icon at all.

    Reply
    • never mind – figured it out – removing /21 does the trick, I had removed the entire section that switches the icon and that just reverted back to the divi icon. removing /21 takes it out completely and makes the back to top fully accessible.

      Reply

Leave a Comment

Save your Divi assets to the cloud and access them from anywhere.