Elementor: Farbwechsel beim Scrollen
Möchtest du, dass sich die Farben auf deiner Website beim Scrollen ändern? Heute gebe ich dir eine einfache Anleitung, die du schnell auf deiner Website umsetzen kannst.
Ich liebe es, wenn sich die Hintergrundfarbe auf Websites ändert. Es ist ein ganz einfacher Effekt, der deine Website lebendiger macht.
Den Farbwechsel auf deiner Website kannst du in 3 Schritten umsetzen:
Schritt 1:
Wähle eine Seite aus, auf der du die Änderung der Hintergrundfarbe beim Scrollen anwenden möchtest. Wenn du Elementor nutzt, besteht deine Seite aus verschiedenen Abschnitten. Die Hintergrundfarbe der Abschnitte bestimmt, zu welcher Farbe sich der Abschnitt beim Scrollen ändert.
Achte darauf, dass beim Farbwechsel der Text immer noch genügend Kontrast zur Hintergrundfarbe aufweist. Ideal wäre es, wenn der Text bei beiden Farben gut lesbar bleibt.
Schritt 2:
Gehe in Elementor zu „Custom Code“ und klicke auf „Custom Code hinzufügen“. Du kannst einen beliebigen Namen dafür verwenden. Das Wichtigste ist, dass du in Zukunft weißt, um welchen Code es sich an dieser Stelle handelt.
<style>
body{
opacity: 0;
}
</style>
Kopiere den Code und füge ihn in das dafür vorgesehene Fenster ein. Als Ort für den Code wähle „Head“. Anschließend klicke auf „Veröffentlichen“ und wähle deine ausgesuchte Seite aus, auf der er angewendet werden soll.
Schritt 3:
Beim nächsten Schritt gehst du erneut zu „Custom Code“ und fügst den nachfolgenden Code hinzu.
<script>
Diesmal wählst du als Ort „Body-End“ und klickst daneben auf „Always load jQuery“. Du veröffentlichst es und wählst deine Website aus.
Falls etwas nicht funktioniert, schreib mir bitte, und vielleicht finden wir gemeinsam heraus, woran es liegt.
