Como Adicionar um Contador de Números Animado ao WordPress (Sem Código) 

Quer exibir suas estatísticas, marcos ou conquistas de uma forma mais atraente?

Com um contador de números animado, você pode destacar coisas como total de clientes, assinantes de e-mail ou anos de atividade, e chamar a atenção dos seus visitantes enquanto os números contam em tempo real.

Neste guia, mostrarei como adicionar um contador de números animado no WordPress usando duas ferramentas que não exigem nenhum código.

O Que São Contadores de Números Animados?

Um contador de números animado é um efeito visual onde um número conta para cima (ou para baixo) em tempo real, geralmente para destacar estatísticas como total de clientes, projetos concluídos ou anos de atividade.

Você provavelmente já viu essa animação de contador em sites de negócios e agências, ao lado de sinais de confiança como depoimentos e estudos de caso.

Estudos sobre atenção e design de sites mostram consistentemente que o movimento atrai o olhar. Um contador de estatísticas que anima ao aparecer chama a atenção de uma forma que um número estático simplesmente não consegue. Essa é a diferença entre “2.400 clientes” parados na página e vê-los contarem em tempo real.

Aqui estão alguns exemplos de animações de números que você pode usar:

• Mostre o número de clientes que você ajudou
• Destaque quantos projetos você finalizou
• Exiba seu total de assinantes de e-mail
• Celebre anos de atividade ou prêmios conquistados

Usado corretamente, um bloco de estatísticas do WordPress mostrando seus números reais age como um sinal discreto: “Este negócio sabe o que está fazendo.”

Qual Método Você Deve Usar?

Ambos os métodos abaixo adicionam animações de contagem animadas ao seu site sem código. Veja como escolher:

Método	Ideal para	Personalização
Bloco Contador do SeedProd	Construindo uma nova página ou tema e quer controle visual total sobre fontes, cores, espaçamento e layout mobile	Controle visual total, estilização avançada, sem código
Plugin Counter Number	Mantendo seu tema existente e apenas precisando inserir um contador de estatísticas simples com um shortcode	Estilização básica, baseada em shortcode

1. Adicione Animações de Contagem de Números com SeedProd

Para o primeiro método, mostrarei como adicionar contadores de números animados ao seu site WordPress usando SeedProd.

SeedProd é um construtor de sites de arrastar e soltar para WordPress que permite projetar sites completos, landing pages e temas personalizados sem código.

Você pode adicionar o bloco Contador a qualquer página, landing page ou tema personalizado que você criar com o SeedProd.

Kits de sites completos e modelos de landing page levam você a um design finalizado rapidamente. Além disso, você pode personalizar qualquer design visualmente com blocos do WordPress como contadores de números animados, animações de texto, botões de call-to-action, galerias responsivas e personalizações de 1 clique.

Passo 1. Instale e Ative o SeedProd

Primeiro, vá para a página de preços do SeedProd e escolha seu plano. Para este guia, usarei o SeedProd Pro por seu Theme Builder do WordPress de arrastar e soltar.

Em seguida, faça login no painel da sua conta e clique na aba Downloads. Nesta tela, clique no botão Download SeedProd Plugin e copie sua chave de licença.

Agora vá para o seu site WordPress e carregue o arquivo .zip do plugin. Se precisar de ajuda com esta etapa, siga estas instruções sobre como instalar e ativar um plugin do WordPress.

Após instalar e ativar o plugin, vá para Configurações do SeedProd e insira a chave de licença que você copiou anteriormente.

Agora clique no botão Verificar Chave para salvar os detalhes da sua licença.

Etapa 2. Crie um Layout do WordPress

A próxima etapa envolve a criação de um novo layout no WordPress. Você pode fazer isso com o SeedProd, criando um novo tema do WordPress do zero ou criando uma landing page independente.

Ambos usam o editor visual do SeedProd para personalizar seu design. E você pode usar o bloco Contador do SeedProd em temas e páginas de destino.

Para ajudá-lo a decidir, pense em quais funcionalidades você deseja que seu site tenha.

O Theme Builder é uma excelente opção para criar um design completo de site personalizado do zero, sem código.

No entanto, se você quiser manter seu tema WordPress atual e usar o SeedProd para criar páginas individuais, o Construtor de Páginas de Destino é a sua melhor solução.

Precisa de um guia? Siga um destes guias para configurar seu layout e, em seguida, volte para a Etapa 3 para adicionar o bloco Contador: Como Criar um Tema WordPress Personalizado ou Como Criar uma Página de Destino WordPress.

Observação: Usarei o Construtor de Temas com o kit de site da Headphone Shop para este tutorial.

Etapa 3. Adicione o Bloco Contador do SeedProd

A próxima etapa envolve adicionar o bloco Contador à sua página de destino ou ao design do seu tema WordPress. Portanto, clique em Editar Design na página que deseja personalizar para abri-la no editor visual.

Como estou personalizando um tema WordPress, começarei editando o modelo da Página Inicial:

Ao abrir seu design, você verá um layout semelhante à seguinte captura de tela:

Ele terá blocos e seções à esquerda e uma pré-visualização ao vivo da sua página à direita.

Você pode clicar em qualquer lugar da sua pré-visualização para editar o conteúdo e personalizar qualquer um dos elementos do modelo.

Adicionar novos elementos à sua página leva alguns segundos. Basta arrastar do painel esquerdo e soltar onde desejar.

No painel esquerdo, procure o bloco Contador e arraste-o para o seu design do WordPress.

Depois que o bloco estiver no lugar, você pode clicar nele para ver as diferentes opções de personalização.

Com o bloco Contador, você pode:

• Adicionar um valor inicial e final de contagem
• Inserir um prefixo e sufixo numérico
• Definir a duração da animação
• Escolher um separador decimal ou de espaço
• Adicionar um título ao contador
• Editar o alinhamento em dispositivos móveis e desktop

Além disso, clicar na aba Avançado oferece ainda mais configurações para estilizar seu contador. Por exemplo, você pode alterar as fontes e cores do contador e do título, adicionar efeitos de sombra, ajustar o espaçamento e selecionar opções de visibilidade para dispositivos móveis e desktop.

A melhor coisa é que não requer CSS, HTML, jQuery ou Javascript personalizados para que seu contador fique exatamente como você deseja. Aponte e clique para estilizar seu contador numérico, e sua folha de estilos é atualizada automaticamente.

Continue personalizando sua página até ficar satisfeito com a aparência de tudo. Em seguida, clique no botão Salvar no canto superior direito para salvar suas personalizações.

Etapa 4. Publique Seus Contadores Numéricos Animados

Após adicionar seus contadores numéricos animados à sua página personalizada e salvar suas alterações, você estará pronto para torná-la ativa para os visitantes do seu site.

Se você estiver criando uma página de destino independente, clique na seta para baixo no botão Salvar e selecione Publicar. Mas se você estiver usando o Construtor de Temas, há mais uma etapa.

Saia do construtor de páginas clicando no ícone X, depois no painel do Theme Builder, ative o controle deslizante Habilitar Tema SeedProd para a posição "Sim".

É isso! Agora você pode visualizar seu design para ver sua animação de contador numérico em ação:

O melhor lugar para uma animação de contagem é logo abaixo da sua seção principal ou ao lado de um bloco de depoimentos, onde a prova social é mais provável de levar um visitante a agir.

Um contador mostrando “2.400 clientes atendidos” ao lado de um botão de call-to-action tem um desempenho consistentemente superior ao mesmo CTA sem ele. Seus números já estão fazendo o trabalho no seu negócio, eles só precisam aparecer na página.

2. Adicione Animações de Contagem Numérica Usando o Contador Numérico

Se você preferir adicionar um contador sem um construtor de sites completo, há outra maneira de adicionar animações de contagem numérica ao seu site sem escrever código.

Nesse caso, você pode usar um plugin gratuito de contador de números para WordPress como o Counter Number plugin da WPShopMart. Ele permite adicionar contadores totalmente responsivos ao seu site para exibir estatísticas numéricas em posts, páginas e áreas de barra lateral.

Este método não inclui tantas opções de personalização quanto o anterior, mas é uma maneira fácil de adicionar um contador numérico animado simples ao seu site com um shortcode.

O contador animado funciona em dispositivos móveis?

Em seguida, vá para Counter Numbers » All Counters na sua área de administração do WordPress e clique no botão Add New Counter.

Na tela seguinte, você verá um construtor de contador simples de arrastar e soltar. Portanto, insira um título para o seu contador e, em seguida, role para baixo até a seção Adicionar Número do Contador.

Já existem 3 contadores configurados por padrão. Exclua 2 deles clicando no ícone da lixeira e, em seguida, edite o contador restante.

Nas configurações do contador, você pode adicionar um título, selecionar um ícone para o contador e inserir um valor numérico.

Em seguida, no lado direito, você pode alterar o seguinte:

• Cor e tamanho do ícone
• Cor e tamanho do título do contador
• Cor e tamanho do número do contador
• Pesos da fonte
• Família da fonte

Você também pode ocultar o ícone do contador, se preferir. Quando estiver satisfeito com a aparência do seu contador, copie o shortcode e clique em Publicar.

Agora você está pronto para adicionar seu contador a uma postagem ou página, então crie ou edite uma página ou postagem do WordPress. Em seguida, encontre a seção da página que você deseja e cole seu shortcode diretamente em um novo bloco de parágrafo.

Finalmente, clique em Atualizar ou Publicar. Ao visualizar sua página, o contador numérico aumentará automaticamente.

FAQs Sobre Contadores Numéricos Animados do WordPress

Qual plano preciso para usar o bloco Counter no SeedProd?

O bloco Counter é um bloco PRO, disponível nos planos Plus, Pro e Elite do SeedProd. A versão gratuita do SeedProd não inclui o bloco Counter.

Se você estiver no plano gratuito e quiser contadores de estatísticas animados, o plugin Counter Number (Método 2 acima) é uma alternativa gratuita sólida.

Posso adicionar um contador animado a qualquer página do WordPress ou apenas a páginas de destino?

Com o SeedProd, você pode adicionar o bloco Counter a qualquer tipo de página, incluindo modelos completos de temas do WordPress, páginas de destino, páginas em breve e páginas 404 personalizadas.

Com o plugin Counter Number, você pode adicionar seu contador a qualquer post, página ou área de widget usando o shortcode que ele gera.

Como faço para que o contador de números anime apenas quando rolar para a visualização?

O bloco Counter do SeedProd anima automaticamente quando o bloco entra na viewport. Não há configuração extra para alternar. Assim que a seção rolar para a visualização, a animação de contagem começará.

Se o seu contador disparar antes de estar visível, geralmente é um plugin de cache limpando o gatilho da viewport. Tente limpar o cache do seu site após a publicação.

O contador animado funciona em dispositivos móveis?

Sim. O bloco Counter do SeedProd é totalmente responsivo. Você também pode definir opções de alinhamento separadas para dispositivos móveis e desktop diretamente no painel de configurações do bloco Counter.

O plugin Counter Number também é descrito como totalmente responsivo, embora ofereça menos controles específicos do dispositivo do que o SeedProd.

Posso usar o bloco Counter do SeedProd sem construir um tema completo?

Sim. O bloco Counter funciona em páginas de destino independentes do SeedProd, portanto, você não precisa usar o Theme Builder.

Crie uma nova página de destino no SeedProd, arraste o bloco Counter para a tela e publique. Seu tema WordPress existente permanece no lugar em todos os outros lugares do seu site.

Suas estatísticas merecem mais do que um número estático na página. Com qualquer um dos métodos acima, você pode ter um contador animado funcionando ao vivo em menos de 10 minutos.

Pronto para criar contadores numéricos personalizados sem código?

Você também pode gostar de ler os seguintes tutoriais do WordPress:

• Como Adicionar Horário de Funcionamento ao WordPress
• Como Escurecer uma Imagem de Fundo Sem CSS
• Como Adicionar Widgets do Twitter ao Seu Site WordPress
• Como Adicionar Animações de Texto no WordPress
• Melhores Plugins WordPress para Sites de Negócios

Obrigado por ler! Adoraríamos saber sua opinião, então sinta-se à vontade para participar da conversa no YouTube, X e Facebook para mais conselhos e conteúdo úteis para expandir seus negócios.