Os números convencem mais rápido que as frases: notificações de 5,5 K entregues, visualizações de vídeo de 120 M. O Widget de compensação em Complementos Mestres para Elementor coloca essas estatísticas em uma fileira de cartas que contam de zero quando a página é carregada, cada uma com um ícone, um sufixo como K+ ou M+ e seu próprio estilo.
Este guia constrói uma seção de quatro estatísticas do zero: itens, números, ícones, layout e estilo do cartão, terminando com os contadores finalizados na página ao vivo.
O que o widget Counter Up faz #
Um widget contém um conjunto de itens de contador Cada item é uma estatística: um número que conta a partir de zero quando a página carrega, um prefixo ou sufixo em torno dele, um título abaixo dele e um ícone ou imagem opcional no topo O widget organiza os itens em colunas e os estiliza como um grupo, para que uma banda de estatísticas permaneça consistente sem mexer por cartão.
Antes de começar #
- WordPress com Elementor instalado e ativo.
- Complementos Mestres para Elementor instalado e ativo. Novo no plugin? veja o guia instalação.
- O widget Counter Up habilitado no painel de opções Master Addons, em Basic Widgets.
- Seus números reais. Uma seção de estatísticas com números inventados causa mais danos do que nenhuma estatística.
Como adicionar o widget Counter Up #
No editor Elementor, pesquise no Elementos painel para Contrapor e arraste-o para a página Ele carrega com itens de amostra já contando na tela, então a animação fica visível a partir do primeiro segundo.
Configure cada item do contador #
Aberto Conteúdos de balcão e clique em um item da lista Cada um carrega o conjunto completo de controles por status:
- Tipo: nenhum ícone ou imagem na parte superior da estatística. Ícone abre a biblioteca Elementor; imagem abre a biblioteca de mídia.
- Título: o rótulo sob o número, como “Notifications Delivered”.
- Prefixo e sufixo numérico: texto em torno do número Um prefixo “$” ou um sufixo “K+” transforma 5,5 em $5,5 ou 5,5 K+.
- Número: o valor que o contador sobe para. Os decimais funcionam, então 5,5 com um sufixo K+ lê 5,5 K+.
- Antecedentes: uma cor de cartão por item, para quando uma estatística deve se destacar.
O truque do sufixo mantém os números grandes curtos: em vez de animar até 120 milhões, a demonstração conta até 120 com um sufixo M+. O cartão permanece mais limpo e ninguém conta os zeros para verificar.
O por item Fundo cores apenas esse cartão. útil para destacar uma estatística de título, ou pulá-lo e deixar o estilo de caixa compartilhada lidar com todos os quatro:
Escolha colunas e posição de conteúdo #
Abaixo da lista de itens, Colunas define quantos contadores compartilham uma linha (1, 2, 3, 4 ou 6), com uma alternância responsiva por dispositivo. Posição Conteúdo coloca o título em relação ao número: superior, esquerdo, direito ou inferior A demonstração tenta 2 colunas com número e título lado a lado e, em seguida, se instala novamente em 4 colunas empilhadas.
Sintonize os ícones #
O Configurações Ícones seção controla o bloco de ícones em cada cartão: Ícone/Imagem Posição (esquerda, superior ou direita da estatística), Tamanho do ícone, e Círculo de ícones ou tamanho da imagem para o disco colorido por trás do glifo A demonstração executa ícones de 30 pixels em círculos de 86 pixels.
Estilize os cartões #
No Estilo guia, Estilo de caixa de compensação cobre o visual do cartão compartilhado: Cor de fundo, Preenchimento, Margem, Tipo de fronteira, Raio Fronteira, e Sombra Caixa. A demonstração cai em cartões rosa suave com preenchimento e margem de 20 pixels, que separam as quatro estatísticas sem bordas rígidas.
Estile os números, títulos e ícones #
O Estilo de conteúdo a seção se divide em quatro grupos, um por elemento do cartão:
- Estilo de ícone: a cor do glifo e a cor do círculo por trás dela A demonstração transforma os círculos em roxo profundo com ícones brancos.
- Estilo do número: cor e tipografia para a própria estatística, o maior texto do cartão.
- Prefixo do número: sua própria cor, tipografia, tamanho e margem, portanto, um símbolo monetário pode ser menor que o número.
- Estilo do título: cor, tipografia e margem do rótulo.
O resultado na página #
Na página ao vivo os números contam de zero por cerca de dois segundos após o carregamento da página, depois se estabelecem nos valores finais Aqui está a banda finalizada:
Casos de uso comum #
- Bandas de estatísticas da empresa: clientes atendidos, projetos entregues, anos de atividade.
- Seções de prova SaaS: usuários, tempo de atividade, integrações.
- Números de portfólio: campanhas executadas, receita gerada, horas de edição.
- Impacto sem fins lucrativos: refeições entregues, voluntários, fundos arrecadados.
- Páginas de cursos e comunidades: alunos, aulas, avaliações.
Dicas para melhores contadores #
- Use sufixos para números grandes. Contar até 120 com um sufixo M+ é mais limpo do que contar até nove dígitos.
- Coloque os balcões no alto da página. A contagem é executada uma vez quando a página é carregada, portanto, os contadores muito abaixo da dobra podem terminar antes que alguém role até eles.
- Mantenha o conjunto em três ou quatro estatísticas. Seis contadores competem; quatro são lidos.
- Liderar com o número mais forte. Os visitantes leem da esquerda para a direita e não podem terminar a fila.
- Combine os círculos de ícones com sua paleta. A cor do círculo é a escolha de estilo mais visível no cartão; o roxo sobre rosa da demonstração funciona porque ambos vêm de uma paleta.
- Verifique a contagem de colunas móveis. Quatro colunas em um telefone comprimem os números; o controle Colunas responsivo o corrige com um clique.
Vídeo Tutorial #
Se você quiser ver o widget Counter Up em ação, este vídeo percorre a configuração completa, desde o primeiro item até a banda de estatísticas animadas na página ao vivo:
Perguntas frequentes #
O que é o widget Counter Up em Master Addons?
É um widget Elementor para seções de estatísticas animadas Cada item contém um número que conta a partir de zero quando a página é carregada, além de um prefixo, sufixo, título e um ícone ou imagem opcional Colunas, dimensionamento de ícones e estilo de cartão são compartilhados em todo o conjunto.
Como mostro 120M+ em vez de 120000000?
Defina o Número como 120 e o Sufixo do Número como M+. O contador anima para 120 e exibe 120 M+. O mesmo funciona para K+ milhares e valores decimais como 5,5 com um sufixo K+.
Cada contador pode ter seu próprio ícone e cor?
Sim. Cada item escolhe seu próprio ícone ou imagem através do controle Tipo, e cada item tem sua própria cor de Fundo O tamanho do ícone compartilhado, o tamanho do círculo e o estilo do cartão vêm das Configurações de Ícone e da guia Estilo.
Quando começa a animação de contagem?
Os números contam de zero até o valor que você definiu assim que a página for carregada, ao longo de cerca de dois segundos A animação é reproduzida uma vez e não espera que o widget role para a visualização.
Posso alterar quantos contadores ficam seguidos?
Sim. O menu suspenso Colunas no Counter Up Content oferece 1, 2, 3, 4 ou 6 colunas com uma alternância responsiva, para que uma banda de desktop de quatro colunas possa cair para duas colunas em tablets e uma em telefones.
Como o Counter Up é diferente do widget Elementor Counter?
Elementor Counter mostra um widget de número por e permite definir o número inicial, duração e separador de mil, e conta quando o número rola em vista Counter Up mantém muitos contadores em um widget com ícones, estilo de cartão e 1, 2, 3, 4 ou 6 colunas, e conta uma vez no carregamento da página.
Embrulhando #
O widget Counter Up transforma números simples em uma banda de estatísticas que se move: ícones por item, prefixos e sufixos, colunas compartilhadas e estilo de cartão e uma animação de contagem que chama a atenção exatamente uma vez Navegue pelo conjunto completo de Widgets e extensões Master Addons para ver o que mais vem com o plugin. O Página do produto Counter Up compara-o com o widget Elementor Counter.
