Últimas notícias da SeedProd

Tutoriais, dicas e recursos do WordPress para ajudar a expandir seus negócios

Como adicionar uma mensagem de alerta personalizada do WordPress

Como adicionar uma mensagem de alerta personalizada ao WordPress 

Escrito por: avatar do autor Stacey Corrin
avatar do autor Stacey Corrin
Stacey escreve sobre WordPress e marketing digital há mais de 10 anos e sobre outros tópicos há muito mais tempo. Além disso, ela é fascinada por web design, experiência do usuário e SEO.
     Avaliado por: reviewer avatar Turner John
reviewer avatar Turner John
John Turner é o cofundador da SeedProd. Ele tem mais de 20 anos de experiência em negócios e desenvolvimento e seus plug-ins foram baixados mais de 25 milhões de vezes.

Deseja adicionar uma mensagem de alerta ao seu site WordPress?

Com uma mensagem de alerta personalizada, você pode informar os visitantes sobre atualizações, notificações ou erros importantes. No entanto, os recursos padrão do WordPress nem sempre são suficientes para o tipo de alerta que você deseja exibir.

Felizmente, adicionar mensagens de alerta personalizadas ao WordPress é um processo simples que pode aprimorar a experiência do usuário do seu site. Neste artigo, exploraremos as etapas necessárias para adicionar uma mensagem de alerta personalizada no WordPress.

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, no rodapé, na barra lateral ou dentro de posts e páginas do 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, você pode querer 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.

mensagem de alerta de advertência de checkout

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.

Como adicionar uma mensagem de alerta personalizada ao WordPress

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.

Vamos mergulhar de cabeça!

Método 1: Criar uma mensagem de alerta do WordPress com 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.

Construtor de sites WordPress SeedProd Drag and Drop

O SeedProd tem uma poderosa interface de arrastar e soltar que facilita a adição de novos layouts ao WordPress. Com sua biblioteca de modelos profissionais e seu sistema de design baseado em blocos, você pode adicionar mensagens de alerta e widgets personalizados em qualquer lugar do seu site em minutos.

Você também pode usar o SeedProd para:

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 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.

digite sua chave 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 modelo predefinido

Since we’re going with the Theme Builder option, the next step is to visit the SeedProd » Theme Builder page. On that page, you’ll need to click the Theme Template Kits button to choose a pre-made website layout.

Kits de modelos de temas

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.

Kits de modelos SeedProd

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.

Escolha um modelo personalizado

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.

Partes do tema SeedProd

Por exemplo, com a ajuda dos tutoriais abaixo, você pode:

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.

editar página inicial

Etapa 3. Adicionar 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.

Interface do construtor de páginas SeedProd

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.

Bloco de alerta do SeedProd

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.

opções de tipo de caixa de alerta

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.

Título da mensagem de alerta do WordPress

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.

Mensagem de alerta Descrição do WordPress

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.

Ícone de mensagem de alerta do WordPress

If you want to use custom colors for your alert message, click the Advanced tab in the block settings. Here, you can edit the typography, change the colors for the description, title, and background, and select a text shadow.

Configurações avançadas de bloqueio de alerta

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.

Animações de mensagens de alerta

Certifique-se de clicar no botão Salvar antes de personalizar qualquer outra página.

Salvar alterações do SeedProd

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.

mensagem de alerta de confirmação de pedido WordPress

Portanto, seja criativo com as notificações personalizadas e siga a etapa final para colocá-las no ar em seu site.

Etapa 4. Publicar suas alterações

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).

ativar o tema seedprod

Agora, você pode visitar seu site e ver sua mensagem de alerta em ação!

Mensagem de alerta Exemplo do WordPress

Método 2: Criar uma barra de alerta com a 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. Com sua interface fácil de usar, ele o ajuda a converter os visitantes do site em assinantes e clientes.

kit de ferramentas de otimização de conversão do optinmonster

O OptinMonster oferece vários tipos de opt-in, incluindo popups lightbox, tapetes de boas-vindas, cronômetros de contagem regressiva e muito mais, que podem ajudá-lo a aumentar o número de assinantes e as vendas em seu site. Ele também oferece tipos de notificação ilimitados e complementos para vários serviços de marketing por e-mail e APIs.

Além disso, como mencionamos 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:

Barra de alerta do OptinMonster

Vamos começar!

Etapa 1. Instalar e ativar o OptinMonster

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 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 ).

Conecte sua conta OptinMonster

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 ).

Conecte o OptinMonster ao WordPress

Etapa 2. Escolha um modelo de barra 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 ).

Criar a primeira campanha do OptinMonster

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.

Escolha as opções de campanha

Nessa página, escolha a barra flutuante como o tipo de campanha para criar sua barra de alerta.

Tipo de campanha de barra flutuante

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 ).

Modelo de barra flutuante de alerta

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 ).

Nome da barra de alerta flutuante

Etapa 3. Personalizar sua barra de mensagens 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.

Personalizar o texto da barra de alerta

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.

Adicionar cronômetro de contagem regressiva à barra de alerta

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.

Configurações do cronômetro de contagem regressiva

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. Configure suas definições de tela

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 um visitante está na página por 5 segundos.

Regras de exibição do OptinMonster

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.

Configurações de ação da campanha OptinMonster

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 sua barra de alerta

A próxima etapa é alternar para a guia Publish (Publicar) e alterar o status de publicação para Publish (Publicar).

Publicar a campanha do OptinMonster

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.

Ativar a barra de alerta no WordPress

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.

Exemplo de barra de alerta flutuante no WordPress

É 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, fique à vontade para deixar um comentário com perguntas e feedback.

Você também pode nos seguir no YouTube, no X (antigo Twitter) e no Facebook para obter mais conteúdo útil para expandir seus negócios.

avatar do autor
Stacey Corrin Escritor
Stacey escreve sobre WordPress e marketing digital há mais de 10 anos e sobre outros tópicos há muito mais tempo. Além disso, ela é fascinada por web design, experiência do usuário e SEO.

Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Recomendamos apenas produtos que acreditamos que agregarão valor aos nossos leitores.