O bloco de Contagem Regressiva permite adicionar temporizadores de contagem regressiva animados às suas páginas sem a necessidade de código personalizado ou plugins. Se você está criando expectativa para o lançamento de um produto, uma promoção relâmpago ou um evento ao vivo, o bloco de Contagem Regressiva cria um senso de urgência convincente que motiva os visitantes a agir.
Você pode escolher entre uma contagem regressiva de data fixa que termina em um momento específico, ou um temporizador evergreen que reinicia para cada visitante — oferecendo uma experiência de urgência personalizada e sempre ativa, não importa quando alguém acessa sua página.
Adicionando o Bloco de Contagem Regressiva às Suas Páginas
Siga estas etapas para adicionar um bloco de Contagem Regressiva à sua página SeedProd:
Etapa 1: Adicionar o Bloco
Em Design > Blocos, arraste e solte o bloco Contagem Regressiva na seção desejada da sua página.
Arraste o bloco de Contagem Regressiva 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 de Contagem Regressiva para abrir suas configurações. Na aba Conteúdo, escolha o tipo de temporizador e configure seu comportamento e rótulos.
Tipo de Temporizador:
- Contagem Regressiva de Data/Hora: Conta regressivamente até uma data e hora fixas. Ideal para lançamentos de produtos, promoções relâmpago ou eventos com uma data de término específica — todos os visitantes veem o mesmo temporizador, independentemente de quando chegam.
- Temporizador do Visitante (Evergreen): Conta regressivamente a partir de uma duração definida que reinicia para cada novo visitante. Usa cookies para manter a consistência entre as atualizações da página, fazendo com que cada visitante sinta que a oferta é pessoalmente limitada no tempo.
A Contagem Regressiva de Data/Hora permite que você defina uma data e hora de término específicas para o seu temporizador.
O Temporizador do Visitante (Evergreen) reinicia a duração da contagem regressiva para cada novo visitante usando cookies.
Configurações do Temporizador:
- Data e Hora de Término: (Apenas Data/Hora) Defina a data e hora exatas em que a contagem regressiva expira.
- Fuso Horário: (Apenas Data/Hora) Escolha o fuso horário para a hora de término para garantir a precisão para seu público-alvo.
- Horas / Minutos / Segundos: (Apenas Evergreen) Defina a duração da contagem regressiva que cada visitante verá quando chegar pela primeira vez.
- Tamanho: Defina o tamanho geral do temporizador de contagem regressiva — Pequeno, Médio, Grande ou Extra Grande.
Ação ao Expirar:
- Mostrar Mensagem: Exiba uma mensagem personalizada assim que o temporizador atingir zero, como um aviso de “oferta expirada” ou de agradecimento.
- Redirecionar: Envie automaticamente os visitantes para outra página quando a contagem regressiva terminar, como uma página de checkout ou uma página de destino pós-venda.
- Reiniciar: (Apenas Evergreen) Reinicie o temporizador do zero assim que ele atingir zero.
Escolha o que acontece quando o temporizador atinge zero — exiba uma mensagem personalizada, redirecione os visitantes para outro URL ou reinicie o temporizador.
Personalizar Rótulos:
- Rótulo de Dia: Personalize o texto exibido abaixo da unidade de dias (padrão: “Dias”)
- Rótulo de Hora: Personalize o texto exibido abaixo da unidade de horas (padrão: “Horas”)
- Rótulo de Minutos: Personalize o texto exibido abaixo da unidade de minutos (padrão: “Minutos”)
- Rótulo de Segundos: Personalize o texto exibido abaixo da unidade de segundos (padrão: “Segundos”)
Etapa 3: Escolha um Estilo de Modelo
Na guia Modelos, você pode selecionar entre estilos de contagem regressiva pré-projetados para alterar rapidamente a aparência geral do seu temporizador sem ajustar configurações individuais.
- Modelos Predefinidos: Escolha entre uma variedade de designs prontos, cada um com esquemas de cores, estilos de caixa e layouts exclusivos. Clique em qualquer modelo para aplicá-lo instantaneamente ao seu bloco de Contagem Regressiva
Navegue e aplique estilos de contagem regressiva pré-projetados na guia Modelos.
Etapa 4: Personalize o Design
Na guia Avançado, você pode personalizar completamente a aparência visual e o layout do seu bloco de Contagem Regressiva.
Estilos:
- Tipografia: Clique em Editar para abrir o painel completo de tipografia. Controle a família da fonte, tamanho (desktop, tablet e celular), peso da fonte, itálico, sublinhado, maiúsculas/minúsculas, altura da linha e espaçamento entre letras para o texto da contagem regressiva
- Cor de Destaque: Defina a cor de fundo das caixas individuais de unidade de tempo
- Cor do Rótulo: Defina a cor dos rótulos Dias, Horas, Minutos e Segundos abaixo de cada número
- Espaço Entre: Controle o espaço entre cada caixa de unidade de tempo usando um controle deslizante
- Raio da Borda: Arredonde os cantos das caixas de unidade de tempo usando um controle deslizante
- Sombra: Adicione uma sombra às caixas de contagem regressiva. Escolha entre tamanhos predefinidos: Nenhum, Fio de Cabelo, Pequeno, Médio, Grande, X Grande, XX Grande ou Personalizado
Espaçamento:
- Margem: Controle o espaçamento externo ao redor do seu bloco de Contagem Regressiva (Superior, Direita, Inferior, Esquerda). Isso determina quanto espaço aparece entre o temporizador e os elementos circundantes
- Preenchimento: Ajuste o espaçamento interno dentro do seu bloco de Contagem Regressiva (Superior, Direita, Inferior, Esquerda). Isso cria espaço entre o temporizador e as bordas do bloco
Atributos:
- ID CSS: Exibe o identificador exclusivo gerado automaticamente para o seu bloco de Contagem Regressiva. 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 da contagem regressiva. Insira cada atributo em uma nova linha usando o formato: nome-do-atributo|valor (por exemplo, data-timer|true)
Visibilidade do Dispositivo:
- Ocultar no Desktop: Oculte o bloco de Contagem Regressiva em telas de desktop
- Ocultar no Tablet: Oculte o bloco de Contagem Regressiva em dispositivos tablet
- Ocultar no Celular: Oculte o bloco de Contagem Regressiva 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 Contagem Regressiva entra na tela. As opções incluem Bounce, Fade In, Zoom In, Rotate In e muitos outros. Uma animação de entrada chama a atenção imediata para o seu temporizador no momento em que os visitantes o encontram
Use a guia Avançado para controlar estilos, espaçamentos, atributos, visibilidade do dispositivo e animações de entrada para o seu bloco de Contagem Regressiva.
Etapa 5: Salvar suas alterações
Depois de terminar de configurar o Bloco de Contagem Regressiva e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco de Contagem Regressiva à sua página! Contadores regressivos são uma das ferramentas mais eficazes para gerar conversões — seja promovendo uma oferta por tempo limitado, o lançamento de um produto ou um evento futuro. Experimente com tipos de temporizador, modelos e ações de expiração para criar uma experiência que mantenha os visitantes engajados e motivados a agir.