There's no doubt that Divi has helped to encourage the growth of how page builders and themes work, and interact with each other. There's also no doubt that Divi is extremely popular. This means you can spot a clean install of Divi from a mile away.... especially the default back to top button.
In this tutorial you DON'T need to use a plugin, extension, javascript, or any images to achieve this. You only need a few lines of CSS and preferably a child theme to add them to. You can view a live demo of this on our agency website: Vertical Hosts
You will go from the plain and very Divi obvious back to top, to a unique and animated button that won't make it obvious it's made with Divi. Plus it will only add to your brand styling even more.
Once you've added the CSS, your back to top button will look similar to this.
You can add the following CSS either in the style.css file of your child theme, within the Divi theme options (Custom CSS), or under the Customizer (Custom CSS). We recommend you place the CSS using the child theme method.
Here's the full CSS you'll need. Be sure to change the background colors to suit your brand/tastes.
/*---------- Custom Back To Top Button ----------*/
.et_pb_scroll_top.et-visible {
opacity: 1;
-webkit-animation: fadeInBottom 1s 1 cubic-bezier(.77,0,.175,1);
-moz-animation: fadeInBottom 1s 1 cubic-bezier(.77,0,.175,1);
-o-animation: fadeInBottom 1s 1 cubic-bezier(.77,0,.175,1);
animation: fadeInBottom 1s 1 cubic-bezier(.77,0,.175,1);
}
.et_pb_scroll_top.et-pb-icon {
right: 15px;
bottom: 15px;
border-radius: 25px;
background: rgba(108, 142, 43, 0.48);
padding: 10px;
}
.et_pb_scroll_top.et-pb-icon:hover {
background: #6c8e2b;
color: black;
}
.et_pb_scroll_top:before {
content: "21";
font-weight: 900;
}
/*** Bouncing Back To Top Button Animation ***/
span.et_pb_scroll_top.et-pb-icon.et-visible {
animation: vertical-bounce 2.2s ease-out infinite;
}
@keyframes vertical-bounce {
0% { transform:translateY(0%); }
12.5% { transform:translateY(-20%); }
25% { transform:translateY(0%); }
37.5% { transform:translateY(-20%); }
50% { transform:translateY(0%); }
}
Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email
