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.
Resumo Rápido: Como Adicionar um Contador de Números Animado no WordPress
Método 1: Use o Bloco Contador do SeedProd
Melhor para controle visual total. Você pode arrastar e soltar contadores de números animados em qualquer página sem escrever código.
Método 2: Use o Plugin Contador de Números
Melhor para configuração rápida com um plugin gratuito. Adicione contadores de estatísticas animados usando shortcodes em posts, páginas ou barras laterais.
Você pode usar ambos os métodos para mostrar:
- Total de clientes
- Projetos concluídos
- Assinantes de e-mail
- Anos de atividade
O que são Animações de Contagem de Números?
Uma animação de contagem de números é um efeito visual que faz os números contarem (para cima ou para baixo) em tempo real. Você provavelmente já os viu sendo usados para destacar estatísticas como vendas totais, clientes satisfeitos ou projetos concluídos.
Esses contadores animados ajudam a chamar a atenção para fatos importantes e são perfeitos para construir confiança. Números reais parecem sólidos. Eles mostram seu crescimento, seu alcance e o que você já conquistou.
Aqui estão alguns exemplos:
- 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
Usados corretamente, os contadores de números animados agem como um sinal silencioso: “Este negócio sabe o que está fazendo.”
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 o SeedProd.
SeedProd é o melhor construtor de sites e páginas de destino do WordPress com arrastar e soltar. Seu editor visual ao vivo permite criar facilmente qualquer tipo de layout do WordPress sem código.
Você pode usar o SeedProd para criar o seguinte:
- Temas personalizados do WordPress
- Páginas de destino de alta conversão
- Páginas "Em Breve"
- Telas de modo de manutenção
- Páginas de login do WordPress
- Designs personalizados de página 404
- 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 landing page. 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 com 1 clique.
Passo 1. Instale e Ative o SeedProd
Primeiro, acesse a página de preços do SeedProd e escolha seu plano. Para este guia, usaremos o SeedProd Pro por seu construtor de temas do WordPress com 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 os métodos usam o poderoso construtor de páginas com arrastar e soltar para personalizar seu design. E você pode usar o bloco Contador do SeedProd em temas e landing pages.
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 Landing Page Builder é a sua 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. Assim que você se familiarizar com o funcionamento, volte para a etapa 3 para obter instruções sobre como adicionar o bloco Contador ao seu design.
Observação: Usaremos o Theme Builder com o kit de site Headphone Shop para este tutorial.
Etapa 3. Adicione o Bloco Contador do SeedProd
A próxima etapa envolve adicionar o bloco Contador à sua landing page 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 estamos personalizando um tema do WordPress, começaremos 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.
Também é super fácil adicionar novos elementos à sua página com arrastar e soltar. Mostraremos como fazer isso com o bloco Contador.
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.
O melhor é que não é necessário CSS, HTML, Jquery ou Javascript personalizados para que seu contador fique exatamente como você deseja. Simplesmente 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 autônoma, basta clicar na seta para baixo no botão Salvar e selecionar Publicar. Mas se você estiver usando o Theme Builder, 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:
2. Adicione Animações de Contagem Numérica Usando o Contador Numérico
Se você não está interessado em usar um construtor de páginas de arrastar e soltar para personalizar seu site WordPress, 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 numérico para WordPress como o plugin Contador Numérico da WPShopMart. Ele permite que você adicione 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.
Para começar, baixe, instale e ative o plugin Contador Numérico em seu site WordPress.
Em seguida, vá para Contadores Numéricos » Todos os Contadores na sua área de administração do WordPress e clique no botão Adicionar Novo Contador.
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. Vamos excluir 2 deles clicando no ícone da lixeira e, em seguida, editar 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
Aí está!
Esperamos que este guia tenha ajudado você a encontrar o melhor método para adicionar contadores numéricos animados ao WordPress.
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.
Eu gostaria de poder determinar se quero que a vírgula denote os milhares ou a décima casa. Ex: R$ 1.400,00M vs R$ 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 R$ 1,4M porque é mais conciso.