Las animaciones de Elementor se ven hermosas en escritorio, pero se convierten en una pesadilla lenta en dispositivos móviles. Los efectos de entrada, los bloques deslizantes y el parallax no solo molestan a los usuarios al desplazarse con el dedo, sino que también añaden cientos de milisegundos al tiempo de carga de la página. Y PageSpeed Insights de Google no lo perdonará.

Lo más frustrante: los ajustes de Elementor no tienen un interruptor global para desactivar las animaciones en móviles. Pero eso no significa que el problema no tenga solución. En 10 minutos y con dos archivos, eliminará todas las animaciones para teléfonos y tabletas, manteniéndolas en escritorio.

La solución que se describe aquí desactiva la hoja de estilos elementor-animations que Elementor carga en cada página. Luego la reemplazamos con CSS personalizado usando una media query: las animaciones solo funcionan en pantallas de más de 1000px de ancho.

💡 Resumen rápido:

• Desactive el archivo de animaciones integrado mediante wp_dequeue_style en functions.php
• Cree su propio CSS con una media query de min-width 1000px y traslade allí los estilos de animación originales
• Encole el nuevo archivo mediante wp_enqueue_style con prioridad alta
• Para escenarios complejos: un método alternativo que usa sesión PHP para detectar el tamaño de pantalla

Paso 1: Desactive el archivo de animaciones integrado

Lo primero que debe hacer es desencolar el elementor-animations.css estándar. Elementor registra y encola este archivo en cada solicitud, independientemente de si se usan animaciones en la página o no.

Añada el código al functions.php de su tema hijo o mediante el plugin Code Snippets. No edite directamente el functions.php del tema padre: sus cambios se perderán en la próxima actualización.

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

Lo que ocurre aquí: wp_dequeue_style elimina el archivo de la cola de salida, wp_deregister_style elimina por completo su registro. La prioridad alta 9999 es necesaria para interceptar las animaciones después de todos los demás scripts, ya que Elementor las carga tarde. Dos hooks (wp_enqueue_scripts y wp_head) proporcionan un seguro frente a escenarios en los que el plugin se engancha en diferentes etapas de carga.

Verifique: abra el código fuente de la página (Ctrl+U) y busque elementor-animations. El enlace a este archivo debería haber desaparecido.

Paso 2: Cree CSS personalizado con una media query

Ahora las animaciones están desactivadas para todos los dispositivos. Para recuperarlas en escritorio, crearemos nuestra propia hoja de estilos que envuelva las reglas originales en @media (min-width: 1000px).

Cree una carpeta y un archivo en su tema hijo:

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

Abra el animations.min.css original (ubicado en wp-content/plugins/elementor/assets/lib/animations/animations.min.css), copie todo su contenido y péguelo en el nuevo archivo, envolviéndolo en una 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
}

El umbral de 1000px es un compromiso: la mayoría de las tabletas en orientación vertical (768-1024px) también tendrán las animaciones desactivadas. Si necesita animaciones en tabletas, baje el límite a 768px.

El resultado debería verse así:

Paso 3: Encole la nueva hoja de estilos

Solo falta indicarle a WordPress dónde se encuentra nuestro CSS personalizado. Añada lo siguiente al mismo functions.php después del código anterior:

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 función get_stylesheet_directory_uri() devuelve la URL del tema hijo (o del tema padre si no existe tema hijo). Esto es más seguro que escribir la ruta manualmente.

Ahora abra su sitio en un teléfono o en las herramientas de desarrollo (F12 → Alternar barra de herramientas de dispositivo). Las animaciones deberían desaparecer en pantallas de menos de 1000px de ancho, mientras funcionan como antes en escritorio.

Enfoque alternativo: detectar el tamaño de pantalla mediante sesión PHP

No recomendamos este método para uso permanente, pero es útil como concepto para otras tareas donde la lógica depende del ancho de pantalla.

La idea: una sesión PHP guarda las dimensiones de la ventana desde cookies, y functions.php decide si desactivar las animaciones basándose en estos datos. Las desventajas son obvias: la sesión añade carga al servidor, la caché se rompe (una página con session_start() no se almacena en caché correctamente) y la primera visita del usuario siempre ocurre sin datos de tamaño de pantalla.

Si comprende estas limitaciones y está dispuesto a aceptarlas, aquí tiene el código:

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
}

Para producción, el método de los pasos 1 a 3 es más fiable: no depende de sesiones y funciona bien con cualquier sistema de caché.

Vídeo: ajustes ocultos de animación de Elementor

El breve vídeo a continuación muestra un enfoque alternativo para desactivar animaciones móviles mediante clases CSS y media queries dirigidas. Este enfoque es útil si no desea eliminar por completo todas las animaciones, sino suprimir selectivamente las más pesadas.

⁉️🤔 Preguntas frecuentes

¿Por qué no puedo simplemente ocultar los elementos animados mediante CSS display: none en móvil?

Porque display: none elimina el elemento visualmente, pero el navegador aún carga y analiza el archivo de animaciones. La página se ralentiza igual, solo que usted no lo ve. Un desencolado completo mediante PHP resuelve el problema a nivel de servidor: 50-80 KB de estilos de animación nunca viajan por la red. En datos móviles, eso se nota.

¿Funcionará este método con otros constructores de páginas como Divi, WPBakery o Gutenberg?

El principio es el mismo, pero el identificador del estilo es diferente. Divi usa divi-style, WPBakery encola js_composer_front y Gutenberg ni siquiera encola un archivo de animaciones separado (todo pasa por wp-block-library). Encuentre el identificador a través del código fuente de la página buscando <link rel='stylesheet' con el nombre del plugin en el id. Luego repita los pasos 1 a 3 con ese identificador.

¿Por qué la media query es exactamente de 1000px y no los 768px estándar?

El punto de ruptura estándar de 768px cubre teléfonos y tabletas pequeñas. Pero las tabletas de 9-10 pulgadas en modo vertical (~800px) aún sufren con las animaciones, ya que la potencia de su procesador y el ancho de banda Wi-Fi no son suficientes para una renderización fluida. El umbral de 1000px cubre todas las tabletas, dejando las animaciones solo para escritorios completos. Si lo prefiere, puede bajarlo a 768px: simplemente reemplace 1000 en el CSS por su valor.

¿Es esto realmente necesario en 2026, cuando todos los smartphones tienen procesadores de gama alta?

La brecha entre los dispositivos de gama alta y los económicos sigue siendo enorme. Según datos de Statcounter para 2026, un tercio del tráfico móvil proviene de dispositivos con menos de 2 GB de RAM. Además, las redes móviles: en regiones fuera de las grandes ciudades, las velocidades a menudo están por debajo de 5 Mbps. Cada kilobyte de animaciones ahorrado reduce el tiempo hasta la primera interacción entre 100 y 300 ms, y eso se correlaciona directamente con la conversión.

¿Puedo hacer lo mismo mediante un plugin en lugar de código en functions.php?

Sí, pero no lo recomendamos. Cada plugin adicional añade su propia sobrecarga, y para una tarea de 15 líneas eso es excesivo. Si le da miedo el código, instale el plugin gratuito Code Snippets, pegue el código allí (tiene una casilla para activar/desactivar, y es más difícil cometer errores que en functions.php). Un plugin específico para desactivar animaciones es desproporcionado.

Desactivar animaciones o no: recomendación final

En resumen: desactívelas en móvil. Las ganancias en velocidad de carga y suavidad de desplazamiento superan la pérdida estética. Un usuario que visita desde su teléfono quiere información aquí y ahora, no esperar a que un bloque hero animado termine de cargar.

El método básico de tres pasos anterior resuelve completamente la tarea y funciona bien con la caché. Configúrelo una vez, pruébelo en un par de páginas mediante PageSpeed Insights y olvídese del tema. Y si necesita animación selectiva para elementos específicos, combine el enfoque del vídeo con media queries dirigidas a clases CSS concretas.

¿Le gustó esta guía? Consulte nuestros otros tutoriales de Elementor: optimización de fuentes, widgets de carga diferida y configuración de breadcrumbs para tipos de contenido personalizados.