--- title: "Animações atraentes no Elementor: Guia técnico em 5 passos" description: "As animações atraentes no Elementor são movimentos controlados de entrada, scroll, hover e mouse que guiam o olhar do visitante sem quebrar a." url: https://full.services/animacoes-atraentes-no-elementor/ date: 2026-06-27 author: "Clayton Margiotti" --- # Animações atraentes no Elementor: Guia técnico em 5 passos Criar **animações atraentes no Elementor** exige equilibrar efeito visual e performance, não apenas ligar animações de entrada. Segundo a [web.dev](https://web.dev/articles/cls) (2026), um CLS bom fica em 0,1 ou menos, e animações via transform e opacity não disparam layout shift. Prefira Motion Effects a top e left, que custam até 120 ms de repaint. Use animação com intenção, nunca como enfeite. As animações atraentes no Elementor são movimentos controlados de entrada, scroll, hover e mouse que guiam o olhar do visitante sem quebrar a estabilidade visual da página. No Elementor PRO, esses efeitos ficam no recurso Motion Effects, dentro da aba Avançado de qualquer seção, coluna ou widget. O erro mais comum não é técnico: é usar animação demais, pesada e sem propósito, o que derruba o LCP e o CLS. Este guia mostra como aplicar animações atraentes no Elementor que aumentam o engajamento e ainda passam nos Core Web Vitals. Para entender o ecossistema completo, veja [todos os artigos de Elementor da FULL](https://full.services/elementor/). --- ## Diagnóstico rápido: Onde vivem as animações atraentes no Elementor O Elementor concentra cinco famílias de efeito, e saber qual usar economiza horas de tentativa. São oito tipos distintos no total: Scrolling Effects, Mouse Effects, Entrance Animations e Hover Animations, todos no recurso Motion Effects. A tabela abaixo mapeia cada um por custo de performance, para você escolher o efeito certo antes de aplicar. Segundo a documentação oficial do [Elementor Help Center](https://elementor.com/help/motion-effects/), os Motion Effects incluem Scrolling Effects (Vertical Scroll, Horizontal Scroll, Transparency, Blur, Rotate e Scale) e Mouse Effects (Mouse Track e 3D Tilt), somados às Entrance e Hover Animations.
Animações atraentes no Elementor: tipo, onde fica e custo de performance
Tipo de animação Onde fica no editor Custo de performance
Entrance Animation Avançado > Motion Effects > Entrance Animation Baixo (usa opacity e transform)
Scrolling Effects Avançado > Motion Effects > Scrolling Effects Médio (recalcula no scroll)
Mouse Effects (3D Tilt) Avançado > Motion Effects > Mouse Effects Médio a alto no mobile
Hover Animation Avançado > aba do widget > Hover Baixo (só dispara no toque)
Na prática, Entrance e Hover são seguras por padrão; Scrolling e Mouse pedem cuidado com o Viewport e o mobile. A maioria dos tickets de Elementor lento que chega ao suporte da FULL tem animação mal calibrada como agravante, raramente como causa única. --- ## Por que animação mal feita destrói seus Core Web Vitals Animar a propriedade errada custa caro: trocar top, left, width ou height força o navegador a recalcular o layout a cada frame, o que adiciona de 50 ms a 120 ms de bloqueio de thread em páginas densas. As animações atraentes no Elementor que evitam isso mantêm o [CLS](https://full.services/glossario/cls/) abaixo de 0,1, o limite de bom no Core Web Vitals. Segundo a [web.dev](https://web.dev/articles/cls), animações feitas com transform e opacity não disparam layout shift, enquanto mexer em top ou left empurra os elementos vizinhos da página. O ponto cego é o Entrance Animation com efeito de baixo para cima: ele desloca o bloco antes de assentar, e se o tema não reservar a altura, o conteúdo abaixo pula. Em páginas Elementor pesadas, isso degrada o [LCP](https://full.services/glossario/lcp/) porque o maior elemento visível demora a estabilizar. A regra de ouro é clara: anime opacity e transform, nunca posição ou tamanho real. Para o quadro completo, leia [como medir Core Web Vitals no WordPress](https://full.services/core-web-vitals-wordpress/). --- ## Passo a passo: Como criar animações atraentes no Elementor Configurar animações atraentes no Elementor leva cerca de 4 minutos por elemento e segue sempre o mesmo caminho na aba Avançado. O fluxo abaixo cobre da animação de entrada ao efeito de scroll, com os valores que mantêm o efeito suave sem penalizar a performance. Cada passo assume Elementor PRO 3.x, já que os Scrolling Effects e Mouse Effects são recursos exclusivos da versão PRO. ### Passo 1: Selecione o elemento e abra a aba avançado Clique na seção, coluna ou widget que receberá o efeito e vá para a aba Avançado no painel esquerdo. Role até o grupo Motion Effects: ele só aparece nessa aba, nunca em Layout ou Estilo. Esse é o ponto central de toda animação no Elementor, e separa o que é movimento do que é aparência estática. ### Passo 2: Ative a entrance animation com duração curta Abra Motion Effects e selecione uma Entrance Animation, como Fade In Up ou Zoom In. Defina Animation Duration como Fast (cerca de 400 ms) e um Animation Delay de no máximo 200 ms. Durações longas, acima de 1 segundo, fazem o visitante esperar o conteúdo aparecer e aumentam a sensação de site lento, mesmo com boa hospedagem. ### Passo 3: Configure scrolling effects com viewport controlado Ative Scrolling Effects e escolha Vertical Scroll ou Transparency para um efeito sutil. Ajuste o slider de Viewport para que a animação termine antes do elemento sair da tela, evitando movimento brusco. O Vertical Scroll usa transform translate, então não gera layout shift, mas exagerar na velocidade cria enjoo visual em telas grandes. ### Passo 4: Adicione mouse effects só no desktop Para profundidade, ative Mouse Effects com 3D Tilt em cards ou imagens de destaque. No painel de Responsive, desative o efeito no mobile: o 3D Tilt depende de movimento de cursor, inútil no toque e custoso em CPU de celulares modestos. Esse recorte por dispositivo evita travamento em aparelhos de entrada com menos de 4 GB de RAM. ### Passo 5: Teste com cache ativo e meça o resultado Salve, limpe o cache e abra a página no PageSpeed Insights. Compare LCP e CLS antes e depois das animações atraentes no Elementor que você aplicou. Se o CLS subir acima de 0,1, revise qual elemento usa Entrance Animation sem altura reservada. Repetir esse ciclo de medir e ajustar é o que diferencia animação profissional de enfeite. --- ## Quais ferramentas ampliam as animações do Elementor nativo O Elementor nativo cobre boa parte dos casos, mas quatro ferramentas estendem o repertório sem comprometer a performance quando bem configuradas. O Lottie Widget do próprio Elementor PRO, por exemplo, renderiza animações vetoriais em JSON com peso médio de 30 KB, contra os 500 KB de um GIF equivalente. Happy Addons adiciona efeitos de texto animado e parallax avançado; Essential Addons traz revelações de scroll prontas; e Crocoblock entrega animações baseadas em interação com JetEngine, úteis em catálogos dinâmicos. A escolha depende do objetivo: para microinterações de UX, o Lottie vence em peso; para galerias com revelação progressiva, Essential Addons resolve sem código. Combine no máximo dois plugins de animação por site, porque cada um carrega seu próprio [JavaScript](https://full.services/glossario/javascript-wordpress/), e o acúmulo penaliza o tempo de interação. Quem quer comparar opções pode ver [o que o Essential Addons entrega no Elementor](https://full.services/essential-addons-para-elementor/) e [os melhores add-ons para Elementor](https://full.services/melhores-add-ons-para-elementor-wordpress-saiba-mais/). --- ## Ative o Elementor PRO com curadoria FULL e suporte técnico Os Scrolling Effects, Mouse Effects e o Lottie Widget que tornam as animações atraentes no Elementor realmente impactantes são exclusivos da versão PRO. No plano PRO da FULL, por R$849, você ativa o [Elementor PRO](https://full.services/elementor-pro) junto com outros 16 plugins premium em um clique, o que dá cerca de R$85 por site numa carteira de 10 projetos. A gente vê no suporte da FULL que parte boa dos travamentos de animação some quando o Elementor PRO está atualizado e o cache configurado certo. Conheça os [planos da FULL](https://full.services/planos) e a ficha completa em [soluções Elementor PRO](https://full.services/solucoes/elementor-pro). --- ## Erros comuns que tornam a animação um problema de performance Três padrões aparecem repetidamente quando uma página Elementor fica lenta por causa de animação, e todos têm correção direta. O primeiro é empilhar Entrance Animation em dezenas de widgets simultâneos, o que satura a thread principal e atrasa o LCP em até 1,5 segundo em páginas longas. O segundo erro é deixar Mouse Effects ativo no mobile, drenando bateria e CPU sem entregar valor, já que não há cursor no toque para acionar o 3D Tilt. O terceiro erro é usar GIF animado pesado no lugar de Lottie ou CSS: um GIF de 2 MB sozinho pode dobrar o peso de uma página. A correção em todos os casos passa por medir, cortar o excesso e trocar a técnica, não por desligar tudo. Sites Elementor que combinam animação com cache costumam recuperar a fluidez; quem precisa de um diagnóstico mais amplo encontra caminhos em [por que o Elementor fica lento e como resolver](https://full.services/elementor-lento/). --- ## Perguntas frequentes sobre animações atraentes no Elementor
É possível criar animações atraentes no Elementor sem instalar a versão PRO?

Parcialmente. O Elementor gratuito oferece Entrance Animations e Hover Animations em widgets, o que cobre efeitos básicos de entrada e foco. Porém, Scrolling Effects e Mouse Effects como 3D Tilt e parallax são exclusivos do Elementor PRO 3.x. Sem o PRO, você consegue animações simples, mas não os efeitos de scroll e profundidade que mais prendem o visitante em páginas de venda.

Por que minha animação do Elementor deixa a página lenta e instável?

Quase sempre por animar a propriedade errada ou exagerar na quantidade. Efeitos que mexem em top, left, width ou height forçam o navegador a recalcular o layout e podem custar de 50 ms a 120 ms por frame. Empilhar dezenas de Entrance Animations no mesmo carregamento satura a thread e atrasa o LCP. A correção é usar transform e opacity e limitar animações simultâneas.

Qual a duração ideal para uma Entrance Animation no Elementor?

Entre 300 ms e 500 ms, o equivalente ao preset Fast do Elementor, com delay máximo de 200 ms. Acima de 1 segundo o visitante percebe espera e o site parece lento mesmo em boa hospedagem. Durações muito curtas, abaixo de 200 ms, tornam o efeito quase imperceptível. O ponto de equilíbrio fica na faixa Fast, suave o bastante para notar e rápido o bastante para não atrapalhar.

Animações no Elementor prejudicam o SEO e os Core Web Vitals?

Não, quando bem configuradas. Animações feitas com transform e opacity não geram layout shift, então mantêm o CLS abaixo de 0,1, o limite de bom do Core Web Vitals. O risco aparece com efeitos que deslocam blocos sem reservar altura, elevando o CLS, ou com excesso de JavaScript de plugins de animação. Medir no PageSpeed Insights antes e depois confirma se o efeito ficou neutro.

Como desativar animações do Elementor apenas no celular?

No painel de cada efeito, o Elementor oferece controles de Responsive que permitem ligar ou desligar o Motion Effect por dispositivo. Para Mouse Effects como 3D Tilt, desative no mobile, já que dependem de cursor e custam CPU sem entregar valor no toque. Entrance Animations leves podem permanecer, mas reduza a duração no mobile para não prejudicar aparelhos de entrada com pouca memória.

--- ## Próximos passos para animar o Elementor sem perder velocidade Animações atraentes no Elementor funcionam quando seguem uma lógica clara: anime opacity e transform, prefira Entrance e Hover, controle Scrolling pelo Viewport e corte Mouse Effects no mobile, sempre medindo o CLS em 0,1 ou menos no PageSpeed Insights. O teste final é sempre o mesmo: comparar LCP e CLS antes e depois. Animação com propósito guia o olhar; animação por enfeite custa performance e conversão. Para continuar aprendendo, o [FULL Academy](https://full.services/academy/) reúne tutoriais, guias e reviews de Elementor em um só lugar, e o guia [domine o Elementor](https://full.services/guias/domine-o-elementor) aprofunda cada recurso passo a passo.

Legenda: o grupo Motion Effects concentra Entrance, Scrolling e Mouse Effects, todos na aba Avançado.

--- ## Metadados Estruturados (Schema.org) ```json-ld { "@context": "https://schema.org", "@graph": [ { "@type": "TechArticle", "@id": "https://full.services/animacoes-atraentes-no-elementor/#article", "headline": "Animações atraentes no Elementor: Guia técnico em 5 passos", "description": "As animações atraentes no Elementor são movimentos controlados de entrada, scroll, hover e mouse que guiam o olhar do visitante sem quebrar a estabilidade visual da página.", "url": "https://full.services/animacoes-atraentes-no-elementor/", "datePublished": "2026-06-27T09:00:00-03:00", "dateModified": "2026-06-27T09:00:00-03:00", "inLanguage": "pt-BR", "articleSection": "Elementor", "keywords": [ "animacoes atraentes 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/animacoes-atraentes-no-elementor/" }, "wordCount": 2127, "citation": [ { "@type": "CreativeWork", "name": "web.dev", "url": "https://web.dev/articles/cls", "publisher": { "@type": "Organization", "name": "web.dev" } }, { "@type": "CreativeWork", "name": "Elementor Academy/Help", "url": "https://elementor.com/help/motion-effects/", "publisher": { "@type": "Organization", "name": "Elementor Academy/Help" } } ] }, { "@type": "FAQPage", "@id": "https://full.services/animacoes-atraentes-no-elementor/#faq", "isPartOf": { "@id": "https://full.services/animacoes-atraentes-no-elementor/#article" }, "mainEntity": [ { "@type": "Question", "@id": "https://full.services/animacoes-atraentes-no-elementor/#faq-q1", "name": "É possível criar animações atraentes no Elementor sem instalar a versão PRO?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Parcialmente. O Elementor gratuito oferece Entrance Animations e Hover Animations em widgets, o que cobre efeitos básicos de entrada e foco. Porém, Scrolling Effects e Mouse Effects como 3D Tilt e parallax são exclusivos do Elementor PRO 3.x. Sem o PRO, você consegue animações simples, mas não os efeitos de scroll e profundidade que mais prendem o visitante em páginas de venda.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/animacoes-atraentes-no-elementor/#faq-q2", "name": "Por que minha animação do Elementor deixa a página lenta e instável?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Quase sempre por animar a propriedade errada ou exagerar na quantidade. Efeitos que mexem em top, left, width ou height forçam o navegador a recalcular o layout e podem custar de 50 ms a 120 ms por frame. Empilhar dezenas de Entrance Animations no mesmo carregamento satura a thread e atrasa o LCP. A correção é usar transform e opacity e limitar animações simultâneas.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/animacoes-atraentes-no-elementor/#faq-q3", "name": "Qual a duração ideal para uma Entrance Animation no Elementor?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Entre 300 ms e 500 ms, o equivalente ao preset Fast do Elementor, com delay máximo de 200 ms. Acima de 1 segundo o visitante percebe espera e o site parece lento mesmo em boa hospedagem. Durações muito curtas, abaixo de 200 ms, tornam o efeito quase imperceptível. O ponto de equilíbrio fica na faixa Fast, suave o bastante para notar e rápido o bastante para não atrapalhar.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/animacoes-atraentes-no-elementor/#faq-q4", "name": "Animações no Elementor prejudicam o SEO e os Core Web Vitals?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Não, quando bem configuradas. Animações feitas com transform e opacity não geram layout shift, então mantêm o CLS abaixo de 0,1, o limite de bom do Core Web Vitals. O risco aparece com efeitos que deslocam blocos sem reservar altura, elevando o CLS, ou com excesso de JavaScript de plugins de animação. Medir no PageSpeed Insights antes e depois confirma se o efeito ficou neutro.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/animacoes-atraentes-no-elementor/#faq-q5", "name": "Como desativar animações do Elementor apenas no celular?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "No painel de cada efeito, o Elementor oferece controles de Responsive que permitem ligar ou desligar o Motion Effect por dispositivo. Para Mouse Effects como 3D Tilt, desative no mobile, já que dependem de cursor e custam CPU sem entregar valor no toque. Entrance Animations leves podem permanecer, mas reduza a duração no mobile para não prejudicar aparelhos de entrada com pouca memória.", "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": "Animações atraentes no Elementor: Guia técnico em 5 passos", "item": "https://full.services/animacoes-atraentes-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/animacoes-atraentes-no-elementor/#howto", "isPartOf": { "@id": "https://full.services/animacoes-atraentes-no-elementor/#article" }, "name": "Passo a passo: animacoes atraentes no elementor", "description": "Guia passo a passo sobre animacoes atraentes no elementor para WordPress.", "url": "https://full.services/animacoes-atraentes-no-elementor/", "totalTime": "PT30M", "author": { "@type": "Organization", "@id": "https://full.services/#org" }, "step": [ { "@type": "HowToStep", "position": 1, "name": "Passo 1: Selecione o elemento e abra a aba avançado", "text": "Clique na seção, coluna ou widget que receberá o efeito e vá para a aba Avançado no painel esquerdo. Role até o grupo Motion Effects: ele só aparece nessa aba, nunca em Layout ou Estilo. Esse é o ponto central de toda animação no Elementor, e separa o que é movimento do que é aparência estática." }, { "@type": "HowToStep", "position": 2, "name": "Passo 2: Ative a entrance animation com duração curta", "text": "Abra Motion Effects e selecione uma Entrance Animation, como Fade In Up ou Zoom In. Defina Animation Duration como Fast (cerca de 400 ms) e um Animation Delay de no máximo 200 ms. Durações longas, acima de 1 segundo, fazem o visitante esperar o conteúdo aparecer e aumentam a sensação de site lento, mesmo com boa hospedagem." }, { "@type": "HowToStep", "position": 3, "name": "Passo 3: Configure scrolling effects com viewport controlado", "text": "Ative Scrolling Effects e escolha Vertical Scroll ou Transparency para um efeito sutil. Ajuste o slider de Viewport para que a animação termine antes do elemento sair da tela, evitando movimento brusco. O Vertical Scroll usa transform translate, então não gera layout shift, mas exagerar na velocidade cria enjoo visual em telas grandes." }, { "@type": "HowToStep", "position": 4, "name": "Passo 4: Adicione mouse effects só no desktop", "text": "Para profundidade, ative Mouse Effects com 3D Tilt em cards ou imagens de destaque. No painel de Responsive, desative o efeito no mobile: o 3D Tilt depende de movimento de cursor, inútil no toque e custoso em CPU de celulares modestos. Esse recorte por dispositivo evita travamento em aparelhos de entrada com menos de 4 GB de RAM." }, { "@type": "HowToStep", "position": 5, "name": "Passo 5: Teste com cache ativo e meça o resultado", "text": "Salve, limpe o cache e abra a página no PageSpeed Insights. Compare LCP e CLS antes e depois das animações atraentes no Elementor que você aplicou. Se o CLS subir acima de 0,1, revise qual elemento usa Entrance Animation sem altura reservada. Repetir esse ciclo de medir e ajustar é o que diferencia animação profissional de enfeite. --- O Elementor nativo cobre boa parte dos casos, mas quatro ferramentas estendem o repertório sem comprometer a performance quando bem configuradas. O Lottie Widget do próprio Elementor PRO, por exemplo, renderiza animações vetoriais em JSON com peso médio de 30 KB, contra os 500 KB de um GIF equivalente. Happy Addons adiciona efeitos de texto animado e parallax avançado; Essential Addons traz revelações de scroll prontas; e Crocoblock entrega animações baseadas em interação com JetEngine, úteis em catálogos dinâmicos. A escolha depende do objetivo: para microinterações de UX, o Lottie vence em peso; para galerias com revelação progressiva, Essential Addons resolve sem código. Combine no máximo dois plugins de animação por site, porque cada um carrega seu próprio JavaScript, e o" } ] } ] } ```