Usei mensagens de alerta no WordPress para avisar os clientes sobre estoque baixo, confirmar checkouts bem-sucedidos e até mesmo destacar novos recursos do blog. São aquelas pequenas caixas estilizadas que aparecem em seu site para compartilhar atualizações, erros ou avisos, exatamente quando seus visitantes precisam vê-los.
O WordPress mostra alguns alertas por padrão, como quando um formulário falha ou quando 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 pronto.
O que é uma mensagem de alerta no WordPress?
Uma mensagem de alerta é uma mensagem que aparece em seu site WordPress para informar os visitantes sobre atualizações, notificações ou erros importantes. Você pode exibi-las em vários locais do 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 no envio de um formulário de contato. Essas mensagens de alerta padrão são projetadas para serem informativas e fáceis de usar, mas nem sempre são suficientes para as necessidades específicas do seu site.
Por que adicionar uma mensagem de alerta ao seu site WordPress?
A adição de mensagens de alerta personalizadas ao WordPress permite que você exiba mensagens adaptadas às suas necessidades específicas.
Por exemplo, talvez você queira informar os usuários sobre um novo recurso do seu site ou fornecer um código de desconto para um produto de comércio eletrônico. Da mesma forma, você pode querer avisar os usuários sobre itens que ainda estão em seus carrinhos de compras e mostrar uma mensagem de sucesso após o check-out bem-sucedido.
Ao adicionar mensagens de alerta personalizadas, você pode aprimorar a experiência do usuário no seu site, comunicar informações importantes ao seu público e aumentar a urgência para incentivá-lo a agir.
Tipos de mensagens de alerta que você pode usar no WordPress
Há vários tipos de mensagens de alerta no WordPress que você pode adicionar, dependendo do que deseja que os visitantes façam ou saibam. Cada uma delas tem uma finalidade diferente, e o estilo da mensagem ajuda os usuários a reconhecer o que está acontecendo rapidamente.
- Mensagens informativas: Use-as para dicas gerais, lembretes ou atualizações, como informar os usuários sobre novos recursos ou publicações no blog.
- Mensagens de sucesso: 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: Excelente para alertas que precisam de atenção urgente, como estoque baixo, ações com falha ou erros do sistema.
Cada método deste guia mostra como criar um ou mais desses tipos de mensagem usando ferramentas visuais, para que você não precise escrever uma única linha de código.
Como adicionar uma mensagem de alerta personalizada no WordPress (2 métodos fáceis)
Há várias maneiras de adicionar uma mensagem de alerta personalizada ao WordPress. Você pode codificar manualmente a funcionalidade, instalar um plug-in de barra de notificação do WordPress, usar um plug-in de pop-up ou experimentar um software de notificação. Hoje, mostraremos a você como usar dois dos métodos mais fáceis: usar um plug-in do construtor de páginas do WordPress e um poderoso software de pop-up.
Ambas as soluções são muito fáceis, não exigem conhecimento técnico e você não precisará usar CSS, HTML, PHP, Javascript ou qualquer outro código personalizado.
Método 1: Mostrar uma mensagem de alerta do WordPress usando o SeedProd
Para o primeiro método, usaremos o SeedProd. Com mais de 1 milhão de usuários, ele é o melhor plugin de criação 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 será exibido, estilizá-lo de acordo com o seu site e controlar o tipo de mensagem, desde caixas de informações até avisos de advertência.
Você também pode usar o SeedProd para:
- Crie uma página de "Em breve" no WordPress
- Personalize o design do seu site WooCommerce
- Criar um tema WordPress personalizado
- Adicione ícones personalizados de mídia social ao seu site
- Coloque seu site em modo de manutenção
- E muito mais.
Portanto, se você estiver 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 plug-in SeedProd
A primeira coisa que você precisa fazer é visitar a página de preços do SeedProd e fazer o download do plug-in. Se precisar de ajuda com isso, você pode seguir nossa documentação sobre a instalação do SeedProd.
Observação: o SeedProd tem uma versão gratuita; no entanto, usaremos o SeedProd Pro para o recurso Alert Box.
Depois de ativar o plug-in, vá para SeedProd " Settings e cole sua chave de licença na caixa de licença.
A chave de licença está no site da SeedProd, no painel de controle de sua conta. Depois de inserir sua chave, clique no botão Verify Key (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 Landing Page Builder ou criar temas personalizados do WordPress com o Theme Builder.
Se quiser continuar a usar seu tema atual do WordPress, recomendamos a opção Landing Page Builder. No entanto, se você quiser substituir seu tema e adicionar caixas de alerta ao cabeçalho, rodapé, barra lateral e outros modelos de tema, o Theme Builder é a melhor opção.
Para este tutorial, usaremos a opção Theme Builder. Mas se você quiser criar uma página de destino, pode seguir este guia sobre como criar uma página de destino no WordPress.
Dica profissional: Você pode usar o recurso Alert Box com ambas as opções.
Etapa 2: Escolha um kit de modelo para WordPress
Como estamos optando pela opção Theme Builder, a próxima etapa é visitar a página SeedProd " Theme Builder. Nessa página, você precisará clicar no botão Theme Template Kits (Kits de modelo de tema ) para escolher um layout de site predefinido.
Você verá imediatamente uma biblioteca de kits de sites que poderá 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, inclusive 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
- Criar um modelo personalizado de postagem única
- Edite sua página inicial do WordPress
- Personalize seu cabeçalho do WordPress
- Editar o rodapé do WordPress
- Criar uma barra lateral personalizada
- E mais.
Além disso, é possível personalizar páginas individuais, como a página Sobre, Contato e Serviços. Basta acessar Pages " All Pages e clicar no link Edit with SeedProd ao lado da página que você deseja personalizar.
Para começar, mostraremos como adicionar uma mensagem de alerta à sua página inicial do WordPress. Portanto, passe o mouse sobre o modelo Homepage e clique no link Edit Design.
Etapa 3: Adicionar e personalizar o bloco de mensagens de alerta
Ao abrir o modelo, você verá o construtor de páginas de arrastar e soltar do SeedProd. Ele terá blocos e configurações do WordPress à esquerda e uma visualização ao vivo de sua página inicial à direita.
Você pode clicar em qualquer lugar da 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. Localize o bloco Alert no painel Advanced blocks e arraste-o para onde quiser exibi-lo.
Quando o bloco estiver instalado, você poderá personalizar sua aparência e a mensagem que ele exibe aos visitantes do site.
Primeiro, clique no menu suspenso "Type" (Tipo) e escolha um tipo de alerta, como Info, Success, Warning ou Danger.
Em seguida, dê um título ao seu alerta. Você também pode ativar ou desativar o botão Fechar, que permite que os usuários ignorem 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 cabeçalho.
Para que o alerta se destaque, você pode adicionar um ícone personalizado. O SeedProd tem centenas de ícones Font Awesome, portanto, há muitas opções.
Se quiser usar cores personalizadas para sua mensagem de alerta, clique na guia Advanced (Avançado ) nas configurações do bloco. Aqui, você pode editar a tipografia, alterar as cores da descrição, do título e do plano de fundo e selecionar uma sombra de texto.
No mesmo painel, você pode editar o espaçamento entre blocos, a visibilidade e até mesmo adicionar uma animação para torná-lo mais atraente.
Certifique-se de clicar no botão Salvar antes de personalizar qualquer outra página.
As 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 on-line.
Portanto, seja criativo com as notificações personalizadas e siga a etapa final para colocá-las no ar em seu site.
Etapa 4: Publique a mensagem de alerta em seu site WordPress
Depois de editar qualquer modelo de tema do 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í, localize o botão de alternância Enable SeedProd Theme (Ativar tema SeedProd ) e coloque-o na posição verde "Yes" (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 o OptinMonster
Outra maneira de adicionar uma mensagem de alerta ao seu site WordPress é criar 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 esse método, usaremos o OptinMonster, o melhor software de otimização de conversão do mercado.
O OptinMonster permite que você adicione barras de alerta flutuantes que ficam 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 mensagens de alerta para o seu site. O software tem inúmeros modelos pré-construídos, o que torna muito fácil criar uma barra de alerta de excelente aparência em minutos.
Este é o que faremos neste tutorial:
Vamos começar!
Etapa 1: Instale o OptinMonster e conecte seu site
Primeiro, acesse o site da OptinMonster e registre-se em sua conta.
Em seguida, instale e ative o plug-in do OptinMonster para WordPress. Para obter ajuda com isso, você pode visitar este guia sobre como instalar um plug-in do WordPress.
O plug-in do OptinMonster permite que você conecte facilmente seu site ao software com apenas alguns cliques.
Depois de ativar o plug-in, 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 Connect an Existing Account (Conectar uma conta existente ).
Será exibida uma janela solicitando que você digite seu endereço de e-mail. Depois de adicionar seu e-mail, clique no botão Connect to WordPress (Conectar ao WordPress ).
Etapa 2: Selecione um modelo de barra de alerta flutuante
Depois de conectar sua conta do OptinMonster, vá para OptinMonster " Campanhas no painel do WordPress. Agora, você pode clicar no botão Create Your First Campaign (Criar sua primeira campanha ).
A OptinMonster oferece a opção de um modelo predefinido ou de usar seus manuais, que reproduzem campanhas bem-sucedidas de marcas genuínas. Para este guia, selecionaremos a opção Modelos.
Nessa 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 Use Template (Usar modelo).
Usaremos o modelo "Alert" para nossa barra de alerta.
Depois de selecionar o modelo, você verá um prompt solicitando que dê um nome à sua campanha. Depois de inserir o nome, clique no botão Start Building (Iniciar criação).
Etapa 3: Edite o texto e o design de sua barra de alerta
Na próxima tela, você verá o editor de campanhas do OptinMonster. É aqui que você pode criar e personalizar sua mensagem de alerta.
Por padrão, 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 quiser aumentar a urgência da barra de alerta, você pode arrastar o bloco Contagem regressiva e soltá-lo na barra flutuante.
A partir daí, você pode selecionar o timer do modelo, personalizar suas configurações e inserir a data e a hora de término desejadas.
Você também pode definir o cronômetro como uma contagem regressiva permanente. Uma contagem regressiva permanente é definida separadamente para cada visitante de seu site.
Quando estiver satisfeito com a barra de alerta, clique no botão Save (Salvar ) na parte superior da tela.
Etapa 4: Definir regras de exibição e configurações de acionamento
A próxima etapa é ir até a guia "Display Rules" (Regras de exibição) e selecionar quando e onde exibir a barra. A regra padrão exibe a barra depois que o visitante estiver na página por 5 segundos.
Vamos alterar isso para 0 segundos para que uma mensagem de alerta seja exibida instantaneamente. Para fazer isso, basta alterar a contagem regressiva de 'sec' para 0.
Depois de fazer isso, clique no botão Next Step (Próxima etapa) para alterar as configurações de Action (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 for exibida.
Depois de fazer essas alterações, clique no botão Next Step (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 Save (Salvar ).
Etapa 5: Publique a barra de alerta em seu site WordPress
A próxima etapa é alternar para a guia Publish (Publicar) e alterar o status de publicação para Publish (Publicar).
A última etapa é ativar a campanha em seu site WordPress.
Para fazer isso, feche o editor de campanhas e acesse OptinMonster " Campaigns. 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 aí!
Esperamos que este artigo tenha ajudado você a aprender como criar uma mensagem de alerta no WordPress. Se estiver procurando outra maneira de obter feedback, dê uma olhada no plug-in UserFeedback. Ele é muito fácil de usar e permite que você adicione formulários pop-up com estilo em minutos.
Antes de ir embora, talvez você também goste destes guias sobre como adicionar o Google Analytics ao WordPress e os melhores provedores de hospedagem para WordPress.
Obrigado pela leitura! Gostaríamos muito de ouvir sua opinião, portanto, sinta-se à vontade para participar da conversa no YouTube, X e Facebook para obter mais conselhos úteis e conteúdo para expandir seus negócios.
