Elemente, die beim Scrollen hereingleiten, Zahlen, die hochzählen, Bilder mit leichtem Parallax-Effekt: Animationen können eine Seite lebendig machen. Sie können aber genauso nerven, die Ladezeit verlängern und manche Besucher schlicht überfordern. Bevor du ein Theme suchst, lohnt sich deshalb eine Vorfrage.
Die ehrliche Antwort: Das Theme selbst animiert fast nie etwas. Es liefert Schrift, Abstände, Kopfzeile und Fußzeile. Die Bewegung kommt aus dem Seitenbaukasten, mit dem du die Inhalte baust. Hier geht es deshalb um Kombinationen aus Theme und Baukasten, die Animationen ab Werk oder per Erweiterung beherrschen, und darum, wie du sie sinnvoll einsetzt.
Alle Angaben zu Installationen, Bewertungen und Updates stammen aus dem Verzeichnis auf wordpress.org, Preise und Funktionen von den Herstellerseiten. Stand: Oktober 2026.
Welche Animationen gibt es überhaupt?
Hinter dem Wort „animiert“ stecken ziemlich verschiedene Dinge. Es hilft, sie auseinanderzuhalten, weil nicht jeder Baukasten alles kann:
- Einblend-Animationen: Ein Element erscheint, wenn es ins Bild scrollt, zum Beispiel von unten oder per Einblenden.
- Scroll-Effekte: Elemente verändern sich abhängig von der Scrollposition, etwa mit Parallax oder Verschiebung.
- Hover- und Klick-Effekte: Schaltflächen, Karten und Bilder reagieren auf die Maus oder den Finger.
- Zähler und Lottie-Animationen: Hochzählende Zahlen und kleine Vektor-Animationen, die als Datei eingebunden werden.
- Interaktionen: Ein Klick oder Scrollpunkt löst etwas an anderer Stelle aus, zum Beispiel ein Menü oder ein Popup.
Für die meisten Firmen- und Blogseiten reichen Einblend-Animationen und ein paar Hover-Effekte völlig aus.
Die Kandidaten im Überblick
| Kombination | Was sie bei Animationen bietet | Kostenlos nutzbar? |
|---|---|---|
| Divi | Einblend-Animationen, Scroll-Effekte und Interaktionen im Baukasten | nein, Lizenz nötig |
| Hello Elementor + Elementor | Einblend-Animationen kostenlos, Bewegungseffekte nur mit Pro | teilweise |
| Bricks | Interaktionen mit Auslösern und Aktionen | nein, Lizenz nötig |
| Kadence + Kadence Blocks | Zahlen-Zähler, Lottie-Animationen und weitere Blöcke | ja, Pro optional |
| Astra + Spectra | Block-Animationen im Gutenberg-Editor | ja, Pro optional |
| Greenshift | CSS-Scroll-Animationen und Interaktions-Ebene | ja, Pro optional |
Divi: alles im Baukasten
Divi ist Theme und Seitenbaukasten in einem. Auf der Herstellerseite von Elegant Themes werben sie ausdrücklich mit Steuerung für Animationen, Scroll-Effekte und Benutzerinteraktionen, dazu mit Ladeanimationen für Elemente, die ins Bild kommen. Du stellst das pro Element im Visual Builder ein, ohne Code.
Der Haken: Divi gibt es nicht kostenlos. Eine Lizenz gilt laut Hersteller für unbegrenzt viele Websites, die Pläne mit Jahres- oder Lebenszeitlizenz und die Preise stehen auf der Herstellerseite. Wer sowieso mehrere Seiten baut, kommt damit gut hin. Für eine einzelne kleine Seite ist es mehr Werkzeug, als du brauchst.
Hello Elementor mit Elementor
Hello Elementor ist ein bewusst kahles Theme, gedacht als Unterbau für den Elementor-Baukasten. Im Verzeichnis kommt es auf über eine Million aktive Installationen und eine Bewertung von 4,2 von 5 bei 130 Bewertungen, das letzte Update war am 25. August 2026.
Elementor selbst läuft auf über zehn Millionen Seiten. In der kostenlosen Version bekommst du laut Beschreibung im Verzeichnis Einblend-Animationen („Entrance animations“) für Elemente. Die Bewegungseffekte, die auf das Scrollen reagieren („Motion effects“), sind dagegen als Pro-Funktion gekennzeichnet. Das ist eine typische Konstellation: Die einfachen Effekte kosten nichts, die aufwendigen schon.
Bricks: Interaktionen für Leute, die gern tüfteln
Bricks ist ein Theme mit eingebautem Seitenbaukasten. Auf der Herstellerseite steht der Punkt „Interactions“: Du legst Auslöser fest, etwa Klick, Hover oder Scrollen, und die Aktion, die danach passiert. Das ist flexibler, aber auch etwas mehr Arbeit.
Preise laut Herstellerseite: 149 US-Dollar pro Jahr für 3 Websites, 249 US-Dollar pro Jahr für unbegrenzt viele Websites und 599 US-Dollar einmalig für die Lebenszeitlizenz mit unbegrenzten Websites.
Kadence mit Kadence Blocks
Das Kadence-Theme hat über 500.000 aktive Installationen und 4,9 von 5 Sternen bei 455 Bewertungen. Das letzte Update stammt vom 24. Juli 2026. Die Animationen kommen vom Zusatz-Plugin Kadence Blocks (über 600.000 Installationen, 4,8 von 5, zuletzt am 28. Oktober 2026 aktualisiert). Laut Beschreibung enthält es einen animierten Zähler („Count Up“) und einen Block für Lottie-Animationen, bei dem du Abspielweise, Geschwindigkeit und Wiederholungen festlegst.
Wenn du im normalen WordPress-Editor arbeiten willst und nur punktuell Bewegung brauchst, ist das eine ruhige Lösung. Für aufwendige Scroll-Choreografien ist sie nicht gedacht.
Astra mit Spectra
Astra ist eines der meistinstallierten Themes überhaupt: über eine Million aktive Installationen, 4,9 von 5 bei 6.549 Bewertungen, zuletzt aktualisiert am 15. Oktober 2026. Die Animationen liefert nicht das Theme, sondern das Block-Plugin Spectra aus demselben Haus. Im Verzeichnis heißt die Variante mit über einer Million Installationen „Spectra Legacy“, und die Beschreibung nennt „block animations“ unter den Werkzeugen. Weil der Name im Verzeichnis „Legacy“ trägt, schau vor der Installation kurz auf die Herstellerseite, welche Spectra-Version aktuell empfohlen wird.
Greenshift: wenn Animation das Hauptthema ist
Greenshift ist ein Block-Plugin, das den Schwerpunkt ausdrücklich auf Animationen legt. Im Verzeichnis hat es rund 70.000 aktive Installationen und 4,8 von 5 bei 107 Bewertungen. Laut Beschreibung gibt es CSS-Scroll-Animationen und Hover-Übergänge ohne zusätzliche Bibliotheken sowie eine Ebene für Interaktionen mit Auslösern, Bedingungen und Aktionen. Es ist ein Plugin für den Block-Editor, du kombinierst es also mit einem Theme deiner Wahl.
Für den Einstieg ist es allerdings viel Funktionsumfang. Wenn du nur zwei, drei Elemente einblenden willst, bist du mit den Bordmitteln deines Baukastens besser bedient.
So setzt du Animationen sinnvoll ein
- Weniger ist mehr. Ein Effekt pro Abschnitt reicht. Wenn alles wackelt, schaut niemand mehr auf den Inhalt.
- Nichts Wichtiges verstecken. Überschrift und Hauptbutton sollten sofort sichtbar sein, nicht erst nach einer Animation.
- Kurz und ruhig. Einblenden in einem Bruchteil einer Sekunde wirkt hochwertig, lange Fahrten wirken zäh.
- Auf dem Handy testen. Was am großen Bildschirm elegant aussieht, ruckelt auf einem älteren Telefon schnell.
- Bewegung abschaltbar halten. Manche Menschen stellen in ihrem Betriebssystem ein, dass Animationen reduziert werden sollen. Browser geben das über die CSS-Abfrage prefers-reduced-motion weiter, wie die Dokumentation von MDN erklärt. Gute Baukästen oder ein paar Zeilen eigenes CSS berücksichtigen das.
Meine Empfehlung
Du willst es einfach und kostenlos? Nimm Kadence oder Astra mit dem jeweiligen Block-Plugin und beschränke dich auf wenige Effekte. Du baust schon mit Elementor? Dann bleib bei Hello Elementor und den Einblend-Animationen, und erst wenn dir Scroll-Effekte fehlen, überlegst du Pro. Wer viel Gestaltungsfreiheit will und mehrere Seiten baut, schaut sich Divi oder Bricks an.
Und vor jeder Entscheidung gilt: Probier die Seite am Ende auf einem normalen Handy im Mobilfunknetz aus. Wenn sie dort flüssig bleibt, hast du es richtig gemacht.