--- title: "Animacoes interativas no Elementor: Guia em 5 passos" description: "As animacoes interativas no Elementor sao efeitos visuais que respondem a uma acao do visitante, como passar o mouse, clicar ou focar um campo." url: https://full.services/animacoes-interativas-no-elementor/ date: 2026-06-28 author: "Clayton Margiotti" --- # Animacoes interativas no Elementor: Guia em 5 passos **Animacoes interativas no Elementor** sao micro-interacoes disparadas por hover, clique ou foco que guiam o olhar e aumentam a conversao sem exigir código. Segundo a [Nielsen Norman Group](https://www.nngroup.com/articles/animation-duration/) (2026), animacoes não essenciais devem durar de 100 a 500 ms. Acima de 500 ms o usuário percebe lentidao, não polimento. Configure cada efeito pensando em ritmo e desempenho. As animacoes interativas no Elementor sao efeitos visuais que respondem a uma acao do visitante, como passar o mouse, clicar ou focar um campo. Elas vivem na aba Avancado de cada elemento e não dependem de rolagem para disparar, ao contrario dos efeitos de scroll. Bem calibradas, dao feedback imediato, reduzem a sensacao de espera e direcionam o clique para o lugar certo. Mal calibradas, pesam no carregamento e irritam. Este guia mostra como aplicar hover, entrance animation, Lottie, transicoes de estado e Mouse Effects sem travar o site. Para o disparo por rolagem, consulte o material complementar sobre [animacoes de rolagem no Elementor](https://full.services/animacoes-de-rolagem-no-elementor/), que cobre um angulo distinto deste. --- ## Primeiros passos: Visao geral das animacoes interativas no Elementor As animacoes interativas no Elementor se dividem em quatro familias nativas e uma via addon, e a escolha certa muda o custo de performance em ate 40%. Hover Animations, Entrance Animations e Mouse Effects (3D Tilt e Mouse Track) vem de fabrica no Elementor PRO 3.x; so Lottie exige widget próprio ou addon como Happy Addons. Saber qual familia resolve cada caso evita carregar JavaScript desnecessario e mantem o [JavaScript do WordPress](https://full.services/glossario/javascript-wordpress/) enxuto.
Animacoes interativas no Elementor: tipo, disparo e custo
Tipo de animacao Disparo Custo de performance
Hover AnimationMouse sobre o elementoBaixo (CSS puro)
Entrance AnimationElemento entra na telaMedio (JS leve)
Mouse Effects (3D Tilt)Movimento do cursorMedio a alto
LottieHover, clique ou loopAlto (arquivo JSON)
Transicao de estadoFoco ou cliqueBaixo (CSS)
Cada familia atende uma intencao diferente, e misturar todas na mesma dobra costuma poluir a experiência. A regra que a gente ve dar certo no suporte da FULL é simples: uma micro-interacao por objetivo, nunca tres competindo pela atencao do visitante. ## Como aplicar hover animations no Elementor PRO Hover Animation é o ponto de partida mais barato das animacoes interativas no Elementor: roda em CSS puro, com custo de zero requisicao extra. No Elementor PRO 3.x é tambem a forma mais simples de criar interatividade. O efeito fica na aba Avancado, na secao Efeitos de Movimento e também direto nos widgets de botao e imagem. Você escolhe entre Grow, Shrink, Pulse, Float, Bob, Bounce e Wobble. A [documentacao oficial do Elementor](https://elementor.com/help/) confirma que esses efeitos vivem no painel do próprio elemento, sem necessidade de código. O ponto critico é a duracao. Um Grow de 200 ms da feedback nitido; o mesmo Grow em 800 ms parece travamento. Em botoes de [CTA (call to action)](https://full.services/glossario/cta-call-to-action/), o hover deve mudar cor, escala ou sombra para sinalizar que o elemento é clicavel. Hover Animation pesada em servidor sem cache de página, combinada com tema cheio de CSS render-blocking, gera jank perceptivel no primeiro passar do mouse. Por isso, prefira efeitos de transform e opacity, que o navegador acelera por GPU, em vez de animar margin ou width. ## Entrance animations: Como controlar o peso no mobile Entrance Animation faz o elemento surgir quando ele aparece no viewport, e é o efeito que mais derruba o desempenho quando usado sem limite, com impacto direto no LCP acima de 2,5 s. Elementor PRO 3.x com Entrance Animation aplicada a mais de 20 elementos por secao em mobile adia a janela de paint e atrasa a interatividade, sem nenhum erro visivel no editor. A correcao é quantitativa, não estetica. Em sites com mais de 15 elementos com Entrance Animation por viewport em hospedagem compartilhada, o atraso de interatividade no celular sobe de forma perceptivel; reduzir para 3 a 5 entradas por dobra e usar duration de 200 a 300 ms estabiliza o LCP. Aplique a entrada a blocos inteiros, como uma coluna ou um container, em vez de animar titulo, subtitulo, botao e icone separadamente. Teste sempre no [PageSpeed Insights](https://pagespeed.web.dev/), porque a percepcao no desktop esconde o custo real que aparece no 4G. ## Mouse effects e transicoes de estado: 3D tilt, mouse track e foco Entre as animacoes interativas no Elementor, os Mouse Effects e as transicoes de estado cobrem a interatividade que reage ao cursor e ao foco, com 3D Tilt liderando o uso por dar profundidade premium a uma landing page. O Elementor PRO 3.x traz dois Mouse Effects nativos de fabrica. O 3D Tilt inclina o elemento conforme o cursor; o Mouse Track desloca o elemento seguindo o movimento do mouse. Ambos ficam na secao Efeitos de Movimento e aceitam ajuste de velocidade e direcao. As transicoes de estado por foco e clique sao mais discretas, porem decisivas em formulários. Um campo que muda a borda ao receber foco reduz erro de preenchimento e ajuda a [taxa de conversao](https://full.services/glossario/taxa-de-conversao-wordpress/). Evite, no entanto, 3D Tilt em mais de dois elementos por tela: cada um adiciona calculo continuo de posicao do mouse e, em maquinas modestas, gera consumo de CPU constante. Mouse Track combinado com Hover Animation no mesmo card costuma brigar pelo mesmo evento e produzir tremor. Quando precisar de controle fino sobre estados, o [Essential Addons para Elementor](https://full.services/essential-addons-para-elementor/) oferece widgets com transicoes prontas que dispensam CSS manual. ## Passo a passo: Como criar uma animacao interativa no Elementor Criar animacoes interativas no Elementor leva cerca de 5 minutos por elemento e segue cinco etapas claras, da selecao ao teste de performance. O fluxo abaixo vale para hover, entrance e Lottie, mudando apenas o painel de origem. Para projetos com muitos efeitos, o [Crocoblock com Elementor](https://full.services/crocoblock-vale-a-pena-veja-como-usar-com-elementor/) e o seu JetElements ampliam o catalogo de interacoes sem escrever código. ### Passo 1: Selecione o elemento e abra a aba avancado Clique no widget, container ou coluna que vai receber a animacao e abra a aba Avancado no painel esquerdo. Ali fica a secao Efeitos de Movimento, onde moram Entrance Animation, Mouse Effects e os controles de hover de muitos widgets. Escolher o elemento certo importa: animar o container inteiro custa menos que animar cada filho. ### Passo 2: Escolha o tipo de animacao e o gatilho Defina se o disparo sera hover, entrada no viewport, foco ou clique. Para botoes, hover; para blocos de destaque, entrance; para campos de formulário, transicao de foco. O gatilho determina o tipo de evento que o navegador vai monitorar, entao escolha o mais barato que resolve o objetivo da secao. ### Passo 3: Ajuste duracao, delay e easing Configure a duracao entre 200 e 400 ms para a maioria dos casos, conforme a faixa de 100 a 500 ms recomendada pela Nielsen Norman Group. Use delay com parcimonia, no máximo 100 ms, e prefira easing suave como ease-out. Duracao alta não deixa o efeito elegante; deixa o site lento aos olhos do visitante. ### Passo 4: Adicione lottie quando precisar de ilustracao animada Use o widget Lottie para animacoes vetoriais ricas, como icones que se montam ou ilustracoes em loop. Importe um arquivo JSON abaixo de 500 KB e carregue por hover ou clique, nunca em loop eager no above-the-fold. O passo a passo de importacao esta no guia sobre [animacoes Lottie no WordPress](https://full.services/como-usar-animacoes-lottie-no-wordpress/). ### Passo 5: Teste no celular e meca o impacto Visualize em modo responsivo, navegue pela página real no celular e rode o PageSpeed Insights. Compare o LCP e o TBT antes e depois de cada efeito. Se a nota cair, reduza a quantidade de animacoes interativas no Elementor por dobra antes de remover o efeito inteiro. --- ## Quando usar Elementor PRO e o bundle da FULL Para liberar todas as animacoes interativas no Elementor sem limite, incluindo Hover Animations, Entrance Animations, Mouse Effects e o widget Lottie, você precisa do Elementor PRO, que custa a partir de US$59 por ano por site na compra avulsa. No plano [PRO da FULL por R$849](https://full.services/planos), esse mesmo Elementor PRO entra no bundle com outros 16 plugins premium. Isso derruba o custo para cerca de R$85 por site quando você gerencia varios projetos. A gente ve no suporte da FULL que a maioria das agencias paga licença avulsa de tres ou quatro plugins separados quando o bundle ja cobriria tudo. Se você trabalha com mais de um site, o [Elementor](https://full.services/glossario/elementor/) PRO no bundle costuma sair mais barato que a soma das licencas individuais. Veja se o [Elementor PRO vale a pena](https://full.services/elementor-pro-vale-a-pena/) para o seu caso antes de decidir. --- ## Perguntas frequentes sobre animacoes interativas no Elementor
Por que as animacoes interativas no Elementor deixam o site mais lento?

As animacoes interativas no Elementor pesam pela quantidade, não pelo efeito isolado. Cada Entrance Animation vira um script que o navegador agenda, e 20 ou mais por secao em mobile adiam o paint e empurram o LCP acima de 2,5 s. Hover Animation em CSS puro quase não pesa; o gargalo aparece com Lottie pesado e dezenas de entradas simultaneas. Reduzir para 3 a 5 efeitos por dobra resolve a maioria dos casos.

E possível criar animacoes interativas no Elementor sem plugin extra?

Sim, é possível. O Elementor PRO 3.x ja traz Hover Animations, Entrance Animations e Mouse Effects (3D Tilt e Mouse Track) de fabrica, todos na aba Avancado, secao Efeitos de Movimento. Você so precisa de addon como Happy Addons ou Essential Addons quando quer widgets de transicao prontos ou efeitos que o nucleo não oferece. Para hover, entrada e tilt, nada alem do PRO é necessário.

Qual a diferenca entre Hover Animation e Entrance Animation no Elementor?

Hover Animation dispara quando o mouse passa sobre o elemento e roda em CSS puro, com custo baixo. Entrance Animation dispara quando o elemento entra no viewport e usa JavaScript leve, com custo medio. Hover serve para sinalizar elementos clicaveis, como botoes; entrance serve para revelar blocos com ritmo. Em mobile, o hover quase não existe, entao priorize entrance e transicoes de foco no celular. Sao as animacoes interativas no Elementor que melhor sobrevivem ao toque.

Quanto custa adicionar animacoes Lottie ao Elementor PRO?

O widget Lottie ja vem no Elementor PRO, sem custo adicional alem da licença, que sai a partir de US$59 por ano por site avulso. No bundle da FULL por R$849 no plano PRO, o Elementor PRO entra com mais 16 plugins, o que reduz o custo para cerca de R$85 por site em projetos multiplos. O arquivo Lottie em si é um JSON gratuito; o cuidado é manter abaixo de 500 KB para não pesar.

O que sao Mouse Effects (3D Tilt e Mouse Track) no Elementor?

Mouse Effects sao animacoes interativas no Elementor que reagem ao movimento do cursor no Elementor PRO 3.x. O 3D Tilt inclina o elemento conforme a posicao do mouse, criando profundidade; o Mouse Track desloca o elemento seguindo o cursor. Ambos ficam em Efeitos de Movimento e aceitam ajuste de velocidade. Use no máximo dois por tela, porque cada um calcula a posicao do mouse continuamente e consome CPU em maquinas modestas.

--- ## Próximos passos para dominar as animacoes no Elementor As animacoes interativas no Elementor entregam mais conversao quando você trata cada efeito como ferramenta de feedback, não de decoracao, e mede o impacto no celular a cada mudanca. Comece com hover em botoes, adicione entrada em blocos de destaque com duracao de 200 a 300 ms e reserve Lottie e 3D Tilt para momentos de destaque, sempre abaixo de cinco efeitos por dobra. Teste no PageSpeed Insights, compare LCP e TBT e priorize transform e opacity, que o navegador acelera por GPU. Para aprofundar o tema e ver todos os tutoriais reunidos, o guia [Domine o Elementor](https://full.services/guias/domine-o-elementor) reune o passo a passo completo, e a categoria com [todos os artigos de Elementor da FULL](https://full.services/elementor/) traz comparativos e reviews para a sua próxima decisao.

Legenda: a secao Efeitos de Movimento concentra hover, entrance e Mouse Effects no Elementor PRO.

--- ## Metadados Estruturados (Schema.org) ```json-ld { "@context": "https://schema.org", "@graph": [ { "@type": "TechArticle", "@id": "https://full.services/animacoes-interativas-no-elementor/#article", "headline": "Animacoes interativas no Elementor: Guia em 5 passos", "description": "As animacoes interativas no Elementor sao efeitos visuais que respondem a uma acao do visitante, como passar o mouse, clicar ou focar um campo.", "url": "https://full.services/animacoes-interativas-no-elementor/", "datePublished": "2026-06-28T09:00:00-03:00", "dateModified": "2026-06-28T09:00:00-03:00", "inLanguage": "pt-BR", "articleSection": "Elementor", "keywords": [ "animacoes interativas 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-interativas-no-elementor/" }, "wordCount": 2221, "citation": [ { "@type": "CreativeWork", "name": "Nielsen Norman Group", "url": "https://www.nngroup.com/articles/animation-duration/", "publisher": { "@type": "Organization", "name": "Nielsen Norman Group" } }, { "@type": "CreativeWork", "name": "Elementor Academy/Help", "url": "https://elementor.com/help/", "publisher": { "@type": "Organization", "name": "Elementor Academy/Help" } }, { "@type": "CreativeWork", "name": "PageSpeed Insights", "url": "https://pagespeed.web.dev/", "publisher": { "@type": "Organization", "name": "PageSpeed Insights" } } ] }, { "@type": "FAQPage", "@id": "https://full.services/animacoes-interativas-no-elementor/#faq", "isPartOf": { "@id": "https://full.services/animacoes-interativas-no-elementor/#article" }, "mainEntity": [ { "@type": "Question", "@id": "https://full.services/animacoes-interativas-no-elementor/#faq-q1", "name": "Por que as animacoes interativas no Elementor deixam o site mais lento?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "As animacoes interativas no Elementor pesam pela quantidade, não pelo efeito isolado. Cada Entrance Animation vira um script que o navegador agenda, e 20 ou mais por secao em mobile adiam o paint e empurram o LCP acima de 2,5 s. Hover Animation em CSS puro quase não pesa; o gargalo aparece com Lottie pesado e dezenas de entradas simultaneas. Reduzir para 3 a 5 efeitos por dobra resolve a maioria dos casos.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/animacoes-interativas-no-elementor/#faq-q2", "name": "E possível criar animacoes interativas no Elementor sem plugin extra?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Sim, é possível. O Elementor PRO 3.x ja traz Hover Animations, Entrance Animations e Mouse Effects (3D Tilt e Mouse Track) de fabrica, todos na aba Avancado, secao Efeitos de Movimento. Você so precisa de addon como Happy Addons ou Essential Addons quando quer widgets de transicao prontos ou efeitos que o nucleo não oferece. Para hover, entrada e tilt, nada alem do PRO é necessário.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/animacoes-interativas-no-elementor/#faq-q3", "name": "Qual a diferenca entre Hover Animation e Entrance Animation no Elementor?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Hover Animation dispara quando o mouse passa sobre o elemento e roda em CSS puro, com custo baixo. Entrance Animation dispara quando o elemento entra no viewport e usa JavaScript leve, com custo medio. Hover serve para sinalizar elementos clicaveis, como botoes; entrance serve para revelar blocos com ritmo. Em mobile, o hover quase não existe, entao priorize entrance e transicoes de foco no celular. Sao as animacoes interativas no Elementor que melhor sobrevivem ao toque.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/animacoes-interativas-no-elementor/#faq-q4", "name": "Quanto custa adicionar animacoes Lottie ao Elementor PRO?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "O widget Lottie ja vem no Elementor PRO, sem custo adicional alem da licença, que sai a partir de US$59 por ano por site avulso. No bundle da FULL por R$849 no plano PRO, o Elementor PRO entra com mais 16 plugins, o que reduz o custo para cerca de R$85 por site em projetos multiplos. O arquivo Lottie em si é um JSON gratuito; o cuidado é manter abaixo de 500 KB para não pesar.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/animacoes-interativas-no-elementor/#faq-q5", "name": "O que sao Mouse Effects (3D Tilt e Mouse Track) no Elementor?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Mouse Effects sao animacoes interativas no Elementor que reagem ao movimento do cursor no Elementor PRO 3.x. O 3D Tilt inclina o elemento conforme a posicao do mouse, criando profundidade; o Mouse Track desloca o elemento seguindo o cursor. Ambos ficam em Efeitos de Movimento e aceitam ajuste de velocidade. Use no máximo dois por tela, porque cada um calcula a posicao do mouse continuamente e consome CPU em maquinas modestas.", "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": "Animacoes interativas no Elementor: Guia em 5 passos", "item": "https://full.services/animacoes-interativas-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-interativas-no-elementor/#howto", "isPartOf": { "@id": "https://full.services/animacoes-interativas-no-elementor/#article" }, "name": "Passo a passo: animacoes interativas no elementor", "description": "Guia passo a passo sobre animacoes interativas no elementor para WordPress.", "url": "https://full.services/animacoes-interativas-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 avancado", "text": "Clique no widget, container ou coluna que vai receber a animacao e abra a aba Avancado no painel esquerdo. Ali fica a secao Efeitos de Movimento, onde moram Entrance Animation, Mouse Effects e os controles de hover de muitos widgets. Escolher o elemento certo importa: animar o container inteiro custa menos que animar cada filho." }, { "@type": "HowToStep", "position": 2, "name": "Passo 2: Escolha o tipo de animacao e o gatilho", "text": "Defina se o disparo sera hover, entrada no viewport, foco ou clique. Para botoes, hover; para blocos de destaque, entrance; para campos de formulário, transicao de foco. O gatilho determina o tipo de evento que o navegador vai monitorar, entao escolha o mais barato que resolve o objetivo da secao." }, { "@type": "HowToStep", "position": 3, "name": "Passo 3: Ajuste duracao, delay e easing", "text": "Configure a duracao entre 200 e 400 ms para a maioria dos casos, conforme a faixa de 100 a 500 ms recomendada pela Nielsen Norman Group. Use delay com parcimonia, no máximo 100 ms, e prefira easing suave como ease-out. Duracao alta não deixa o efeito elegante; deixa o site lento aos olhos do visitante." }, { "@type": "HowToStep", "position": 4, "name": "Passo 4: Adicione lottie quando precisar de ilustracao animada", "text": "Use o widget Lottie para animacoes vetoriais ricas, como icones que se montam ou ilustracoes em loop. Importe um arquivo JSON abaixo de 500 KB e carregue por hover ou clique, nunca em loop eager no above-the-fold. O passo a passo de importacao esta no guia sobre animacoes Lottie no WordPress." }, { "@type": "HowToStep", "position": 5, "name": "Passo 5: Teste no celular e meca o impacto", "text": "Visualize em modo responsivo, navegue pela página real no celular e rode o PageSpeed Insights. Compare o LCP e o TBT antes e depois de cada efeito. Se a nota cair, reduza a quantidade de animacoes interativas no Elementor por dobra antes de remover o efeito inteiro. --- Para liberar todas as animacoes interativas no Elementor sem limite, incluindo Hover Animations, Entrance Animations, Mouse Effects e o widget Lottie, você precisa do Elementor PRO, que custa a partir de US$59 por ano por site na compra avulsa. No plano PRO da FULL por R$849, esse mesmo Elementor PRO entra no bundle com outros 16 plugins premium. Isso derruba o custo para cerca de R$85 por site quando você gerencia varios projetos. A gente ve no suporte da FULL que a maioria das agencias paga licença avulsa de tres ou quatro plugins separados quando o bundle ja cobriria tudo. Se você trabalha com mais de um site, o Elementor PRO no bundle costuma sair mais barato que a soma das licencas individuais. Veja se o Elementor PRO vale a pena para o seu caso" } ] } ] } ```