Como Criar uma Barra de Alerta no WordPress (3 Maneiras Fáceis)

Você quer adicionar uma barra de alerta ao seu site WordPress?

Uma barra de alerta ou barra de notificação é uma ótima maneira de informar aos visitantes sobre atualizações importantes, ofertas especiais, lançamentos de novos produtos e muito mais.

Neste artigo, mostraremos como criar uma barra de alerta no WordPress com 3 soluções fáceis.

Por que Criar uma Barra de Alerta no WordPress?

Uma barra de alerta é uma ótima maneira de informar aos seus visitantes sobre algo importante em seu site. Isso pode ser um evento de vendas em andamento, uma atualização em seus horários de funcionamento ou mudanças em seus serviços.

Você também pode usar uma barra de alerta para informar aos visitantes sobre uma oferta especial, como uma oferta compre um, leve um grátis. Esta é uma ótima opção se você gerencia uma loja online.

Usar uma barra de alerta é melhor do que apenas colocar um anúncio em sua página inicial. Sua barra de alerta pode aparecer em destaque bem no topo de cada página em todo o seu site.

É fácil criar uma barra de alerta no WordPress. Veremos métodos usando os melhores plugins de barra de notificação e um método manual usando código HTML e CSS. Simplesmente clique nos links abaixo para pular diretamente para cada opção:

• Método 1: Criando uma Barra de Alerta Usando OptinMonster
• Método 2: Criando uma Barra de Alerta Usando o Thrive Leads
• Método 3: Crie Manualmente uma Barra de Alerta Usando HTML/CSS Personalizado
• Bônus: Adicione Mensagens de Alerta Personalizadas às Páginas do WordPress

Método 1: Criando uma Barra de Alerta Usando OptinMonster

OptinMonster é o melhor software de otimização de conversão e geração de leads do mercado. Ele ajuda você a converter mais visitantes do site em assinantes e clientes.

O OptinMonster oferece um construtor de campanhas de arrastar e soltar. Ele vem com pop-ups de lightbox bonitos, tapetes de boas-vindas, contadores regressivos e outras sobreposições dinâmicas que ajudam você a aumentar assinantes e vendas em seu site.

Você também pode usar o OptinMonster para criar uma barra de alerta para o seu site. Seus modelos pré-construídos tornam muito fácil criar uma barra de alerta que fica ótima em minutos.

Primeiro, você precisa visitar o site do OptinMonster e se inscrever para uma conta. Você precisará de pelo menos o plano Básico, pois ele inclui o tipo de campanha Floating Bar.

Em seguida, você precisa instalar e ativar o plugin OptinMonster WordPress. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.

Este plugin permite conectar seu site WordPress ao software OptinMonster.

Após a ativação, você verá a tela de boas-vindas e o assistente de configuração. Clique no botão ‘Conectar sua conta existente’.

Em seguida, uma nova janela será aberta onde você precisará conectar seu site WordPress ao OptinMonster.

Basta clicar no botão ‘Conectar ao WordPress’ para prosseguir.

Agora você pode seguir as instruções na tela para conectar sua conta OptinMonster.

Em seguida, basta ir para OptinMonster » Campanhas no seu painel do WordPress. Clique no botão ‘Criar sua Primeira Campanha’.

Isso abrirá o construtor de campanhas do OptinMonster.

A partir daqui, você precisa selecionar a ‘Barra Flutuante’ como seu Tipo de Campanha para criar uma barra de alerta.

Em seguida, você verá uma escolha de modelos de campanha. Escolha um modelo que você deseja usar.

Você só precisa passar o mouse sobre ele e clicar no botão ‘Usar Modelo’ para selecioná-lo. Usaremos o modelo Promoção de Código de Cupom para nossa barra de alerta.

Em seguida, você será solicitado a dar um nome ao seu modelo. Assim que tiver nomeado sua campanha, clique no botão ‘Iniciar Construção’.

Agora, você verá o editor de campanhas. É aqui que você pode projetar sua barra de alerta.

O OptinMonster oferece diferentes blocos que você pode simplesmente arrastar e soltar no modelo. Por exemplo, você pode adicionar uma imagem, texto, botão e muito mais à sua barra de alerta.

Você verá que sua barra de alerta aparece na parte inferior da sua tela por padrão.

Para movê-la para o topo da tela, você precisa clicar em ‘Configurações da Barra Flutuante’ no lado esquerdo. Em seguida, basta clicar no controle deslizante para mover a barra flutuante para o topo da página.

Para alterar o texto na barra flutuante, basta clicar na área que você deseja alterar e digitar qualquer texto que desejar.

Você também pode alterar a fonte, o tamanho e a cor do texto, e muito mais.

Para alterar as configurações da contagem regressiva, basta selecionar o temporizador.

Em seguida, prossiga e insira a data e hora de término desejadas. O OptinMonster também permite que você escolha o tipo de contagem regressiva. Você pode selecionar o tipo ‘Estático’ se desejar exibir um temporizador padrão com sua data e hora de término especificadas.

Por outro lado, existe um tipo de contagem regressiva ‘Dinâmico’. O temporizador funcionará com base no comportamento de cada usuário em seu site. A contagem regressiva é definida separadamente para cada visitante do seu site.

Assim que estiver satisfeito com o design da sua barra de alerta, não se esqueça de clicar no botão ‘Salvar’ na parte superior da sua tela.

Em seguida, você precisa ir para a aba ‘Regras de Exibição’ para selecionar quando e onde sua barra de alerta será exibida em seu site. A regra padrão é que sua barra de alerta seja exibida após o visitante estar na página por 5 segundos.

Vamos alterar isso para 0 segundos para que a barra de alerta apareça instantaneamente. Para fazer isso, basta alterar o valor ‘seg’ para 0.

Além disso, você também pode selecionar onde a barra de alerta aparecerá. Você pode usar a configuração padrão, que é ‘o caminho da URL atual é qualquer página’. Dessa forma, sua barra de alerta aparecerá em todas as páginas do seu site WordPress.

Em seguida, clique no botão ‘Próxima Etapa’ para alterar as configurações de Ação. Você pode deixar as configurações de ‘mostrar a visualização da campanha’ como Optin e selecionar se deseja reproduzir um efeito sonoro quando a barra de alerta aparecer.

Depois de fazer suas alterações, prossiga e clique no botão ‘Próxima Etapa’ mais uma vez.

Aqui, você verá um resumo das suas regras de exibição. Você pode fazer edições e alterações finais na sua campanha de barra de alerta.

Quando estiver satisfeito, simplesmente clique no botão ‘Salvar’ na parte superior da tela.

Depois disso, você pode ir para a aba Publicar na parte superior e alterar o Status de Publicação para ‘Publicar’. Assim que isso for feito, você precisará clicar no botão ‘Salvar’ e fechar o construtor de campanhas.

Em seguida, você verá as Configurações de Saída da Campanha.

O passo final é ativar a campanha no seu próprio site. Simplesmente mude o Status de ‘Pendente’ para ‘Publicado’.

Não se esqueça de clicar no botão 'Salvar Alterações' quando terminar.

Agora, simplesmente visite qualquer página do seu site e você verá sua campanha em ação.

Método 2: Criando uma Barra de Alerta Usando o Thrive Leads

Outra maneira de adicionar barras de alerta ao seu site WordPress é usando Thrive Leads. Ele faz parte do pacote Thrive Themes e ajuda você a gerar leads através de barras de alerta, lightboxes, popups de slide-in e muito mais.

Primeiro, você precisará visitar o site Thrive Themes e se inscrever para uma conta. Simplesmente clique no botão ‘Começar Agora’ para começar.

Em seguida, você precisará instalar e ativar o plugin Thrive Product Manager em seu site. Para mais detalhes, consulte nosso guia sobre como instalar um plugin do WordPress.

Você pode encontrar o plugin Thrive Product Manager na área da sua conta.

Depois de instalar o plugin, basta ir para a página Product Manager na área de administração do seu WordPress.

A partir daqui, clique no botão ‘Log into my account’.

Após fazer login na sua conta, você verá diferentes plugins e ferramentas oferecidos pela Thrive Themes.

Simplesmente selecione o plugin Thrive Leads e, em seguida, clique no botão ‘Install selected products’ na parte inferior.

Quando o Thrive Leads estiver pronto para uso, você verá uma mensagem de sucesso.

Em seguida, você pode clicar no botão ‘Go to the Thrive Themes Dashboard’.

Em seguida, você precisará ir para Thrive Dashboard » Thrive Leads no painel de administração do WordPress.

Ao lado do título Grupos de Leads, basta clicar no botão ‘Adicionar Novo’.

Depois disso, uma janela pop-up será aberta.

Você pode inserir um nome para seu novo grupo de leads e clicar no botão ‘Adicionar Grupo de Leads’.

Em seguida, você precisará criar um novo formulário de opt-in.

Vá em frente e clique no botão ‘Adicionar Novo Tipo de Formulário de Opt-in’.

Depois disso, o Thrive Leads pedirá para você selecionar um tipo de formulário.

Você pode selecionar o tipo ‘Fita’ para adicionar uma barra de alerta ao seu site.

Após adicionar o tipo de formulário de opt-in Fita, você precisará adicionar um formulário.

Simplesmente clique na opção ‘Adicionar um formulário’ em Grupos de Leads.

Na próxima tela, você pode escolher entre qualquer um dos seus formulários existentes.

Como esta é a sua primeira vez criando um formulário, vá em frente e clique no botão ‘Criar Formulário’.

Agora, você verá uma janela pop-up aparecer em sua tela.

Você pode inserir um nome para o seu formulário e clicar no botão ‘Criar Formulário’.

Seu formulário será adicionado ao grupo de leads Fita.

Para editar o design do formulário, basta clicar no ícone de lápis.

Em seguida, o Thrive Leads mostrará vários modelos para escolher.

Simplesmente selecione um modelo e clique no botão ‘Escolher Modelo’ na parte inferior.

Isso iniciará o construtor visual com uma prévia ao vivo, onde você pode personalizar sua barra de alerta.

Por exemplo, você pode selecionar o texto no modelo e alterá-lo de acordo com suas necessidades. Ou clique na imagem na barra de alerta e altere-a.

Quando terminar de editar, clique no botão ‘Salvar Trabalho’ na parte inferior.

Agora você pode fechar o editor visual e voltar para as configurações do formulário. Aqui, você verá opções para configurar o gatilho da barra de alerta, a frequência de exibição e a posição.

Por padrão, a barra de alerta aparecerá no topo quando uma página carregar. No entanto, você pode alterar essas configurações.

Por exemplo, se você clicar na opção Gatilho, verá mais opções, como mostrar a barra de alerta após um certo tempo, quando um usuário rolar para baixo uma certa quantidade, ou quando um usuário atingir o final da página.

Além disso, você também pode alterar a frequência de exibição. A barra de alerta aparecerá o tempo todo por padrão para todos os usuários.

No entanto, você pode editar isso e exibir sua barra de alerta para o mesmo visitante após um certo número de dias.

Em seguida, você pode voltar para a página do Thrive Leads no seu painel do WordPress.

Depois disso, basta clicar no ícone de engrenagem para abrir as Configurações de Exibição.

A partir daqui, você pode escolher em quais posts e páginas a barra de alerta aparecerá.

Por exemplo, você pode mostrá-la apenas na página inicial ou escolher todos os posts e páginas. Há também uma opção para excluir algumas páginas e posts de exibir sua mensagem de alerta.

Quando terminar, basta clicar no botão ‘Salvar e Fechar’.

O último passo é clicar nos alternadores para exibir sua barra de alerta em dispositivos desktop e mobile.

Feito isso, sua barra de alerta estará pronta para coletar endereços de e-mail dos usuários e construir sua lista de e-mails.

Você pode visitar seu site para vê-la em ação.

Você pode ver nossa análise completa do Thrive Themes para mais detalhes.

Método 3: Crie Manualmente uma Barra de Alerta Usando HTML/CSS Personalizado

E se você não quiser usar OptinMonster ou Thrive Leads? Neste método, mostraremos como criar uma barra de notificação usando código HTML e CSS.

Primeiro, você precisará copiar o seguinte código CSS personalizado para a barra de alerta:

<pre class="wp-block-syntaxhighlighter-code">
.alertbar {
    background-color: #ff0000;
    color: #FFFFFF;
    display: block;
    line-height: 45px;
    height: 50px;
    position: relative;
    text-align: center;
    text-decoration: none;
    top: 0px;
    width: 100%;
    z-index: 100;
}
</pre>

Uma maneira fácil de adicionar código CSS ao seu site é usando WPCode. É o melhor plugin de snippets de código para WordPress que ajuda você a adicionar código personalizado ao seu site.

Observação: WPCode é um dos plugins próprios do WPBeginner. Nós o criamos para facilitar muito a adição de scripts, código HTML e muito mais às páginas do seu site. Ele vem com recursos como uma biblioteca de snippets de código integrada, lógica condicional, pixels de conversão e muito mais.

Primeiro, você precisará instalar e ativar o plugin gratuito WPCode. Para mais detalhes, consulte nosso guia sobre como instalar um plugin do WordPress.

Após a ativação, você precisa ir para Code Snippets » + Add Snippet no painel do WordPress e selecionar a opção ‘Add Your Custom Code (New Snippet)’.

Depois disso, insira um título para seu snippet no topo e cole o código CSS na área Code Preview.

Você também precisará alterar o Code Type para a opção ‘CSS Snippet’.

Em seguida, você pode rolar para baixo até a seção Insertion. É aqui que você pode escolher onde o código será executado.

Como queremos que a barra de alerta apareça em todo o site, você pode usar o método padrão ‘Auto Insert’. Você também pode manter a configuração ‘Run Everywhere’.

Assim que isso for feito, você pode clicar no botão ‘Save Snippet’ no topo.

Você também precisará clicar no botão para ativar o código.

Depois disso, vá para Code Snippets » Headers & Footer no seu painel de administração do WordPress.

Basta copiar e colar a seguinte linha de código HTML na caixa ‘Header’:

<div class="alertbar">We are currently closed due to Covid-10.</div>

Veja como esse código deve ficar na caixa ‘Header’ no WPCode:

Você pode alterar o texto do alerta para qualquer outra coisa que desejar. Não se esqueça de clicar no botão ‘Save Changes’ no topo da página assim que terminar.

Agora, você pode visitar seu blog WordPress para ver a barra de alerta. Ela deve aparecer no topo de cada página como esta:

Dica: Em alguns temas do WordPress, sua barra de alerta pode sobrepor seu menu. Você pode alterar a altura da barra para 40px ou 30px para evitar isso. Você também precisará reduzir a altura da linha de acordo para que seu texto permaneça centralizado verticalmente na barra.

Bônus: Adicione Mensagens de Alerta Personalizadas às Páginas do WordPress

Se você deseja adicionar mensagens de alerta personalizadas a diferentes partes do seu site, como páginas de produtos, páginas de checkout e páginas de loja, você pode usar o SeedProd. É o melhor construtor de sites e construtor de páginas de destino para WordPress.

O plugin oferece um construtor de arrastar e soltar para criar um tema personalizado e páginas de sites sem editar código. Ele também oferece um bloco de Alerta que você pode colocar em qualquer lugar do seu site.

Este bloco de Alerta pode avisar os clientes que seu estoque está acabando, que itens específicos estão em promoção ou outros avisos sensíveis ao tempo.

Você pode simplesmente adicionar o bloco de Alerta à sua página e, em seguida, adicionar um título e uma descrição. O plugin também permite adicionar conteúdo dinâmico, que permite inserir datas e outros parâmetros de consulta.

Existem também mais opções de personalização para o bloco de Alerta. Por exemplo, você pode alterar seu alinhamento, ajustar o tamanho da fonte e editar o ícone.

Para saber mais sobre como usar o SeedProd, você pode ver este guia sobre como criar páginas personalizadas no WordPress.

Esperamos que este artigo tenha ajudado você a aprender como criar uma barra de alerta no WordPress. Você também pode querer ver nosso guia sobre os melhores construtores de página com arrastar e soltar para WordPress para ajudar a personalizar ainda mais seu site e os melhores plugins WooCommerce para aumentar as vendas da sua loja.

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.