Elementor-Animationen sehen auf dem Desktop beeindruckend aus, verwandeln sich auf Mobilgeräten jedoch in einen trägen Albtraum. Eingangseffekte, verschiebende Blöcke und Parallax-Effekte stören Nutzer nicht nur beim Scrollen mit dem Finger, sondern fügen der Seitenladezeit auch Hunderte von Millisekunden hinzu. Und Google PageSpeed Insights verzeiht das nicht.

Das Frustrierendste daran: Die Elementor-Einstellungen bieten keinen globalen Schalter, um Animationen auf Mobilgeräten zu deaktivieren. Das bedeutet aber nicht, dass sich das Problem nicht lösen lässt. In zehn Minuten und mit zwei Dateien entfernen Sie sämtliche Animationen für Smartphones und Tablets, während sie auf dem Desktop erhalten bleiben.

Die hier beschriebene Lösung deaktiviert das Stylesheet elementor-animations, das Elementor auf jeder Seite lädt. Anschließend ersetzen wir es durch eigenes CSS mit einer Media Query: Animationen funktionieren nur auf Bildschirmen, die breiter als 1000px sind.

💡 Kurzübersicht:

• Deaktivieren Sie die eingebaute Animationsdatei per wp_dequeue_style in der functions.php
• Erstellen Sie Ihr eigenes CSS mit einer min-width 1000px Media Query und verschieben Sie die ursprünglichen Animationsstile dorthin
• Binden Sie die neue Datei per wp_enqueue_style mit hoher Priorität ein
• Für komplexe Szenarien: eine alternative Methode, die PHP-Sessions zur Erkennung der Bildschirmgröße nutzt

Schritt 1: Die eingebaute Animationsdatei deaktivieren

Als Erstes müssen Sie das standardmäßige elementor-animations.css aus der Warteschlange entfernen. Elementor registriert und lädt diese Datei bei jeder Anfrage, unabhängig davon, ob auf der Seite tatsächlich Animationen verwendet werden.

Fügen Sie den Code in die functions.php Ihres Child-Themes ein oder nutzen Sie das Code-Snippets-Plugin. Bearbeiten Sie die functions.php des Parent-Themes nicht direkt: Ihre Änderungen gehen beim nächsten Update verloren.

1
// Disable Elementor animation styles for mobile devices
2
function custom_dequeue_elementor_animations() {
3
    wp_dequeue_style( 'elementor-animations' );
4
    wp_deregister_style( 'elementor-animations' );
5
}
6
add_action( 'wp_enqueue_scripts', 'custom_dequeue_elementor_animations', 9999 );
7
add_action( 'wp_head', 'custom_dequeue_elementor_animations', 9999 );

Was hier passiert: wp_dequeue_style entfernt die Datei aus der Ausgabewarteschlange, wp_deregister_style löscht ihre Registrierung vollständig. Die hohe Priorität 9999 ist nötig, um die Animationen nach allen anderen Skripten abzufangen, da Elementor sie spät lädt. Zwei Hooks (wp_enqueue_scripts und wp_head) bieten Absicherung für Szenarien, in denen das Plugin in unterschiedliche Ladephasen eingreift.

Überprüfung: Öffnen Sie den Seitenquelltext (Strg+U) und suchen Sie nach elementor-animations. Der Link zu dieser Datei sollte verschwunden sein.

Schritt 2: Eigenes CSS mit einer Media Query erstellen

Jetzt sind die Animationen für alle Geräte deaktiviert. Um sie auf dem Desktop wiederherzustellen, erstellen wir ein eigenes Stylesheet, das die ursprünglichen Regeln in @media (min-width: 1000px) einbettet.

Erstellen Sie einen Ordner und eine Datei in Ihrem Child-Theme:

1
/wp-content/themes/YOUR_THEME/_sdstudio_dequeue/elementor/css_animate_dequeue.css

Öffnen Sie die ursprüngliche animations.min.css (zu finden unter wp-content/plugins/elementor/assets/lib/animations/animations.min.css), kopieren Sie den gesamten Inhalt und fügen Sie ihn in die neue Datei ein, umschlossen von einer Media Query:

1
@media screen and (min-width: 1000px) {
2
    /* Insert ALL contents of the original animations.min.css here */
3
    @keyframes bounce{0%,20%,53%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1);transform:translateZ(0)}40%,43%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-30px,0) scaleY(1.1)}70%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-15px,0) scaleY(1.05)}80%{transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:translateZ(0) scaleY(.95)}90%{transform:translate3d(0,-4px,0) scaleY(1.02)}}/* ... and so on */
4
}

Der Schwellenwert von 1000px ist ein Kompromiss: Die meisten Tablets im Hochformat (768-1024px) erhalten dadurch ebenfalls deaktivierte Animationen. Falls Sie Animationen auf Tablets benötigen, senken Sie die Grenze auf 768px ab.

Das Ergebnis sollte wie folgt aussehen:

Schritt 3: Das neue Stylesheet einbinden

Jetzt müssen wir WordPress nur noch mitteilen, wo sich unser eigenes CSS befindet. Fügen Sie Folgendes in dieselbe functions.php nach dem vorherigen Code ein:

1
// Include custom CSS animations with media query
2
$theme_url = get_stylesheet_directory_uri();
3
$dequeue_css_url = $theme_url . '/_sdstudio_dequeue/elementor/css_animate_dequeue.css';
4
wp_enqueue_style( 'css_animate_dequeue', $dequeue_css_url, array(), '1.0', 'all' );

Die Funktion get_stylesheet_directory_uri() gibt die URL des Child-Themes zurück (oder des Parent-Themes, falls kein Child-Theme existiert). Das ist sicherer, als den Pfad manuell fest zu codieren.

Öffnen Sie nun Ihre Website auf einem Smartphone oder in den Entwicklertools (F12 → Gerätesymbolleiste umschalten). Animationen sollten auf Bildschirmen unter 1000px verschwinden, während sie auf dem Desktop wie gewohnt funktionieren.

Alternativer Ansatz: Bildschirmgröße per PHP-Session erkennen

Wir empfehlen diese Methode nicht für den dauerhaften Einsatz, sie ist jedoch als Konzept für andere Aufgaben nützlich, bei denen die Logik von der Bildschirmbreite abhängt.

Die Idee: Eine PHP-Session speichert die Fensterabmessungen aus Cookies, und die functions.php entscheidet anhand dieser Daten, ob Animationen deaktiviert werden. Die Nachteile liegen auf der Hand: Die Session erzeugt zusätzliche Serverlast, Caching funktioniert nicht mehr (eine Seite mit session_start() wird nicht korrekt gecacht), und der erste Besuch eines Nutzers erfolgt stets ohne Daten zur Bildschirmgröße.

Wenn Sie diese Einschränkungen verstehen und bereit sind, sie in Kauf zu nehmen, hier der Code:

1
session_start();
2
if ( isset( $_SESSION['screen_width'] ) && isset( $_SESSION['screen_height'] ) ) {
3
    if ( $_SESSION['screen_width'] <= 768 ) {
4
        function custom_dequeue_elementor_animations() {
5
            wp_dequeue_style( 'elementor-animations' );
6
            wp_deregister_style( 'elementor-animations' );
7
        }
8
        add_action( 'wp_enqueue_scripts', 'custom_dequeue_elementor_animations', 9999 );
9
        add_action( 'wp_head', 'custom_dequeue_elementor_animations', 9999 );
10
    }
11
}

Für den Produktiveinsatz ist die Methode aus den Schritten 1 bis 3 zuverlässiger: Sie hängt nicht von Sessions ab und funktioniert mit jedem Caching einwandfrei.

Video: Versteckte Elementor-Animationseinstellungen

Das kurze Video unten zeigt einen alternativen Ansatz, um mobile Animationen über CSS-Klassen und gezielte Media Queries zu deaktivieren. Dieser Ansatz ist nützlich, wenn Sie nicht sämtliche Animationen vollständig entfernen, sondern gezielt die schwerwiegendsten unterdrücken möchten.

⁉️🤔 Häufig gestellte Fragen

Warum kann ich animierte Elemente nicht einfach per CSS display: none auf Mobilgeräten ausblenden?

Weil display: none das Element visuell entfernt, der Browser die Animationsdatei aber dennoch lädt und parst. Die Seite ruckelt genauso, Sie sehen es nur nicht. Ein vollständiges Dequeue per PHP löst das Problem auf Serverebene: 50-80 KB Animationsstile gehen gar nicht erst über das Netzwerk. Bei mobilen Datenverbindungen macht sich das deutlich bemerkbar.

Funktioniert diese Methode auch mit anderen Page Buildern wie Divi, WPBakery oder Gutenberg?

Das Prinzip ist dasselbe, aber der Style-Handle ist ein anderer. Divi verwendet divi-style, WPBakery lädt js_composer_front, und Gutenberg bindet überhaupt keine separate Animationsdatei ein (alles läuft über wp-block-library). Finden Sie den Handle über den Seitenquelltext, indem Sie nach <link rel='stylesheet' mit dem Plugin-Namen in der id suchen. Wiederholen Sie dann die Schritte 1 bis 3 mit diesem Handle.

Warum genau 1000px als Media Query und nicht der Standardwert 768px?

Der Standard-Breakpoint von 768px deckt Smartphones und kleine Tablets ab. Aber 9-10-Zoll-Tablets im Hochformat (~800px) leiden immer noch unter Animationen, da ihre Prozessorleistung und WLAN-Bandbreite für flüssiges Rendering nicht ausreichen. Der Schwellenwert von 1000px deckt alle Tablets ab und lässt Animationen nur für vollwertige Desktops zu. Wenn Sie möchten, können Sie ihn auf 768px senken: Ersetzen Sie einfach 1000 im CSS durch Ihren Wert.

Ist das im Jahr 2026 überhaupt noch nötig, wo doch alle Smartphones Flaggschiff-Prozessoren haben?

Die Kluft zwischen Flaggschiffen und Einsteigergeräten ist nach wie vor enorm. Laut Statcounter-Daten für 2026 stammt ein Drittel des mobilen Datenverkehrs von Geräten mit weniger als 2 GB RAM. Hinzu kommen die mobilen Netzwerke: In Regionen außerhalb großer Städte liegen die Geschwindigkeiten oft unter 5 Mbit/s. Jedes eingesparte Kilobyte an Animationen reduziert die Zeit bis zur ersten Interaktion um 100-300 ms, und das korreliert direkt mit der Conversion.

Kann ich dasselbe auch über ein Plugin erreichen, statt Code in die functions.php zu schreiben?

Ja, aber wir empfehlen es nicht. Jedes zusätzliche Plugin bringt seinen eigenen Overhead mit sich, und für eine Aufgabe von 15 Zeilen ist das übertrieben. Wenn Sie sich vor Code scheuen, installieren Sie das kostenlose Code-Snippets-Plugin und fügen Sie den Code dort ein (es gibt eine Checkbox zum Aktivieren/Deaktivieren, und Fehler passieren dort seltener als in der functions.php). Ein eigenes Plugin nur zum Deaktivieren von Animationen ist überdimensioniert.

Animationen deaktivieren oder nicht: abschließende Empfehlung

Kurz gesagt: Deaktivieren Sie sie auf Mobilgeräten. Der Gewinn an Ladegeschwindigkeit und Scroll-Flüssigkeit wiegt den ästhetischen Verlust auf. Ein Nutzer, der vom Smartphone aus zugreift, möchte Informationen hier und jetzt, nicht darauf warten, dass ein animierter Hero-Block fertig geladen ist.

Die oben beschriebene grundlegende Drei-Schritt-Methode löst die Aufgabe vollständig und verträgt sich bestens mit Caching. Richten Sie sie einmal ein, testen Sie sie auf ein paar Seiten mit PageSpeed Insights, und vergessen Sie das Thema. Und wenn Sie selektive Animationen für bestimmte Elemente benötigen, kombinieren Sie den Ansatz aus dem Video mit Media Queries, die auf bestimmte CSS-Klassen abzielen.

Hat Ihnen dieser Leitfaden gefallen? Sehen Sie sich unsere weiteren Elementor-Tutorials an: Schriftoptimierung, Lazy Loading für Widgets und die Einrichtung von Breadcrumbs für benutzerdefinierte Beitragstypen.