TL;DR: Como Adicionar uma Mensagem de Alerta no WordPress Sem Código
Duas ferramentas sem código permitem adicionar uma mensagem de alerta no WordPress a qualquer página em minutos. Veja o que você precisa saber:
- Mensagens de alerta no WordPress são caixas de notificação estilizadas que mostram aos visitantes atualizações, erros ou promoções no momento certo.
- O bloco de Alerta do SeedProd permite adicionar mensagens de informação, sucesso, aviso ou perigo a qualquer página ou modelo de tema sem mexer em código.
- O OptinMonster cria barras de notificação flutuantes que ficam presas no topo ou na parte inferior do seu site para anúncios em todo o site.
- Ambas as ferramentas funcionam sem código, com editores de arrastar e soltar e modelos pré-construídos.
- O bloco de Alerta está disponível em todos os planos do SeedProd, incluindo o Básico.
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 caixa de notificação estilizada que aparece no seu site WordPress para mostrar aos visitantes atualizações importantes, erros ou confirmações. Você pode exibi-las em vários locais do seu site, como 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?
Seu visitante está prestes a sair da página de checkout sem concluir o pedido. Um único alerta de aviso, “Restam apenas 2 itens em estoque”, pode ser o impulso que fecha a venda.
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.
Estudos mostram que os popups de notificação com melhor desempenho convertem em mais de 9%, um aumento significativo em comparação com elementos de página padrão. Ao adicionar uma mensagem de alerta personalizada, você pode comunicar informações importantes ao seu público e aumentar a urgência.
Tipos de Mensagens de Alerta que Você Pode Usar no WordPress
Existem vários tipos de mensagens de alerta no WordPress, às vezes chamadas de caixas de alerta do WordPress, que você pode adicionar dependendo do que deseja 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 baixo estoque, ações falhas ou erros do sistema.
Aqui está um guia rápido para combinar cada tipo com o momento certo:
- Informação: Novos recursos, anúncios ou dicas úteis que não exigem ação.
- Sucesso: Confirmações de pedido, envios de formulário ou qualquer ação concluída.
- Aviso: Avisos de baixo estoque, ofertas expirando ou itens deixados no carrinho.
- Perigo: Erros do sistema, alertas de segurança ou problemas críticos que exigem atenção imediata.
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, mostrarei como usar 2 dos métodos mais fáceis: usando um construtor de sites de arrastar e soltar do WordPress e um poderoso software de popup.
Ambas as soluções são fáceis, não exigem conhecimento técnico e você não precisará usar CSS, HTML, PHP, Javascript personalizados ou qualquer outro código.
Se você se sente confortável editando PHP e CSS, também pode adicionar uma barra de alerta com algumas linhas de código. Mas esses métodos sem código são mais rápidos e não exigem um desenvolvedor.
Método 1: Exibir uma Mensagem de Alerta do WordPress Usando SeedProd
Para o primeiro método, usaremos o SeedProd. É um construtor de sites de arrastar e soltar para WordPress com mais de 1 milhão de usuários.
O SeedProd facilita a adição de caixas de alerta em qualquer lugar do seu site WordPress sem tocar em nenhum código. Você escolhe o tipo, personaliza o estilo e ele está no ar.
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, e usaremos o SeedProd (o bloco de Alerta está disponível em todos os planos, incluindo o Básico).
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 estamos usando 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 Editar 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 sua página Sobre, Contato e Página de 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 à página inicial do seu WordPress. Então, vá em frente e passe o mouse sobre o modelo da Página Inicial e clique no link Editar Design.
Etapa 3: Adicionar e Personalizar o Bloco de Mensagem de Alerta
Ao abrir o modelo, você verá o construtor de sites de arrastar e soltar do SeedProd. Ele terá blocos do WordPress e 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 ótima maneira 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 controle deslizante Habilitar 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!
Usando Mensagens de Alerta em Páginas WooCommerce
Se você administra uma loja WooCommerce, as mensagens de alerta se tornam ainda mais úteis nos momentos mais importantes: avisos de estoque baixo em páginas de produtos, confirmações de checkout ou lembretes de carrinho abandonado.
O Theme Builder do SeedProd oferece controle total sobre os modelos de página do WooCommerce. Você pode adicionar o bloco de Alerta diretamente aos modelos de sua página de carrinho, checkout ou produto usando o mesmo fluxo de trabalho de arrastar e soltar do Método 1.
Aqui estão alguns casos de uso com os quais eu começaria:
- Estoque baixo: Adicione um alerta de Aviso aos modelos de página de produto, como "Restam apenas 3, peça antes que acabem."
- Sucesso no checkout: Adicione um alerta de Sucesso ao seu modelo de página de agradecimento para confirmar que o pedido foi concluído.
- Carrinho abandonado: Adicione um alerta de Aviso à página do carrinho, como "Você tem itens em seu carrinho. Conclua seu pedido para garantir o preço de hoje."
Para fazer isso, vá para SeedProd » Theme Builder e abra o modelo WooCommerce (Carrinho, Checkout ou Produto Único) que você deseja editar. Em seguida, siga as mesmas etapas do Método 1 para adicionar e configurar o bloco de Alerta.
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 flutuante. A barra de alerta ficará na parte superior ou inferior do seu site e exibirá uma mensagem personalizada aos visitantes.
Para este método, usaremos o OptinMonster, uma ferramenta de otimização de conversão que faz parte da família Awesome Motive.
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.
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 em seu administrador do WordPress.
A partir daí, clique no botão Conectar uma Conta Existente.
Uma janela pop-up solicitará que você insira 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, vá para OptinMonster » Campanhas no seu 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 o 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 sua 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 campanha e vá para 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
Preciso do SeedProd Pro para adicionar mensagens de alerta no WordPress?
Não. O bloco de Alerta está disponível em todos os planos do SeedProd, incluindo o plano gratuito Básico. Você pode adicionar mensagens informativas, de sucesso, de aviso ou de perigo em qualquer página sem fazer upgrade.
Qual é a diferença entre uma barra de alertas e uma caixa de alertas no WordPress?
Uma caixa de alertas é um bloco de mensagem inline colocado dentro de uma página ou post; ele fica dentro do seu conteúdo onde você o coloca. Uma barra de alertas é uma faixa flutuante que fica presa no topo ou na parte inferior do seu site e permanece visível enquanto os visitantes rolam a página.
O bloco de Alerta do SeedProd cria caixas de alertas inline. A Barra Flutuante do OptinMonster cria barras de alertas em todo o site.
Posso mostrar uma mensagem de alerta do WordPress apenas em páginas específicas?
Sim. Com o SeedProd, você adiciona o bloco de Alerta a páginas individuais ou modelos de tema, então ele aparece apenas onde você o coloca. Com o OptinMonster, use a regra de exibição de Segmentação por Página para restringir sua barra de alertas a URLs ou tipos de página específicos.
Como adiciono uma mensagem de alerta do WooCommerce para estoque baixo ou checkout?
Use o Construtor de Temas do SeedProd para editar seus modelos de página de carrinho, checkout ou produto do WooCommerce. Arraste o bloco de Alerta para o modelo, defina o tipo como Aviso ou Sucesso e adicione sua mensagem.
Por exemplo, um alerta de Aviso na página do carrinho ("Restam apenas 2 em estoque") pode reduzir o abandono de checkout sem nenhum código personalizado.
Posso adicionar uma mensagem de alerta ao WordPress sem um plugin?
Sim, você pode adicionar uma caixa de mensagens do WordPress com HTML e CSS personalizados diretamente em uma página ou post, ou adicionando PHP ao arquivo functions.php do seu tema. Mas essa abordagem requer conhecimento de codificação e pode falhar se o seu tema for atualizado.
Usar um plugin como o SeedProd é mais rápido, seguro e não requer um desenvolvedor.
Comece a Adicionar Mensagens de Alerta do WordPress Hoje
Mensagens de alerta são uma das maneiras mais rápidas de se comunicar com os visitantes no momento certo: avisos de estoque baixo, confirmações de checkout ou anúncios em todo o site.
O bloco de Alerta do SeedProd facilita a adição deles em qualquer lugar do seu site sem código. Obtenha o SeedProd e comece a construir.
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.
