Como adicionar facilmente pop-up modal em um site WordPress: tutorial de 3 etapas

Você sabia que um estudo recente sobre 2 bilhões de pop-ups modais tiveram um Taxa de conversão de 9.28% entre os 10% principais?(1)

Sim. Os pop-ups tornam as visitas ao site fáceis de usar e ajudam você a obter mais inscrições em boletins informativos rapidamente. Os pop-ups mudaram drasticamente em sua aparência e funcionamento. Como resultado, eles estão se tornando mais populares do que nunca em sites modernos.

Você também quer adicionar modais WP ao seu site e aproveitar os benefícios que ele tem a oferecer?

Então este blog é exatamente o que você precisa. Este é o único guia que você precisará aprender sobre modais pop-up e como adicioná-los facilmente ao seu site WordPress. 

Fonte: (1) Estatísticas de pop-ups: descobertas da análise de 2 bilhões de exemplos de pop-ups

O que é um pop-up modal?

Pop-ups modais são muito comuns e é altamente improvável que você não tenha encontrado um. Mas você conhece as definições do pop-up modal? Vamos dar uma olhada.

Um modal (também chamado de janela modal ou lightbox) é um elemento de página da web que é exibido na frente e desativa todos os outros conteúdos da página. Para retornar ao conteúdo principal, o usuário deve interagir com o modal completando uma ação ou fechando-o.

–Hubspot

As janelas modais são diferentes das caixas de diálogo de modelos antigos. Em pop-ups sem janela restrita, os usuários têm acesso a toda a janela mesmo quando o pop-up está ativado. Assim, eles podem ignorar o pop-up e continuar fazendo seu trabalho.

Por outro lado, o novo pop-up modal cria um novo “modo” na forma de uma janela filho e desativa a janela pai. Como resultado, o usuário não pode trabalhar na janela original até que execute alguma ação ou feche o pop-up modal. 

Qual é o benefício? A vantagem é que você chama a atenção do visitante do seu site, mesmo que seja por um ou dois segundos. E conseguir que o usuário foque na sua mensagem é o que você precisa, certo? 

Porque se eles virem o que você tem a oferecer, ficarão por mais de um segundo, o que lhe garantirá uma vantagem.

Por que usar o Popup Modal em seu site WordPress

A maioria das pessoas acha que os pop-ups são irritantes. Claro, não os estou culpando. Você vai a um site para fazer seu trabalho e de repente surge um pop-up e o interrompe, com certeza é irritante. 

Mas, sendo proprietário de uma empresa, você precisa encarar um pop-up de maneira diferente. Porque, acredite ou não, esses pop-ups irritantes funcionam como uma maravilha. Os modais pop-up provaram ser extremamente bem-sucedidos, especialmente na coleta de leads.

De acordo com Sumô, eles coletaram cerca de 23.645.948 endereços de e-mail em menos de dois anos usando um modal pop-up. Em muitos casos, a taxa de conversão chegou a 50,2%! 

Portanto, se você deseja aumentar sua lista de e-mail e acelerar sua taxa de conversão, o pop modal é a sua opção, pois são ímãs de leads comprovados.

Além disso, os modais são simples e flexíveis e você não precisa direcionar os usuários para outra página para concluir uma ação. Mais leads com melhor experiência do usuário. Portanto, nunca pense que os modais são inúteis ou mortos e comece a usá-los hoje.

Usos comuns de uma janela modal em web design moderno

Os modais são altamente eficazes sempre que você precisa que os visitantes do site realizem alguma ação ou percebam alguma mensagem importante. Alguns dos usos comuns de uma janela modal em web design incluem:

• Mostrar mensagem de boas-vindas
• Coletar e-mail e lead para assinatura de boletim informativo
• Forma de login
• Mostrar uma mensagem de aviso antes de agir
• Exibir política de cookies
• Exibir mídia como galeria de imagens (produto) ou vídeo, etc.  
• Para formulários de várias etapas para uma melhor experiência do usuário.

Listei apenas algumas das muitas maneiras de usar o modal em web design. Depois de saber como criar pop-ups personalizados no WordPress, você encontrará várias maneiras de usá-los em seu site para obter os melhores resultados. 

Então vamos começar.

Configuração necessária para começar

Presumo que você tenha o WordPress instalado em seu site. Além disso, você precisará de um construtor de páginas e de um plugin popup WordPress para tornar modal em seu site:

1. Elementor (versão gratuita)
2. Kit de Elementos (versão gratuita e profissional)

Elementor é um construtor de páginas gratuito e ElementsKit é um dos melhores plug-ins pop-up modais do WordPress.

Terminou a instalação? agora você está pronto para criar um pop-up personalizado do WordPress ao clicar no WordPress! Vamos iniciar o processo principal agora.

Como adicionar pop-up modal no WordPress em 3 etapas no Elementor usando ElementsKit

Se você acha que adicionar um pop-up ao seu site WordPress é difícil, fique surpreso. Siga as etapas abaixo e crie facilmente um pop-up modal Elementor em wp. Este é o tutorial mais fácil sobre como adicionar pop-up no WordPress.

Etapa 1: ativar o widget pop-up modal

Depois de instalar os plugins do ElementsKit, você pode habilitar o Widget pop-up modal Elementor do painel do WordPress

• Vá para  Kit de Elementos  > Widgets > Ligar Moda pop-upeu > Clique Salvar alterações

Etapa 2: Adicionar WP Modal Popup Widget 

• Procure um modal pop-up, arrastar e soltar o widget na seção onde você deseja que seu Modal apareça.

Etapa 3: definir as configurações para concluir

Clique no ícone Editar na seção pop-up para acessar as opções de edição.

• Para alterar o texto do botão, vá para Contente > Botão de alternância > Rótulo e editar

• Para mudar o título e legenda Vá para Contente > Cabeçalho e altere as opções com seu texto personalizado.

• Para mudar o contente do corpo, expanda a seção de conteúdo e editar o texto para criar a mensagem pop-up do WordPress.

• Vá para Conteúdo > Rodapé > Botão > CTA e altere o rótulo do CTA e a URL com o ElementsKit, um criador de pop-ups personalizado.

• Por fim, clique em Atualizar salvar.

Pronto. Agora clique no botão de pré-visualização para ver os resultados e verificar como sua janela pop-up do WordPress se parece:

Bom trabalho! Você criou seu pop-up modal Elementor.

Configurações adicionais para Modal

Agora vamos dar uma olhada nas configurações modais adicionais que você pode personalizar:

Disposição:

Expanda a opção de layout para alterar o tipo de alternância, a posição do pop-up e a opção de exibição do pop-up.

Tipo de alternador:

Você não precisa necessariamente ter um modal que seja acionado quando alguém clica em um botão. ElementsKit oferece mais 2 opções para escolher além do botão

Imagem: Você pode escolher qualquer imagem personalizada de qualquer tamanho em vez de um botão como alternador para seu modal. Para escolher uma imagem personalizada 

• Vá para Conteúdo > Tipo de alternância > Escolha a imagem
• Vá para Alternar imagem> Escolha um imagem, tamanho da imagem e alinhamento

Tempo: Você também pode definir o modal para disparar após um tempo específico sem qualquer ação do usuário. Por exemplo, para definir seu modal para aparecer após 3 segundos

• Vá para Conteúdo > Tipo de alternância > Hora
• Adicione tempo Alternar depois (em segundos)

Tipo de exibição pop-up:

Você tem duas opções de tipo de apresentação pop-up: Modal e Slide.

Posição pop-up: 

Você pode optar por colocar seu pop-up em qualquer lugar da janela. As opções de posição disponíveis para escolher são:

• Canto superior esquerdo
• Centro superior
• Canto superior direito
• Centro Esquerda
• Centro
• Centro-direita
• Inferior esquerdo
• Centro Inferior
• Canto inferior direito

Aparecer: 

Expanda a opção pop-up para escolher o largura e altura mínima. Aqui você também tem a opção de mostrar ou ocultar o fechar ícone, cabeçalho e rodapé. Você também pode ajustar a posição horizontal e vertical e adicione animação de acordo com seu desejo.

Sobreposição: 

Caso você não queira forçar o usuário a clicar no seu modal para fechá-lo, ative o Fechar sobreposição pop-up OnClick opção. Dessa forma, o usuário pode clicar em qualquer lugar da janela para dispensar o modal.

Fechar ícone: 

Aqui você pode alterar a posição do ícone Fechar. Você pode definir pop-up no canto superior direito, pop-up no canto superior esquerdo, janela no canto superior direito, janela no canto superior esquerdo. Você também pode alterar as posições vertical e horizontal. Além disso, você pode escolher qualquer ícone da biblioteca ou usar uma imagem SVG como ícone.

Cabeçalho:

Além de alterar o título e o subtítulo, você também pode mostrar ou ocultar a divisória aqui.

Rodapé:

Expanda a opção de rodapé para alterar o rótulo, a variante e o alinhamento dos botões do rodapé. Você também pode optar por ocultá-los, se desejar, a partir daqui. 

Pronto! Agora você pode usar os pop-ups envolventes de aparência moderna em seu site.

Para mais detalhes, leia a documentação de Widget Modal Popup do ElementsKit para Elementor.

Como adicionar design personalizado no Elementor Modal com o construtor ElementsKit Popup

Agora, você sabe como alterar texto, posição, animação e fazer muito mais para personalizar sua janela modal no WordPress. Mas ainda parece um pouco chato, certo? Assim como qualquer outro pop-up modal do WordPress Elementor.

Se você pudesse adicionar uma imagem personalizada ou um vídeo ou qualquer outro widget em sua janela modal, assim como uma página, seria incrível. Você pode adicionar qualquer design personalizado ao seu modelo com o ElementsKit.

Siga as etapas para criar facilmente o design personalizado desejado no modal:

• Vá para Conteúdo > Conteúdo > Ligar Habilitar modelo
• Clique no botão modal e assim que o modal abrir, clique no botão opção de edição para abrir o área de widgets

• Assim que a área do widget estiver aberta, você pode procurar para qualquer widget > arrastar e soltar > atualizar para salvar.

Por exemplo, se você deseja adicionar um vídeo, procure o vídeo na área do widget e arraste e solte para adicionar seu modelo e atualizar. Agora o vídeo deve aparecer na janela modal.

Use seções pré-fabricadas do ElementsKit para um belo modal

Não tem tempo para criar um design de pop-up modal do zero? Não se preocupe. O construtor de pop-ups ElementsKit fornece muitas seções integradas que você pode escolher para criar modais envolventes para destacar sua mensagem ao visualizador.

Para usar widgets integrados do ElementsKit, siga as etapas abaixo:

• Clique no opção de edição no modal  para abrir o área de widgets
• Clique no botão EK para abrir outra janela de widget com as seções predefinidas.

• Vá para > Seções > Escolher a seção que você gosta > Inserir

• Após a inserção, você pode mudar a imagem, texto ou cor de fundo de acordo com sua preferência e atualizar.

E aqui está o resultado final!

ElementsKit oferece mais de 60 widgets e mais de 500 seções prontas. Saiba mais sobre o ElementsKit e como usá-los para aprimorar seu site.

Adicionar formulário de contato 7 em Modal com ElementsKit

Como eu disse antes, os modais são eficazes para conseguir mais assinaturas de boletins informativos e coletar dados do usuário. Mas para isso você precisa adicionar um formulário de contato no seu modal, certo? 

Não entre em pânico, você não precisará de outro plugin pop-up do WordPress para adicionar um formulário de contato em sua janela pop-up. O plugin ElementsKit WordPress é um plugin de criação de pop-up completo.

Siga as instruções abaixo para adicionar o popular Formulário de Contato 7 ao seu modal com o plugin do criador de pop-up ElementsKit.

Antes de seguir estas etapas, certifique-se de ter criado um formulário de contato em seu site usando o Formulário de Contato 7, Elementor Page Builder e ElementsKit.

Você também pode dar uma olhada no vídeo tutorial abaixo para criar um formulário de contato.

Vamos começar.

• Vá para Conteúdo > Conteúdo > Ligar Habilitar modelo
• Clique no opção de edição para abrir o área de widgets
• Procurar Formulário de Contato, arrastar e soltar na seção que você deseja adicioná-lo.
• Expandir a opção de estilo no formulário de contato 7
• Escolha entre pré-fabricado forma e atualizar.

Aqui você tem um pop-up modal com um formulário de contato para aumentar sua lista de e-mail.

Você sabia que pode criar um widget personalizado sem ter nenhum conhecimento profundo de codificação? Confira como construir um widget personalizado facilmente sem qualquer código usando ElementsKit.

Dicas eficazes para adicionar o WordPress Elementor Modal Popup

Os pop-ups modais do WordPress podem aumentar significativamente o envolvimento do usuário, transmitir mensagens importantes e gerar ações específicas de seus visitantes. Aqui está o 7 dicas eficazes para implementar pop-ups modais impactantes em seu site WordPress.

1️⃣ Escolha um plugin confiável

Selecione um plugin modal WordPress bem mantido, como Elementor” ou “ElementsKit” para criar a janela modal em seu site.

2️⃣ Defina metas claras

Descreva claramente o propósito do seu pop-up modal do WordPress, seja ele coletar e-mails, promover ofertas ou transmitir informações importantes.

3️⃣ O tempo é fundamental

Use gatilhos como atraso de tempo, profundidade de rolagem ou intenção de saída para exibir o pop-up no momento certo. Isso ajudará a evitar interrupções imediatas no carregamento da página.

4️⃣ Capacidade de resposta móvel

Certifique-se de que seu pop-up modal do WordPress seja compatível com dispositivos móveis para fornecer uma experiência positiva em vários dispositivos.

5️⃣Design para experiência do usuário

Crie pop-ups modais WordPress concisos e visualmente atraentes com conteúdo de alta qualidade. Inclua uma opção de fácil acesso para fechar o pop-up para usuários desinteressados no conteúdo.

6️⃣ Teste A/B para otimização

Implemente testes A/B para refinar seu modal no WordPress, criando variações e identificando os elementos mais eficazes para o seu público.

7️⃣ Conformidade com os Regulamentos de Privacidade

Certifique-se de que seu pop-up modal WordPress esteja em conformidade com os regulamentos de privacidade, incluindo comunicação transparente de sua política de privacidade e obtenção de consentimento explícito para coleta de dados.

Perguntas frequentes

Embrulhar

Parabéns! Agora você sabe como criar modais pop-up Elementor no WordPress usando um Complemento Elementor. Crie pop-ups de formulário de contato e faça qualquer personalização no site WordPress sem esforço usando o plugin de criação de pop-ups fácil, ElementsKit Pro e o construtor de páginas Elementor.

Não pare aqui. Continue experimentando quantas maneiras você pode usar o modal pop-up do WordPress no seu site. E se precisar de ajuda para criar pop-ups do WordPress usando o ElementsKit, deixe um comentário abaixo.