--- title: "Botoes avancados no Elementor: Guia essencial em 5 passos" description: "Criar botoes avancados no Elementor é dominar dois estados visuais, Normal e Hover, mais a animação de interação do widget Button." url: https://full.services/botoes-avancados-no-elementor/ date: 2026-06-28 author: "Clayton Margiotti" --- # Botoes avancados no Elementor: Guia essencial em 5 passos Criar **botoes avancados no Elementor** exige dominar os estados Normal e Hover, animações de interação e ícones sem quebrar o layout. Segundo a [W3Techs](https://w3techs.com/technologies/details/cm-elementor) (2026), o Elementor roda em 13% de todos os sites da web. Uma animação de hover mal configurada em loop pode elevar o INP acima de 200 ms em mobile. Comece pelo widget Button nativo antes de partir para addons. Criar botoes avancados no Elementor é dominar dois estados visuais, Normal e Hover, mais a animação de interação do widget Button. O widget Button do Elementor entrega controle granular de tipografia, cor, borda, sombra e animação, e usar esse controle bem guia o clique sem sacrificar a performance. Na prática, a maioria dos sites que chegam ao suporte da FULL usa o botão no padrão e ignora os efeitos que aumentam conversão. Este guia mostra o passo a passo aplicado, dos estados visuais aos addons, com link para a categoria de [todos os artigos de Elementor da FULL](https://full.services/elementor/). O foco é técnico: cada ajuste impacta o Core Web Vitals e a leitura por motores de IA. --- ## Primeiros passos: O que muda nos botoes avancados no Elementor Botoes avancados no Elementor se diferenciam do botão padrão por três camadas: estado Hover configurado à parte, animação de interação e ícone alinhado ao texto. Segundo a [documentação oficial do Elementor](https://elementor.com/help/hover-animations/) (2026), o efeito de hover vive na aba Style, separado do estado Normal, o que permite mudar cor e sombra só quando o cursor toca o botão. Esse é o ganho real. A tabela abaixo resume o que cada camada controla e o impacto na decisão de uso. Um [tutorial de Elementor para iniciantes](https://full.services/elementor-tutorial-iniciantes/) cobre a base do editor; aqui o recorte é o botão em si.
Botoes avancados no Elementor: camadas e impacto na decisao
Camada do botao O que controla Impacto na decisao
Estado Hover Cor, sombra e tipografia ao passar o cursor Aumenta o sinal de clique sem poluir o estado Normal
Hover Animation Efeito de movimento como Grow, Pulse ou Float Chama atencao, mas pesa no Core Web Vitals se mal usado
Icone e posicao Simbolo antes ou depois do texto, com espacamento Reforca a acao; SVG sem dimensao gera salto de layout
## Como configurar botoes avancados no Elementor em 5 passos Configurar botoes avancados no Elementor leva cerca de 10 minutos por botão e segue cinco passos diretos, do widget ao teste de performance. O ponto crítico está no terceiro passo: a animação de hover. Nos tickets da FULL, boa parte dos casos de salto de layout em botão vem de ícone SVG sem altura definida, não do efeito em si. Os passos abaixo vivem sob um único procedimento. ### Passo 1: Arraste o widget button para o container Arraste o widget Button para dentro de um container Flexbox, nunca solto na coluna antiga. O Elementor Pro 3.x usa o container Flexbox como padrão desde 2023, e ele resolve o alinhamento de vários botões com a propriedade gap. Um [container Flexbox no Elementor](https://full.services/flexbox-container-no-elementor/) bem montado evita que botões lado a lado quebrem em telas menores. Defina o texto do botão na aba Content e o link de destino logo em seguida. ### Passo 2: Configure o estado normal na aba style Abra a aba Style e ajuste tipografia, cor de fundo e borda do estado Normal primeiro. Use um border-radius entre 4 px e 8 px para um botão moderno sem exagero. A sombra (Box Shadow) deve ser sutil: valores acima de 20 px de blur deixam o botão pesado e competem com o conteúdo. Esse estado é o que o usuário vê antes de qualquer interação, então priorize contraste e legibilidade. ### Passo 3: Defina cor e sombra no estado hover Clique na aba Hover dentro de Style e mude apenas cor de fundo e sombra, mantendo o texto legível. A transição de 200 ms a 300 ms (Transition Duration) entrega uma resposta suave sem travar o clique. Evite trocar o tamanho da fonte no Hover: isso força o navegador a recalcular o layout e gera salto visível. O estado Hover é o sinal mais forte de que o botão é clicável. ### Passo 4: Aplique a hover animation com cautela Vá até a aba Advanced e escolha a Hover Animation no campo dedicado, como Grow, Shrink ou Float. Segundo a documentação do Elementor, o efeito Pulse roda em loop, e é justamente o que mais derruba a performance em mobile. Prefira Grow ou Float, que disparam só no hover real. Um efeito de 0,3 segundos basta para o olho registrar o movimento sem custo de paint contínuo. ### Passo 5: Adicione o icone e valide o resultado Adicione um ícone na aba Content, defina a posição (antes ou depois do texto) e um espaçamento de 8 px a 12 px. Sempre defina largura e altura do ícone para evitar o salto de layout que aparece quando o SVG carrega sem dimensão. Depois, abra o site em modo de visitante e teste o clique em mobile e desktop. Valide o impacto no Core Web Vitals antes de publicar. ## Por que a animacao do botao pesa no Core Web Vitals A animação de hover do botão pesa no Core Web Vitals porque o navegador recalcula o paint a cada ciclo, e isso afeta diretamente o INP. O Elementor Pro 3.x com Hover Animation do tipo Pulse em loop infinito mais botão com sombra pesada em mobile resulta em INP acima de 200 ms e CLS visível antes mesmo da interação do usuário. O efeito parece inofensivo, mas roda continuamente, e é por isso que botoes avancados no Elementor pedem cautela com animação. O [Core Web Vitals](https://full.services/glossario/core-web-vitals/) mede a experiência real de quem navega, e o botão animado fica no topo da página, onde mais importa. Nos tickets da FULL, boa parte dos casos de INP alto em páginas com Elementor envolve animação em loop ou sombra exagerada. A correção tende a ser simples: trocar o efeito contínuo por uma transição disparada só no hover real estabiliza a métrica, e mantém os botoes avancados no Elementor rápidos. ## Quais addons ampliam os botoes avancados no Elementor Os addons ampliam os botoes avancados no Elementor com estilos prontos, efeitos extras e botões condicionais que o widget nativo não traz. Três nomes dominam o ecossistema: Happy Addons, Essential Addons e Crocoblock JetElements, cada um com dezenas de variações de botão. O Happy Addons oferece botões duplos e com gradiente animado; o Essential Addons traz efeitos de preenchimento; o Crocoblock JetElements adiciona lógica dinâmica. O cuidado é não empilhar três addons que fazem a mesma coisa, porque cada um carrega seu próprio CSS e JavaScript, e dois plugins de botão somam de 30 a 60 KB de scripts extras na página. Para um catálogo curado, veja os [melhores addons para Elementor](https://full.services/melhores-addons-elementor/). Em páginas de venda, o botão avançado costuma viver dentro de uma [landing page no Elementor](https://full.services/elementor-landing-page/), onde o efeito de hover precisa equilibrar apelo visual e velocidade de carregamento. A regra prática é escolher um único addon de botão e desativar os widgets que você não usa. ## Como o botao avancado aumenta a taxa de conversao Os botoes avancados no Elementor aumentam a taxa de conversão quando o estado Hover deixa claro que o elemento é clicável e o texto comunica a ação exata. Um botão com [CTA bem escrito](https://full.services/glossario/cta-call-to-action/) e contraste alto pode mudar o comportamento do visitante sem precisar de animação chamativa. O verbo no início ("Comece", "Baixe", "Agende") supera "Clique aqui" em clareza, e essa é a parte de botoes avancados no Elementor que mais move o ponteiro. A [taxa de conversão no WordPress](https://full.services/glossario/taxa-de-conversao-wordpress/) reage mais ao texto e ao contraste do que ao efeito visual, segundo o que a gente vê nos sites da base FULL. Em [páginas de alta conversão no Elementor](https://full.services/plugins-elementor-para-criar-landing-pages-de-alta-conversao/), o botão avançado é o ponto final do funil. Cada animação precisa servir à leitura do clique, nunca distrair dela. Mantenha um contraste de cor de pelo menos 4,5 para 1 entre o texto e o fundo do botão, o mínimo recomendado para acessibilidade. Um botão com hover sutil e texto direto converte mais que um botão animado e genérico. ## Ative os botoes avancados com o Elementor pro Os recursos mais completos de botoes avancados no Elementor vivem no Elementor Pro, que na FULL sai por R$85 por site dentro do plano PRO de R$849. Esse plano reúne o Elementor Pro com mais de 15 plugins premium, então o custo por site cai quando você gerencia vários projetos. Para quem cria botões, landing pages e popups com frequência, faz sentido [ativar o Elementor Pro](https://full.services/elementor-pro) no pacote em vez de comprar a licença avulsa. Veja os valores em [FULL.services/planos](https://full.services/planos) e compare com a licença isolada. A FULL conecta mais de 150 mil sites WordPress, e o plano PRO ativa o Elementor Pro em um clique, sem precisar mexer em chave de licença. A gente vê no suporte da FULL que agências com cinco ou mais sites economizam o suficiente para justificar o bundle já no primeiro mês, somando o que pagariam pelas licenças avulsas de cada plugin. ## Como o botao animado afeta a leitura por IA O botão animado afeta a leitura por motores de IA porque o texto do botão e o atributo de link continuam sendo o que o crawler extrai, não o efeito visual. Mesmo com a Hover Animation mais elaborada, o que alimenta ChatGPT, Perplexity e as Visões Gerais por IA do Google é o texto âncora e o destino do link. Por isso o rótulo do botão precisa ser descritivo. Conteúdos da FULL já aparecem citados em Visões Gerais por IA quando o texto responde direto à intenção de busca. Um botão com label "Agende a consultoria" comunica mais ao motor de IA do que "Saiba mais". A animação agrega ao humano; a clareza do texto agrega à máquina. Em botoes avancados no Elementor, os dois precisam andar juntos para que a página seja útil na busca tradicional e na busca generativa.

Legenda: a separação entre estado Normal e Hover na aba Style é o que torna o botão avançado, não o efeito de movimento.

## Perguntas frequentes sobre botoes avancados no Elementor
E possível criar botoes avancados no Elementor sem o plano Pro?

Sim, a versão gratuita do Elementor já traz o widget Button com estados Normal e Hover, cor, borda e ícone. Você cria um botão avançado funcional sem pagar nada. O que o Elementor Pro adiciona são os botões prontos dos addons premium e algumas Hover Animations extras. Para a maioria dos sites, o botão gratuito com hover bem configurado resolve. Comece pelo nativo e só migre se precisar de efeitos específicos que custam R$85 por site no bundle da FULL.

Por que a animacao de hover do botao derruba o Core Web Vitals?

A animação derruba o Core Web Vitals quando roda em loop contínuo, como o efeito Pulse, porque o navegador recalcula o paint a cada ciclo e isso eleva o INP acima de 200 ms em mobile. Escolha efeitos que disparam só no hover real, como Grow ou Float, e use transições de 200 ms a 300 ms. Evite animação infinita em botões acima da dobra. Essa troca estabiliza a métrica sem perder o apelo visual do botão.

Qual animacao de botao converte mais no Elementor?

Nenhuma animação isolada converte mais: o que move o ponteiro é o texto direto e o contraste do estado Hover. Prefira um efeito sutil de Grow ou uma mudança de cor de fundo no hover, combinado com um verbo de ação no rótulo. Animações chamativas como Pulse podem distrair do clique. Use o efeito para sinalizar que o elemento é clicável, não para enfeitar. A clareza do CTA pesa mais que o movimento na taxa de conversão.

Quanto custa o Elementor Pro por site no bundle da FULL?

O Elementor Pro sai por R$85 por site no plano PRO de R$849 da FULL, que reúne mais de 15 plugins premium. Comprar a licença avulsa do Elementor Pro custa mais caro por site quando você gerencia vários projetos. Para agências com cinco ou mais sites, o bundle compensa porque dilui o custo entre os plugins. Vale fazer a conta: se você já usaria Rank Math Pro, WP Rocket e Crocoblock, o pacote costuma sair abaixo da soma das licenças separadas.

O que sao os estados Normal e Hover no botao do Elementor?

Os estados Normal e Hover são as duas aparências do botão: Normal é como ele fica parado, e Hover é como ele muda quando o cursor passa por cima. No Elementor, você configura cada um na aba Style, em abas separadas. Essa separação é o que define um botão avançado, porque permite trocar cor, sombra e tipografia só na interação. Para quem começa, ajuste o Normal primeiro e depois mude apenas cor e sombra no Hover, mantendo a transição em 200 ms.

## Próximos passos para dominar botoes no Elementor Botoes avancados no Elementor são mais sobre disciplina do que sobre efeitos: estado Hover claro, animação sutil e ícone com dimensão definida resolvem a maioria dos casos. Comece pelo widget nativo, valide o Core Web Vitals e só adicione addons quando o nativo não cobrir a necessidade. Quem já domina o botão pode avançar para [animações profissionais no Elementor](https://full.services/animacoes-profissionais-no-elementor/) e para a configuração completa em [como configurar o Elementor Pro](https://full.services/como-configurar-elementor-pro/). Para continuar aprendendo, o [FULL Academy](https://full.services/academy/) reúne tutoriais, guias e reviews de Elementor em um só lugar. O botão certo, bem configurado, é o detalhe que separa uma página bonita de uma página que converte. --- ## Metadados Estruturados (Schema.org) ```json-ld { "@context": "https://schema.org", "@graph": [ { "@type": "TechArticle", "@id": "https://full.services/botoes-avancados-no-elementor/#article", "headline": "Botoes avancados no Elementor: Guia essencial em 5 passos", "description": "Criar botoes avancados no Elementor é dominar dois estados visuais, Normal e Hover, mais a animação de interação do widget Button.", "url": "https://full.services/botoes-avancados-no-elementor/", "datePublished": "2026-06-28T09:00:00-03:00", "dateModified": "2026-06-28T09:00:00-03:00", "inLanguage": "pt-BR", "articleSection": "Elementor", "keywords": [ "botoes avancados 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/botoes-avancados-no-elementor/" }, "wordCount": 2562, "citation": [ { "@type": "CreativeWork", "name": "W3Techs", "url": "https://w3techs.com/technologies/details/cm-elementor", "publisher": { "@type": "Organization", "name": "W3Techs" } }, { "@type": "CreativeWork", "name": "Elementor Academy/Help", "url": "https://elementor.com/help/hover-animations/", "publisher": { "@type": "Organization", "name": "Elementor Academy/Help" } } ] }, { "@type": "FAQPage", "@id": "https://full.services/botoes-avancados-no-elementor/#faq", "isPartOf": { "@id": "https://full.services/botoes-avancados-no-elementor/#article" }, "mainEntity": [ { "@type": "Question", "@id": "https://full.services/botoes-avancados-no-elementor/#faq-q1", "name": "E possível criar botoes avancados no Elementor sem o plano Pro?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Sim, a versão gratuita do Elementor já traz o widget Button com estados Normal e Hover, cor, borda e ícone. Você cria um botão avançado funcional sem pagar nada. O que o Elementor Pro adiciona são os botões prontos dos addons premium e algumas Hover Animations extras. Para a maioria dos sites, o botão gratuito com hover bem configurado resolve. Comece pelo nativo e só migre se precisar de efeitos específicos que custam R$85 por site no bundle da FULL.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/botoes-avancados-no-elementor/#faq-q2", "name": "Por que a animacao de hover do botao derruba o Core Web Vitals?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "A animação derruba o Core Web Vitals quando roda em loop contínuo, como o efeito Pulse, porque o navegador recalcula o paint a cada ciclo e isso eleva o INP acima de 200 ms em mobile. Escolha efeitos que disparam só no hover real, como Grow ou Float, e use transições de 200 ms a 300 ms. Evite animação infinita em botões acima da dobra. Essa troca estabiliza a métrica sem perder o apelo visual do botão.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/botoes-avancados-no-elementor/#faq-q3", "name": "Qual animacao de botao converte mais no Elementor?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Nenhuma animação isolada converte mais: o que move o ponteiro é o texto direto e o contraste do estado Hover. Prefira um efeito sutil de Grow ou uma mudança de cor de fundo no hover, combinado com um verbo de ação no rótulo. Animações chamativas como Pulse podem distrair do clique. Use o efeito para sinalizar que o elemento é clicável, não para enfeitar. A clareza do CTA pesa mais que o movimento na taxa de conversão.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/botoes-avancados-no-elementor/#faq-q4", "name": "Quanto custa o Elementor Pro por site no bundle da FULL?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "O Elementor Pro sai por R$85 por site no plano PRO de R$849 da FULL, que reúne mais de 15 plugins premium. Comprar a licença avulsa do Elementor Pro custa mais caro por site quando você gerencia vários projetos. Para agências com cinco ou mais sites, o bundle compensa porque dilui o custo entre os plugins. Vale fazer a conta: se você já usaria Rank Math Pro, WP Rocket e Crocoblock, o pacote costuma sair abaixo da soma das licenças separadas.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/botoes-avancados-no-elementor/#faq-q5", "name": "O que sao os estados Normal e Hover no botao do Elementor?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Os estados Normal e Hover são as duas aparências do botão: Normal é como ele fica parado, e Hover é como ele muda quando o cursor passa por cima. No Elementor, você configura cada um na aba Style, em abas separadas. Essa separação é o que define um botão avançado, porque permite trocar cor, sombra e tipografia só na interação. Para quem começa, ajuste o Normal primeiro e depois mude apenas cor e sombra no Hover, mantendo a transição em 200 ms.", "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": "Botoes avancados no Elementor: Guia essencial em 5 passos", "item": "https://full.services/botoes-avancados-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/botoes-avancados-no-elementor/#howto", "isPartOf": { "@id": "https://full.services/botoes-avancados-no-elementor/#article" }, "name": "Passo a passo: botoes avancados no elementor", "description": "Guia passo a passo sobre botoes avancados no elementor para WordPress.", "url": "https://full.services/botoes-avancados-no-elementor/", "totalTime": "PT30M", "author": { "@type": "Organization", "@id": "https://full.services/#org" }, "step": [ { "@type": "HowToStep", "position": 1, "name": "Passo 1: Arraste o widget button para o container", "text": "Arraste o widget Button para dentro de um container Flexbox, nunca solto na coluna antiga. O Elementor Pro 3.x usa o container Flexbox como padrão desde 2023, e ele resolve o alinhamento de vários botões com a propriedade gap. Um container Flexbox no Elementor bem montado evita que botões lado a lado quebrem em telas menores. Defina o texto do botão na aba Content e o link de destino logo em seguida." }, { "@type": "HowToStep", "position": 2, "name": "Passo 2: Configure o estado normal na aba style", "text": "Abra a aba Style e ajuste tipografia, cor de fundo e borda do estado Normal primeiro. Use um border-radius entre 4 px e 8 px para um botão moderno sem exagero. A sombra (Box Shadow) deve ser sutil: valores acima de 20 px de blur deixam o botão pesado e competem com o conteúdo. Esse estado é o que o usuário vê antes de qualquer interação, então priorize contraste e legibilidade." }, { "@type": "HowToStep", "position": 3, "name": "Passo 3: Defina cor e sombra no estado hover", "text": "Clique na aba Hover dentro de Style e mude apenas cor de fundo e sombra, mantendo o texto legível. A transição de 200 ms a 300 ms (Transition Duration) entrega uma resposta suave sem travar o clique. Evite trocar o tamanho da fonte no Hover: isso força o navegador a recalcular o layout e gera salto visível. O estado Hover é o sinal mais forte de que o botão é clicável." }, { "@type": "HowToStep", "position": 4, "name": "Passo 4: Aplique a hover animation com cautela", "text": "Vá até a aba Advanced e escolha a Hover Animation no campo dedicado, como Grow, Shrink ou Float. Segundo a documentação do Elementor, o efeito Pulse roda em loop, e é justamente o que mais derruba a performance em mobile. Prefira Grow ou Float, que disparam só no hover real. Um efeito de 0,3 segundos basta para o olho registrar o movimento sem custo de paint contínuo." }, { "@type": "HowToStep", "position": 5, "name": "Passo 5: Adicione o icone e valide o resultado", "text": "Adicione um ícone na aba Content, defina a posição (antes ou depois do texto) e um espaçamento de 8 px a 12 px. Sempre defina largura e altura do ícone para evitar o salto de layout que aparece quando o SVG carrega sem dimensão. Depois, abra o site em modo de visitante e teste o clique em mobile e desktop. Valide o impacto no Core Web Vitals antes de publicar. A animação de hover do botão pesa no Core Web Vitals porque o navegador recalcula o paint a cada ciclo, e isso afeta diretamente o INP. O Elementor Pro 3.x com Hover Animation do tipo Pulse em loop infinito mais botão com sombra pesada em mobile resulta em INP acima de 200 ms e CLS visível antes mesmo da interação do usuário. O efeito parece inofensivo, mas roda continuamente, e é por isso que botoes avancados no Elementor pedem cautela com animação. O Core Web Vitals mede a experiência real de quem navega, e o botão animado fica no topo da página, onde mais importa. Nos tickets da FULL, boa parte dos casos de INP alto em páginas com Elementor envolve animação em loop ou sombra exagerada. A correção tende a ser simples: trocar o efeito contínuo por uma transição" } ] } ] } ```