Did you wanted to change the scroll downl Button of a fullwidth header? This is not a big deal. In this tutorial you will learn how to modify your scroll down button and use a picture instead of the ET icons.

Preparation

First we need “Full Width Header” with a “class name”. Go to the module settings in custom css and choose your own Class Name. I use for this example “MyClass”.

CSS Code for the animation

Now we need some CSS-Code. Use a “Child Theme” or place your code inside the “Divi-Theme-Optionen” in “Custom CSS”. The size of the Button can be changed by the module settings. The percentage numbers can be changed. These values influences the bounce effect.

/*-Animation of the Icons-*/
.MyClass .scroll-down {
 animation: fullwidth-header-bounce 2s infinite;
 -webkit-animation: fullwidth-header-bounce 2s infinite;
 -moz-animation: fullwidth-header-bounce 2s infinite;
 -o-animation: fullwidth-header-bounce 2s infinite;
}

@-webkit-keyframes fullwidth-header-bounce {
 50%, 50%, 50%, 50%, 50% {-webkit-transform: translateY(0);} 
 50% {-webkit-transform: translateY(-40px);}
 50% {-webkit-transform: translateY(-40px);}
}
 
@-moz-keyframes fullwidth-header-bounce {
 50%, 50%, 50%, 50%, 50% {-moz-transform: translateY(0);}
 50% {-moz-transform: translateY(-40px);}
 50% {-moz-transform: translateY(-40px);}
}
 
@-o-keyframes fullwidth-header-bounce {
 50%, 50%, 50%, 50%, 50% {-o-transform: translateY(0);}
 50% {-o-transform: translateY(-40px);}
 50% {-o-transform: translateY(-40px);}
}
@keyframes fullwidth-header-bounce {
 50%, 50%, 50%, 50%, 50% {-o-transform: translateY(0);}
 50% {-o-transform: translateY(-40px);}
 50% {-o-transform: translateY(-40px);}
}
Change the Icon

We use a picture in this example to change the icon of the scroll down Button. We need again a bit of css.
Before we change the picture we change the color of the icon to transparent. You will find the value in advanced settings of your module.

/*-Path of your image-*/
.MyClass .et-pb-icon {
    background: url("http://Dein_Bild.de");
    background-repeat: no-repeat;
    background-size: contain;
}
Disclosure: Some of the links in this post are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission.