--- title: "Criar preloader no Elementor em 5 passos: O guia essencial" description: "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." url: https://full.services/criar-preloader-no-elementor/ date: 2026-06-28 author: "Clayton Margiotti" --- --- # Criar preloader no Elementor em 5 passos: O guia essencial **Criar preloader no Elementor** leva minutos em Site Settings e melhora a percepção de velocidade, mas não corta o tempo real de carregamento. Segundo o [Google web.dev](https://web.dev/articles/lcp) (2026), a meta de LCP é 2,5 segundos ou menos no percentil 75. O preloader cobre a tela em branco; o ganho real vem de cache e imagens leves. Configure com delay curto. 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](https://full.services/guias/domine-o-elementor) e todos os [artigos de Elementor da FULL](https://full.services/elementor/). --- ## 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](https://elementor.com/help/page-transitions/). 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](https://full.services/glossario/lcp/) já é baixo só adiciona atraso artificial sem retorno de experiência.
Criar preloader no Elementor: quando usar e o que esperar
Cenário da página Vale o preloader? Motivo técnico
Galeria ou vídeo pesadoSim, suaviza a montagemEsconde o flash de layout cru
Landing page enxutaNão, adia o conteúdoLCP já abaixo de 2,5 s
Site com fontes externasSim, evita o salto de fonteCobre o FOUT até o render
Blog de texto simplesNão, atrito desnecessárioRender quase instantâneo
## 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](https://full.services/glossario/widget-wordpress/) 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](https://full.services/glossario/cache-de-pagina/), compressão de imagem e menos scripts de terceiros. Um site que respeita os [Core Web Vitals](https://full.services/glossario/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](https://full.services/melhore-a-performance-do-elementor-com-wp-rocket-7-dicas-essenciais/). ## 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](https://full.services/elementor-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](https://full.services/planos) e veja a página da solução em [Elementor PRO](https://full.services/solucoes/elementor-pro) para entender o que muda na versão paga. ## Perguntas frequentes sobre criar preloader no Elementor
É possível criar preloader no Elementor sem instalar plugin extra?

Sim, é possível e recomendado. O preloader é um recurso nativo do Elementor PRO, configurado em Site Settings sem nenhum plugin adicional. Usar um plugin de terceiros para a mesma função só cria conflito de scripts e peso extra. Mantenha apenas o recurso oficial do Elementor PRO ativo, defina o tipo de animação e um delay curto, e o site inteiro passa a exibir o preloader na primeira visita sem código.

Por que o preloader faz meu site parecer mais lento em vez de rápido?

Porque o delay está alto demais. O campo Preloader delay (ms) adia a revelação da página, e um valor acima de 1 segundo segura o conteúdo sem motivo. O preloader não muda o tempo real de carregamento, então cada milissegundo de atraso é percebido como lentidão pura. Reduza o delay para abaixo de 500 ms e a animação volta a soar natural, cobrindo só o intervalo real de montagem da página.

Criar preloader no Elementor melhora o LCP e os Core Web Vitals?

Não. O preloader é uma cobertura visual e não reduz o LCP medido pelo Google, que continua contando o tempo real até o conteúdo principal aparecer. A meta de LCP é 2,5 segundos ou menos. Para melhorar Core Web Vitals de verdade, ataque cache de página, imagens pesadas e scripts de terceiros. O preloader melhora a percepção, mas não o número que o Google usa para ranquear o site.

Qual tipo de animação de preloader escolher no Elementor?

Escolha uma animação discreta alinhada à marca, como Circle, Bouncing Dots ou Pulse, entre as opções nativas do Elementor PRO. Animações chamativas demais cansam o visitante recorrente e roubam atenção do conteúdo. Defina também cor com bom contraste e duração entre 400 e 800 ms para a animação parecer fluida. O objetivo é suavizar a espera, não criar um espetáculo visual a cada carregamento de página.

O preloader do Elementor aparece toda vez que o visitante muda de página?

Não, ele aparece só na primeira chegada ao site. Segundo a documentação do Elementor, o preloader cobre a visita inicial ao domínio, enquanto as page transitions atuam na navegação entre páginas internas. Se você quer animação ao trocar de página, use as transições, não o preloader. Misturar os dois sem critério gera animação dupla e passa sensação de lentidão para quem navega pelo site.

## 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](https://full.services/guias/domine-o-elementor) aprofunda os ajustes, e o [FULL Academy](https://full.services/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.

--- ## Metadados Estruturados (Schema.org) ```json-ld { "@context": "https://schema.org", "@graph": [ { "@type": "TechArticle", "@id": "https://full.services/criar-preloader-no-elementor/#article", "headline": "Criar preloader no Elementor em 5 passos: O guia essencial", "description": "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.", "url": "https://full.services/criar-preloader-no-elementor/", "datePublished": "2026-06-28T09:00:00-03:00", "dateModified": "2026-06-28T09:00:00-03:00", "inLanguage": "pt-BR", "articleSection": "Elementor", "keywords": [ "criar preloader no elementor", "Elementor", "WordPress Page Builders", "Web Design" ], "author": { "@id": "https://full.services/#person-clayton" }, "publisher": { "@id": "https://full.services/#org" }, "about": [ { "@type": "Thing", "name": "Elementor", "@id": "https://www.wikidata.org/wiki/Q96322879", "sameAs": "https://www.wikidata.org/wiki/Q96322879" }, { "@type": "Thing", "name": "WordPress Page Builders" }, { "@type": "Thing", "name": "Web Design" } ], "mentions": [ { "@type": "Organization", "name": "Elementor", "url": "https://elementor.com/", "@id": "https://www.wikidata.org/wiki/Q96322879", "sameAs": "https://www.wikidata.org/wiki/Q96322879" }, { "@type": "Organization", "name": "WordPress", "url": "https://wordpress.org/", "@id": "https://www.wikidata.org/wiki/Q13166", "sameAs": "https://www.wikidata.org/wiki/Q13166" } ], "mainEntityOfPage": { "@type": "WebPage", "@id": "https://full.services/criar-preloader-no-elementor/" }, "wordCount": 2276, "citation": [ { "@type": "CreativeWork", "name": "web.dev", "url": "https://web.dev/articles/lcp", "publisher": { "@type": "Organization", "name": "web.dev" } }, { "@type": "CreativeWork", "name": "Elementor Academy/Help", "url": "https://elementor.com/help/page-transitions/", "publisher": { "@type": "Organization", "name": "Elementor Academy/Help" } } ] }, { "@type": "FAQPage", "@id": "https://full.services/criar-preloader-no-elementor/#faq", "isPartOf": { "@id": "https://full.services/criar-preloader-no-elementor/#article" }, "mainEntity": [ { "@type": "Question", "@id": "https://full.services/criar-preloader-no-elementor/#faq-q1", "name": "É possível criar preloader no Elementor sem instalar plugin extra?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Sim, é possível e recomendado. O preloader é um recurso nativo do Elementor PRO, configurado em Site Settings sem nenhum plugin adicional. Usar um plugin de terceiros para a mesma função só cria conflito de scripts e peso extra. Mantenha apenas o recurso oficial do Elementor PRO ativo, defina o tipo de animação e um delay curto, e o site inteiro passa a exibir o preloader na primeira visita sem código.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/criar-preloader-no-elementor/#faq-q2", "name": "Por que o preloader faz meu site parecer mais lento em vez de rápido?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Porque o delay está alto demais. O campo Preloader delay (ms) adia a revelação da página, e um valor acima de 1 segundo segura o conteúdo sem motivo. O preloader não muda o tempo real de carregamento, então cada milissegundo de atraso é percebido como lentidão pura. Reduza o delay para abaixo de 500 ms e a animação volta a soar natural, cobrindo só o intervalo real de montagem da página.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/criar-preloader-no-elementor/#faq-q3", "name": "Criar preloader no Elementor melhora o LCP e os Core Web Vitals?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Não. O preloader é uma cobertura visual e não reduz o LCP medido pelo Google, que continua contando o tempo real até o conteúdo principal aparecer. A meta de LCP é 2,5 segundos ou menos. Para melhorar Core Web Vitals de verdade, ataque cache de página, imagens pesadas e scripts de terceiros. O preloader melhora a percepção, mas não o número que o Google usa para ranquear o site.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/criar-preloader-no-elementor/#faq-q4", "name": "Qual tipo de animação de preloader escolher no Elementor?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Escolha uma animação discreta alinhada à marca, como Circle, Bouncing Dots ou Pulse, entre as opções nativas do Elementor PRO. Animações chamativas demais cansam o visitante recorrente e roubam atenção do conteúdo. Defina também cor com bom contraste e duração entre 400 e 800 ms para a animação parecer fluida. O objetivo é suavizar a espera, não criar um espetáculo visual a cada carregamento de página.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/criar-preloader-no-elementor/#faq-q5", "name": "O preloader do Elementor aparece toda vez que o visitante muda de página?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Não, ele aparece só na primeira chegada ao site. Segundo a documentação do Elementor, o preloader cobre a visita inicial ao domínio, enquanto as page transitions atuam na navegação entre páginas internas. Se você quer animação ao trocar de página, use as transições, não o preloader. Misturar os dois sem critério gera animação dupla e passa sensação de lentidão para quem navega pelo site.", "author": { "@id": "https://full.services/#org" } } } ] }, { "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://full.services/" }, { "@type": "ListItem", "position": 2, "name": "Elementor", "item": "https://full.services/elementor/" }, { "@type": "ListItem", "position": 3, "name": "Criar preloader no Elementor em 5 passos: O guia essencial", "item": "https://full.services/criar-preloader-no-elementor/" } ] }, { "@type": "Organization", "@id": "https://full.services/#org", "name": "FULL Services", "url": "https://full.services", "logo": { "@type": "ImageObject", "url": "https://full.services/wp-content/uploads/full-services-logo.png", "width": 200, "height": 60 }, "sameAs": [ "https://www.instagram.com/fullservicesbr", "https://www.facebook.com/fullservices.br", "https://www.linkedin.com/company/fullservicesbr/" ], "knowsAbout": [ "WordPress", "WordPress Hosting", "Web Development", "Performance Optimization", "WordPress Security", "SEO para WordPress" ], "award": [ "Gold Medal - The WP Weekly Awards 2023 (https://thewpweekly.com/awards-2023/)", "Gold Medal - The WP Weekly Awards 2024 (https://thewpweekly.com/awards-2024/)" ], "hasCredential": { "@type": "EducationalOccupationalCredential", "credentialCategory": "certification", "name": "CVE Numbering Authority (CNA)", "description": "Autoridade de numeração de vulnerabilidades (CVE) para o ecossistema WordPress, autorizada a atribuir IDs CVE. Certificação válida desde 2022-05-03, com abrangência global.", "url": "https://www.cve.org/PartnerInformation/ListofPartners/partner/FULL", "recognizedBy": { "@type": "Organization", "name": "CISA — Cybersecurity and Infrastructure Security Agency", "url": "https://www.cisa.gov/", "sameAs": "https://www.cisa.gov/" } } }, { "@type": "Person", "@id": "https://full.services/#person-clayton", "name": "Clayton Margiotti", "givenName": "Clayton", "familyName": "Margiotti", "jobTitle": "Fundador e CEO da FULL Services", "description": "Fundador e CEO da FULL Services, plataforma WordPress SaaS com 50 mil clientes e 150 mil sites conectados, e anchor do ecossistema Elevor Global. Em 2024 conduziu a FULL a se tornar a primeira e unica empresa brasileira aprovada como CVE Numbering Authority sob a CISA (DHS/EUA). Mais de 20 anos construindo empresas digitais, com 13+ reconhecimentos internacionais (Facebook, GPTW, ONU, RD Summit).", "url": "https://full.services/sobre-nos/", "image": "https://full.services/wp-content/uploads/2026/05/clayton-margiotti.jpg", "sameAs": [ "https://www.linkedin.com/in/cmargiotti/" ], "knowsAbout": [ "Artificial Intelligence", "Cybersecurity", "CVE Program", "WordPress Enterprise", "SaaS Platforms", "Digital Infrastructure", "Technology Entrepreneurship", "Company Building", "Business Leadership", "Digital Growth" ], "hasOccupation": { "@type": "Occupation", "name": "Fundador e CEO", "occupationalCategory": "11-1011.00" }, "knowsLanguage": [ { "@type": "Language", "name": "Portuguese", "alternateName": "pt-BR" }, { "@type": "Language", "name": "English", "alternateName": "en" } ], "memberOf": { "@type": "Organization", "name": "CVE Numbering Authorities", "url": "https://www.cve.org/", "sameAs": "https://www.cve.org/" }, "alumniOf": [ { "@type": "EducationalOrganization", "name": "Global Scaling Academy (Blitzscaling Program)", "url": "https://www.blitzscalingacademy.com" }, { "@type": "EducationalOrganization", "name": "Esade", "url": "https://www.esade.edu" }, { "@type": "EducationalOrganization", "name": "Business School Sao Paulo (BSP)", "url": "https://bsp.edu.br/" }, { "@type": "EducationalOrganization", "name": "Tera", "url": "https://somostera.com" }, { "@type": "EducationalOrganization", "name": "Le Wagon", "url": "https://www.lewagon.com" }, { "@type": "EducationalOrganization", "name": "FIAP", "url": "https://www.fiap.com.br" }, { "@type": "EducationalOrganization", "name": "PUCRS", "url": "https://online.pucrs.br/" } ], "award": [ "Digital Disruptor – Engaging Experiences Master (Globant, 2021)", "Maior ROI do e-commerce brasileiro – Letrissimas (Facebook, 2019)", "1º lugar – Melhores Empresas para Trabalhar no Brasil – Eleva Digital (Great Place to Work, 2018)", "Case global de educacao no Facebook – Metodo SUPERA (Facebook, 2017)", "Maquina de Geracao de Leads, Agencia do Ano (RD Summit / RD Station, 2015)", "Monthly Recurring Revenue, top performance (RD Summit / RD Station, 2015)", "Quality/Efficiency – Entrepreneurship Training (UNCTAD / PNUD-ONU, 2010)" ], "subjectOf": [ { "@type": "NewsArticle", "url": "https://www.globant.com/news/globant-reveals-inaugural-digital-disruptors-award-winners", "publisher": { "@type": "Organization", "name": "Globant" } }, { "@type": "NewsArticle", "url": "https://www.prnewswire.com/news-releases/letrissimas-com-e-destaque-do-e-commerce-brasileiro-com-maior-roi-de-2018-877517801.html", "publisher": { "@type": "Organization", "name": "PR Newswire" } }, { "@type": "NewsArticle", "url": "https://www.segs.com.br/seguros/102599-gestao-de-pessoas-garante-mais-lucro-as-empresas", "publisher": { "@type": "Organization", "name": "Segs" } }, { "@type": "NewsArticle", "url": "https://franquiaeducacional.com/negocios-inovadores-facebook-elege-supera-case-mundial-de-educacao", "publisher": { "@type": "Organization", "name": "Franquia Educacional" } }, { "@type": "NewsArticle", "url": "https://acontecendoaqui.com.br/marketing/resultados-digitais-divulga-vencedores-do-premio-agencias-de-resultados-2015-durante-o-rd", "publisher": { "@type": "Organization", "name": "Acontecendo Aqui" } } ], "worksFor": { "@type": "Organization", "@id": "https://full.services/#org" } }, { "@type": "HowTo", "@id": "https://full.services/criar-preloader-no-elementor/#howto", "isPartOf": { "@id": "https://full.services/criar-preloader-no-elementor/#article" }, "name": "Passo a passo: criar preloader no elementor", "description": "Guia passo a passo sobre criar preloader no elementor para WordPress.", "url": "https://full.services/criar-preloader-no-elementor/", "totalTime": "PT30M", "author": { "@type": "Organization", "@id": "https://full.services/#org" }, "step": [ { "@type": "HowToStep", "position": 1, "name": "Passo 1: Abra site settings no editor do Elementor", "text": "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." }, { "@type": "HowToStep", "position": 2, "name": "Passo 2: Ative o page loader e escolha o tipo", "text": "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." }, { "@type": "HowToStep", "position": 3, "name": "Passo 3: Defina cor, tamanho e duração da animação", "text": "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." }, { "@type": "HowToStep", "position": 4, "name": "Passo 4: Configure o preloader delay com cuidado", "text": "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." }, { "@type": "HowToStep", "position": 5, "name": "Passo 5: Teste em uma aba anônima e no celular", "text": "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. 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," } ] } ] } ```