Criar preloader no Elementor é configurar uma animação de carregamento que cobre a tela enquanto a página monta, evitando o flash de conteúdo cru que assusta o visitante nos primeiros instantes. A gente vê no suporte da FULL que muita gente liga o recurso achando que ele acelera o site, quando na verdade ele só suaviza a espera. Este tutorial mostra como ativar e ajustar o preloader sem inflar o tempo de carregamento, ancorado na documentação do Elementor e nas regras de performance do Google. Para o panorama completo do builder, vale conferir o guia para dominar o Elementor e todos os artigos de Elementor da FULL.

O que é e quando usar o preloader no Elementor

Criar preloader no Elementor faz sentido quando a página tem muitos recursos pesados que demoram a montar, como galerias grandes, vídeos de fundo ou widgets de terceiros. A animação ocupa a tela por alguns milissegundos e some assim que o conteúdo principal aparece, segundo a documentação oficial do Elementor. O ganho é de percepção, não de tempo medido.

O preloader resolve um problema específico: o visitante que vê uma tela meio montada, com texto sem fonte e imagem quebrando o layout. Em vez disso, ele vê uma animação limpa e depois a página pronta. Forçar preloader onde o LCP já é baixo só adiciona atraso artificial sem retorno de experiência.

Como criar preloader no Elementor em site settings

Criar preloader no Elementor começa no painel global do builder: clique no logo do Elementor no topo do editor e abra Site Settings, o mesmo lugar onde você define cores e tipografia globais. O recurso é nativo do Elementor PRO e não exige plugin extra, conforme a documentação do produto. A configuração leva cerca de 2 minutos e vale para o site inteiro de uma vez.

Dentro de Site Settings, o Elementor PRO concentra os controles de carregamento em um único bloco, separado do conteúdo de cada página. Isso significa que o preloader é uma decisão de tema, não de página: você liga uma vez e ele passa a cobrir toda visita inicial ao domínio. O widget de página não interfere nesse comportamento global. As próximas etapas mostram cada decisão em ordem, do clique inicial ao teste final no navegador.

Passo 1: Abra site settings no editor do Elementor

Entre em qualquer página com o editor do Elementor aberto, clique no logo do Elementor no canto superior do painel e selecione Site Settings no menu que abre. Esse painel controla ajustes globais do site, e é dali que sai a configuração do preloader. Confirme que você está no Elementor PRO, porque a versão gratuita não expõe o recurso de carregamento.

Passo 2: Ative o page loader e escolha o tipo

No bloco de carregamento, ligue o Page Loader e escolha o tipo de animação. O Elementor oferece opções como Circle, Circle Dashed, Bouncing Dots, Pulsing Dots, Pulse e Overlap, além de animações de ícone como Spinning e Bounce. Prefira uma animação discreta e alinhada à identidade visual, sem exagero que roube atenção do conteúdo real.

Passo 3: Defina cor, tamanho e duração da animação

Ajuste Color, Size e Animation Duration (ms) para que a animação combine com a marca e não pareça travada. Uma duração entre 400 e 800 ms costuma soar natural; valores acima disso fazem o preloader parecer lento mesmo em página rápida. A cor deve contrastar com o fundo para a animação ficar visível durante a montagem da página.

Passo 4: Configure o preloader delay com cuidado

O campo Preloader delay (ms) define quanto tempo a animação fica na tela antes de revelar a página. Mantenha esse atraso curto, idealmente abaixo de 500 ms, porque cada milissegundo somado aqui adia o conteúdo que o visitante quer ver. Um delay alto transforma o preloader em obstáculo, não em melhoria de experiência.

Passo 5: Teste em uma aba anônima e no celular

Salve as alterações e abra o site em uma aba anônima para ver o preloader como um visitante novo veria, sem cache de sessão atrapalhando. Teste também no celular, onde a conexão é mais lenta e o preloader aparece por mais tempo. Se a animação demorar a sumir, o gargalo não é o preloader, e sim o peso real da página.

Por que o preloader não acelera o site de verdade

Criar preloader no Elementor melhora a sensação de velocidade, mas o tempo real de carregamento não muda: a página leva os mesmos segundos para montar, só que agora com uma cobertura na frente. Segundo o Google web.dev, o que conta para ranqueamento é o LCP medido, e a meta é 2,5 segundos ou menos. O preloader não toca nesse número.

Existe um risco real que a gente vê travar sites no suporte da FULL: usar o preloader como tapa-buraco para esconder uma página pesada. A animação some, o visitante encara a tela em branco que vinha depois, e a frustração volta. O caminho certo é atacar a causa com cache de página, compressão de imagem e menos scripts de terceiros. Um site que respeita os Core Web Vitals dispensa o preloader na maioria das páginas, então criar preloader no Elementor deve vir depois de tratar a velocidade, nunca no lugar dela. Quem inverte a ordem só adia o problema.

Como o preloader interage com transições e cache

Criar preloader no Elementor convive com page transitions e plugins de cache, mas cada um age em um momento distinto da navegação. O preloader aparece só na primeira chegada ao site; as transições atuam quando o visitante muda de página interna, segundo a documentação do Elementor. Misturar os dois sem critério gera animação dupla e sensação de lentidão.

O cache de página adianta a entrega do HTML e pode fazer o preloader sumir quase instantaneamente, porque a página já chega pronta. Em sites com WP Rocket ou Perfmatters ativos, o conteúdo cacheado reduz tanto o tempo de montagem que o preloader vira quase invisível, o que é o resultado ideal. A gente vê no suporte que o conflito mais comum não é técnico, e sim de configuração: delay alto anula o ganho do cache. Alinhe o delay com a realidade do site cacheado e veja como melhorar a performance do Elementor com WP Rocket.

Erros comuns ao criar preloader no Elementor

Os erros ao criar preloader no Elementor quase sempre vêm de configuração exagerada ou de tratar a animação como solução de performance, e 3 deles concentram a maioria dos casos no suporte da FULL. O mais frequente é o delay longo, acima de 1 segundo, que transforma a animação em barreira e faz o site parecer mais lento do que realmente é.

O segundo erro recorrente é ligar o preloader em todas as páginas, inclusive nas leves que já carregam rápido, adicionando atraso onde não havia problema. O terceiro é usar uma animação chamativa demais, que rouba a atenção e cansa o visitante a cada visita. A régua para criar preloader no Elementor sem cair nesses erros é simples: delay curto, uso seletivo e animação discreta. Para diagnosticar lentidão de fundo antes de mexer no preloader, veja por que o Elementor pode ficar lento e ataque a causa raiz primeiro.

Preloader e Elementor PRO no plano FULL: O custo por site

Manter o Elementor PRO em vários sites pesa quando você paga licença avulsa por instalação, e é aí que o plano FULL muda a conta. No bundle da FULL você ativa o Elementor PRO e outros 15 plugins premium a partir de R$849 no plano PRO, com custo de R$85 por site, em vez de comprar cada licença separada. O preloader é um recurso nativo do Elementor PRO, então ele já vem incluído no pacote.

O argumento de R$85 por site vale quando você gerencia mais de um WordPress: o mesmo plano que libera o Elementor PRO também entrega WP Rocket, Perfmatters e o restante do pacote, sem licença solta. A gente vê no suporte que agência com 10 ou mais sites economiza justamente por não renovar dezenas de chaves de plugin todo ano. Ative o pacote completo em FULL.services/planos e veja a página da solução em Elementor PRO para entender o que muda na versão paga.

Perguntas frequentes sobre criar preloader no Elementor

Próximos passos para um preloader que ajuda, não atrapalha

Criar preloader no Elementor é simples e leva poucos minutos: abra Site Settings, ative o Page Loader, escolha uma animação discreta, ajuste cor e tamanho, e mantenha o delay curto antes de testar em aba anônima e no celular. O erro que mais atrapalha é tratar a animação como acelerador, quando ela só suaviza a percepção da espera. Lembre que o tempo real de carregamento depende de cache, imagens leves e menos scripts, não do preloader. Para o trabalho de fundo que de fato deixa o site rápido, o guia para dominar o Elementor aprofunda os ajustes, e o FULL Academy reúne os tutoriais em um só lugar.

Legenda: a configuração do preloader vive em Site Settings, o painel global que vale para todas as páginas do site.