As animações do Elementor são bonitas no desktop, mas transformam-se num pesadelo lento no mobile. Efeitos de entrada, blocos deslizantes e parallax não só incomodam os utilizadores ao deslizar com o dedo, como também adicionam centenas de milissegundos ao tempo de carregamento da página. E o PageSpeed Insights da Google não perdoa isso.

A parte mais frustrante: as definições do Elementor não têm um interruptor global para desativar animações no mobile. Mas isso não significa que o problema não possa ser resolvido. Em 10 minutos e dois ficheiros, vai remover todas as animações para telefones e tablets, mantendo-as no desktop.

A solução aqui descrita desativa a folha de estilos elementor-animations que o Elementor carrega em todas as páginas. Depois, substituímo-la por CSS personalizado usando uma media query: as animações só funcionam em ecrãs com mais de 1000px de largura.

💡 Visão geral rápida:

• Desative o ficheiro de animações incorporado via wp_dequeue_style no functions.php
• Crie o seu próprio CSS com uma media query de min-width 1000px e mova os estilos de animação originais para lá
• Carregue o novo ficheiro via wp_enqueue_style com prioridade alta
• Para cenários complexos: um método alternativo usando sessão PHP para detetar o tamanho do ecrã

Passo 1: Desativar o ficheiro de animações incorporado

A primeira coisa a fazer é remover da fila o elementor-animations.css padrão. O Elementor regista e carrega este ficheiro em cada pedido, independentemente de as animações serem ou não usadas na página.

Adicione o código ao functions.php do seu tema filho ou através do plugin Code Snippets. Não edite o functions.php do tema pai diretamente: as suas alterações serão perdidas na próxima atualização.

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

O que está a acontecer aqui: wp_dequeue_style remove o ficheiro da fila de saída, wp_deregister_style remove completamente o seu registo. A prioridade alta 9999 é necessária para intercetar as animações depois de todos os outros scripts, uma vez que o Elementor as carrega tardiamente. Dois hooks (wp_enqueue_scripts e wp_head) fornecem uma garantia contra cenários em que o plugin se liga a diferentes fases de carregamento.

Verifique: abra o código fonte da página (Ctrl+U) e procure por elementor-animations. O link para este ficheiro deve ter desaparecido.

Passo 2: Criar CSS personalizado com uma media query

Agora as animações estão desativadas para todos os dispositivos. Para as recuperar no desktop, vamos criar a nossa própria folha de estilos que envolve as regras originais em @media (min-width: 1000px).

Crie uma pasta e um ficheiro no seu tema filho:

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

Abra o animations.min.css original (localizado em wp-content/plugins/elementor/assets/lib/animations/animations.min.css), copie todo o seu conteúdo e cole-o no novo ficheiro, envolvendo-o numa 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
}

O limite de 1000px é um compromisso: a maioria dos tablets na orientação vertical (768-1024px) também terá as animações desativadas. Se precisar de animações em tablets, baixe o limite para 768px.

O resultado deve ser semelhante a isto:

Passo 3: Carregar a nova folha de estilos

Só falta indicar ao WordPress onde está o nosso CSS personalizado. Adicione o seguinte ao mesmo functions.php, após o 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' );

A função get_stylesheet_directory_uri() devolve o URL do tema filho (ou do tema pai, se não existir um tema filho). Isto é mais seguro do que escrever o caminho manualmente.

Agora abra o seu site num telefone ou nas ferramentas de programador (F12 → Alternar barra de ferramentas do dispositivo). As animações devem desaparecer em ecrãs com menos de 1000px de largura, enquanto funcionam como antes no desktop.

Abordagem alternativa: detetar o tamanho do ecrã via sessão PHP

Não recomendamos este método para uso permanente, mas é útil como conceito para outras tarefas em que a lógica depende da largura do ecrã.

A ideia: uma sessão PHP guarda as dimensões da janela a partir de cookies, e o functions.php decide se desativa as animações com base nestes dados. As desvantagens são óbvias: a sessão adiciona carga ao servidor, a cache quebra (uma página com session_start() não faz cache corretamente) e a primeira visita do utilizador acontece sempre sem dados de tamanho de ecrã.

Se compreende estas limitações e está disposto a aceitá-las, aqui está o 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 produção, o método dos passos 1 a 3 é mais fiável: não depende de sessões e funciona bem com qualquer sistema de cache.

Vídeo: definições ocultas de animação do Elementor

O pequeno vídeo abaixo mostra uma abordagem alternativa para desativar animações no mobile através de classes CSS e media queries direcionadas. Esta abordagem é útil se não quiser remover completamente todas as animações, mas sim suprimir seletivamente as mais pesadas.

⁉️🤔 Perguntas frequentes

Porque não posso simplesmente esconder elementos animados via CSS display: none no mobile?

Porque display: none remove o elemento visualmente, mas o navegador continua a carregar e a processar o ficheiro de animações. A página fica lenta na mesma, só não se vê. Uma remoção completa da fila via PHP resolve o problema ao nível do servidor: 50-80 KB de estilos de animação nunca chegam a viajar pela rede. Em dados móveis, isso é notório.

Este método funciona com outros construtores de páginas como Divi, WPBakery ou Gutenberg?

O princípio é o mesmo, mas o identificador (handle) do estilo é diferente. O Divi usa divi-style, o WPBakery carrega js_composer_front e o Gutenberg nem sequer carrega um ficheiro de animações separado (tudo passa pelo wp-block-library). Encontre o handle através do código fonte da página, procurando por <link rel='stylesheet' com o nome do plugin no id. Depois repita os passos 1 a 3 com esse handle.

Porque é que a media query é exatamente 1000px e não os 768px padrão?

O breakpoint padrão de 768px cobre telefones e tablets pequenos. Mas tablets de 9-10 polegadas na vertical (~800px) ainda sofrem com as animações, pois o poder do processador e a largura de banda Wi-Fi não são suficientes para uma renderização fluida. O limite de 1000px cobre todos os tablets, deixando as animações apenas para desktops completos. Se preferir, pode baixá-lo para 768px: basta substituir 1000 no CSS pelo seu valor.

Isto ainda é necessário em 2026, quando todos os smartphones têm processadores topo de gama?

A diferença entre os topo de gama e os dispositivos de entrada é ainda enorme. De acordo com dados do Statcounter para 2026, um terço do tráfego móvel vem de dispositivos com menos de 2 GB de RAM. Além disso, as redes móveis: em regiões fora das grandes cidades, as velocidades estão frequentemente abaixo de 5 Mbps. Cada kilobyte de animações poupado reduz o tempo até à primeira interação em 100-300 ms, e isso correlaciona-se diretamente com a conversão.

Posso fazer o mesmo através de um plugin em vez de código no functions.php?

Sim, mas não o recomendamos. Cada plugin extra adiciona a sua própria sobrecarga e, para uma tarefa de 15 linhas, isso é exagerado. Se tem receio de código, instale o plugin gratuito Code Snippets, cole lá o código (tem uma caixa de seleção para ativar/desativar e é mais difícil cometer erros do que no functions.php). Um plugin específico para desativar animações é excessivo.

Desativar ou não as animações: recomendação final

Resumindo: desative-as no mobile. Os ganhos em velocidade de carregamento e fluidez de deslize superam a perda estética. Um utilizador que visita a partir do telefone quer informação aqui e agora, não esperar que um bloco herói animado termine de carregar.

O método básico de três passos acima resolve totalmente a tarefa e funciona bem com cache. Configure-o uma vez, teste em algumas páginas através do PageSpeed Insights e esqueça o assunto. E se precisar de animação seletiva para elementos específicos, combine a abordagem do vídeo com media queries direcionadas a classes CSS específicas.

Gostou deste guia? Veja os nossos outros tutoriais de Elementor: otimização de fontes, widgets de lazy loading e configuração de breadcrumbs para tipos de conteúdo personalizados.