Scroll-Effekte lassen Elemente erscheinen, sich bewegen, drehen oder schärfer werden, während jemand durch die Seite scrollt. In Divi 5 brauchst du dafür keinen Code und kein Plugin: Jedes Modul bringt die Einstellungen mit. Die Gruppe heißt „Scroll-Effekte“, und sie ist ein wenig versteckt.
Ich zeige dir, wo du sie findest, was die sechs Effekte tun, welche Standardwerte Divi vorgibt und wie du ein Element beim Scrollen festklebst. Getestet mit Divi 5.13 (deutsche Oberfläche), Stand Oktober 2026.
Wo die Scroll-Effekte sitzen
Fahre auf das Modul, das den Effekt bekommen soll, und klicke das Zahnrad in der Hover-Leiste. Wechsle im Einstellungsfeld in den Reiter „Erweitert“. Dort stehen untereinander die Gruppen „Attribute“, „CSS (Standbild)“, „HTML“, „Bedingungen“, „Interaktionen“, „Sichtbarkeit“, „Übergänge“, „Arbeitsstelle“ und ganz unten „Scroll-Effekte“. Klappe sie auf.
Die Gruppe hat zwei Teile: die „Klebrige Position“ und darunter die „Scroll-Transformationseffekte“. Beides funktioniert bei jedem Modul gleich, also bei Text, Bild, Button und so weiter. Auch die Einstellungen einer Zeile haben diese Gruppe.
Die sechs Scroll-Transformationseffekte
Unter „Scroll-Transformationseffekte“ siehst du sechs Symbole. Mit der Maus darüber erscheinen die Namen:
| Effekt | Was er macht | Standardwerte (Start / Mitte / Ende) |
|---|
| Vertikale Bewegung | Das Element verschiebt sich beim Scrollen nach oben oder unten | 4 / 0 / -4 (Offset) |
| Horizontale Bewegung | Das Element verschiebt sich seitlich | 4 / 0 / -4 (Offset) |
| Einblenden & Ausblenden | Die Deckkraft ändert sich | 0 % / 100 % / 100 % |
| Skalieren nach oben & unten | Das Element wird größer oder kleiner | 70 % / 100 % / 100 % |
| Rotierend | Das Element dreht sich | 90° / 0° / 0° |
| Unschärfe | Das Element wird unscharf oder scharf | 10 px / 0 px / 0 px |
Zu den Standardwerten: Divi zeigt sie nur als Platzhalter in den Feldern an. Du siehst sie also, bis du eigene Werte einträgst.
So schaltest du einen Effekt ein
Klicke das passende Symbol an. Darunter steht ein Schalter mit dem Namen des Effekts und dem Zusatz „Aktivieren“, zum Beispiel „Einblenden & Ausblenden Aktivieren“. Schalte ihn ein, dann erscheint der Bereich „Setze …“.
Einblenden & Ausblenden aktiviert: Start 0 %, Mitte 100 %, Ende 100 %.Dort hast du drei Felder: Start, Mitte und Ende. Sie beschreiben, wie das Element aussieht, wenn es unten ins Fenster kommt, wenn es in der Mitte steht und wenn es oben hinausläuft. Der Regler darüber mit den Enden „Ansichtsfenster unten“ und „Ansichtsfenster oben“ (Standard 50 %) verschiebt, wo im Fenster die „Mitte“ liegt.
Ein Beispiel: Beim Einblenden mit den Standardwerten ist ein Element unten im Fenster durchsichtig, wird zur Mitte hin voll sichtbar und bleibt es bis oben.
Vertikale Bewegung: Start, Mitte und Ende als „Offset“.
Rotierend: Das Element startet bei 90° und dreht sich bis zur Mitte auf 0°.Der Bewegungseffekt-Trigger
Ganz unten in der Gruppe steht der „Bewegungseffekt-Trigger“. Zur Wahl stehen „Mitte des Elements“ (Standard), „Oberseite des Elements“ und „Unterseite des Elements“. Damit bestimmst du, auf welchen Punkt des Elements sich die Scrollposition bezieht.
Wie das live aussieht
Zum Testen habe ich vier farbige Text-Module nebeneinander gesetzt, jedes mit einem eigenen Effekt: Einblenden, Vertikale Bewegung, Rotierend und Unschärfe, alle mit den Standardwerten. Das erste Bild zeigt den Moment, in dem die Boxen unten ins Fenster kommen. Das zweite zeigt sie später in der Fenstermitte:
Unten im Fenster: „Einblenden“ ist halb durchsichtig, „Drehen“ steht schief, „Unschärfe“ ist verschwommen.
In der Fenstermitte: Alles ist scharf, gerade und deckend. Die Box mit der Vertikalen Bewegung hat sich gegenüber den anderen verschoben.Achte darauf, dass du Effekte nur auf der gespeicherten Live-Seite beurteilst. Das ist der Ort, an dem Besucher sie sehen. Wie der Zoom mit „Skalieren nach oben & unten“ praktisch aussieht, steht in der Anleitung zum Zoom-Effekt beim Scrollen.
Klebrige Position: Elemente beim Scrollen festhalten
Ganz oben in der Gruppe steht das Dropdown „Klebrige Position“. Standard ist „Nicht kleben“. Es gibt außerdem „Bleiben Sie oben“, „Bleiben Sie unten“ und „Halten Sie sich an Oben und Unten“.
Wählst du „Bleiben Sie oben“, erscheinen weitere Optionen: der „Sticky-Top-Offset“ in Pixeln (Standard 0), die „Untere Sticky-Grenze“ (Standard „Keine“) und zwei Schalter: „Versatz Von Umgebenden Klebrigen Elementen“ und „Standard- Und Sticky-Stile Für Den Übergang“, beide standardmäßig an.
„Bleiben Sie oben“ mit den zusätzlichen Sticky-Optionen.Bei meinem Test steht links ein langer Text und rechts eine dunkle Box mit „Bleiben Sie oben“. Beim Scrollen läuft der Text nach oben weg, die Box bleibt stehen, solange ihre Zeile reicht:
Die Box rechts klebt, während der Text links weiterscrollt.Wichtig für den Aufbau: In meinem Test stand die Box neben einem deutlich höheren Text in derselben Zeile. Die Zeile bestimmt, wie weit die Box mitwandert.
Meine Empfehlung
- Weniger ist mehr: Ein Effekt pro Element, und nur bei den Elementen, die wirklich auffallen sollen. Vier Effekte gleichzeitig wirken schnell unruhig.
- Seitenlänge bedenken: Wenn die Seite zu kurz ist, erreicht das Element nie die Mitte, und der Effekt bleibt unvollständig.
- Start- und Endwerte: Lieber kleine Unterschiede wählen. 10 px Unschärfe oder 90° Drehung sind kräftig; für Fließtext würde ich sie meiden.
Divi gibt es bei Elegant Themes (Werbung).
