Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Como mostrar uma animação de contagem de números no WordPress

Sabe o que é melhor do que exibir “Mais de 10.000 clientes satisfeitos” em seu site? Quando esses números realmente contam a partir do zero! Essa animação envolvente, chamada de contador de números, pode fazer com que suas estatísticas e conquistas realmente se destaquem.

Ocasionalmente, usamos contadores de números nas páginas de destino de nossos parceiros quando queremos destacar marcos importantes ou chamar a atenção dos visitantes. Eles são particularmente eficazes para mostrar coisas como contagem de clientes, números de downloads ou projetos concluídos.

A melhor parte? Adicionar esses contadores animados ao seu site WordPress é muito mais simples do que você imagina. Neste guia, mostraremos dois métodos fáceis para criar animações de números atraentes.

How to show a number count animation in WordPress

Antes de adicionar uma animação de contagem de números no WordPress… 📊

Antes de nos aprofundarmos no “como”, vamos considerar rapidamente onde esses contadores animados funcionam melhor em seu site do WordPress:

  • Seções de heróis da página inicial para mostrar as principais conquistas
  • Páginas de produtos para destacar os índices de satisfação do cliente
  • Páginas sobre para exibir os marcos da empresa
  • Páginas de destino para enfatizar a prova social
  • Seções de preços para mostrar a base de clientes ou a economia

Com base em nossa experiência, descobrimos que o posicionamento estratégico é tão importante quanto a própria animação. Por exemplo, o OptinMonster usa com eficiência um contador de números para exibir sessões mensais de visitantes otimizadas, posicionando-o exatamente onde os clientes em potencial estão tomando suas decisões.

Number counter at OptinMonster

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. Abordaremos dois métodos simples usando um construtor de sites premium e um plug-in gratuito.

Você pode clicar nos links abaixo para ir para a seção de sua preferência:

Não deixe que os temas limitados do WordPress o impeçam! Nossos especialistas em design para WordPress podem criar um tema personalizado para WordPress com elementos interativos, como contadores animados, que combinam perfeitamente com sua marca.

Agende uma consulta gratuita hoje mesmo!

Se estiver criando uma página de destino e quiser ter controle total sobre a aparência e o comportamento dos contadores de números, um construtor de páginas é a melhor opção.

Testamos dezenas de construtores de páginas do WordPress ao longo dos anos, e o SeedProd se destaca consistentemente por suas amplas opções de personalização, especialmente para elementos dinâmicos como contadores de números.

Para este tutorial, usaremos a versão SeedProd Pro porque ela inclui blocos avançados e permite adicionar um contador. Há também uma versão SeedProd Lite que você pode experimentar gratuitamente.

Para obter mais informações, confira nossa análise detalhada do SeedProd.

A primeira coisa que você precisa fazer é instalar e ativar o SeedProd. Se precisar de ajuda, consulte nosso guia sobre como instalar um plug-in do 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.

Entering the SeedProd license key

Em seguida, você precisará acessar SeedProd ” Landing Pages no painel de administração do WordPress.

O SeedProd permite que você crie páginas de destino personalizadas projetadas profissionalmente, incluindo uma página de lançamento em breve, uma página de modo de manutenção, uma página de login e uma página 404.

Vá em frente e clique no botão “Add New Landing Page” (Adicionar nova página de destino).

Click the Add New Landing Page button

Depois disso, você pode selecionar um modelo SeedProd para sua página de destino e mostrar o contador de números animado.

Basta passar o mouse sobre um modelo e clicar no botão de verificação laranja.

Select a page template

Uma janela pop-up será aberta. Basta digitar o nome da página e o URL da página.

Depois disso, clique no botão “Save and Start Editing the Page” (Salvar e começar a editar a página).

Enter a Page Name and Page URL

Isso iniciará o construtor de arrastar e soltar do SeedProd.

Em seguida, você pode editar o modelo da página adicionando diferentes blocos ou clicando em elementos existentes na página.

Para adicionar uma contagem de números animada, basta arrastar o bloco Counter (Contador) do menu à esquerda e soltá-lo no modelo.

Add the counter block

Depois disso, você pode selecionar o bloco Counter para personalizá-lo ainda mais.

Por exemplo, há 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.

Edit the title of the counter

Em seguida, você pode alternar para a guia “Advanced” (Avançado) nas configurações do bloco do contador à sua esquerda.

Aqui, você encontrará mais opções para alterar o estilo, o esquema de cores, o espaçamento, a fonte e muito mais no bloco Contador.

Edit the color and style of the block

Em seguida, clique no botão “Save” (Salvar) na parte superior.

Agora você pode escolher “Publicar” no menu suspenso.

Save and publish your changes

Para ver o contador de números animado em ação, visite seu blog do WordPress.

Esta é a aparência em nosso site de demonstração.

Number counter preview

Opção 2: Adicionar uma animação de contagem rápida de números a qualquer página usando um plug-in

À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 plug-in Counter Number. É uma solução leve e gratuita que faz uma coisa e faz bem: permite que você adicione animações de números em qualquer lugar do seu site usando códigos de acesso simples.

Primeiro, você precisará instalar e ativar o plug-in Counter Number. Para obter mais detalhes, consulte nosso guia sobre como instalar um plug-in do WordPress.

Após a ativação, você pode ir para Counter Numbers ” All counters no painel do WordPress e clicar no botão “Add New Counter” (Adicionar novo contador).

Add a new counter

Depois disso, você pode inserir um título para o seu número de contador.

Na versão gratuita, você só pode selecionar o modelo de design simples.

Enter a name for the counter and select a template

Em seguida, você pode adicionar detalhes do número do contador. Há opções para editar o título do contador, selecionar um ícone e inserir o valor do número do contador.

Você pode adicionar quantos números de contador quiser clicando no botão “Add New Counterbox” (Adicionar nova caixa de contador) na parte inferior.

Add counter details

Além disso, você tem mais opções de personalização no painel à sua direita.

Por exemplo, o plug-in permite que você altere 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 muito mais.

Depois de fazer as alterações, role de volta para a parte superior e publique seu contador.

Publish your counter number

Em seguida, você pode ir para Counter Numbers ” All counters (Contadores ” Todos os contadores ) no painel do WordPress.

Vá em frente e copie o Counter Shortcode. Ele terá a seguinte aparência:

[COUNTER_NUMBER id=41]

Copy the shortcode for counter

Depois disso, você pode colocar esse elemento de design do WordPress em qualquer lugar do seu site, desde posts e páginas até barras laterais.

Basta adicionar um novo post ou página ou editar um já existente. Quando você estiver no editor de conteúdo, basta clicar no sinal “+” e adicionar um bloco de Shortcode.

Adding a shortcode block to WordPress

Em seguida, você pode colar o shortcode do número do contador no bloco.

A partir daí, visualize e publique sua página ou post para ver a contagem animada de números em ação.

Free plugin counter number preview

Esperamos que este artigo tenha ajudado você a aprender como mostrar uma animação de contagem de números no WordPress. Você também pode ver nosso tutorial sobre como adicionar um plano de fundo animado no WordPress e nossa seleção especializada dos melhores criadores de temas do WordPress para criar seu tema perfeito.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

Comments

  1. Congratulations, you have the opportunity to be the first commenter on this article.
    Have a question or suggestion? Please leave a comment to start the discussion.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.