The elegant theme provides Divi builder with multiple functions that developers can use for a better user experience. So today, we will show you how to add Divi back to the top button on the Elegant theme, but we also customize it. Adding a button is a simple and easy procedure, but the customer or users can easily identify that you’re using the Divi theme or WordPress platform.
Several elements on your website can recognize the Divi framework. However, if you want to make your site stand out and hide the fact that it was designed with Divi, it should customize all of these aspects to appear nothing like the default look.
In this article, we will show the simple process of adding back to the top button and customize it with different features. I’ll start with adding a Divi back to the top button and then change its shape and color to round. Then I’ll add some hover effects. So let’s start!
How to Add Divi Back to Top Button
You might be wondering why you need this button whether everything is working fine. This button will enhance the user experience, and it’s more effective with the mobile user. However, this feature will undoubtedly help your site’s users, whether you have a one-page website (with or without parallax scrolling) or merely a long page with a lot of content that takes a lot of scrolling to the bottom. So to activate this feature follow this procedure:
First, log in to the WordPress admin panel and navigate to the Divi on the left sidebar.
Select the Theme Options and then click on the General Settings button, and there are many settings options. Next, scroll down to the bottom, where you can find the Back to Top Button to enable it. That’s it!
Customize Back to Top Button
Customizing the button is the most significant part of this article because you need to look different from the crowd. Therefore, I will show you how to make this button round or circle shape and add effect.
Circle Back to Top Button
I’ll show you how to make the default button in a circle shape and color in this example, and I recommend you change the color and make it in accordance with your website. It’s an easy process, even if you don’t have any knowledge of coding or custom CSS. All you need is to add this code to the right place in Divi>Theme Options>Custom CSS; that’s it.
Note: The text in the backlash is comments
/* 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,206,209) /* button color */;
font-size: 32px; /* icon size */
transition: all .1s ease-in-out; /* add transition */
}After you successfully including the code, the button will look like below Screenshot:
Add Effects in Back to Top Button
Now I’ll add some effect to this button for its better appearance and fancy look. You may not need this, but some of the users like these kinds of animations. To add the hover-over effect in the button, you need to add this code in the next line of the previous code. It will give you a stunning result while you click on the button.
/* Button Appearance on Mouseover */
.et_pb_scroll_top.et-pb-icon:hover {
bottom: 32px /* space from bottom */;
background: rgb(0,255,255) /*button hover color*/;
transition: all .1s ease-in-out; /*add transition*/
box-shadow: 0 10px 15px #162c4e4a; /*hover box shadow */
}
Using GIF Image in Divi Back to Top Button
Using an image or a GIF offers us a range of opportunities. For example, we can build our own back-to-top button and use it instead of the default style. I’ll teach you how to replace the back-to-top button with a GIF or image and making some cooler effects in this example. We’ll utilize a premade GIF image that I created earlier. First, upload the Gif image to your Media Library, which you want to add in the back to the top button. After uploading the Gif image, you need to add this code into the custom CSS.
Login to the WordPress admin panel and navigate to Divi>Theme Options> Custom CSS; add the code here. Then in the URL code line, you insert your URL to accomplishing the task.
.et_pb_scroll_top:before {
content: url(Your GIF URL);/*Your image URL*/
}
.et_pb_scroll_top.et-pb-icon {
background: none;
right:1%;
bottom: -7px;
}
How to Add Divi Back to Top Button with Text
I’ll show how to modify the default back to the top button with a circle and add some text in this example. First, we need to change the code for the icon then add the text to this icon. This code also includes the hover effect that makes some cool effects.
.et_pb_scroll_top:after {
content: "Back To Top";/*button text*/
font-family: "Open Sans",Arial,sans-serif;/*text font*/
font-size:10px;/*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: #00ffff;;/*button color on hover*/
transition: all .1s ease-in-out; /*add transition*/
}
All of the styles shown in this post are easy and simple to use on your website. You can use them as is or combine multiple designs to make your own Back To Top button. Of course, it would be best to practice all these things in the child theme or any staging website. Then, after a successful experiment, you can use it on your live website. If you have any queries about this post, comment to us below.
