Como criar caixas de alerta no WordPress

Se o seu site recebe um número sólido de visitantes, mas as inscrições ou conversões são menores do que você gostaria, você não está sozinho. Existem muitos recursos disponíveis para ajudar a aumentar seu tráfego – mas fazer com que esse tráfego tome as ações certas em seu site é outra história.

Uma solução possível é usar uma caixa de alerta. Esta é uma ferramenta poderosa e simples que pode aumentar drasticamente as conversões em seu site WordPress. Além disso, é muito fácil criar e personalizar esse recurso.

Neste artigo, abordaremos o que é uma caixa de alerta e por que você deve usá-la. Em seguida, mostraremos como criar sua própria caixa de alerta no WordPress. Vamos mergulhar!

O que é uma caixa de alerta?

Uma caixa de alerta é exatamente o que parece. É um alerta que aparece em um site para notificar os visitantes de que algo ocorreu. Você pode conhecer melhor esse recurso como um 'pop-up'.

As caixas de alerta no WordPress geralmente assumem uma de duas formas. Você pode ver um pop-up que aparece na tela ou uma barra que corre ao longo da parte superior da página (às vezes chamada de 'barra de saudação').

Por que criar uma caixa de alerta?

As caixas de alerta são normalmente usadas para notificar (ou alertar) os usuários sobre algo importante acontecendo em seu site. Por exemplo, você pode usar uma caixa de alerta do WordPress para informar aos visitantes sobre uma venda especial de um produto que eles talvez não vejam ou sobre uma série de postagens em destaque.

Outro uso muito comum para esse recurso é capturar endereços de e-mail de visitantes. Muitos plug-ins de caixa de alerta do WordPress podem ser configurados para aparecer quando um usuário move o cursor para fora do site (para fechar a guia ou pressionar o botão Voltar, por exemplo).

Esses alertas de 'última hora' podem ser uma ótima maneira de capturar os detalhes de contato dos visitantes antes que eles saiam, resultando potencialmente em uma conversão no futuro. Esses alertas podem ser extremamente eficazes – os pop-ups de melhor desempenho têm uma taxa de conversão de mais de 9%. Em outras palavras, eles valem o esforço para implementá-los.

Criando uma caixa de alerta com um plug-in

Graças aos plugins do WordPress, criar suas próprias caixas de alerta é simples. Orientaremos você em todas as etapas usando o poderoso (e gratuito) plug-in do Popup Maker.

Etapa 1: Baixe um plug-in (como o Popup Maker)

A primeira coisa que você precisa fazer é escolher um plugin dedicado. Como mencionamos acima, o plug-in gratuito do Popup Maker é bem revisado e uma escolha sólida.

Para instalar esta ferramenta, vá para o painel do WordPress e navegue até Plugins > Adicionar novo . Pesquise por “criador de pop-up” e deve ser a primeira entrada:

Em seguida, clique em Instalar agora . Quando terminar a instalação, não se esqueça de ativar o plug-in selecionando Ativar . Observe que, embora o próprio Popup Maker seja gratuito, alguns recursos exigem um plano premium para serem usados.

Etapa 2: criar um pop-up

Com o Popup Maker instalado, você deve ver uma nova entrada na barra lateral do WordPress com o nome do plugin . Clique nele para abrir uma lista de todos os seus pop-ups. A princípio estará vazio, mas você está prestes a remediar isso.

Para criar um pop-up, clique em Adicionar novo pop-up na parte superior da tela. Isso abrirá o editor do WordPress:

Ao visitar esta tela, aparecerá um tutorial mostrando como criar um pop-up. A primeira coisa que você deve fazer é inserir um nome, para que você possa identificar o pop-up posteriormente.

Depois disso, você pode inserir um título opcional que aparecerá no pop-up como título. No campo do editor principal, você também pode inserir o conteúdo que deseja exibir no pop-up. Se você deseja apenas criar um formulário de contato simples, também pode usar um shortcode predefinido.

Esses códigos de acesso são encontrados em um novo botão com o logotipo do Popup Maker na barra de ferramentas:

Clique em Formulário de assinatura para inserir um formulário de contato básico para capturar e-mails. O texto dos campos e do aviso de privacidade pode ser personalizado clicando no formulário e selecionando o botão Editar. Existem várias opções de estilos e layout, além de texto.

Etapa 3: configurar gatilhos para seu pop-up

Com seu formulário pop-up criado, o próximo passo é configurar seus gatilhos. Estes determinam quando a caixa de alerta aparece.

Na tela do editor de pop-up, role para baixo até Configurações de pop-up e selecione Gatilhos na lista. Em seguida, clique em Adicionar novo gatilho :

O plug-in base do Popup Maker contém três opções aqui: Click Open , Time Delay/Auto Open e Form Submission . Você também pode selecionar Intenção de saída como um gatilho se estiver em um plano premium – essa é a opção a ser usada se você deseja que o pop-up apareça quando um usuário tentar sair do seu site.

Você também pode ajustar em quais páginas a caixa de alerta aparece na guia Segmentação . Certifique-se de personalizar essa configuração se quiser excluir determinadas páginas ou tipos de dispositivos de ver o alerta.

Etapa 4: estilize sua caixa de alerta

Finalmente, você pode alterar a aparência de sua nova caixa de alerta para melhor corresponder ao tema do seu site. Na área Configurações de pop-up , selecione Exibir . Lá, você pode alterar onde o pop-up aparece na tela (inclusive como barra superior), definir seu tamanho e posição e escolher um dos vários temas disponíveis:

Quando terminar, certifique-se de selecionar o botão Publicar para salvar suas alterações e ativar seu pop-up.

Criando uma caixa de alerta sem um plug-in

Se preferir não usar um plug-in, você também pode criar uma caixa de alerta usando algum código e um pouco de esforço. Você precisará editar seu arquivo header.php e adicionar algum CSS ao seu site. Para este exemplo, criaremos uma barra de alerta na parte superior da página.

Etapa 1: Edite seu arquivo header.php

A primeira coisa que você precisa fazer é adicionar algum código ao seu arquivo header.php . Isso pode ser acessado usando o WordPress Theme Editor. No seu painel, navegue até Aparência > Editor de temas . Em seguida, selecione Cabeçalho do tema (header.php) na barra lateral à direita:

Copie e cole o seguinte código no arquivo no final da seção <head> :

<div class="alertbar">All items 20% off!</div>

Veja como o arquivo deve ficar após esta adição:

Isso exibirá a mensagem “Todos os itens com 20% de desconto!” na sua barra de alerta. Você pode personalizar o texto como quiser.

Etapa 2: adicionar CSS personalizado

Por fim, você precisará usar Cascading Style Sheets (CSS) para estilizar seu alerta. Você pode adicionar CSS usando o WordPress Customizer.

Para fazer isso, vá para o painel do WordPress e navegue até Aparência > Personalizar. Isso abrirá seu site no Personalizador. Na barra lateral, selecione CSS adicional . Isso abre uma caixa de código onde você pode inserir CSS personalizado.

Cole o seguinte código no campo de texto:

.alertbar {

background-color: #A9A9A9;

color: #FFFFFF;

display: block;

line-height: 45px;

height: 50px;

position: relative;

text-align: center;

text-decoration: none;

top: 0px;

width: 100%;

z-index: 100;

}

Veja como fica o alerta:

O código acima cria uma barra cinza escuro com texto branco – mas você pode ajustar as cores e o tamanho da maneira que desejar para combinar com o seu tema. Quando terminar, clique em Publicar para salvar suas alterações.

Melhore seu site com o WP Engine

Se você deseja aumentar as inscrições de e-mail ou precisa de uma maneira simples de notificar os visitantes sobre ofertas especiais, uma caixa de alerta é uma solução elegante e eficaz. A implementação de um em seu site WordPress pode aumentar drasticamente sua taxa de conversão.

Você pode implementar uma caixa de alerta com um plug-in do WordPress, como o Popup Maker. Você também pode codificar um você mesmo com relativa facilidade com um pouco de CSS. De qualquer forma, você receberá um alerta personalizável projetado para aumentar as inscrições e as conversões.

Se você deseja aprimorar ainda mais o seu site, verifique nossos planos dedicados de hospedagem WordPress!