Add a Divi Back To Top button & customize it

The Divi back-to-top button allows your reader to jump up to the top of your page without having to manually scroll back to the top using the mouse.

Adding a back-to-top button to Divi is an excellent way to improve your site’s UI and UX and is especially useful for any long web page.

The back-to-top button is included within Divi but is disabled by default.

To enable the back-to-top button in Divi you will need to adjust one setting in the Theme Options.

How to enable the back-to-top button in Divi

To enable the back-to-top button you can follow these 5 steps:

1. Login to the backend WordPress dashboard of your Divi website
2. Use the left-hand sidebar to navigate to Divi > Theme Options
3. Scroll down until you find the “Back To Top Button” option
4. Click on the pill button to enable it
5. Once done, click the “Save Changes” button

Back to Top Button Option

You should now see a back-to-top button pop-up on the lower right corner of the screen when you start scrolling through your website.

Clicking it will take you back to the top of the webpage.

Customize the back-to-top button using custom CSS

If you have some CSS knowledge or are able to copy & paste, then you can easily customize the back-to-top button for free by adding some CSS code into Divi.

Just login to your WordPress backend dashboard and navigate to Divi>Theme Options. Then under the General tab scroll down till you find the Custom CSS section as shown in the image below. Enter the CSS code here for the effect to take place.

Here are a few basic CSS snippets to get you started with customizing the back-to-top button in Divi.

1 – Change the back-to-top background color  

/* Back-to-top button background color*/
.et_pb_scroll_top.et-pb-icon {
background: #FFE633;
}

2 – Add an orange hover background-color

/* Back-to-top button hover background color*/
.et_pb_scroll_top.et-pb-icon:hover {
background: #FF9F33;
}

3 – Add a border radius to make a circle

/* Back-to-top button border radius*/
.et_pb_scroll_top.et-pb-icon {
border-radius:;
}

as you can see from the examples above it is very easy to change the back-to-top button with basic CSS knowledge. Try adding some extra padding, box shadows, or animations to your button to really make it stand out.

Displaying back-to-top on desktop, tablet, or mobile devices

When you enable the back-to-top button in your Theme Options it will be displayed regardless of which device your website is being viewed on.

The Divi back-to-top button is not responsive by default. it will display on desktop, tablet, and mobile devices by default.

Your website may not need a back-to-top button on a large desktop monitor, but on a smaller mobile device where columns stack on top of each other it may be more useful. The design of the button may also need alternative styling on different devices just as the design of the rest of your website does.

To solve this issue you can use some custom code to change the visibility and/or design based on screen size or use the 3rd party Divi Responsive Helper plugin which is designed to help with the responsiveness of the theme and includes options for the back-to-top button.

There are six responsive options for showing and hiding the Back-To-Top button using the Responsive Helper plugin which are;

• Show on Desktop only
• Show on Tablet only
• Show on Phone only
• Show on Desktop and Tablet
• Show on Tablet and Phone
• Show on Desktop and Phone

Make a back-to-top button from any Divi element

As you may expect, Elegant Themes also have a great tutorial on customizing a back-to-top button which includes 3 different styles. The tutorial does not use the built-in back-to-top functionality within Divi as used above but recreates the effect using various code.

Each button comes with a detailed tutorial and the necessary code to copy & paste into your Theme Options for quick reproduction of their design.

As you can see from this tutorial, you can have total control over what style and content your button includes.

The 3 back-to-top styles include custom icons, text, borders, and colors and can very easily be further customized to get the desired style for your won website.

In Conclusion

If you have at least one long page on your website it is worth flipping the switch to enable the back-to-top button in your Divi Theme Options. Scrolling up a long page to get to a fixed header for example is something that may well lead to a high bounce rate and loss of customers and rankings. Make it easy for your website visitors so they come back for more!