Wie ändert man den Scroll Down Button eines Fullwidth Sliders in Divi? In diesem Tutorial zeige ich euch wie wir den Button unseren Bedürfnissen anpassen.

Vorbereitung

Als erstes benötigen wir einen „Full Width Header“ dem wir eine eigene „Klasse“ geben. Füge hierzu ein der erweiterten Option unter CSS einen „Klassennamen“ unter „CSS Class“ hinzu. Ich nenne ihn in diesem Beispiel „MyClass“.

CSS Code für die Animation

Nun benötigen wir noch etwas CSS-Code, den wir in den Styles des „Child Themes“ platzieren oder in den „Divi-Theme-Optionen“ in „Custom CSS“. Ich empfehle immer ein Child-Theme zu verwenden, um den Button zu animieren. Die Größe kann über das Modul selbst geändert werden. Die Prozentwerte geben an wie sich die Animation verhält. Diese können nach Belieben geändert werden, um den „Bounce-Effekt“ zu beeinflussen.

/*-Animation des 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);}
}
Ändern des Icons

Nicht immer möchten wir das vorgegebene Icon von Elegantthemes verwenden. Auch dafür benötigen wir ein wenig CSS.
Im folgenden Code Zeige ich, wie ihr ein Bild verwendet. Stellt dazu in den erweiterten Einstellungen die Farbe des Icons auf „transparent“. Mit dem darauffolgenden CSS-Code legt ihr noch ein Hintergrundbild für den Scroll-Down-Button fest.

/*-Animation des Icons-*/
.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.