Looking for an easy way to add number count animations to your WordPress website?
Animated counters are a great way to add interest and direction to your site. They illustrate important statistics, highlight accomplishments, and make your web page more engaging.
In this guide, I’ll show the best ways to add number count animations to WordPress without coding.
How to Add Number Count Animations in WordPress:
What Are Number Count Animations?
Number count animations show numbers increasing or decreasing in real-time. They’re commonly used on websites to highlight stats, milestones, or key numbers, drawing attention as the numbers count up or down to a set goal.
Você pode usar contadores de números animados de várias maneiras diferentes:
- Mostre quantos clientes você tem
- Exibir o número de projetos que você concluiu
- Mostrar o total de assinantes de e-mail
- Comemore o número de anos de sua empresa
Statistics like this are effective social proof. Consumers generally find stats and figures trustworthy, which can help them convert quicker than usual.
Em qual você confiaria mais: uma marca com 22 clientes ou uma com uma base de clientes de mais de 1.213.437?
With that being said, here are 2 easy ways to add number count animations to your WordPress website.
1. Add Number Count Animations with SeedProd
For the first method, I’ll show you how to add animated number counters to your WordPress site using SeedProd.
O SeedProd é o melhor construtor de sites de arrastar e soltar e de páginas de destino para WordPress. Seu editor visual ao vivo permite que você crie facilmente qualquer tipo de layout do WordPress sem código.
Você pode usar o SeedProd para fazer o seguinte:
- Temas personalizados do WordPress
- Páginas de destino de alta conversão
- Páginas em breve
- Telas do modo de manutenção
- Páginas de login do WordPress
- Projetos de páginas 404 personalizadas
- Páginas de conteúdo como sobre, serviços e contato
- E muito mais.
Começar é rápido e fácil com kits completos de sites e modelos de páginas de destino. 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 chamada para ação, galerias responsivas e personalizações com um clique.
Etapa 1. Instalar e ativar o SeedProd
First, go to the SeedProd pricing page and choose your plan. For this guide, we’ll use SeedProd Pro for its drag-and-drop WordPress Theme Builder.
Em seguida, faça login no painel de controle da sua conta e clique na guia Downloads. Nessa tela, clique no botão Download SeedProd Plugin e copie sua chave de licença.
Agora, vá para o site do WordPress e carregue o arquivo .zip do plug-in. Se precisar de ajuda com essa etapa, siga estas instruções sobre como instalar e ativar um plug-in do WordPress.
After installing and activating the plugin, go to SeedProd’s Settings and enter the license key you copied earlier.
Agora, clique no botão Verify Key (Verificar chave ) para salvar os detalhes da licença.
Etapa 2. Criar 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 a partir do zero ou criando uma página de destino autônoma.
Ambos os métodos usam o poderoso construtor de páginas de arrastar e soltar para personalizar seu design. E você pode usar o bloco Counter do SeedProd em temas e páginas de destino.
Para ajudá-lo a decidir, pense na funcionalidade que você deseja que seu site tenha.
O Theme Builder é uma excelente opção para criar um design de site personalizado completo do zero, sem código.
No entanto, se você quiser manter seu tema atual do WordPress e usar o SeedProd para criar páginas individuais, o Landing Page Builder é a melhor solução.
Você pode seguir estes tutoriais passo a passo para cada opção:
Ambos os guias o orientarão na escolha de um modelo e na compreensão do editor visual. Quando estiver familiarizado com seu funcionamento, volte à etapa 3 para obter instruções sobre como adicionar o bloco Counter ao seu design.
Observação: usaremos o Theme Builder com o kit do site Headphone Shop para este tutorial.
Etapa 3. Adicionar o bloco do contador SeedProd
A próxima etapa envolve adicionar o bloco Contador ao design de sua página de destino ou do tema do WordPress. Portanto, clique em Edit Design na página que você deseja personalizar para abri-la no editor visual.
Como estamos personalizando um tema do WordPress, começaremos editando o modelo Homepage:
Ao abrir seu design, você verá um layout semelhante à seguinte captura de tela:
Ele terá blocos e seções à esquerda e uma visualização ao vivo da sua página no lado direito.
Você pode clicar em qualquer lugar da visualização para editar o conteúdo e personalizar qualquer um dos elementos do modelo.
Também é muito fácil adicionar novos elementos à sua página com o recurso de arrastar e soltar. Mostraremos a você como fazer isso com o bloco Counter.
No painel esquerdo, procure o bloco Counter e arraste-o para o design do WordPress.
Quando o bloco estiver no lugar, você poderá clicar nele para ver as diferentes opções de personalização.
Com o bloco Counter, você pode:
- Adicionar um valor de contagem inicial e final
- Digite um prefixo e um sufixo de número
- Definir a duração da animação
- Escolha um separador decimal ou de espaço
- Adicionar um título de contador
- Edite o alinhamento no celular e no desktop
Plus, clicking the Advanced tab offers even more settings for styling your counter. For instance, you can change the counter and title fonts and colors, add shadow effects, adjust the spacing, and select visibility options for mobile and desktop devices.
O melhor de tudo é que não é necessário usar CSS, HTML, Jquery ou Javascript personalizados para que o contador fique exatamente como você deseja. Basta apontar e clicar para estilizar seu contador de números, e sua folha de estilo será atualizada automaticamente.
Continue a personalizar sua página até que esteja satisfeito com a aparência de tudo. Em seguida, clique no botão Save (Salvar ) no canto superior direito para salvar suas personalizações.
Etapa 4. Publique seus contadores de números animados
Depois de adicionar os contadores numéricos animados à sua página personalizada e salvar as alterações, você estará pronto para colocá-los no ar para os visitantes do seu site.
Se estiver criando uma landing page autônoma, basta clicar na seta para baixo no botão Salvar e selecionar Publicar. Mas se estiver usando o Theme Builder, há mais uma etapa.
Saia do construtor de páginas clicando no ícone X e, no painel do construtor de temas, alterne a opção Habilitar tema SeedProd para a posição "Sim".
É isso aí! Agora você pode visualizar seu design para ver a animação do contador de números em ação:
2. Add Number Count Animations Using Counter Number
If you’re not interested in using a drag-and-drop page builder to customize your WordPress site, there is another way to add number count animations to your site without writing code.
Nesse caso, você pode usar um plug-in gratuito de contador de números do WordPress, como o plug-in Counter Number do WPShopMart. Ele permite que você adicione contadores totalmente responsivos ao seu site para exibir estatísticas de números em posts, páginas e áreas da barra lateral.
Esse método não inclui tantas opções de personalização quanto o anterior, mas é uma maneira fácil de adicionar um contador de números animado simples ao seu site com um shortcode.
Para começar, baixe, instale e ative o plug-in Counter Number em seu site do WordPress.
Em seguida, acesse Counter Numbers " All Counters na área de administração do WordPress e clique no botão Add New Counter (Adicionar novo contador ).
Na próxima tela, você verá um construtor de contador simples de arrastar e soltar. Portanto, insira um título para o contador e role para baixo até a seção Add Counter Number (Adicionar número do contador ).
There are already 3 counters set up by default. We’ll delete 2 of them by clicking the trashcan icon, then edit the remaining counter.
Nas configurações do contador, você pode adicionar um título, selecionar um ícone de 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 das fontes
- Família de fontes
Você também pode ocultar o ícone do contador, se preferir. Quando estiver satisfeito com a aparência do contador, copie o shortcode e clique em Publish (Publicar).
Agora você está pronto para adicionar seu contador a uma postagem ou página, portanto, crie ou edite uma página ou postagem do WordPress. Em seguida, localize a seção da página desejada e cole seu shortcode diretamente em um novo bloco de parágrafo.
Por fim, clique em Update (Atualizar) ou Publish (Publicar). Quando você visualizar sua página, o contador de números será automaticamente contado.
Aí está!
Esperamos que este guia tenha ajudado você a encontrar o melhor método para adicionar contadores de números animados ao WordPress.
Pronto para criar contadores de números personalizados sem código?
Talvez você também goste de ler os seguintes tutoriais do WordPress:
- Como adicionar horários comerciais ao WordPress
- Como escurecer uma imagem de fundo sem CSS
- Como adicionar widgets do Twitter ao seu site WordPress
Obrigado pela leitura! Gostaríamos muito de ouvir sua opinião, portanto, fique à vontade para deixar um comentário com perguntas e feedback.
Você também pode nos seguir no YouTube, no X (antigo Twitter) e no Facebook para obter mais conteúdo útil para expandir seus negócios.
Gostaria de poder determinar se quero que o decimal indique a casa dos milhares ou dos décimos, ou seja, $1.400M vs. $1.4M
Isso geralmente se resume à sua preferência pessoal, Kimber, e ao que você acha que faz mais sentido para seus usos. Pessoalmente, sou fã de $1.4M porque é mais conciso.