Wie du mit Divi-Animationen deine Website zum Leben erweckst

Du möchtest deiner Website mehr Leben einhauchen? Mit den Animationen im Divi-Builder lassen Elemente sich sanft einblenden, hereingleiten oder hereinzoomen, sobald sie ins Bild kommen. In diesem Beitrag zeige ich dir, wo du die Einstellungen findest und worauf du achten solltest. Ich habe ihn im September 2026 für Divi 5 aktualisiert.

Hinweis: Die Screenshots stammen noch aus Divi 4. In Divi 5 sieht die Oberfläche etwas anders aus, die Einstellungen heißen aber weitgehend gleich.

Die Website Animationen im Divi-Builder finden

Öffne im Divi-Builder die Einstellungen eines Elements, also einer Sektion, Zeile oder eines Moduls. Klicke auf den Reiter „Design“ und scrolle nach unten zum Abschnitt „Animation“. Hier kannst du loslegen.

Die verschiedenen Animationstypen

Divi bietet dir verschiedene Website Animationen zur Auswahl:

• Verblassen (Fade): Das Element blendet sanft ein
• Gleiten (Slide): Das Element gleitet von einer Seite herein
• Hüpfen (Bounce): Das Element hüpft ins Bild
• Zoom: Das Element wird größer oder kleiner
• Flip: Das Element klappt wie eine Karte auf
• Aufklappen (Fold): Das Element faltet sich auf
• Rollen (Roll): Das Element rollt ins Bild

Probier die Effekte einfach aus und schau, was zu deinem Design passt. Weniger ist hier oft mehr, zu viele Animationen wirken schnell unruhig.

Die Website Animationen anpassen

Für jede Animation kannst du folgende Einstellungen vornehmen:

• Richtung: Von wo soll die Animation starten?
• Dauer: Wie lange soll die Animation dauern?
• Verzögerung: Soll die Animation erst nach einer Pause starten?
• Intensität: Wie stark soll der Effekt sein?
• Startpunkt: Bei welcher Deckkraft soll die Animation beginnen?
• Geschwindigkeitskurve: Soll die Animation linear oder mit Beschleunigung ablaufen?
• Wiederholung: Soll sich die Animation wiederholen?

Mit der Verzögerung kannst du zum Beispiel mehrere Elemente nacheinander einblenden lassen, etwa drei Karten, die kurz hintereinander erscheinen.

Neu in Divi 5: Interaktionen

Divi 5 bringt zusätzlich die „Interaktionen“ mit. Du findest sie im Reiter „Erweitert“ jedes Elements. Damit legst du fest, was passieren soll, wenn jemand klickt, mit der Maus über ein Element fährt oder ein Bereich ins Bild scrollt. So baust du Pop-ups, aufklappende Inhalte oder Elemente, die beim Scrollen erscheinen, ohne Zusatz-Plugin. Für einfache Einblend-Effekte reicht aber weiterhin der Abschnitt „Animation“.

Tipps für gelungene Divi Website Animationen

Damit deine Animationen nicht nach hinten losgehen, hier noch ein paar Tipps:

• Weniger ist mehr: Setz Animationen gezielt ein, um wichtige Elemente hervorzuheben. Zu viel Bewegung lenkt ab.
• Achte auf die Geschwindigkeit: Zu schnelle Animationen wirken hektisch, zu langsame lassen Besucher warten. Eine halbe bis eine Sekunde passt meistens gut.
• Bleib dezent: Sanftes Einblenden oder Hereingleiten wirkt ruhiger als hüpfende oder rollende Elemente.
• Denk an Menschen, die Bewegung nicht vertragen: Manche Menschen bekommen von Animationen Schwindel oder Kopfschmerzen und haben deshalb in ihrem Betriebssystem „Bewegung reduzieren“ eingestellt. Wichtige Inhalte sollten nicht erst nach einer langen Animation sichtbar werden.
• Teste auf dem Handy: Schau dir deine Seite auf dem Smartphone an. Was am großen Bildschirm elegant wirkt, kann auf dem kleinen Display stören.

Fazit: Bringe Leben in deine Website

Mit den Animationen in Divi bringst du mit wenigen Klicks mehr Bewegung auf deine Website. Probier die Effekte aus, aber denk daran: Die Animationen sollen deine Inhalte unterstützen, nicht von ihnen ablenken. Viel Spaß beim Ausprobieren!

Du brauchst Unterstützung bei deiner Divi-Website oder hast noch gar keine? Lass uns darüber sprechen. Schreib mir über das Kontaktformular oder buch dir ein kostenloses Erstgespräch.