Como Mostrar uma Animação de Contador de Números no WordPress

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.

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ção de Contagem de Números Usando um Page Builder
• Opção 2: Adicione uma Animação Rápida de Contagem de Números a Qualquer Página Usando um Plugin
• Bônus: Adicionando um Fundo Animado Cativante 🌟

Opção 1: Crie uma Landing Page com Animação de Contagem de Números Usando um Page Builder

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.

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 construtor de páginas pode ser demais quando tudo o que você precisa é de um simples contador de números. É aí que entra o plugin Counter Number. É uma solução gratuita e leve que faz uma coisa e faz bem: permite adicionar animações de números em qualquer lugar do seu site usando shortcodes simples.

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 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.

Ele oferece vários estilos de animação, e você pode criar efeitos de partículas personalizados para combinar perfeitamente com seu tema. Para se aprofundar neste método, confira nosso guia detalhado sobre como adicionar um fundo animado no WordPress.

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.