Trick # 447 | Dieser Beitrag beinhaltet 408 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Im heutigen Eyecatcher-Trick zeigen wir Ihnen, wie Sie den Hintergrund eines Divi-Moduls automatisch wechseln können. Das schafft Aufmerksamkeit dort, wo Sie es wollen.
Wir verwenden für den Trick ein ganz normales Text-Modul – es ginge aber auch mit jedem anderen Divi-Modul, bei welchem Sie die Hintergrundfarbe steuern können.
Dem Modul vergeben wir die CSS-Klasse «infinite-colorchange», welche Sie im Tab «Erweitert» einfügen können. Klicken Sie dort auf «CSS-ID und Klassen» und danach fügen Sie die Bezeichnung in das Feld «CSS-Klassen» ein.
Nun folgt ein CSS-Block, der den Farbwechsel steuert. Kopieren Sie ihn und fügen Sie den Inhalt in das CSS-Stylesheet Ihrer Divi-Website (unter Design/Customizer/Zusätzliches CSS) ein:
.infinite-colorchange {
animation: colorchange 10s infinite;
}
@keyframes colorchange {
0% {background-color: red; color: black;}
25% {background-color: green; color: white;}
75% {background-color: yellow; color: black;}
100% {background-color: blue; color: white;}
}Das war’s schon:
So präsentiert sich das Ergebnis.
Selbstverständlich können Sie die Farben im CSS-Code nach Ihren Wünschen anpassen. Auch die Dauer der Animation – in unserem Fall sind es 10 Sekunden – können Sie anpassen. Das geschieht in Zeile 2.
Werbung
Werbung
