Important User Experience Element
Having a convenient way to scroll back to the top of a website is very important for user experience. I personally hate when websites do not have a back-to-top button. Thankfully, the Divi theme includes this option to enable it. However, it does not include any styling or customization options. So in this tutorial, I will show you how to style and customize the back to top button with a custom icon, text, position, and hover styles.
▶️ Please watch the video above to get all the exciting details! 👆
FYI: Do It With Divi Assistant!
Why work so hard? You can do this easily with a setting in our Divi Assistant plugin!
Enable The Back To Top Button In Divi
Before we can style or customize the back to top button, we must first make sure it is enabled. To do this, go to Divi>Theme Options to the General tab and scroll down to Back To Top.
CSS Snippets For Customizing The Divi Back To Top Button
Below you will find several CSS code snippets to help you customize the back to top button. Each one has some default styles, but are meant to be customized according to your own preferences. For example, you can change the icon, text, padding, borders, border radius, margin, background color, icon color, etc. by adding your own CSS to each of the selectors.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
Replace The Divi Back To Top Button Icon
The default back to top icon in Divi may be a bit boring, or perhaps it doesn’t match the other icons or styles on your site. Thankfully, this icon can be changed very easily with CSS. In the code below, you can replace the icon content with any other icon code from the built-in ETModules font family.
If you choose to only use text and want to hide the icon instead, then add “none” to the content.
/*replace the back to top button icon*/
body .et_pb_scroll_top:before {
content: "\21" !important;
color: red;
position: relative;
top: 3px;
}Add Text to The Divi Back To Top Button
The default back to top button in Divi only has an icon, but it is also possible to add text. This could be used in addition to the icon, or without the icon. You can simply copy and paste the code below and change the text per your preferences in the content property. Other values such as the font family, line height, font size, position, etc. can also be changed or added as needed.
/*add text to the back to top button*/
body .et_pb_scroll_top:after {
content: "Back To Top" !important;
font-family: Open Sans, sans-serif !important;
line-height: 30px !important;
font-size: 22px !important;
position: relative;
top: -2px;
margin-left: 10px !important;
}Style And Position The Divi Back To Top Button
The default add to top button in Divi is positioned directly on the right side, with no space between the button and the edge of the screen. It is also positioned a specific distance from the bottom of the screen. This can be easily adjusted to move the button in farther from the edge or to move it up or down. The snippet below targets the entire button, so you can also use this snippet for changing the background color, padding, and borders.
/*style and position the back to top button*/
body .et_pb_scroll_top {
background-color: rgb(12, 113, 195) !important;
color: rgb(237, 240, 0) !important;
padding: 10px 20px 10px 10px !important;
right: 20px !important;
bottom: 125px !important;
border-radius: 5px !important;
}Hover Styles
It is always a good idea to provide users with hover effects to indicate that you are hovering over a button. The same goes for the Divi back to top button, which does not have any hover effect by default. The code below is used to target the overall button when hovering over it with your mouse cursor. You could use this to change the background color or text color, or any other property.
/*style the back to top button on hover*/
body .et_pb_scroll_top:hover {
background-color: rgb(224, 43, 32) !important;
color: rgb(237, 240, 0) !important;
}Enable The Divi Back To Top Button Per Device Size
If you want to take things further, you can also choose to show or hide the back to top button on desktop, tablet, or phone. For this, we already have a separate tutorial with code snippets to enable or disable the back to top button per device.
How To Customize The Back To Top Button Using Divi Assistant
Here are the simple steps to customize the back to top button using our popular Divi Assistant plugin:
- Install and activate the Divi Assistant plugin
- Click on the Frontend Helper tab and the Back To Top Button subtab
- Enable the setting and adjust as needed
I hope that is easy enough for you! 😉
Learn More About Divi Assistant!
Our flagship "helper" plugin has (141) main features to make your life easier when working with Divi!
Hi, I was trying to customize the button with css but when I put the content: “\21” !important; it appears an exclamation !
Hi Laia!
It seems the font-family is conflicting in your case. Please use the following code and see if it helps:
body .et_pb_scroll_top:before {
content: “\21” !important;
color: red;
position: relative;
top: 3px;
font-family: ETmodules !important;
}
I was waiting for this tutorial, thanks! Is there a possibility to adjust the sizing of the button on mobile devices?
Hi Simone!
Please use the code and change the font size as per your requirements.
@media all and (max-width: 767px){
body .et_pb_scroll_top:after{
font-size: 16px !important;}
}