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

add_modal_popup_in_wordpress

Você sabia que um estudo recente sobre 2 bilhões de pop-ups modais tiveram um 9.28% conversívelna taxa entre os principais 10%?

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.

Quer também adicionar modais 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. 

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

  • Vá para  Kit de Elementos  > Widgets > Ligar Moda pop-upeu > Clique Salvar alterações
habilitar widget pop-up ElementsKit Pop-up modal WordPress Elementor pop-up modal
Habilitar widget modal

Etapa 2: adicionar modal 

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

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
alterar o texto do botão de alternância
Alterar texto do botão de alternância
  • Para mudar o título e legenda Vá para Contente > Cabeçalho e altere as opções com seu texto personalizado.
alterar o modal do título e do subtítulo
Alterar título e subtítulo
  • Para mudar o contente do corpo, expanda a seção de conteúdo e editar o texto.
editar pop-up modal do texto do corpo
Alterar corpo do texto
  • Vá para Conteúdo > Rodapé > Botão > CTA e altere o rótulo e o URL do CTA
alterar o texto do CTA e o pop-up modal do URL
Alterar CTA e URL
  • Por fim, clique em Atualizar salvar.

Feito. Agora clique no botão de visualização para ver os resultados.

visualização modal
Visualização

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

Configurações adicionais para Modal

pop-up modal de configurações adicionais
Configurações adicionais

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. 

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

Agora você sabe alterar texto, posicionar, animar 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.

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
habilitar modelo Elementskit elementor popup modal construtor elementor modal
Habilitar modelo
  • 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.

vídeo no WordPress modal popup modal Elementor como adicionar popup no wordpress
Visualizar Modal com Vídeo
Baixe o gif do ElementsKit

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

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

Pop-up modal do WordPress Elementor Pop-up modal
Abra a seção do widget ElementsKit

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
insira a seção pré-fabricada do ElementsKit em seu pop-up modal do WordPress elementor modal
Pesquisar e 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!

pop-up modal elementor com seção pré-fabricada por ElementsKit WordPress pop-up
Pré-visualizar Modal com Seção Pré-fabricada

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.
pop-up modal elementor com formulário de contato 7 pop-up WordPress
Modal com visualização do formulário de contato 7

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 pop-up modal WordPress

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

Como criar um popup no wordpress sem plugin?

Você pode criar um pop-up modal WordPress sem um plugin usando código personalizado ou temas que suportem funcionalidade modal. No entanto, usar um plugin WordPress pop-up modal, por exemplo, ElementsKit, simplifica o processo e fornece recursos adicionais.

Quando não usar pop-ups modais?

Você deve evitar usar pop-ups modais em situações em que possam atrapalhar a experiência do usuário, como em dispositivos móveis com telas pequenas ou durante interações críticas do usuário, como processos de checkout. 

Usar pop-ups modais é ruim para SEO?

Os pop-ups modais em si não afetam diretamente o SEO, mas sua implementação pode afetar a experiência do usuário e as classificações de pesquisa. Portanto, você deve garantir que os pop-ups não sejam intrusivos e sejam projetados de acordo com as diretrizes do Google para intersticiais, para evitar implicações negativas de SEO.

Qual é o melhor plugin pop-up modal para WordPress?

ElementsKit é recomendado como um plugin pop-up modal WordPress poderoso e rico em recursos. Ele oferece uma variedade de opções de personalização, modelos e compatibilidade com vários construtores de páginas, tornando-o uma escolha popular entre os usuários do WordPress.

Baixe o gif do ElementsKit

Embrulhar

Parabéns! Agora você sabe como criar modais pop-up Elementor 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 fácil de criar pop-ups ElementsKit Pro e o construtor Elementor Page.

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

Para saber mais detalhes e ler mais blogs sobre plug-ins do WordPress, junte-se à nossa comunidade em Facebook e Twitter. Se você preferir tutoriais em vídeo, assine nosso Canal do Youtube.


Comentários

  1. Avatar de Steve

    Deve haver uma opção para criar um modal pop-up usando um link de âncora de texto.
    Então, isso poderia ser usado com links de texto simples e ícones, etc.
    Pessoalmente, não quero clicar em um botão ou imagem, gostaria simplesmente de clicar em um link de texto e o modal aparecer.

    1. Avatar de Dipa Shaha
      Dipa Shaha

      Steve,
      eu espero que você esteja bem. Infelizmente, não temos a opção que você deseja no momento.
      Mas além do botão e da imagem, também temos um tipo de alternância de tempo que faz com que o pop-up apareça após um determinado tempo que você pode definir manualmente. Você também pode tentar isso.
      E acolhemos quaisquer novas ideias. Se você deseja esse recurso, pode solicitá-lo usando este link https://wpmet.com/plugin/elementskit/roadmaps/

  2. Avatar de Quint

    Vários modais podem ser acionados clicando em um botão? Por exemplo, quando um botão é clicado, dois modais são renderizados lado a lado ou verticalmente (dependendo do tamanho da janela), onde o usuário é solicitado a selecionar o botão no modal um ou no modal dois – designs A/B, por exemplo. A ideia aqui é gerenciar/humorar a atenção, apresentando informações/recursos visuais em pedaços pequenos.

    1. Avatar de Dipa Shaha
      Dipa Shaha

      Caro Quinto
      Infelizmente, o recurso que você deseja não está disponível. No entanto, você pode solicitar esse recurso. A equipe do ElementsKit fica sempre feliz em receber sugestões de recursos.
      Você pode solicitar recurso usando este link https://wpmet.com/plugin/elementskit/roadmaps/#ideas
      Obrigado

Deixe um comentário

Seu endereço de e-mail não será publicado. Campos obrigatórios marcados com *