Deseja exibir suas estatísticas, marcos ou conquistas de uma forma mais atraente?
Com um contador de números animado, você pode destacar itens como o total de clientes, assinantes de e-mail ou anos de atividade e chamar a atenção dos visitantes à medida que os números aumentam em tempo real.
Neste guia, mostrarei a você 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 Counter Block do SeedProd
Best para obter controle visual total. Você pode arrastar e soltar contadores de números animados em qualquer página sem escrever código.
Método 2: Usar o plugin Counter Number
Melhor para configuração rápida com um plugin gratuito. Adicione contadores de estatísticas animados usando códigos de acesso em posts, páginas ou barras laterais.
Você pode usar os dois métodos para mostrar:
- Total de clientes
- Projetos concluídos
- Assinantes de e-mail
- Anos na empresa
O que são animações de contagem de números?
Uma animação de contagem de números é um efeito visual que faz com que os números sejam contados para cima (ou para baixo) em tempo real. Você provavelmente já os viu sendo usados para destacar estatísticas como total de vendas, clientes satisfeitos ou projetos concluídos.
Esses contadores animados ajudam a chamar a atenção para fatos importantes e são perfeitos para gerar confiança. Os números reais parecem sólidos. Eles mostram seu crescimento, seu alcance e o que você já alcançou.
Aqui estão alguns exemplos:
- Mostre o número de clientes que você ajudou
- Destaque o número de projetos que você concluiu
- Exibir seu total de assinantes de e-mail
- Comemore os anos de atividade ou os prêmios recebidos
Se bem utilizados, os contadores de números animados funcionam como um sinal silencioso: "Esta empresa sabe o que está fazendo".
1. Adicionar animações de contagem de números com o SeedProd
Para o primeiro método, mostrarei como adicionar contadores de números animados ao seu site WordPress usando o 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
Primeiro, vá para a página de preços do SeedProd e escolha seu plano. Para este guia, usaremos o SeedProd Pro por seu construtor de temas WordPress de arrastar e soltar.
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.
Depois de instalar e ativar o plug-in, vá para Configurações do SeedProd e insira a chave de licença que você copiou anteriormente.
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
Além disso, clicar na guia Advanced (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 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. Adicionar animações de contagem de números usando o contador de números
Se você não estiver interessado em usar um construtor de páginas do tipo arrastar e soltar para personalizar seu site do WordPress, há outra maneira de adicionar animações de contagem de números ao seu site sem escrever código.
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 ).
Já existem 3 contadores configurados por padrão. Excluiremos dois deles clicando no ícone da lixeira e, em seguida, editaremos o contador restante.
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 o 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.
Perguntas frequentes sobre contadores de números animados para WordPress
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
- Como adicionar animações de texto no WordPress
- Melhores plug-ins do WordPress para sites de negócios
Obrigado pela leitura! Gostaríamos muito de ouvir sua opinião, portanto, sinta-se à vontade para participar da conversa no YouTube, X e Facebook para obter mais conselhos úteis e conteúdo 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.