Adicionar um cronômetro de contagem regressiva ao seu site WordPress pode torná-lo mais envolvente. Se você está destacando o lançamento de um produto, marcando uma data importante ou criando expectativa para um evento, um cronômetro de contagem regressiva cumpre a tarefa de forma eficaz.
Por exemplo, usamos contagens regressivas em nossos sites para destacar vendas de produtos, promoções de Black Friday e muito mais.
Com apenas alguns passos, você pode configurar este widget chamativo em seu site. Ele não só chama a atenção, mas também mantém seu público informado.
Neste artigo, você aprenderá três maneiras simples de adicionar um cronômetro de contagem regressiva ao seu site WordPress. Mesmo que você não seja um expert em tecnologia, nós temos o que você precisa.
Quando e Por Que Usar um Widget de Contagem Regressiva?
Cronômetros de contagem regressiva são versáteis e podem ser usados em vários cenários. Eles adicionam empolgação e urgência, incentivando os visitantes a agir.
Lançando um novo site? Um cronômetro de contagem regressiva pode criar expectativa e gerar burburinho. Você exibe o cronômetro em uma página linda de "em breve" para incentivar os visitantes a conferir as últimas atualizações.
Outro ótimo momento para usar um cronômetro regressivo é para vendas ou promoções futuras em sua loja online. Ao exibir um cronômetro, você informa seus clientes sobre ofertas por tempo limitado, impulsionando vendas e engajamento.
Cronômetros regressivos também podem beneficiar organizadores de eventos. Seja um webinar, uma conferência ou uma reunião social, definir um cronômetro ajuda os participantes a saberem exatamente quando o evento acontecerá.
Durante a manutenção do site, cronômetros regressivos também são úteis. Eles informam aos visitantes quando o site estará disponível novamente, para que você possa mantê-los informados e reduzir a frustração.
Para usos em menor escala, como marcar um marco pessoal ou um aniversário, cronômetros regressivos adicionam um toque especial ao seu site WordPress.
Agora, você pode exibir um cronômetro regressivo em suas postagens, páginas e área de widget da barra lateral.
Cronômetros regressivos também podem ser adicionados a pop-ups de lightbox, barras flutuantes, caixas de rolagem e outros elementos de design para engajar os visitantes do site e trazê-los de volta ao seu site.
Como existem muitos casos de uso para um cronômetro regressivo, listamos 3 métodos diferentes para adicionar um widget de cronômetro regressivo no WordPress:
Tutorial em Vídeo
Se você preferir instruções escritas, continue lendo.
Método 1: Adicionando um Widget de Cronômetro Regressivo Usando o Plugin Countdown Timer Ultimate (Grátis)
Countdown Timer Ultimate é um plugin simples que permite adicionar um cronômetro regressivo básico ao seu site.
Neste tutorial, usaremos o plugin gratuito, pois ele tem todas as ferramentas necessárias para criar um cronômetro regressivo.
Para começar, a primeira coisa que você precisa fazer é instalar e ativar o plugin Countdown Timer Ultimate. Se precisar de ajuda, você pode ver nosso guia passo a passo sobre como instalar um plugin do WordPress.
Após a ativação, você desejará ir para Countdown Timer » Add Timer na sua área de administrador do WordPress.
Nesta próxima tela, você pode dar um título ao seu cronômetro. Simplesmente digite qualquer título que desejar no campo 'Add New Timer'.
Observação: O cronômetro usa o fuso horário definido nas configurações do seu site WordPress. Se você quiser alterar o fuso horário para este cronômetro regressivo, precisará ir para Configurações » Geral e atualizar as configurações de fuso horário do seu site WordPress.
Depois disso, você pode rolar para baixo até a área 'Countdown Timer – Settings' para definir a data e hora de expiração do seu cronômetro regressivo.
Depois de localizar o campo 'Expiry Date & Time', prossiga e selecione a data no seletor de datas. Em seguida, você pode arrastar os controles deslizantes 'Hour', 'Minute' e 'Second' para ajustar a hora de expiração.
Simplesmente clique em 'Done' para continuar para a próxima etapa.
A próxima etapa é definir o rótulo do cronômetro.
Para mostrar os indicadores de dias, horas, minutos e segundos no seu cronômetro regressivo, prossiga e marque todas as caixas no campo 'Timer Label'.
Agora, vamos rolar a página para baixo e mudar para a aba ‘Design’ para estilizar o cronômetro.
Na primeira seção, ‘Configurações de Design’, você pode escolher um design e definir o tamanho do cronômetro.
Infelizmente, usuários gratuitos só podem escolher o design de cronômetro ‘Estilo Círculo 1’. No entanto, em ‘Largura do Cronômetro’, podemos definir a largura do nosso cronômetro. Aqui, definimos em 850 px.
Abaixo de ‘Largura do Cronômetro’, você encontrará a seção ‘Configurações de Estilo do Círculo’.
A primeira coisa que você vai querer fazer é escolher uma animação. Você tem duas opções: ‘Suave’ e ‘Ticks’.
Depois de decidir a animação do cronômetro, você pode definir a largura do primeiro plano e do plano de fundo do círculo arrastando os controles deslizantes.
Depois disso, você pode personalizar as cores do cronômetro.
Em ‘Configurações de Cores do Fundo do Relógio’, você pode ajustar a cor de fundo e alterar individualmente a cor para dias, horas, minutos e segundos.
Quando estiver satisfeito com as configurações, clique no botão ‘Publicar’.
Exibindo seu Widget de Cronômetro no WordPress
Agora que você configurou seu widget de cronômetro, é hora de adicioná-lo ao seu site.
Primeiro, clique no item de menu ‘Cronômetro’ no seu site WordPress. O cronômetro que você acabou de criar será listado na tabela ‘Cronômetro’.
Ao lado do seu cronômetro, você verá um shortcode que você precisa copiar.
Depois de copiar o shortcode, você vai querer abrir sua postagem ou página onde deseja exibir o cronômetro.
A partir daqui, você pode clicar no botão ‘+’ para adicionar o bloco Shortcode. Em seguida, basta colar este shortcode na área de conteúdo da sua postagem ou página do WordPress.
Em seguida, você vai querer ter certeza de clicar no botão ‘Atualizar’ ou ‘Publicar’ para salvar suas alterações.
Agora você pode visitar seu site para ver o widget de cronômetro em ação.
Se você usa um tema clássico, também pode ser capaz de adicionar este cronômetro à barra lateral do seu site.
Observação: Nem todos os temas clássicos do WordPress possuem o recurso de barra lateral. Portanto, é sempre uma boa ideia verificar a documentação ou as configurações de um tema para ver como você pode personalizar ou habilitar barras laterais antes de escolher um. Neste exemplo, estamos usando o tema Neve.
Simplesmente vá para a página Aparência » Widgets. Em seguida, você pode clicar no botão ‘+’ na seção ‘Barra Lateral Principal’ e procurar pelo bloco Shortcode.
Simplesmente clique nele quando ele aparecer e cole o shortcode do cronômetro.
Quando terminar, não se esqueça de clicar no botão ‘Atualizar’ para manter as configurações do seu widget.
Agora você pode visitar seu site para ver o cronômetro na barra lateral ou na área pronta para widgets.
Método 2: Adicionando um Widget de Cronômetro Regressivo Usando OptinMonster (Recomendado)
OptinMonster é o melhor plugin de pop-up do WordPress do mercado, mas faz muito mais do que apenas pop-ups. Ele ajuda você a converter visitantes do site que estão saindo em assinantes e clientes.
Usando o recurso de cronômetro de contagem regressiva do OptinMonster, você pode integrar o cronômetro a um pop-up lightbox, widget de barra lateral, barra flutuante ou qualquer outro tipo de campanha do OptinMonster.
A ferramenta oferece uma maneira inteligente de exibir um cronômetro com um design bonito. Ele permite até mesmo criar cronômetros de contagem regressiva perenes no WordPress.
Um cronômetro de contagem regressiva perene inicia uma contagem para cada visitante individual. Em seguida, o cronômetro começa quando a pessoa chega ao seu site. Ele também é referido como um cronômetro de contagem regressiva dinâmico.
Primeiro, vamos visitar o site OptinMonster e assinar um plano que atenda às suas necessidades.
Feito isso, você pode instalar o plugin OptinMonster em seu site WordPress. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin WordPress.
Este plugin conectará seu site WordPress ao aplicativo OptinMonster. Após a ativação, você pode clicar no botão ‘Conectar uma Conta Existente’ e seguir as instruções para iniciar o processo de integração.
Depois disso, você verá uma janela pop-up aparecer. Simplesmente selecione o endereço de e-mail que você usou para se inscrever em uma conta OptinMonster e clique no botão ‘Conectar ao WordPress’.
O plugin agora conectará seu site WordPress à sua conta OptinMonster.
Uma vez conectado, você pode começar a criar uma nova campanha no seu painel OptinMonster. Simplesmente vá para OptinMonster » Campanhas e clique no botão ‘Criar sua Primeira Campanha’.
O plugin oferece uma variedade de tipos de campanha e modelos para escolher.
Você pode usar qualquer tipo de campanha e adicionar o cronômetro a ela. Para este tutorial, usaremos o tipo de campanha ‘Popup’. Em seguida, usaremos o modelo ‘Obter um Código de Desconto’.
Aparecerá uma janela pop-up onde você terá que nomear o modelo. O nome é apenas para sua referência, então você pode usar o que quiser.
Por exemplo, nomeamos nossa campanha ‘Cronômetro de Contagem Regressiva’.
Depois de fazer isso, prossiga e clique em ‘Iniciar Construção’. O OptinMonster o redirecionará para a interface do construtor.
A partir daqui, vamos explorar a seção ‘Bloco’ no painel esquerdo. Em seguida, simplesmente arraste o bloco ‘Contagem Regressiva’ e solte-o na visualização no painel direito quando o vir.
Em seguida, você pode selecionar o ‘Tipo de Contagem Regressiva’ no campo suspenso no painel lateral. Existem duas opções: ‘Estático’ e ‘Dinâmico’.
Agora, a escolha entre os dois tipos depende inteiramente do seu objetivo. Um cronômetro estático, como o nome sugere, permanece fixo em uma única data e hora de término, tornando-o ideal para eventos únicos como o lançamento de um produto ou um webinar.
Mas e se você quiser criar um senso recorrente de urgência? É aí que o cronômetro dinâmico é útil.
Digamos que sua loja online realiza uma promoção relâmpago toda semana. Um cronômetro dinâmico será redefinido automaticamente após cada período de promoção, o que pode ser uma grande ajuda.
Para este guia, criaremos um cronômetro de contagem regressiva dinâmico para promover promoções relâmpago semanais.
Então, vamos escolher ‘Dinâmico’ no menu suspenso e definir a data e hora de expiração. Em seguida, você também pode ativar a opção ‘Rastreamento de conversão?’ para coletar insights da campanha.
Se desejar, você pode personalizar a aparência do cronômetro.
Simplesmente mude para a aba ‘Avançado’ e você encontrará opções de personalização para alterar a cor de fundo, fontes, sombras e muito mais do cronômetro.
Quando tudo estiver configurado, vá para a aba ‘Regras de Exibição’.
É aqui que você controla exatamente quando e em quais páginas seu pop-up aparecerá. A configuração padrão é após 5 segundos em todas as páginas, mas você pode personalizá-la facilmente para atender às suas necessidades.
Alternativamente, você pode aproveitar o MonsterLink da OptinMonster.
Esse recurso permite que você acione o pop-up para aparecer quando os usuários clicarem em um link ou botão em seu site. Assim, os visitantes terão controle direto sobre quando desejam ver sua oferta ou mensagem.
Para usar o MonsterLink, primeiro você precisará clicar no menu suspenso ‘tempo na página’. Em seguida, simplesmente selecione ‘Quando (Gatilhos)’ e depois ‘MonsterLink (Ao Clicar)’.
Após adicionar, você pode clicar em ‘Copiar código do MonsterLink’. Você precisará dele no processo de incorporação.
Em seguida, você pode excluir a outra regra de exibição clicando no ícone de lixeira.
Agora, é hora de publicar a campanha com o cronômetro. Para fazer isso, vamos para a aba ‘Publicar’.
A partir daqui, você pode alterar o status de ‘Rascunho’ para ‘Publicar’. Depois disso, simplesmente clique no botão ‘Salvar’ e saia do editor.
Você será redirecionado para uma página da OptinMonster, onde terá que verificar o status da sua campanha.
Na seção ‘Visibilidade e Status’, prossiga e altere o status ‘Pendente’ para ‘Publicado’.
Não se esqueça de clicar no botão verde ‘Salvar Alterações’ para garantir que suas alterações sejam salvas.
Uma coisa que resta a fazer agora é adicionar o código do MonsterLink ao seu site WordPress.
Primeiro de tudo, você vai querer abrir a postagem ou página onde deseja exibir a campanha com o cronômetro.
Por exemplo, adicionaremos a nossa à página ‘Galeria’ em nosso site de fotografia de demonstração. Então, vamos navegar até Páginas » Todas as Páginas e clicar em ‘Editar’ na página ‘Galeria’.
No editor de página, você pode clicar no botão ‘+’ e pesquisar pelo bloco de HTML Personalizado. Basta clicar nele para adicioná-lo à página.
No bloco ‘HTML Personalizado’, simplesmente cole o código do MonsterLink que você copiou anteriormente.
Veja como pode ficar no editor de blocos da página:
Agora, o call to action ‘Inscreva-se Agora!’ pode não se adequar ao propósito da campanha.
Então, vamos alterá-lo para ‘Receba Nosso Código de Promoção Limitado’, ‘Desbloqueie Descontos Exclusivos’ ou algo que se encaixe melhor no contexto. Depois de concluído, você pode prosseguir e ‘Atualizar’ ou ‘Publicar’ a página.
Agora, se você visitar a página, verá o MonsterLink em ação.
Simplesmente tente clicar nele e você verá o pop-up da campanha com o cronômetro.
Veja como fica em nossa página de demonstração ‘Galeria’:
Método 3: Adicionando um Widget de Cronômetro Regressivo Usando SeedProd
SeedProd é o melhor construtor de temas e páginas de destino para WordPress.
Seu construtor de arrastar e soltar permite criar páginas de destino incríveis e adicionar um cronômetro para chamar a atenção do seu visitante.
Para usar o recurso de cronômetro, você precisará do SeedProd Pro. Com o plano Pro, você também pode ter acesso a diferentes modelos, blocos de página para personalização, integrações de marketing por e-mail e muito mais.
A primeira coisa que você precisa fazer é instalar e ativar o plugin SeedProd Pro em seu site WordPress. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.
Após a ativação, você pode ir para SeedProd » Configurações no seu painel do WordPress para adicionar e verificar sua chave de licença. Você pode obter esta chave em sua conta SeedProd.
Após inserir a chave de licença, você pode clicar no botão ‘Verificar chave’.
Você também pode instalar o SeedProd Pro manualmente. Antes de fazer isso, certifique-se de ter baixado o arquivo .zip do SeedProd Pro de sua conta SeedProd.
Em seguida, você pode ir para Plugins » Adicionar Novo Plugin e clicar no botão ‘Carregar Plugin’ para que ele mostre a opção ‘Escolher arquivo’. Prossiga e carregue o arquivo .zip do SeedProd Pro.
Depois disso, basta clicar no botão ‘Instalar agora’.
Agora, você está pronto para criar uma nova página de destino. Para começar, você desejará navegar até SeedProd » Páginas de Destino.
O SeedProd permite configurar diferentes tipos de páginas, incluindo páginas de "em breve", páginas de carrinho personalizadas do WooCommerce, páginas de login e páginas 404. Você também pode criar outras páginas de destino clicando no botão ‘Adicionar Nova Página de Destino’, como uma página de agradecimento ou uma página para se inscrever em um webinar.
Para este tutorial, usaremos a página ‘Em Breve’. É um ótimo lugar para adicionar um cronômetro e lembrar seu público sobre um produto ou evento futuro.
Vamos clicar no botão ‘Configurar uma Página Em Breve’.
Em seguida, você selecionará um modelo para sua página de destino.
Embora haja uma opção para criar uma página do zero usando um modelo em branco, recomendamos o uso de um modelo, pois economiza tempo e permite editar o design como desejar.
Depois de encontrar o modelo perfeito, você pode passar o mouse sobre ele e clicar no botão ‘verificar’ para usá-lo.
Na próxima tela, você será levado ao construtor de páginas de arrastar e soltar do SeedProd na guia ‘Design’.
Aqui, você pode personalizar a página de destino adicionando ou removendo seções e blocos. Você também pode formatar o layout da página.
Para adicionar o cronômetro, basta rolar o painel esquerdo até a seção de blocos ‘Avançado’. Em seguida, arraste e solte o bloco ‘Contagem Regressiva’ em qualquer lugar da sua página de destino.
Depois de adicionar o bloco de contagem regressiva, vamos personalizá-lo. Basta clicar nele e você verá as opções de personalização no painel esquerdo.
Existem 3 guias que você pode verificar: ‘Conteúdo’, ‘Modelos’ e ‘Avançado’. Vamos verificá-las uma por uma.
Na aba ‘Conteúdo’, você pode escolher um tipo de contagem regressiva, definir a data e hora de término, selecionar um fuso horário, ajustar o alinhamento do temporizador e muito mais.
Agora, vamos para ‘Modelos’.
Aqui, o SeedProd permite que você escolha entre 5 estilos de temporizador de contagem regressiva disponíveis.
Finalmente, a aba ‘Avançado’ possui várias seções.
A seção ‘Estilos’ permite que você altere as configurações de tipografia, cores e bordas do temporizador.
Em seguida, você pode rolar a aba ‘Avançado’ até a seção ‘Efeitos de Animação’.
Aqui, você pode aplicar animação para destacar o temporizador de contagem regressiva quando os visitantes o virem. Simplesmente clique no menu suspenso e escolha entre os efeitos disponíveis, como ‘Flash’, ‘Pulse’, ‘Swing’, ‘Wobble’ e mais.
Se você quiser ajustar outros elementos da página de destino, como textos ou botões de mídia social, pode clicar neles. Em seguida, o SeedProd abrirá as opções de personalização.
Quando tudo estiver configurado, clique na aba ‘Configurações da Página’ para publicar sua página de destino com um temporizador de contagem regressiva.
A primeira coisa que você vai querer fazer é dar um título à página de destino. Por exemplo, nomeamos nossa página de destino como ‘Em Breve’.
Em seguida, você pode alterar o ‘Status da Página’ de ‘Rascunho’ para ‘Publicar’. Você também tem a opção de mostrar ou ocultar o link ‘Powered by SeedProd’.
Em seguida, vamos verificar o ‘Controle de Acesso’ na aba ‘Configurações da Página’ e gerenciar quem pode ver sua página de destino.
Este recurso é muito útil se você quiser que certas pessoas possam ignorar a página ‘Em Breve’ e trabalhar no desenvolvimento do seu site. O SeedProd também permite incluir e excluir URLs nas quais a página ‘Em Breve’ será exibida.
Por padrão, a página será visível em todo o site. No entanto, você pode alterá-la para ser exibida apenas na página inicial ou em URLs específicas.
Depois disso, você pode otimizar sua página para mecanismos de busca indo para as configurações de SEO.
O SeedProd permite que você adicione um título de SEO, descrição, favicon e miniatura de mídia social.
Se você quiser adicionar trechos de código à sua página de destino, vá para a seção ‘Scripts’ em Configurações da Página. Aqui, você pode adicionar scripts ao cabeçalho, corpo e rodapé da sua página.
Por exemplo, você pode adicionar o código de rastreamento do Google Analytics no campo ‘Scripts do Cabeçalho’ para ver como as pessoas usam sua página de destino.
Quando terminar, certifique-se de clicar no botão ‘Salvar’. Você também pode visualizar sua página de destino para garantir que tudo esteja configurado corretamente.
Depois disso, basta clicar no botão ‘X’ para fechar o editor do SeedProd.
Agora, vamos para SeedProd » Páginas de Destino e alterar o status da sua página ‘Em Breve’ para ‘Ativa’.
É isso. Sua página de destino com um temporizador de contagem regressiva estará no ar.
Agora você pode visitar seu site para ver o temporizador de contagem regressiva ‘Em Breve’ em ação.
Esperamos que este artigo tenha ajudado você a aprender como adicionar um widget de contador regressivo no WordPress. Em seguida, você também pode querer conferir mais truques legais de design de sites sobre como adicionar um ticker de notícias em rolagem e como adicionar depoimentos rotativos no WordPress.
Se você gostou deste artigo, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e Facebook.
Dennis Muthomi
Tenho usado o OptinMonster para meus clientes de e-commerce e tem sido um divisor de águas. Implementei contadores regressivos dinâmicos para as vendas relâmpago semanais de vários clientes de e-commerce, e eles viram as taxas de conversão aumentarem em até 25%.
A melhor parte é o quão simples ele torna tudo. Esses temporizadores são redefinidos automaticamente (eles os chamam de "temporizadores perenes"), então você não precisa mais se preocupar com atualizações manuais. É uma grande economia de tempo!
Também estou adorando o recurso de gatilho MonsterLink. Ele permite que você mantenha suas páginas limpas, mas ainda chame a atenção exatamente quando você precisa. Se você está fazendo promoções regulares, vale totalmente o investimento.
Mrteesurez
A contagem regressiva também pode ser usada para FOMO para criar medo de perder ou senso de urgência em vendas de produtos, especialmente ao oferecer um grande desconto para um produto.
Obrigado pelo post.
Kate O'Neill
Eu gostaria de adicionar um segundo widget de contagem regressiva ao nosso site. Como faço isso? Obrigado.
Keith Davis
Exatamente o que eu estava procurando, pessoal - vou tentar este.
Gautam Doddamani
splendid ..this is extremely useful for announcing a giveaway or a hot deal