Como Adicionar um Widget de Contagem Regressiva no WordPress (3 Maneiras Fáceis)

Adicionar uma contagem regressiva ao seu site WordPress pode torná-lo mais envolvente. Seja para destacar o lançamento de um produto, marcar uma data importante ou criar expectativa para um evento, um timer de contagem regressiva faz o trabalho de forma eficaz.

Por exemplo, usamos contagens regressivas em nossos sites para destacar promoções de produtos, ofertas da Black Friday e muito mais.

Com apenas alguns passos, você pode configurar este widget chamativo em seu site. Ele não só atrai a atenção, mas também mantém seu público informado.

Neste artigo, você aprenderá três maneiras simples de adicionar um timer 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?

Timers 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 timer de contagem regressiva pode criar expectativa e gerar burburinho. Você exibe o timer em uma página bonita de "em breve" para incentivar os visitantes a conferir as últimas atualizações.

Outro ótimo momento para usar um timer de contagem regressiva é para vendas ou promoções futuras em sua loja online. Ao exibir um timer, você informa seus clientes sobre ofertas por tempo limitado, aumentando as vendas e o engajamento.

Contadores 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, contadores 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, contadores regressivos adicionam um toque especial ao seu site WordPress.

Agora, você pode exibir um contador regressivo em suas postagens, páginas e na área de widgets da barra lateral.

Contadores 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 tantos casos de uso para um contador regressivo, listamos 3 métodos diferentes para adicionar um widget de contador regressivo no WordPress:

• Método 1: Adicionando um Widget de Contador Regressivo Usando o Plugin Countdown Timer Ultimate (Grátis)
• Método 2: Adicionando um Widget de Contador Regressivo Usando o OptinMonster (Recomendado)
• Método 3: Adicionando um Widget de Contador Regressivo Usando o SeedProd

Tutorial em Vídeo

Inscreva-se no WPBeginner

Se você preferir instruções escritas, continue lendo.

Método 1: Adicionando um Widget de Contador Regressivo Usando o Plugin Countdown Timer Ultimate (Grátis)

Countdown Timer Ultimate é um plugin simples que permite adicionar um contador regressivo básico ao seu site.

Neste tutorial, usaremos o plugin gratuito, pois ele possui todas as ferramentas necessárias para criar um contador 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 consultar nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, você precisará ir para Countdown Timer » Add Timer na sua área de administração do WordPress.

Nesta próxima tela, você pode dar um título ao seu timer. Simplesmente digite qualquer título que desejar no campo 'Add New Timer'.

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.

Uma vez que você localizou o campo ‘Expiry Date & Time’, prossiga e selecione a data no seletor de datas. Em seguida, você pode arrastar os controles deslizantes de ‘Hora’, ‘Minuto’ e ‘Segundo’ 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 exibir os indicadores de dias, horas, minutos e segundos no seu cronômetro, 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, ‘Design Settings’, você pode escolher um design e definir o tamanho do cronômetro.

Infelizmente, usuários gratuitos só podem escolher o design de cronômetro ‘Circle Style 1’. No entanto, em ‘Timer Width’, podemos definir a largura do nosso cronômetro. Aqui, definimos em 850 px.

Abaixo de ‘Timer Width’, você encontrará a seção ‘Circle Style Settings’.

A primeira coisa que você vai querer fazer é escolher uma animação. Você tem duas opções: ‘Smooth’ e ‘Ticks’.

Uma vez que você decidiu sobre 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 prosseguir para personalizar as cores do cronômetro.

Em ‘Clock Background Colors Settings’, você pode ajustar a cor de fundo e alterar individualmente a cor para dias, horas, minutos e segundos.

Assim que estiver satisfeito com as configurações, prossiga e clique no botão ‘Publish’.

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 ‘Countdown Timer’ do seu site WordPress. O cronômetro que você acabou de criar será listado na tabela ‘Countdown Timer’.

Ao lado do seu cronômetro de contagem regressiva, você verá um shortcode que você precisa copiar.

Após copiar o shortcode, você desejará abrir sua postagem ou página onde deseja exibir o cronômetro de contagem regressiva.

A partir daqui, você pode clicar no botão ‘+’ para adicionar o bloco Shortcode. Em seguida, simplesmente cole este shortcode na área de conteúdo da sua postagem ou página do WordPress.

Em seguida, você desejará garantir que clica no botão ‘Atualizar’ ou ‘Publicar’ para salvar suas alterações.

Agora você pode visitar seu site para ver o widget de cronômetro de contagem regressiva em ação.

Se você usar um tema clássico, também poderá adicionar este cronômetro de contagem regressiva à barra lateral do seu site.

Simplesmente vá para a página Aparência » Widgets. Em seguida, você pode clicar no botão ‘+’ na seção ‘Barra Lateral Principal’ e pesquisar pelo bloco Shortcode.

Simplesmente clique nele quando ele aparecer e cole o shortcode do cronômetro de contagem regressiva.

Assim que 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 de contagem regressiva na barra lateral ou na área pronta para widgets.

Método 2: Adicionando um Widget de Contador Regressivo Usando o OptinMonster (Recomendado)

OptinMonster é o melhor plugin de popup do WordPress do mercado, mas faz muito mais do que apenas popups. Ele ajuda você a converter visitantes que estão abandonando o site em assinantes e clientes.

Usando o recurso de cronômetro de contagem regressiva do OptinMonster, você pode integrar o cronômetro em um popup 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 regressivo com um design bonito. Ela permite até mesmo que você crie cronômetros regressivos perenes no WordPress.

Um cronômetro regressivo perene inicia uma contagem regressiva para cada visitante individual. Em seguida, o cronômetro começa quando a pessoa chega ao seu site. Ele também é conhecido como um cronômetro regressivo 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 a partir do 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 regressivo a ela. Para este tutorial, usaremos o tipo de campanha ‘Popup’. Em seguida, usaremos o modelo ‘Obter um Código de Desconto’.

Uma janela pop-up onde você precisa nomear o template aparecerá. O nome é apenas para sua referência, então você pode usar o que quiser.

Por exemplo, nomeamos nossa campanha de ‘Temporizador de Contagem Regressiva’.

Assim que terminar, clique em ‘Iniciar Construção’. O OptinMonster então o redirecionará para a interface do construtor.

A partir daqui, vamos explorar a seção ‘Bloco’ no painel esquerdo. Em seguida, basta arrastar o bloco ‘Contagem Regressiva’ e soltá-lo 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 temporizador 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 webinar.

Mas e se você quiser criar um senso recorrente de urgência? É aí que o temporizador dinâmico é útil.

Digamos que sua loja online realiza uma promoção relâmpago toda semana. Um temporizador 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 temporizador 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 querer ativar a opção ‘Rastreamento de conversão?’ para coletar insights da campanha.

Se desejar, você pode personalizar a aparência do temporizador de contagem regressiva.

Simplesmente mude para a aba ‘Avançado’ e você encontrará opções de personalização para alterar a cor de fundo do temporizador, fontes, sombras e muito mais.

Assim que 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.

Este 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 têm controle direto sobre quando desejam ver sua oferta ou mensagem.

Para usar o MonsterLink, você precisará primeiro clicar no menu suspenso 'tempo na página'. Em seguida, basta selecionar 'Quando (Gatilhos)' e, em seguida, 'MonsterLink (Ao Clicar)'.

Uma vez adicionado, 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, basta clicar no botão ‘Salvar’ e sair do editor.

Você será redirecionado para uma página do OptinMonster, onde precisará verificar o status da sua campanha.

Na seção ‘Visibilidade e Status’, prossiga e altere o status de ‘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 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 para 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 procurar pelo bloco HTML Personalizado. Basta clicar nele para adicioná-lo à página.

No bloco ‘HTML Personalizado’, simplesmente cole o código MonsterLink que você copiou anteriormente.

Veja como pode ficar no editor de blocos da página:

Agora, o chamado para ação ‘Assine Agora!’ pode não se adequar ao propósito da campanha.

Portanto, vamos alterá-lo para ‘Obtenha Nosso Código de Promoção Limitado’, ‘Desbloqueie Descontos Exclusivos’ ou algo que se ajuste melhor ao contexto. Feito isso, 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á a campanha aparecer com o cronômetro.

Veja como fica em nossa página de demonstração ‘Galeria’:

Método 3: Adicionando um Widget de Contador Regressivo Usando o SeedProd

SeedProd é o melhor construtor de temas e landing pages para WordPress.

Seu construtor de arrastar e soltar permite criar landing pages incríveis e adicionar um cronômetro para chamar a atenção do seu visitante.

Para usar o recurso de cronômetro regressivo, 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, consulte 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 exiba 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 » Landing Pages.

O SeedProd permite que você configure diferentes tipos de páginas, incluindo páginas de 'Em Breve', páginas personalizadas do carrinho do WooCommerce, páginas de login e páginas 404. Você também pode criar outras landing pages clicando no botão ‘Adicionar Nova Landing Page’, 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 template para sua landing page.

Embora haja uma opção para criar uma página do zero usando um template em branco, recomendamos o uso de um template, pois economiza tempo e permite que você edite o design como desejar.

Assim que encontrar o template perfeito, você pode passar o mouse sobre ele e clicar no botão de ‘check’ para usá-lo.

Na próxima tela, você será levado ao construtor de páginas de arrastar e soltar do SeedProd, na aba ‘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.

Assim que 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 abas 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 cronômetro e muito mais.

Agora, vamos para ‘Modelos’.

Aqui, o SeedProd permite que você escolha entre 5 estilos de cronômetro 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 cronômetro.

Em seguida, você pode querer rolar a aba ‘Avançado’ até a seção ‘Efeitos de Animação’.

Aqui, você pode aplicar animação para destacar o cronômetro quando os visitantes o virem. Basta clicar no menu suspenso e escolher entre os efeitos disponíveis, como ‘Flash’, ‘Pulse’, ‘Swing’, ‘Wobble’ e muito mais.

Se você quiser ajustar outros elementos da página de destino, como textos ou botões de mídia social, você 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 cronômetro.

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 landing page.

Este recurso é realmente ú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 ficará 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 acessando as configurações de SEO.

O SeedProd permite adicionar um título de SEO, descrição, favicon e miniatura de mídia social.

Se você quiser adicionar trechos de código à sua landing page, 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 landing page.

Quando terminar, certifique-se de clicar no botão ‘Salvar’. Você também pode visualizar sua landing page 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 » Landing Pages e alterar o status da sua página ‘Em Breve’ para ‘Ativo’.

Pronto. Sua landing page com um cronômetro de contagem regressiva estará no ar.

Agora você pode visitar seu site para ver o cronômetro 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 em como adicionar um ticker de notícias em rolagem e como adicionar depoimentos rotativos no WordPress.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.