Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Style And Customize The Divi Back To Top Button

Nelson Miller Profile Orange
In this tutorial I will show you how to style and customize the Divi back to top button with a custom icon, text, and hover styles.

▶️ Please watch the video above to get all the exciting details! 👆

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.

enable the back to top button in Divi

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 Enable Or Disable The Back To Top Button Visibility Per Device In Divi Tutorial by Pee Aye Creative
Customize The Back To Top Button using the Divi Assistant plugin

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

2 Comments

  1. Simone

    I was waiting for this tutorial, thanks! Is there a possibility to adjust the sizing of the button on mobile devices?

    Reply
    • Hemant Gaba

      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;}
      }

      Reply

Submit a Comment

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

Recent Posts

0

Your Cart