Elementor propose de superbes animations sur desktop, mais elles deviennent un cauchemar de lenteur sur mobile. Les effets d’entrée, les blocs glissants et le parallaxe non seulement agacent l’utilisateur qui fait défiler la page avec le doigt, mais ajoutent aussi des centaines de millisecondes au temps de chargement. Et Google PageSpeed Insights ne vous le pardonnera pas.

Le plus frustrant: les paramètres d’Elementor ne proposent pas d’interrupteur global pour désactiver les animations sur mobile. Mais cela ne signifie pas que le problème est insoluble. En 10 minutes et avec deux fichiers, vous supprimerez toutes les animations pour les téléphones et les tablettes tout en les conservant sur desktop.

La solution décrite ici désactive la feuille de styles elementor-animations qu’Elementor charge sur chaque page. Nous la remplaçons ensuite par un CSS personnalisé utilisant une media query: les animations ne fonctionnent que sur les écrans de plus de 1000 px de large.

💡 Aperçu rapide:

• Désactiver le fichier d’animations intégré via wp_dequeue_style dans functions.php
• Créer votre propre CSS avec une media query min-width 1000px et y déplacer les styles d’animation d’origine
• Mettre en file d’attente le nouveau fichier via wp_enqueue_style avec une priorité élevée
• Pour les scénarios complexes: une méthode alternative utilisant une session PHP pour détecter la taille d’écran

Étape 1: Désactiver le fichier d’animations intégré

La première chose à faire est de retirer de la file d’attente le fichier standard elementor-animations.css. Elementor enregistre et met en file d’attente ce fichier à chaque requête, que des animations soient utilisées ou non sur la page.

Ajoutez le code dans le functions.php de votre thème enfant ou via le plugin Code Snippets. Ne modifiez pas directement le functions.php du thème parent: vos modifications seraient perdues lors de la prochaine mise à jour.

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 );

Ce qui se passe ici: wp_dequeue_style retire le fichier de la file d’attente de sortie, wp_deregister_style supprime complètement son enregistrement. La priorité élevée 9999 est nécessaire pour intercepter les animations après tous les autres scripts, car Elementor les charge tardivement. Deux hooks (wp_enqueue_scripts et wp_head) offrent une sécurité contre les scénarios où le plugin s’accroche à différentes étapes de chargement.

Vérification: ouvrez le code source de la page (Ctrl+U) et cherchez elementor-animations. Le lien vers ce fichier doit avoir disparu.

Étape 2: Créer un CSS personnalisé avec une media query

Maintenant, les animations sont désactivées pour tous les appareils. Pour les rétablir sur desktop, nous allons créer notre propre feuille de styles qui enveloppe les règles d’origine dans @media (min-width: 1000px).

Créez un dossier et un fichier dans votre thème enfant:

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

Ouvrez le fichier d’origine animations.min.css (situé dans wp-content/plugins/elementor/assets/lib/animations/animations.min.css), copiez tout son contenu et collez-le dans le nouveau fichier, en l’enveloppant dans une 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
}

Le seuil de 1000 px est un compromis: la plupart des tablettes en orientation portrait (768-1024 px) verront également leurs animations désactivées. Si vous avez besoin des animations sur tablette, abaissez la limite à 768 px.

Le résultat doit ressembler à ceci:

Étape 3: Mettre en file d’attente la nouvelle feuille de styles

Il ne reste plus qu’à indiquer à WordPress où se trouve notre CSS personnalisé. Ajoutez ce qui suit dans le même functions.php, après le code précédent:

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' );

La fonction get_stylesheet_directory_uri() renvoie l’URL du thème enfant (ou du thème parent s’il n’y a pas de thème enfant). C’est plus sûr que de coder le chemin en dur manuellement.

Ouvrez maintenant votre site sur un téléphone ou dans les outils de développement (F12 → Activer la barre d’outils appareil). Les animations doivent disparaître sur les écrans de moins de 1000 px de large, tout en fonctionnant comme avant sur desktop.

Approche alternative: détecter la taille d’écran via une session PHP

Nous ne recommandons pas cette méthode pour un usage permanent, mais elle est utile comme concept pour d’autres tâches où la logique dépend de la largeur d’écran.

L’idée: une session PHP enregistre les dimensions de la fenêtre à partir de cookies, et functions.php décide de désactiver ou non les animations sur la base de ces données. Les inconvénients sont évidents: la session ajoute une charge serveur, le cache est cassé (une page avec session_start() ne se met pas correctement en cache), et la première visite de l’utilisateur se fait toujours sans donnée de taille d’écran.

Si vous comprenez ces limites et êtes prêt à les accepter, voici le 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
}

Pour la production, la méthode des étapes 1 à 3 est plus fiable: elle ne dépend pas des sessions et fonctionne bien avec n’importe quel système de cache.

Vidéo: paramètres d’animation Elementor cachés

La courte vidéo ci-dessous montre une approche alternative pour désactiver les animations mobiles via des classes CSS et des media queries ciblées. Cette approche est utile si vous ne voulez pas supprimer complètement toutes les animations, mais supprimer sélectivement les plus lourdes.

⁉️🤔 Foire aux questions

Pourquoi ne puis-je pas simplement masquer les éléments animés via CSS display: none sur mobile?

Parce que display: none supprime l’élément visuellement, mais le navigateur charge et analyse toujours le fichier d’animations. La page rame tout autant, vous ne le voyez simplement pas. Un retrait complet de la file via PHP résout le problème au niveau serveur: 50 à 80 Ko de styles d’animation ne transitent jamais sur le réseau. Sur une connexion mobile, cela se remarque.

Cette méthode fonctionnera-t-elle avec d’autres constructeurs de pages comme Divi, WPBakery ou Gutenberg?

Le principe est le même, mais le handle de style est différent. Divi utilise divi-style, WPBakery met en file js_composer_front, et Gutenberg ne met pas du tout en file un fichier d’animations séparé (tout passe par wp-block-library). Trouvez le handle dans le code source de la page en cherchant <link rel='stylesheet' avec le nom du plugin dans l’id. Répétez ensuite les étapes 1 à 3 avec ce handle.

Pourquoi la media query est-elle exactement de 1000 px et non les 768 px standard?

Le point de rupture standard de 768 px couvre les téléphones et les petites tablettes. Mais les tablettes de 9 à 10 pouces en mode portrait (~800 px) souffrent encore des animations, car la puissance de leur processeur et la bande passante Wi-Fi ne sont pas suffisantes pour un rendu fluide. Le seuil de 1000 px couvre toutes les tablettes, ne laissant les animations que pour les vrais desktops. Si vous préférez, vous pouvez l’abaisser à 768 px: remplacez simplement 1000 dans le CSS par votre valeur.

Est-ce vraiment nécessaire en 2026, alors que tous les smartphones ont des processeurs haut de gamme?

L’écart entre les flagships et les appareils d’entrée de gamme reste énorme. Selon les données Statcounter pour 2026, un tiers du trafic mobile provient d’appareils disposant de moins de 2 Go de RAM. Sans oublier les réseaux mobiles: dans les régions hors grandes villes, les débits sont souvent inférieurs à 5 Mbps. Chaque kilo-octet d’animations économisé réduit le délai avant la première interaction de 100 à 300 ms, et cela est directement corrélé au taux de conversion.

Puis-je faire la même chose via un plugin plutôt qu’avec du code dans functions.php?

Oui, mais nous ne le recommandons pas. Chaque plugin supplémentaire ajoute sa propre surcharge, et pour une tâche de 15 lignes, c’est disproportionné. Si vous avez peur du code, installez le plugin gratuit Code Snippets, collez-y le code (il y a une case à cocher pour activer/désactiver, et il est plus difficile de faire des erreurs que dans functions.php). Un plugin spécifiquement dédié à la désactivation des animations est excessif.

Désactiver les animations ou non: recommandation finale

En bref: désactivez-les sur mobile. Les gains en vitesse de chargement et en fluidité de défilement l’emportent sur la perte esthétique. Un utilisateur qui visite votre site depuis son téléphone veut l’information ici et maintenant, pas attendre qu’un bloc héros animé finisse de se charger.

La méthode de base en trois étapes ci-dessus résout entièrement le problème et s’entend bien avec les systèmes de cache. Configurez-la une fois, testez sur quelques pages via PageSpeed Insights, et n’y pensez plus. Et si vous avez besoin d’une animation sélective pour des éléments spécifiques, combinez l’approche de la vidéo avec des media queries ciblant des classes CSS particulières.

Ce guide vous a plu? Consultez nos autres tutoriels Elementor: optimisation des polices, widgets en lazy loading, et configuration du fil d’Ariane pour les types de publication personnalisés.