How to Customize Divi Back To Top Button?

Back to Top buttons are an important part of improving user experience especially if you have long web pages. 

As a Divi user, you can rest easy because Divi offers a built-in “back to top” button. However, it doesn’t offer a user-friendly way of customizing it. 

To customize Divi’s “back to top” button, you would have to use custom CSS code. But in this article, we will show you how to customize Divi’s “back to top” button without any CSS. 

Step One: Install and Activate DiviFlash Plugin

To customize the Divi “back to top” button without any coding, you will need to install a plugin. For this guide, we chose DiviFlash because it’s the best plugin for the Divi theme. 

You can get the DiviFlash plugin either from the Elegant Themes marketplace or from their official website. 

Once you get DiviFlash, you will need to install and activate the plugin in your WordPress dashboard. 

Step Two: Enable the Back to Top Button

Once you are done installing and activating DiviFlash, go to your WordPress dashboard and then click on DiviFlash > Settings.  Then scroll down to find the option for “Back to Top Button” and click on the “Customize” button beside it.

After clicking on the “Customize” button, you will be taken to the theme customizer, where you will see the “Enable Back To Top” toggle button. Enable this option to add the “back to top” button for your website.  It will also reveal all the customization options for the button.

With the “back to top” button enabled, we can now customize it. 

Step Three: Customize Divi Back to Top Button

With the help of the DiviFlash plugin, we will now show you how you can edit different aspects of the “back to top” button.

3.1 Changing the Icon of the Button

By default, the back to top button will have only an icon, which you can change if you want. To change the default icon, all you have to do is just select an icon from Divi’s default icon library. 

The icon library is right under the media option on the left sidebar.

After changing the icon, you can also adjust the icon’s size and icon’s color. You can find these options under the icon library. 

Remember, you can choose two different colors for the icon: one for the initial state and another for when the user hovers over it.  

3.2 Using an Image Instead of an Icon

To start, we just showed you how to change and customize the icon of the button. But what if you don’t want to use an icon? 

In that case, you can use an image instead of the icon. For that, go over to the media option, click on the dropdown menu, and choose “Image”

Choosing “Image” will replace all the icon-related options with an image uploader and image resizer. Use the image uploader to upload any image you want and adjust its size with the resizer. 

3.3 Adding Text to the Button

Initially, the back to top button will not contain any button text, but if you want, you can add text to it. 

To add text to the button, go over to the label option, which is the first option under the content section. In that input field, simply type in the text you want to add to the button.

That’s not all. Typing in the button text will reveal multiple options for customizing the button text under the “Label” option. Using these options, you can change the size and color of the text. 

Similarly with the icon color, you can also choose two different colors for the text; one for the initial state and another on hover.

Now, when you look at the button, you will see that the text is being displayed beside the button icon. If you want, you can change the placement of this text. 

To change the placement of the text, scroll the sidebar down to find the “Alignment” option. Initially, it is set to “Horizontally”; you can choose “Vertically”, which will place the text under the button icon.    

3.4 Change the Position of the Button

By default, the back to top button is placed at the bottom right corner of the screen. If you wish, you can place it in the left bottom corner. 

To place the button on the right side, find the “Position” option which is above “Alignment.” Click on the dropdown and select left, instead of right. 

In addition to this side switch, there are more granular options for customizing the button’s placement.

Under “Alignment”, you should see two more options named “Side Offset” and “Bottom Offset.” The “Side Offset” defines the gap between the button and the left or right edge of the screen. That means increasing this value will shift the button further to the left or right.

The “Bottom Offset” works similarly but for the bottom edge of the screen. So, when you increase the bottom offset value, it will move the button further up.  

3.5 Customize the Spacing

As far as spacing is concerned, you can define the space between the button icon and the button text. 

To do so, expand the design section which is at the bottom of the sidebar. Then find the “Space Between” bar and increase or decrease the value to adjust the space of the button elements. 

You can also see the options “Margin” and “Padding” below “Space Between.”

You can use the margin option to add custom spacing between other page elements outside the button’s border and the padding option to add spacing inside the button’s border.

Step Four: Style the Back to Top Button

By following the process from steps one through three, you can create a basic Divi back to top button. However, to really improve the user experience, you will have to go a step further, which is to style the back to top button.

4.1 Change the Background Color

To make the button truly stand out, you need to choose a different color other than the initial white background color. 

To pick a different color for the button’s background, use the “Background Color” option which is right below the “Design” section. 

As usual, you can set two different colors for the background of the button, one for the initial stage and the other for the hover. 

4.2 Hover Animation

To make the button more attractive, you have the option to change the hover animation through the “Hover Animation” option. You have 4 different animation options to pick from.

You can find the “Hover Animation” option at the bottom of the “Content” section.

4.3 Customize the Border Sharpness

For a more professional look, you can make the button’s border sharper or softer. By default, the borders are a bit soft which you can customize through the “Border Radius” option.

You can find the “Border Radius” at the very bottom of the “Design” section. 

Conclusion

By following the steps we have shown in our guide, you should be able to customize the Divi back to top button without any hassle. Additionally, you should also be able to style it to make it more attractive. 

However, if you still find customizing and styling the button difficult, please let us know in the comments and we will help you get the job done.