Provavelmente, seu site tem números impressionantes para compartilhar, como número de clientes, anos de experiência, projetos bem-sucedidos ou prêmios conquistados.
O desafio é fazer com que os visitantes realmente notem e se importem com essas conquistas, em vez de simplesmente rolar a página. É aí que os contadores de números animados se destacam.
Quando suas estatísticas contam a partir de zero à medida que os visitantes chegam a essa seção, isso cria uma mini-celebração do seu sucesso. Esse movimento chama a atenção e faz com que suas conquistas pareçam mais significativas e confiáveis.
Com base em nossa experiência otimizando sites WordPress para um melhor engajamento, descobrimos que adicionar essas animações é mais fácil do que a maioria das pessoas pensa.
Mostraremos exatamente como adicioná-las usando 2 métodos simples.
💡 Resposta Rápida: Como Adicionar Animações de Números
Se você está com pressa, aqui estão as duas maneiras mais fáceis de adicionar contadores de números ao seu site:
- Método 1: Use um Page Builder (Recomendado). Esta é a melhor opção se você deseja criar uma landing page de alta conversão com designs personalizados. Recomendamos o uso do SeedProd.
- Método 2: Use um Plugin Gratuito. Este método é ideal se você deseja apenas adicionar um contador simples a uma postagem ou página de blog existente sem editar o código.
Antes de Adicionar uma Animação de Contador de Números no WordPress… 📊
Antes de mergulharmos no "como", vamos considerar rapidamente onde esses contadores animados funcionam melhor em seu site WordPress:
- Seções principais da página inicial para exibir conquistas importantes
- Páginas de produtos para destacar taxas de satisfação do cliente
- Páginas "Sobre" para exibir marcos da empresa
- Landing pages para enfatizar prova social
- Seções de preços para mostrar base de clientes ou economias
Com base em nossa experiência, descobrimos que o posicionamento estratégico é tão importante quanto a própria animação. Por exemplo, OptinMonster usa efetivamente um contador de números para exibir as sessões de visitantes mensais otimizadas, colocando-o exatamente onde os clientes potenciais estão tomando suas decisões.
Adicionar e personalizar uma contagem de números no WordPress geralmente requer a edição de código. Isso pode ser complicado para iniciantes que não sabem escrever código.
Dito isso, vamos ver como você pode exibir um contador de números animado no WordPress. Cobriremos 2 métodos simples usando um construtor de sites premium e um plugin gratuito.
Você pode clicar nos links abaixo para pular para a sua seção preferida:
Opção 1: Crie uma Landing Page com Animações de Números (Recomendado)
Se você está construindo uma landing page e deseja controle total sobre a aparência e o comportamento dos seus contadores de números, um page builder é a sua melhor opção.
Testamos dezenas de construtores de páginas WordPress ao longo dos anos, e SeedProd se destaca consistentemente por suas extensas opções de personalização, especialmente para elementos dinâmicos como contadores de números.
Para mais informações, você pode conferir nossa análise aprofundada do SeedProd.
A primeira coisa que você precisará fazer é instalar e ativar o SeedProd. Se precisar de ajuda, consulte nosso guia sobre como instalar um plugin WordPress.
Observação: Para este tutorial, usaremos a versão SeedProd Pro porque ela inclui blocos avançados e permite adicionar um contador. Existe também uma versão SeedProd Lite que você pode experimentar gratuitamente.
Após a ativação, o SeedProd solicitará que você insira a chave de licença. Você pode encontrar a chave de licença na área da sua conta e no e-mail de confirmação da compra.
Em seguida, você precisará ir para SeedProd » Landing Pages no seu painel de administração do WordPress.
O SeedProd permite que você crie páginas de destino personalizadas com design profissional, incluindo uma página de em breve, página de modo de manutenção, página de login e página 404.
Clique no botão ‘Adicionar Nova Página de Destino’.
Depois disso, você pode selecionar um modelo SeedProd para sua página de destino e exibir o contador animado de números.
Simplesmente passe o mouse sobre um modelo e clique no botão de verificação laranja.
Uma janela pop-up será aberta. Basta inserir um nome e URL para a página.
Depois disso, clique no botão ‘Salvar e Começar a Editar a Página’.
Isso iniciará o construtor de arrastar e soltar do SeedProd.
Em seguida, você pode editar seu modelo de página adicionando diferentes blocos ou clicando em elementos existentes na página.
Para adicionar uma contagem animada de números, basta arrastar o bloco Contador do menu à sua esquerda e soltá-lo no modelo.
Depois disso, você pode selecionar o bloco Contador para personalizá-lo ainda mais.
Por exemplo, existem opções para alterar os números inicial e final do contador, inserir um prefixo e sufixo de número e editar o título.
Em seguida, você pode mudar para a aba ‘Avançado’ nas configurações do bloco Contador à sua esquerda.
Aqui, você encontrará mais opções para alterar o estilo, esquema de cores, espaçamento, fonte e mais para o seu bloco Contador.
Em seguida, clique no alternador ‘Salvar’ no topo.
Agora você pode escolher ‘Publicar’ no menu suspenso.
Para ver o contador animado de números em ação, visite seu blog WordPress.
É assim que ficou em nosso site de demonstração.
Opção 2: Adicione uma Animação Rápida de Contagem de Números a Qualquer Página Usando um Plugin
Às vezes, um page builder dá muito trabalho apenas para adicionar um simples contador de números. Isso é especialmente verdade se você quiser adicionar o contador a uma postagem ou página de blog existente.
É aí que o plugin Counter Number ajuda. É uma solução gratuita que permite adicionar animações de números em qualquer lugar do seu site usando shortcodes.
Primeiro, você precisará instalar e ativar o plugin Counter Number. Para mais detalhes, consulte nosso guia sobre como instalar um plugin do WordPress.
Após a ativação, você pode ir para Counter Numbers » All counters no seu painel do WordPress e clicar no botão ‘Add New Counter’.
Depois disso, você pode inserir um título para o seu número contador.
Na versão gratuita, você só pode selecionar o modelo de design simples.
Em seguida, você pode adicionar detalhes ao número contador. Existem opções para editar o título do contador, selecionar um ícone e inserir o valor do número contador.
Você pode adicionar quantos números contadores desejar clicando no botão ‘Add New Counterbox’ na parte inferior.
Além disso, você obtém mais opções de personalização no painel à sua direita.
Por exemplo, o plugin permite alterar a cor do título do contador, a cor do número, o tamanho do ícone, o tamanho da fonte, a família da fonte e mais.
Após fazer as alterações, role de volta para o topo e publique seu contador.
Em seguida, você pode ir para Counter Numbers » All counters no seu painel do WordPress.
Vá em frente e copie o Shortcode do Contador. Ele se parecerá com algo assim:
[COUNTER_NUMBER id=41]
Depois, você pode colocar este elemento de design do WordPress em qualquer lugar do seu site, de posts e páginas a barras laterais.
Basta adicionar um novo post ou página ou editar um existente. Uma vez que você esteja no editor de conteúdo, simplesmente clique no sinal de ‘+’ e adicione um bloco de Shortcode.
Em seguida, você pode colar o shortcode do número do contador no bloco.
A partir daqui, visualize e publique sua página ou post para ver a contagem animada de números em ação.
Bônus: Adicionando um Fundo Animado Cativante 🌟
Após melhorar seu site com contadores de números envolventes, recomendamos elevar seu apelo visual com um fundo animado.
Este elemento torna sua página mais interativa e captura a atenção do seu público assim que ele chega. Além disso, confere um visual de alta qualidade sem sobrecarregar seu conteúdo.
Uma maneira simples de adicionar um fundo animado é usando a biblioteca particle.js. Esta biblioteca JavaScript leve permite efeitos visuais impressionantes com partículas personalizáveis.
Você pode usar o site particle.js de Vincent Garreau para editar suas configurações e gerar o código.
Você pode ajustar o tamanho, cor, forma e movimento delas, e elas respondem a interações do usuário como movimentos do mouse ou cliques.
Na WPBeginner, achamos o recurso de fundo de partículas integrado do SeedProd impressionante. Com o SeedProd, integrar o particle.js às suas páginas é fácil e não requer codificação.
Simplesmente selecione o estilo Personalizado e clique no link fornecido no SeedProd para gerar seu fundo de partículas personalizado.
Para se aprofundar neste método, confira nosso guia detalhado sobre como adicionar um fundo animado no WordPress.
Perguntas Frequentes sobre Adicionar Animação de Contagem de Números
Aqui estão algumas perguntas que nossos leitores fizeram com frequência antes de adicionar animação de contagem de números no WordPress:
Como adiciono um contador no WordPress?
A maneira mais fácil é usar um plugin como SeedProd ou Counter Number. Essas ferramentas permitem que você arraste e solte contadores de números em suas páginas sem escrever código.
Como adiciono animação no WordPress?
Você pode adicionar animações usando um construtor de páginas como SeedProd. Simplesmente selecione um elemento em sua página e escolha um efeito como fade, zoom ou slide.
Como fazer uma contagem regressiva no WordPress?
Você pode fazer uma contagem regressiva usando o bloco de contagem regressiva no SeedProd. Isso é ótimo para criar urgência em páginas de vendas ou páginas de "em breve".
Como adicionar um contador em CSS?
Você pode usar a propriedade CSS counter-increment, mas é complexo para iniciantes. Recomendamos o uso de um plugin do WordPress para adicionar contadores animados sem codificação.
Como adicionar ícones animados no WordPress?
Você pode usar um construtor de páginas como SeedProd para adicionar ícones com efeitos de animação. Simplesmente escolha um ícone e selecione um estilo de animação no menu de configurações.
Como fazer uma lista numerada no WordPress?
Você pode usar o bloco de Lista padrão no editor do WordPress. Basta selecionar a opção de lista numerada na barra de ferramentas e adicionar seus itens.
Esperamos que este artigo tenha ajudado você a aprender como exibir uma animação de contagem de números no WordPress. Você também pode conferir nosso tutorial sobre como adicionar um plano de fundo animado no WordPress e nossa seleção especializada dos melhores construtores de temas WordPress para projetar seu tema perfeito.
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Jiří Vaněk
Eu realmente gosto de usar o SeedProd. É simples, elegante e muito fácil de usar, mesmo para iniciantes. Um contador em um site é útil para muitas coisas, mas é especialmente importante para mim em portfólios pessoais, onde o uso para chamar a atenção para a pessoa a quem o portfólio pertence. O SeedProd torna tudo isso muito mais fácil.
WPBeginner Support
Glad to hear you like the plugin
Admin