Eu usei mensagens de alerta no WordPress para avisar os clientes sobre estoque baixo, confirmar checkouts bem-sucedidos e até destacar novos recursos do blog. São aquelas pequenas caixas estilizadas que aparecem no seu site para compartilhar atualizações, erros ou avisos, exatamente quando seus visitantes precisam vê-los.
O WordPress exibe alguns alertas por padrão, como quando um formulário falha ou um login é bem-sucedido. Mas eles são limitados, e personalizá-los geralmente significa mexer no código.
Neste guia, mostrarei duas maneiras simples de criar suas próprias mensagens de alerta usando ferramentas que não precisam de código personalizado — basta arrastar, soltar e usar.
O que é uma Mensagem de Alerta no WordPress?
Uma mensagem de alerta é uma mensagem que aparece no seu site WordPress para informar os visitantes sobre atualizações importantes, notificações ou erros. Você pode exibi-las em vários locais do seu site, como no cabeçalho, rodapé, barra lateral ou dentro de posts e páginas de blog.
O WordPress fornece mensagens de alerta padrão para vários eventos, como quando um usuário faz login com sucesso ou quando há um erro ao enviar um formulário de contato. Essas mensagens de alerta padrão são projetadas para serem informativas e fáceis de usar, mas podem não ser suficientes para as necessidades específicas do seu site.
Por que Adicionar uma Mensagem de Alerta ao seu Site WordPress?
Adicionar mensagens de alerta personalizadas ao WordPress permite que você exiba mensagens adaptadas às suas necessidades específicas.
Por exemplo, você pode querer informar os usuários sobre um novo recurso em seu site ou fornecer a eles um código de desconto para um produto de eCommerce. Da mesma forma, você pode querer avisar os usuários sobre itens ainda em seus carrinhos de compras e mostrar uma mensagem de sucesso após um checkout bem-sucedido.
Ao adicionar mensagens de alerta personalizadas, você pode aprimorar a experiência do usuário em seu site, comunicar informações importantes ao seu público e aumentar a urgência para incentivá-los a agir.
Tipos de Mensagens de Alerta que Você Pode Usar no WordPress
Existem vários tipos de mensagens de alerta no WordPress que você pode adicionar, dependendo do que você quer que os visitantes façam ou saibam. Cada um serve a um propósito diferente, e o estilo da mensagem ajuda os usuários a reconhecerem o que está acontecendo rapidamente.
- Mensagens de Informação: Use-as para dicas gerais, lembretes ou atualizações — como informar os usuários sobre novos recursos ou posts de blog.
- Mensagens de Sucesso: Elas confirmam quando algo funcionou, como o envio de um formulário, a criação de uma conta ou uma compra concluída.
- Mensagens de Aviso ou Erro: Ótimas para alertas que precisam de atenção urgente — como estoque baixo, ações falhas ou erros do sistema.
Cada método neste guia mostra como criar um ou mais desses tipos de mensagem usando ferramentas visuais, então você não precisa escrever uma única linha de código.
Como Adicionar uma Mensagem de Alerta Personalizada no WordPress (2 Métodos Fáceis)
Existem várias maneiras de adicionar uma mensagem de alerta personalizada ao WordPress. Você pode codificar manualmente a funcionalidade, instalar um plugin de barra de notificação do WordPress, usar um plugin de popup ou experimentar um software de notificação. Hoje, mostraremos como usar 2 dos métodos mais fáceis: usando um plugin de construtor de páginas do WordPress e um poderoso software de popup.
Ambas as soluções são super fáceis, não exigem conhecimento técnico e você não precisará usar CSS, HTML, PHP, Javascript personalizados ou qualquer outro código.
Método 1: Exibir uma Mensagem de Alerta do WordPress Usando SeedProd
Para o primeiro método, usaremos o SeedProd. Com mais de 1 milhão de usuários, é o melhor plugin de construtor de páginas para WordPress.
O SeedProd facilita a adição de mensagens de alerta personalizadas ao seu site WordPress sem tocar em nenhum código. Você pode escolher onde o alerta aparece, estilizar para combinar com seu site e controlar o tipo de mensagem, de caixas de informação a avisos de alerta.
Você também pode usar o SeedProd para:
- Criar uma página "Em Breve" no WordPress
- Personalizar o design do seu site WooCommerce
- Criar um tema WordPress personalizado
- Adicionar ícones de mídia social personalizados ao seu site
- Colocar seu site em modo de manutenção
- E muito mais.
Portanto, se você está pronto para começar, siga as etapas abaixo para criar uma mensagem de alerta personalizada no WordPress com o SeedProd.
Etapa 1: Instalar e Ativar o Plugin SeedProd
A primeira coisa que você precisará fazer é visitar a página de preços do SeedProd e baixar o plugin. Se precisar de ajuda com isso, você pode seguir nossa documentação sobre como instalar o SeedProd.
Observação: O SeedProd tem uma versão gratuita; no entanto, usaremos o SeedProd Pro para o recurso Caixa de Alerta.
Após ativar o plugin, vá para SeedProd » Configurações e cole sua chave de licença na caixa de licença.
A chave de licença está no site do SeedProd, no painel da sua conta. Após inserir sua chave, clique no botão Verificar Chave.
Em seguida, você precisará decidir o tipo de layout que deseja criar. Com o SeedProd, você pode criar páginas individuais do WordPress com o Construtor de Landing Pages ou criar temas personalizados do WordPress com o Construtor de Temas.
Se você quiser continuar usando seu tema WordPress atual, recomendamos a opção Construtor de Landing Pages. No entanto, se você quiser substituir seu tema e adicionar caixas de alerta ao seu cabeçalho, rodapé, barra lateral e outros modelos de tema, o Construtor de Temas é a melhor escolha.
Para este tutorial, usaremos a opção Construtor de Temas. Mas se você quiser criar uma landing page, pode seguir este guia sobre como criar uma landing page no WordPress.
Dica profissional: Você pode usar o recurso Caixa de Alerta com ambas as opções.
Etapa 2: Escolher um Kit de Modelos do WordPress
Como vamos usar a opção Theme Builder, o próximo passo é visitar a página SeedProd » Theme Builder. Nessa página, você precisará clicar no botão Theme Template Kits para escolher um layout de site pré-fabricado.
Você verá imediatamente uma biblioteca de kits de sites que você pode adicionar ao seu site com um único clique. Usando os filtros da barra superior, você pode classificar os modelos por popularidade, novidade, WooCommerce e muito mais.
Quando encontrar um modelo de que goste, passe o mouse sobre ele e selecione o ícone de marca de seleção para adicioná-lo ao seu site WordPress. Em alguns segundos, o SeedProd importará todo o modelo, incluindo páginas e conteúdo específicos da demonstração.
A partir daí, você verá as partes individuais que compõem seu tema no painel do WordPress. Você pode personalizar qualquer parte do tema passando o mouse sobre ela e clicando no link Edit Design.
Por exemplo, com a ajuda dos tutoriais abaixo, você pode:
- Criar uma página de blog personalizada
- Construir um modelo de postagem única personalizado
- Editar sua página inicial do WordPress
- Personalizar seu cabeçalho do WordPress
- Editar seu rodapé do WordPress
- Fazer uma barra lateral personalizada
- E mais.
Além disso, você pode personalizar páginas individuais, como suas páginas Sobre, Contato e Serviços. Simplesmente visite Páginas » Todas as Páginas e clique no link Editar com SeedProd ao lado da página que deseja personalizar.
Para começar, mostraremos como adicionar uma mensagem de alerta à sua página inicial do WordPress. Então, vá em frente, passe o mouse sobre o modelo da página inicial e clique no link Edit Design.
Etapa 3: Adicionar e Personalizar o Bloco de Mensagem de Alerta
Ao abrir o modelo, você verá o construtor de páginas de arrastar e soltar do SeedProd. Ele terá os blocos do WordPress e as configurações à esquerda e uma visualização ao vivo da sua página inicial à direita.
Você pode clicar em qualquer lugar na visualização para personalizar o conteúdo do modelo e ver as alterações em tempo real. Além disso, você pode arrastar novos blocos do WordPress do painel esquerdo para sua página para adicionar mais recursos e funcionalidades.
É assim que adicionaremos uma mensagem de alerta à página inicial. Encontre o bloco de Alerta no painel de blocos avançados e arraste-o para onde quiser exibi-lo.
Depois que o bloco estiver no lugar, você poderá personalizar sua aparência e a mensagem que ele exibe aos visitantes do seu site.
Primeiro, clique no menu suspenso ‘Tipo’ e escolha um tipo de alerta, como Info, Sucesso, Aviso ou Perigo.
Em seguida, dê um título ao seu alerta. Você também pode ativar ou desativar o botão de fechar, que permite aos usuários dispensar a mensagem.
Agora, insira uma descrição para o seu alerta para fornecer mais informações aos usuários. Abaixo disso, você pode alterar o título e a descrição, o tamanho, o alinhamento e o nível do título.
Para fazer o alerta se destacar, você pode adicionar um ícone personalizado. O SeedProd tem centenas de ícones do Font Awesome, então existem muitas opções.
Se você quiser usar cores personalizadas para sua mensagem de alerta, clique na aba Avançado nas configurações do bloco. Aqui, você pode editar a tipografia, alterar as cores da descrição, título e plano de fundo, e selecionar uma sombra de texto.
No mesmo painel, você pode editar o espaçamento do bloco, a visibilidade e até adicionar uma animação para torná-lo mais chamativo.
Certifique-se de clicar no botão Salvar antes de personalizar quaisquer outras páginas.
Mensagens de alerta são uma maneira fantástica de chamar a atenção para outras áreas do seu site. Na captura de tela abaixo, adicionamos uma mensagem de sucesso à página de confirmação de pedido de uma loja online.
Então, seja criativo com notificações personalizadas e siga o passo final para publicá-las em seu site.
Passo 4: Publique a Mensagem de Alerta em seu Site WordPress
Após editar qualquer modelo de tema SeedProd, você precisará ativar o tema para mostrar as alterações em seu site ativo. Para fazer isso, saia do construtor de páginas e volte para o painel do Theme Builder.
A partir daí, encontre o seletor Ativar Tema SeedProd e mude-o para a posição verde 'Sim'.
Agora, você pode visitar seu site e ver sua mensagem de alerta em ação!
Método 2: Exibir uma Barra de Notificação no WordPress com OptinMonster
Outra maneira de adicionar uma mensagem de alerta ao seu site WordPress é criando uma barra de notificação de alerta. A barra de alerta ficará na parte superior ou inferior do seu site e exibirá uma mensagem personalizada para os visitantes.
Para este método, usaremos o OptinMonster, o melhor software de otimização de conversão do mercado.
O OptinMonster permite adicionar barras de alerta flutuantes que ficam presas na parte superior ou inferior do seu site. Você pode usá-las para ofertas por tempo limitado, avisos de produtos ou anúncios em todo o site, tudo sem código.
Além disso, como mencionei acima, você pode usar o OptinMonster para criar uma barra de mensagem de alerta para o seu site. O software tem inúmeros modelos pré-fabricados, tornando super fácil criar uma barra de alerta com boa aparência em minutos.
Aqui está o que faremos neste tutorial:
Vamos começar!
Passo 1: Instale o OptinMonster e Conecte seu Site
Primeiro, acesse o site do OptinMonster e crie sua conta.
Em seguida, instale e ative o plugin OptinMonster para WordPress. Para obter ajuda com isso, você pode visitar este guia sobre como instalar um plugin do WordPress.
O plugin OptinMonster permite conectar facilmente seu site ao software com alguns cliques.
Após ativar o plugin, você precisará conectar sua conta. Para fazer isso, vá para OptinMonster » Configurações no seu painel do WordPress.
A partir daí, clique no botão Conectar uma Conta Existente.
Uma janela aparecerá pedindo para você inserir seu endereço de e-mail. Assim que adicionar seu e-mail, clique no botão Conectar ao WordPress.
Passo 2: Selecione um Modelo de Barra de Alerta Flutuante
Após conectar sua conta OptinMonster, acesse OptinMonster » Campanhas no painel do WordPress. Agora, você pode clicar no botão Criar sua Primeira Campanha.
O OptinMonster oferece a opção de um modelo pré-fabricado ou o uso de seus playbooks, que replicam campanhas bem-sucedidas de marcas reais. Para este guia, selecionaremos a opção Modelos.
Nesta página, escolha a Barra Flutuante como Tipo de Campanha para criar sua barra de alerta.
Em seguida, você verá uma seleção de diferentes modelos de campanha. Para escolher um modelo, passe o mouse sobre ele e clique no botão Usar Modelo.
Usaremos o modelo 'Alerta' para nossa barra de alerta.
Após selecionar o modelo, você verá um prompt pedindo para nomear sua campanha. Assim que inserir seu nome, clique no botão Começar a Construir.
Etapa 3: Editar o Texto e o Design da Sua Barra de Alerta
Na próxima tela, você verá o editor de campanhas do OptinMonster. É aqui que você pode projetar e personalizar sua mensagem de alerta.
Por padrão, você verá a barra de alerta aparecer na parte superior da tela. Para alterar o texto na barra flutuante, clique na área que deseja editar e digite sua mensagem personalizada.
Você também pode alterar a fonte, o tamanho da fonte, a cor e muito mais.
Se você quiser aumentar a urgência da sua barra de alerta, pode arrastar o bloco de Contagem Regressiva e soltá-lo na barra flutuante.
A partir daí, você pode selecionar o temporizador do modelo, personalizar suas configurações e inserir a data e hora de término desejadas.
Você também pode definir o temporizador como uma contagem regressiva perene. Uma contagem regressiva perene é definida separadamente para cada visitante do seu site.
Quando estiver satisfeito com sua barra de alerta, clique no botão Salvar na parte superior da tela.
Etapa 4: Definir Regras de Exibição e Configurações de Gatilho
O próximo passo é ir para a guia 'Regras de Exibição' e selecionar quando e onde exibir sua barra. A regra padrão exibe a barra após o visitante estar na página por 5 segundos.
Alteraremos isso para 0 segundos para que uma mensagem de alerta apareça instantaneamente. Para fazer isso, basta alterar a contagem regressiva 'seg' para 0.
Depois de fazer isso, clique no botão Próxima Etapa para alterar as configurações de Ação. Você pode deixar o menu suspenso 'mostrar a visualização da campanha' definido como Optin e selecionar se deseja reproduzir um efeito sonoro quando a barra de alerta aparecer.
Após fazer essas alterações, clique no botão Próxima Etapa. Na página seguinte, você verá um resumo da sua campanha.
Se você estiver satisfeito com as configurações, clique no botão Salvar.
Etapa 5: Publicar a Barra de Alerta no Seu Site WordPress
O próximo passo é mudar para a guia Publicar e alterar o status de publicação para Publicar.
O último passo é ativar a campanha no seu site WordPress.
Para fazer isso, feche o editor de campanhas e acesse OptinMonster » Campanhas. Você verá sua campanha na lista, e o Status será Pendente.
Para alterá-lo, clique no status Pendente e selecione Publicar no menu suspenso.
Agora, você pode visitar qualquer página do seu site e ver sua barra de alerta em ação.
Perguntas Frequentes
É isso!
Esperamos que este artigo tenha ajudado você a aprender como criar uma mensagem de alerta no WordPress. Se você está procurando outra maneira de coletar feedback, dê uma olhada no plugin UserFeedback. É super fácil de usar e permite adicionar formulários pop-up elegantes em minutos.
Antes de ir, você também pode gostar destes guias sobre como adicionar o Google Analytics ao WordPress e os melhores provedores de hospedagem WordPress.
Obrigado por ler! Adoraríamos saber sua opinião, então sinta-se à vontade para participar da conversa no YouTube, X e Facebook para mais conselhos e conteúdo úteis para expandir seus negócios.
