O Bloco Contador permite exibir contadores de números animados que contam de um valor inicial até um número final. Este bloco é perfeito para destacar estatísticas impressionantes, marcos e conquistas de forma atraente, capturando a atenção do visitante.
Se você deseja destacar anos de atividade, clientes atendidos, projetos concluídos ou qualquer outra métrica, o Bloco Contador dá vida aos seus números com uma animação suave de contagem que é reproduzida quando os visitantes rolam o bloco para a visualização.
Adicionando o Bloco Contador às Suas Páginas
Siga estas etapas para adicionar um bloco Contador à sua página SeedProd:
Etapa 1: Adicionar o Bloco
Em Design > Blocos, arraste e solte o bloco Contador na seção desejada da sua página.
Arraste o bloco Contador do painel Blocos e solte-o na seção desejada da sua página.
Etapa 2: Configurar as Definições de Conteúdo
Após adicionar, clique no bloco Contador para abrir suas configurações. Na aba Conteúdo, você pode configurar os valores do contador, o comportamento da animação e o rótulo.
Valores do Contador:
- Número Inicial: Defina o número a partir do qual o contador começará a contar quando a animação for acionada. Geralmente definido como 0, mas você pode começar de qualquer valor para criar um efeito de contagem parcial.
- Número Final: Defina o número final até o qual o contador contará. Esta é a principal estatística ou conquista que você deseja exibir.
- Prefixo do Número: Adicione texto ou um símbolo que aparece antes do número, como um símbolo de moeda (por exemplo, R$) ou um sinal de mais.
- Sufixo do Número: Adicione texto ou um símbolo que aparece após o número, como um sinal de porcentagem (%), um sinal de mais (+) ou uma unidade como “mil”.
Configurações de Animação:
- Duração da Animação: Controle quanto tempo (em milissegundos) a animação de contagem leva para ser concluída. Uma duração maior cria um efeito de contagem mais lento e dramático.
- Separador de Milhar: Escolha se deseja exibir um separador de milhar no número (por exemplo, 1.000 em vez de 1000) para melhorar a legibilidade.
- Separador: Selecione o caractere usado como separador de milhar, como uma vírgula ou um ponto, para corresponder às suas preferências de formatação regional.
Rótulo:
- Título: Adicione um rótulo descritivo que aparece abaixo do número para explicar o que a estatística representa (por exemplo, “Clientes Satisfeitos”, “Projetos Concluídos”, “Anos de Experiência”)
Configure seus valores de contador, duração da animação, separador de milhar e rótulo de título na aba Conteúdo.
Etapa 3: Personalizar o Design
Na aba Avançado, você pode personalizar a aparência visual do seu Bloco Contador.
Tipografia do Número:
- Cor do Número: Defina a cor do número do contador para combinar com sua marca ou design de página.
- Fonte: Escolha a família de fontes para o número do contador.
- Tamanho da Fonte: Defina o tamanho do número em dispositivos desktop, tablet e mobile.
- Peso da Fonte: Controle se o número aparece em negrito ou com um peso mais leve
- Altura da Linha: Ajuste o espaçamento vertical do texto do número
- Espaçamento entre Letras: Ajuste o espaçamento horizontal entre os caracteres do número
- Alinhamento do Número: Alinhe o número do contador à esquerda, centro ou direita
- Sombra do Número: Adicione uma sombra de texto ao número com controles de cor, deslocamento horizontal/vertical, desfoque e expansão
Tipografia do Título:
- Cor do Título: Defina a cor do rótulo descritivo abaixo do contador
- Fonte: Escolha a família de fontes para o rótulo do título
- Tamanho da Fonte: Defina o tamanho do título em todos os pontos de interrupção (desktop, tablet e mobile)
- Peso da Fonte: Controle o peso do texto do título
- Altura da Linha: Ajuste o espaçamento do texto do título
- Espaçamento entre Letras: Ajuste o espaçamento entre caracteres no título
- Alinhamento do Título: Alinhe o rótulo do título à esquerda, centro ou direita
- Sombra do Título: Adicione uma sombra de texto ao título com controles de cor, deslocamento, desfoque e expansão
Espaçamento:
- Margem: Controle o espaçamento externo ao redor do seu bloco de Contador (Superior, Direita, Inferior, Esquerda). Isso determina quanto espaço aparece entre o contador e os elementos circundantes
- Preenchimento: Ajuste o espaçamento interno dentro do seu bloco de Contador (Superior, Direita, Inferior, Esquerda). Isso cria espaço entre o conteúdo do contador e as bordas do bloco
Atributos:
- ID CSS: Exibe o identificador exclusivo gerado automaticamente para o seu bloco de Contador. Este ID é criado automaticamente pelo SeedProd para estilização personalizada ou segmentação por JavaScript
- Classe Personalizada: Adicione classes CSS personalizadas para aplicar estilos específicos do seu tema ou CSS personalizado.
- Atributos Personalizados: Adicione quaisquer atributos HTML ao elemento wrapper do contador. Insira cada atributo em uma nova linha usando o formato: nome-do-atributo|valor (por exemplo, data-contador|true)
Visibilidade do Dispositivo:
- Ocultar no Desktop: Oculte o bloco de Contador em telas de desktop
- Ocultar no Tablet: Oculte o bloco de Contador em dispositivos tablet
- Ocultar no Mobile: Oculte o bloco de Contador em dispositivos móveis
Efeitos de Animação:
- Animação de Entrada: Escolha entre vários efeitos de animação que são reproduzidos quando o bloco de Contador entra no campo de visão. As opções incluem Bounce, Fade In, Zoom In, Rotate In e muito mais. Emparelhar uma animação de entrada com o efeito de contagem progressiva cria uma experiência altamente envolvente para os visitantes
Use a aba Avançado para controlar a tipografia, cores, sombras, espaçamento e visibilidade do seu bloco de Contador.
Etapa 4: Salve Suas Alterações
Depois de terminar de configurar o bloco de Contador e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco de Contador à sua página! Contadores animados são uma maneira comprovada de construir confiança e credibilidade, colocando seus números mais impressionantes em destaque. Experimente diferentes formatos de número, prefixos, sufixos e estilos de tipografia para criar contadores que reflitam perfeitamente sua marca e tornem suas estatísticas impossíveis de ignorar.