In diesem Artikel zeige ich dir, wie du einen mit Elementor erstellten Farbverlauf im Hintergrund ganz einfach mit ein wenig CSS animieren kannst.
Mit Elementor Pro* lassen sich ganz einfach Farbverläufe für Hintergrundflächen wie zB. in Sections, Spalten oder Containern einfügen. Je nach Design, sehen diese Verläufe ja ganz nett aus, aber noch besser wirken diese Verläufe mit einer dezenten Animation.
Farbverlauf erstellen
Damit du deinen Container (oder Section/Spalte) mit einen Verlauf versehen kannst, wählst du einfach in den Eigenschaften des Containers unter „Style“ den Hintergrundtyp „Verlauf“ aus. Darunter erscheinen dann Farbfelder und Schieberegler, mit denen du deinen Verlauf erstellen kannst.
Animation
Um deinen erstellten Verlauf nun zu animieren, benötigt es einen kleinen CSS Code, den du hinzufügst.
Hinweis: Ich empfehle, den CSS Code statt direkt beim Widget in einem Child-Theme oder in den Global Settings von Elementor als custom css einzubauen. Um den Vorgang simpel zu halten, zeige ich dir in diesem Artikel den Einbau direkt am Widget.
Dazu wählst du nochmals den Container (Section) aus und gehst diesmal zum Reiter „Advanced“. Ganz unten findest du den Punkt „Custom CSS“. In dem Feld fügst du ganz einfach folgenden Code ein:
selector {
animation: gradientAnimation 3s ease infinite;
animation-direction: alternate;
background-size: 600% 100%;
}
@keyframes gradientAnimation {
0% {background-position: 0%}
100% {background-position: 100%}
}Mehrere Farben im Farbverlauf
Möchtest du mehr als die zwei einstellbaren Farben im Farbverlauf? Dann kannst du den Verlauf auch per CSS statt mit den Elementor-Einstellungen erstellen. Dafür ist ein CSS Generator wie zB. gradient-animator.com hilfreich. Du kannst dann den dort erstellten CSS Code komplett gegen den von oben ersetzen. Dafür musst du dann nur mehr den Klassennamen austauschen bzw. wenn du den css-code direkt beim widget einfügst, dann einfach ganz oben im css das „.css-selector“ gegen „selector“ austauschen.
