O bloco Contagem regressiva permite adicionar temporizadores animados às suas páginas sem precisar de código personalizado ou plug-ins. Seja para criar expectativa para o lançamento de um produto, uma promoção relâmpago ou um evento ao vivo, o bloco Contagem regressiva cria uma sensação atraente de urgência que motiva os visitantes a agir.
Você pode escolher entre uma contagem regressiva com data fixa que termina em um momento específico ou um temporizador permanente que é reiniciado para cada visitante — proporcionando uma experiência personalizada e sempre ativa de urgência, independentemente de quando alguém acessa sua página.
Adicionando o bloco Contagem regressiva às suas páginas
Siga estas etapas para adicionar um bloco de contagem regressiva à sua página SeedProd:
Passo 1: Adicione o bloco
Em Design > Blocos, arraste e solte o bloco Contagem regressiva na seção desejada da sua página.
Arraste o bloco Contagem regressiva do painel Blocos e solte-o na seção desejada da página.
Etapa 2: Configurar as definições de conteúdo
Depois de adicionado, clique no bloco Contagem regressiva para abrir suas configurações. Na guia Conteúdo, escolha o tipo de temporizador e configure seu comportamento e rótulos.
Tipo de temporizador:
- Contagem regressiva de data e hora: faz a contagem regressiva até uma data e hora fixas. Ideal para lançamentos de produtos, vendas relâmpago ou eventos com uma data de término específica — todos os visitantes veem o mesmo cronômetro, independentemente de quando chegam.
- Temporizador de visitantes (Evergreen): faz a contagem regressiva a partir de um período definido, que é reiniciado para cada novo visitante. Utiliza 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 e hora permite definir uma data e hora específicas para o término do seu cronômetro.
O Visitor Timer (Evergreen) redefine a duração da contagem regressiva para cada novo visitante usando cookies.
Configurações do temporizador:
- Data e hora de término: (apenas Data e hora) Defina a data e a hora exatas em que a contagem regressiva expira.
- Fuso horário: (apenas DateTime) Escolha o fuso horário para a hora de término para garantir a precisão para o 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 — Minúsculo, Pequeno, Médio ou Grande
Ação na data de vencimento:
- Mostrar mensagem: exibe uma mensagem personalizada quando o temporizador chega a zero, como “oferta expirada” ou um aviso de agradecimento.
- Redirecionar: envie automaticamente os visitantes para uma página diferente 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 desde o início assim que chegar a zero.
Escolha o que acontecerá quando o temporizador chegar a zero — exibir uma mensagem personalizada, redirecionar os visitantes para outro URL ou reiniciar o temporizador.
Personalizar etiquetas:
- Rótulo do dia: personalize o texto exibido abaixo da unidade de dias (padrão: “Dias”)
- Rótulo de horas: personalize o texto exibido abaixo da unidade de horas (padrão: “Horas”)
- Rótulo de minuto: personalize o texto exibido abaixo da unidade de minutos (padrão: “Minutos”)
- Segundo rótulo: 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 estilos de contagem regressiva pré-concebidos 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 Contagem regressiva.
Navegue e aplique estilos de contagem regressiva pré-concebidos na guia Modelos.
Etapa 4: Personalizar o design
Na guia Avançado, você pode personalizar totalmente a aparência visual e o layout do seu bloco Contagem regressiva.
Estilos:
- Tipografia: Clique em Editar para abrir o painel completo de tipografia. Controle a família de fontes, tamanho (desktop, tablet e celular), espessura da fonte, itálico, sublinhado, maiúsculas e 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 das unidades de tempo
- Cor da etiqueta: defina a cor das etiquetas 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 das unidades de tempo usando um controle deslizante.
- Sombra: Adicione uma sombra às caixas de contagem regressiva. Escolha entre os tamanhos predefinidos: Nenhum, Fino, Pequeno, Médio, Grande, Extragrande, 2X Grande ou Personalizado.
Espaçamento:
- Margem: controle o espaçamento externo ao redor do seu bloco de contagem regressiva (superior, direito, inferior, esquerdo). Isso determina quanto espaço aparece entre o temporizador e os elementos ao redor.
- Preenchimento: ajuste o espaçamento interno do seu bloco Countdown (superior, direito, inferior, esquerdo). Isso cria um espaço entre o temporizador e as bordas do bloco.
Atributos:
- CSS ID: Exibe o identificador único gerado automaticamente para o seu bloco Countdown. Este ID é criado automaticamente pelo SeedProd para personalização de estilo ou segmentação 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 na área de trabalho: Oculte o bloco Contagem regressiva nas telas da área de trabalho.
- Ocultar no tablet: Oculta o bloco Contagem regressiva em dispositivos tablet.
- Ocultar no celular: Oculte o bloco 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 aparece na tela. As opções incluem Saltar, Aparecer gradualmente, Ampliar, Girar e muito mais. Uma animação de entrada chama a atenção imediatamente para o seu temporizador no momento em que os visitantes o encontram.
Use a guia Avançado para controlar estilos, espaçamento, atributos, visibilidade do dispositivo e animações de entrada para o seu bloco Contagem regressiva.
Etapa 5: Salve suas alterações
Depois de terminar de configurar o bloco 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! Os temporizadores de contagem regressiva são uma das ferramentas mais eficazes para impulsionar conversões — seja para promover uma oferta por tempo limitado, o lançamento de um produto ou um evento futuro. Experimente diferentes tipos de temporizadores, modelos e ações de expiração para criar uma experiência que mantenha os visitantes envolvidos e motivados a agir.