Ein Bild, das beim Scrollen langsam größer wird und doch in seinem Rahmen bleibt: Dieser Zoom-Effekt wirkt edel und ist schnell gebaut. Eine Einstellung mit dem Namen „Zoom-Parallax“ findest du in Divi 5 allerdings nicht. Du kombinierst zwei vorhandene Funktionen, und genau das zeige ich dir hier.
Wichtig vorab: Das ist kein Parallax im Sinn des Hintergrundbild-Schalters, bei dem sich das Bild langsamer bewegt als der Text. Hier wächst das Bild, während du scrollst. Wie der echte Parallax-Hintergrund funktioniert, steht in der Anleitung zum Parallax-Hintergrund in Divi 5. Getestet mit Divi 5.13 (deutsche Oberfläche), Stand Oktober 2026.
Das Prinzip: Skalieren plus abgeschnittener Rahmen
Der Zoom besteht aus zwei Teilen:
- Das Bild-Modul bekommt einen Scroll-Effekt, der es beim Scrollen skaliert.
- Die Zeile um das Bild schneidet alles ab, was über ihren Rand hinauswächst. So sieht es aus, als zoomst du in ein Foto hinein, statt dass es über die Seite wächst.
Meine Testseite hat drei Sektionen: oben Text, in der Mitte eine Zeile mit einem Bild-Modul, unten wieder Text. Für das Bild habe ich ein breites Format gewählt (2000 × 900 Pixel). Im Zoom wird nur ein Ausschnitt gezeigt, ein zu kleines Bild würde unscharf.
Schritt 1: Die Zeile schneidet den Überlauf ab
Fahre mit der Maus auf die Zeile, die das Bild enthält, und klicke in der Leiste auf das Zahnrad. Der Titel des Einstellungsfelds lautet „Zeile“. Wechsle in den Reiter „Erweitert“ und öffne die Gruppe „Sichtbarkeit“.
Dort gibt es zwei Dropdowns: „Horizontaler Überlauf“ und „Vertikaler Überlauf“. Zur Auswahl stehen „Standard“, „Sichtbar“, „Scrollen“, „Versteckt“ und „Auto“. Stelle beide auf „Versteckt“.
An der Zeile: Horizontaler und Vertikaler Überlauf auf „Versteckt“.Wie wichtig dieser Schritt ist, siehst du im Vergleich. Ohne ihn wächst das Bild über den Inhaltsbereich hinaus, bis fast an den Fensterrand, und schiebt sich über benachbarte Elemente:
Ohne „Versteckt“ wächst das Bild über den Rahmen hinaus.Schritt 2: Skalieren am Bild-Modul einschalten
Öffne jetzt die Einstellungen des Bild-Moduls (Titel „Bild“), wieder im Reiter „Erweitert“, und klappe die Gruppe „Scroll-Effekte“ auf. Dort stehen die „Klebrige Position“ (Standard: „Nicht kleben“) und die „Scroll-Transformationseffekte“. Das sind sechs Symbole nebeneinander. Fährst du mit der Maus darüber, erscheinen die Namen:
- „Vertikale Bewegung“
- „Horizontale Bewegung“
- „Einblenden & Ausblenden“
- „Skalieren nach oben & unten“
- „Rotierend“
- „Unschärfe“
Für den Zoom brauchst du das vierte Symbol, „Skalieren nach oben & unten“. Schalte den Schalter „Skalieren Nach Oben & Unten Aktivieren“ ein. Darunter erscheint ein Regler mit der Beschriftung „Ansichtsfenster unten“ links und „Ansichtsfenster oben“ rechts, dazu drei Felder: Start, Mitte und Ende (Divi beschriftet sie mit „Start scale“, „Mitte scale“, „Ende scale“).
Die Felder legen fest, wie groß das Bild ist, wenn es unten ins Fenster kommt (Start), in der Mitte steht (Mitte) und oben herausläuft (Ende). Divi füllt sie mit 70 %, 100 % und 100 %. Das ergäbe einen Effekt, bei dem das Bild kleiner startet und sich auf Normalgröße vergrößert. Für den Zoom trage ich 100 %, 125 % und 150 % ein. Dann ist das Bild beim Eintritt normal groß und wird bis zum Verlassen des Fensters um die Hälfte größer.
Skalieren aktiv, Start 100 %, Mitte 125 %, Ende 150 %.Der „Bewegungseffekt-Trigger“ unten bleibt bei „Mitte des Elements“. Alternativ gibt es „Oberseite des Elements“ und „Unterseite des Elements“. Damit bestimmst du, auf welchen Punkt des Bildes sich die Scrollposition bezieht.
Schritt 3: Speichern und live prüfen
Klicke auf „Speichern“ und öffne die veröffentlichte Seite. Die Live-Seite ist die ehrliche Kontrolle. Die drei Screenshots zeigen dieselbe Seite an verschiedenen Scrollpositionen: das Bild kommt von unten ins Fenster, steht dann mittig und läuft nach oben heraus. Beachte, wie sich der Ausschnitt verändert: Die Sonne wandert aus dem Bild, die Berge füllen den Rahmen.
Das Bild tritt unten ins Fenster, noch fast in Normalgröße.
Mitte: Der Ausschnitt ist enger geworden.
Beim Herauslaufen ist das Bild am stärksten gezoomt, der Rahmen bleibt gleich groß.Stolperfallen
- Seite zu kurz: Der Effekt hängt an der Scrollposition. Steht unter dem Bild kaum Inhalt, kann man nicht weit genug scrollen und der Zoom bleibt unvollständig. Auf meiner Testseite habe ich Platz unter dem Bild gelassen.
- Zu starker Zoom: 150 % am Ende ist schon deutlich. Für einen dezenten Effekt reichen 110 bis 120 %. Das ist meine Empfehlung, kein Divi-Standard.
- Zu kleines Bild: Wer ein Bild stark vergrößert, braucht genug Pixel. Ein Bild in Anzeigebreite wird bei 150 % unscharf.
- Andere Effekte: Dieselbe Gruppe kann auch „Einblenden & Ausblenden“, „Rotierend“ oder „Unschärfe“. Mit „Skalieren“ kombiniert sieht das schnell überladen aus.
Divi gibt es bei Elegant Themes (Werbung).
