Como adicionar um pop-up a sites WordPress de forma livre e rápida

Ao visitar um site, você já viu uma imagem ou mensagem repentinamente exibida na tela? Esse é o pop-up ou janela de notificação do site.

Popup é uma estratégia de marketing popular e eficaz, usada por muitos corretores de empresas e proprietários de sites. Para adicionar um pop-up como esse ao WordPress, você pode usar um plug-in gratuito para torná-lo rápido e simples. Mesmo se você não for um especialista, leva apenas 10 minutos para seguir nossas instruções.

Por que você deve usar um pop-up em um site de negócios?

A imagem abaixo é um exemplo de pop-up de um site comercial. Parece ótimo, não é?

O pop-up não é apenas impressionante (se você conseguir projetar um que combine bem e seja atraente), mas também tem muitos outros benefícios, como:

• Promova informações importantes, campanhas de vendas e marketing,…
• Frase de chamariz, aumente a taxa de conversão
• Gerar chumbo

Adicionar um Popup ao WordPress com o plugin Popup Builder

Para adicionar um pop-up ao seu site WordPress, você pode contratar uma empresa de web design confiável ou um programador. Porém, para economizar tempo e dinheiro, o plugin é a melhor opção. Entre uma abundância de plug-ins de pop-up por aí, Popup Builder pode ser o mais fácil de usar e eficaz.

É um plugin gratuito e disponível no wordpress.org, então você só precisa instalar e ativar o plugin direto no Dashboard.

Ao terminar, siga as etapas abaixo.

Etapa 1: Escolha o tipo de pop-up

Agora o submenu Popup Builder aparecerá no Dashboard. Vá lá, clique em Adicionar notícias e escolha um dos 4 tipos de pop-up fornecidos.

Para melhor ilustração, a imagem abaixo mostra como os 4 tipos de pop-up fornecidos por este plugin são exibidos no front end.

Depois de escolher o tipo desejado, vá para a próxima etapa.

Etapa 2: adicionar conteúdo ao pop-up

Primeiro, dê um nome ao pop-up para gerenciá-lo mais facilmente.

Diferentes tipos de pop-up precisam de conteúdos diferentes. Vamos examinar cada tipo.

Adicionar conteúdo a pop-ups do Facebook

Na interface para criar pop-ups do Facebook, você precisa preencher estas informações:

1. A mensagem que aparece no pop-up. Você deve usar uma frase de chamariz para incentivar os leitores a interagir. Além disso, você deve adicionar imagens, banners para que fique mais deslumbrante.
2. Insira o URL do Facebook.
3. Escolha um layout para o pop-up por capricho. Basicamente, esses layouts não são tão diferentes. Assim, você pode experimentá-los e escolher o seu favorito.
4. Clique aqui para ocultar o botão de compartilhamento se desejar.

E isso é o que eu tenho:

Adicionar conteúdo a pop-ups de imagem

Aqui você só precisa fazer o upload da imagem ou inserir o link da imagem. Este plugin suporta JPG, PNG e GIF.

Este é um lindo banner que eu fiz para a campanha da Black Friday do meu site:

Adicionar conteúdo a pop-ups HTML

Adicionar conteúdo ao pop-up HTML é como escrever um post no editor WordPress Gutenberg. Você pode inserir imagens, vídeos, tabelas, botões, citações, ... ou qualquer outro conteúdo que o editor WordPress suporte. A interface é meio parecida com a do editor Gutenberg, então é bastante amigável e nativa.

E este é meu pop-up de HTML no front end:

Adicionar conteúdo a pop-ups de inscrição

Aqui, temos muito conteúdo para preencher e personalizar para o seu formulário de inscrição. No entanto, o que você mais precisa observar são os campos do formulário, como Nome , Sobrenome , Email e personalizar seu Espaço reservado e campo Obrigatório .

Depois disso, role para baixo e personalize a exibição do formulário em termos de opções de plano de fundo do formulário, estilo de entradas, estilos de botão Enviar para torná-lo mais impressionante e compatível com o site.

Notavelmente, na seção Após uma assinatura bem-sucedida , escolha cuidadosamente uma mensagem adequada ou informação que deseja mostrar aos usuários após a assinatura. Por exemplo, você pode exibir notas de agradecimento, cupons, presentes, cartões-presente ... para esses assinantes. Fazendo isso, você pode arrastar as impressões dos usuários e melhorar sua experiência.

Por exemplo, este é o pop-up do meu e-mail de inscrição. Após o envio, mostrarei uma notificação sobre a campanha de venda da Black Friday, pedindo aos clientes que façam compras.

Acesse Popup Builder> Todos os assinantes para gerenciar os assinantes.

Você pode até mesmo enviar e-mails para assinantes na guia Boletim informativo .

Depois de adicionar conteúdo a ele, role para baixo. Você verá muitas outras opções de configuração. Vamos examinar cada opção nas etapas 4,5,6.

Etapa 3: configurar o local de exibição e a condição do pop-up

Configure o local de exibição

Na seção Regras de exibição de pop-up, precisamos ajustar onde o pop-up será / não aparecerá.

Você pode escolher Todos os lugares para mostrá-lo em todas as páginas, postagens, marcações ou personalizações, ou mostrá-lo em um determinado lugar que desejar. Você também pode clicar na dica de ferramenta (?) Para obter mais detalhes.

Por exemplo, eu escolho o local como uma determinada página, escolho “é” para exibi-la e escolho a página de exibição como “Casa” . Além disso, você pode adicionar outros locais escolhendo Adicionar .

Configure a condição de exibição

Na seção Eventos pop-up, escolha o horário em que o pop-up aparecerá (quando o site for carregado por alguns segundos, quando os usuários clicarem em algum lugar, etc). Este plug-in oferece suporte às seguintes condições de exibição:

• No carregamento : O pop-up aparecerá automaticamente após alguns segundos (você pode adicionar o número de segundos na guia Atraso ) a partir do momento em que o site foi carregado.

• Definido pela classe CC : permite que os usuários cliquem em algum componente para habilitar o pop-up. Este componente será baseado no ID dele. Esta parte é meio complicada, então é melhor você ler a documentação com atenção.

• Ao clicar : semelhante à seção Definir por classe CSS , mas você não precisa usar o ID do pop-up para instalar o “botão” para habilitá-lo.

Em vez disso, se você escolher Padrão na seção Opções , o plug-in criará uma classe padrão para o pop-up na seção Classe Padrão , conforme abaixo.

Se você escolher CSS personalizado , preencha a classe que você mesmo criou na seção Classe personalizada .

Depois disso, adicione a classe do pop-up ao CSS do componente que você deseja.

Por exemplo, nesta postagem, adicionei um botão e a classe que desejo na seção Classes CSS adicionais .

Este é o resultado no front end:

• Clique com o mouse : ao passar o mouse sobre um componente, o pop-up aparecerá. Você pode fazer o mesmo que na seção Ao clicar .

Etapa 4: personalizar a exibição do pop-up

Após a etapa 3, você teve um pop-up básico. Mas se você quiser que seja mais impressionante, role para baixo até a seção Design . Aqui você pode personalizar alguns componentes como interface, sobreposição, plano de fundo para torná-lo perfeito como seu favorito.

Mais do que isso, na seção Dimensões , ajuste a largura e o comprimento escolhendo o modo Personalizado ou o modo Responsivo para fazer com que o tamanho corresponda ao conteúdo automaticamente.

Etapa 5: personalizar outras configurações avançadas

Essas configurações avançadas permitem que você configure a exibição e a interação com pop-up, ... de uma forma mais detalhada.

Por exemplo, você pode escolher como fechar a janela pop-up na seção Fechar configurações . Existem várias maneiras de fechá-lo, como pressionar Esc ou adicionar um botão Fechar,… Escolha um ou mais, você decide.

Se você deseja adicionar efeitos de fechamento e abertura de pop-up, ou ajustar os tempos de exibição para um usuário, ... role para baixo até a seção Opções de pop-up. Você só precisa clicar na opção desejada e pronto.

Observe que ao usar o plugin Popup Builder gratuito, as seções denominadas Opção de desbloqueio coloridas em amarelo como a imagem abaixo são recursos da versão profissional. Você tem que comprar mais extensões deste plugin para usá-los.

Por fim, na barra lateral, há uma opção muito interessante: adicionar um botão fixo no site para mostrar o pop-up ao clicar em. Este botão flutuante é realmente conveniente, permitindo que as pessoas o vejam a qualquer hora e em qualquer lugar. Seu design também é agradável e não incomoda.

Este é o botão flutuante no site:

Ou você pode desativá-lo clicando em Desativar .

Por fim, clique em Publicar para fazer isso.

Assim, você concluiu o pop-up após 6 etapas das configurações básicas às avançadas. Você fez um bom trabalho!

Últimas palavras

Como você pode ver, adicionar um pop-up ao WordPress não é realmente complicado. Você só precisa ter um pouco de paciência ao personalizar seu display, isso é todo o trabalho duro!

Além disso, há muitas coisas para aumentar a taxa de conversão do site. Se você deseja construir uma página de destino eficaz, é melhor ler mais alguns artigos sobre como criar uma página de destino de alta conversão ou como criar uma página de produto.

Boa sorte!