Como Criar um Modal de Popup de Login do WordPress (Passo a Passo)

Adicionar um modal de popup de login do WordPress ao seu site pode tornar o login mais fácil para seus usuários. Ele permite que os visitantes façam login sem sair da página atual, o que melhora a experiência geral deles.

Vimos vários sites bem-sucedidos usando esse recurso para manter os usuários engajados e melhorar a interação no site. É uma maneira simples, mas eficaz, de otimizar o processo de login.

Neste artigo, vamos guiá-lo pelas etapas para criar um modal de popup de login do WordPress.

Por que criar um modal de popup de login do WordPress?

Você deve criar um modal de popup de login porque ele torna o login mais rápido e suave para seus usuários, sem enviá-los para uma página separada.

Na maioria dos sites, quando alguém clica no link de login, é redirecionado para a página de login padrão do WordPress ou para uma página de login personalizada. Após o login, é redirecionado novamente.

Essa troca de páginas pode parecer lenta e interromper a experiência do usuário. Um popup de login modal resolve esse problema. Ele abre o formulário de login em uma pequena janela na mesma página.

Os usuários podem fazer login instantaneamente, e você pode redirecioná-los para onde quiser após o login. O processo parece mais rápido e profissional, o que pode melhorar a experiência do usuário e até aumentar as conversões.

Com isso em mente, mostraremos como criar facilmente um popup de login modal no WordPress usando um plugin gratuito e ferramentas premium. Você pode pular para o método que funciona melhor para você:

Pronto? Vamos mergulhar nisso!

Método 1: Crie um Pop-up de Login Modal Usando Login/Signup Popup

Para o primeiro método, usaremos o plugin Login/Signup Popup, um plugin gratuito que permite aos seus usuários fazer login ou registrar-se facilmente em seu site.

Primeiro, você precisará instalar e ativar o plugin Login/Signup Popup. Se precisar de ajuda, consulte nosso guia sobre como instalar um plugin do WordPress.

Após a ativação, você pode ir para Login/Signup Popup » Configurações no painel de administração do WordPress.

Nas configurações 'Gerais', você pode habilitar o registro, fazer login automático dos usuários após o cadastro e lidar com a redefinição de senhas.

Além disso, o plugin também permite selecionar a função de usuário do WordPress que será atribuída aos novos usuários registrados. Por padrão, ele atribuirá a função de 'Assinante'.

Se você rolar para baixo, verá mais configurações. Por exemplo, você pode adicionar uma URL de redirecionamento quando um usuário fizer login ou se registrar.

Não se esqueça de clicar no botão 'Salvar' se você fez alguma alteração.

Em seguida, você pode mudar para a aba 'Estilo' e editar seu modal de popup de login/registro. O plugin permite alterar a posição do popup, largura, altura, cor de fundo, cor do texto e muito mais.

Depois disso, você também pode personalizar os campos do formulário na janela pop-up.

Simplesmente vá para Login/Cadastro Pop-up » Campos no seu painel do WordPress. Aqui, você pode ativar diferentes campos de formulário, editar seus rótulos, torná-los campos obrigatórios e muito mais.

Além disso, há também uma opção para adicionar mais campos à sua janela pop-up de login/cadastro.

Basta clicar no botão ‘+ Adicionar Campo’ no topo e selecionar campos de formulário adicionais para adicionar ao seu modal de login pop-up.

Depois de personalizar os campos do formulário, você pode adicionar o modal de login pop-up ao seu site. O plugin oferece diferentes maneiras de adicionar o pop-up ao seu site.

Adicionar Popup de Login Modal aos Menus

Primeiro, você pode ir para Aparência » Menus no seu painel do WordPress.

Depois disso, você pode ver os itens de menu ‘Login/Cadastro Pop-up’. Basta selecionar os itens que deseja exibir e clicar no botão ‘Adicionar ao menu’.

Para mais detalhes, consulte nosso guia sobre como adicionar um menu de navegação no WordPress.

Adicionar Popup de Login Modal como Links de Âncora

Em seguida, você pode adicionar #login ou #register ao final do URL do seu site e colocar o modal de login como um link interno.

Por exemplo, para criar um link de login, você usaria HTML como este:

<a href="https://www.myawesomesite.com/#login">Login</a>

Para fazer isso, você pode editar uma postagem ou uma página.

Uma vez que você esteja no editor de conteúdo, você vai querer clicar nos 3 pontos e selecionar a opção 'Editar como HTML'.

Depois disso, você pode adicionar o link interno ao texto âncora de login.

Você pode aprender mais seguindo nosso guia sobre como adicionar links de âncora no WordPress.

Use Shortcodes para Adicionar um Modal de Popup de Login

Outra forma de adicionar o popup de login/registro é usando shortcodes.

Você pode simplesmente inserir o shortcode [xoo_el_action] em qualquer lugar do seu site para criar um link/botão para abrir o popup.

Por exemplo, você pode ir para Aparência » Widgets e adicionar um bloco de 'Shortcode' para exibir o popup de login na barra lateral do seu site.

Quando terminar, basta clicar no botão ‘Atualizar’.

Agora, você pode visitar seu site para ver o popup de login em ação.

Método 2: Crie um Pop-up de Login Modal Usando WPForms & OptinMonster

Este método é ótimo para aqueles que desejam mais controle sobre o design e o comportamento de seus popups de login.

Usar WPForms e OptinMonster juntos oferece opções de design poderosas, regras de exibição avançadas (como mostrar o popup após um usuário clicar em um link específico) e melhor integração com serviços de marketing por e-mail.

O WPForms é o melhor plugin de formulário de contato do WordPress, e você precisará de pelo menos o plano Pro deles para acessar o addon 'User Registration'.

OptinMonster é o melhor plugin de popup do WordPress do mercado. Ele ajuda você a converter visitantes do site em assinantes e clientes. Na WPBeginner, nós o usamos várias vezes para criar popups interativos e tivemos uma excelente experiência. Para mais detalhes, veja nossa análise completa do OptinMonster.

Lembre-se que você precisará de pelo menos o plano Plus para acessar o recurso MonsterLinks da ferramenta que mostramos neste artigo.

Usando WPForms para Criar um Formulário de Login de Usuário

Primeiro, vamos instalar e ativar o plugin WPForms. Para mais detalhes, você pode ver nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, você precisará ir para WPForms » Configurações no seu painel do WordPress e inserir a licença.

Você pode encontrar a chave na área da sua conta WPForms.

Em seguida, vamos para WPForms » Addons para instalar e ativar o 'User Registration Addon'.

Após ativar o add-on, você desejará ir para WPForms » Adicionar Novo e criar um novo formulário.

Na próxima tela, você primeiro precisará nomear seu formulário.

Em seguida, você escolherá um modelo de formulário pré-construído na galeria de modelos. Você pode usar a barra de pesquisa para encontrar facilmente o modelo ‘Formulário de Login de Usuário’.

Assim que o encontrar, você poderá clicar no botão ‘Usar Modelo’.

Este modelo de formulário de login tem campos de e-mail e senha que funcionarão de forma semelhante ao formulário de login padrão do WordPress.

Você pode arrastar e soltar quaisquer campos adicionais do lado esquerdo da tela, conforme necessário.

Em seguida, você pode clicar no campo ‘Senha’, e ele mostrará as opções de campo no lado esquerdo.

Você pode adicionar o código fornecido abaixo à caixa de descrição do campo ‘Senha’ para exibir opções como ‘esqueci minha senha’ e ‘registro de usuário’.

Can't remember your password? <a href="{url_lost_password}">Click here</a>. Don't have an account? <a href="{url_register}">Register here</a>.

Depois disso, você precisa clicar no botão ‘Salvar’ para armazenar suas alterações, e você está pronto para publicar o formulário.

Para começar, você pode simplesmente clicar no botão ‘Incorporar’.

Uma janela pop-up será aberta com opções para adicionar seu formulário de login.

Vá em frente e selecione a opção ‘usar um shortcode’. Ele aparecerá como um link na janela, não um botão.

Agora você deve ver um código de incorporação para o seu formulário.

Aqui, você desejará copiar o shortcode e salvá-lo para uso posterior.

Usando o OptinMonster para Criar um Popup Modal

Neste ponto, seu formulário de login está pronto. O próximo passo é criar o popup modal usando o OptinMonster.

Primeiro, você precisará visitar o site OptinMonster e se inscrever para uma conta.

Em seguida, você precisará instalar e ativar o plugin OptinMonster. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.

O plugin atua como um conector entre o seu site WordPress e o OptinMonster.

Após a ativação, você deverá ver a tela de boas-vindas. Prossiga e clique no botão ‘Conectar Sua Conta Existente’.

Uma nova janela será aberta agora.

Simplesmente clique no botão 'Conectar ao WordPress'.

Uma vez conectado, você estará pronto para criar seu pop-up modal.

Simplesmente vá para OptinMonster na área de administração do WordPress e clique no botão ‘Criar Sua Primeira Campanha’.

Na próxima tela, você escolherá uma campanha e um modelo.

Como estamos criando um pop-up modal, vamos selecionar ‘Popup’ como o tipo de campanha.

Quanto ao modelo, o OptinMonster oferece muitos modelos pré-construídos para que você possa ajustar rapidamente um, se necessário.

Depois de selecionar um modelo, uma janela pop-up será aberta. Ela pedirá para você adicionar um nome à sua campanha.

Após inserir um nome, você pode clicar no botão ‘Começar a Construir’.

Com isso feito, você será redirecionado para o construtor de campanhas do OptinMonster.

Você pode adicionar diferentes blocos ao seu modelo a partir do menu à sua esquerda. Então, prossiga e adicione o bloco WPForms.

Depois disso, você deverá ver as opções do bloco WPForms no menu à sua esquerda.

Você pode selecionar o formulário de login que acabou de criar no menu suspenso ‘Seleção de Formulário’.

Se você não vir seu formulário, basta selecionar a opção ‘Adicionar Shortcode Manualmente’ e inserir o shortcode que você copiou anteriormente ao criar o formulário no WPForms.

Não se preocupe se você não conseguir visualizar seu formulário no construtor de campanhas; o formulário aparecerá quando você publicar a campanha.

Em seguida, você pode ir para a aba ‘Regras de Exibição’. O OptinMonster oferece opções poderosas de segmentação.

A partir daqui, você desejará selecionar a regra de exibição ‘MonsterLink™’ (Ao Clicar)’.

Após selecionar a opção, você deverá ver MonsterLink como a regra de exibição.

Clique no botão ‘Copiar Código MonsterLink’ e guarde o link em um local seguro. Você precisará dele mais tarde.

Agora, você está pronto para tornar a campanha ativa.

Simplesmente vá para a aba ‘Publicar’ na parte superior do construtor de campanhas. A partir daqui, você pode definir o ‘Status de Publicação’ para ‘Publicar’.

Depois de fazer isso, não se esqueça de clicar no botão ‘Salvar’ no canto superior direito para armazenar suas alterações.

Adicionando Login Modal no WordPress

Agora, você pode criar uma nova página do WordPress ou editar uma existente.

Uma vez que você esteja no editor de conteúdo, você pode clicar no botão ‘+’ e adicionar um bloco de ‘HTML Personalizado’.

Depois disso, você precisará colar o MonsterLink no bloco de HTML personalizado. Deve ficar algo assim:

<a href="https://app.monstercampaigns.com/c/pimhy1fgvnqqqtormzmw/" target="_blank" rel="noopener noreferrer">log in or register</a>

Por padrão, o texto do link em seu código MonsterLink dirá ‘Assine Agora’, pois é frequentemente usado para captura de leads por e-mail.

Aqui está um exemplo do código padrão:

<a href="https://app.monstercampaigns.com/c/pimhy1fgvnqqqtormzmw/" target="_blank" rel="noopener noreferrer">Subscribe Now</a>

Como este é um formulário de login, você vai querer mudar esse texto. Para este tutorial, mudamos para ‘entrar ou registrar’, como você pode ver no trecho de código abaixo.

<a href="https://app.monstercampaigns.com/c/pimhy1fgvnqqqtormzmw/" target="_blank" rel="noopener noreferrer">log in or register</a>

Você também pode adicionar o código acima aos seus menus do WordPress, barra lateral ou qualquer outra área do seu site.

Apenas certifique-se de salvar as alterações na página do WordPress e visitar seu site para ver o modal de login em ação.

Dica Bônus: Rastreie a Jornada do Usuário em Formulários de Leads do WordPress

Agora que você aprendeu como criar um modal de popup de login no WordPress, vamos ver como rastrear jornadas de usuários para seus formulários do WordPress.

Isso pode ser especialmente útil para o seu formulário de login, pois pode revelar qual conteúdo os usuários visualizam logo antes de decidirem fazer login ou se registrar. Essas informações podem ajudar você a melhorar a navegação e a experiência do usuário do seu site.

Saber o que incentiva os usuários a completar formulários permite que você recrie esse processo para obter mais leads e expandir seus negócios. Embora o Google Analytics possa mostrar alguma atividade do usuário, ele não vincula o comportamento diretamente ao usuário específico que enviou o formulário.

É aí que entra o WPForms. É um plugin popular de criação de formulários que inclui um addon ‘User Journey’ (disponível no plano Elite), permitindo que você veja de onde os usuários vieram, qual caminho seguiram e quanto tempo passaram em cada página antes de enviar um formulário.

Se você estiver interessado em aprender mais, sinta-se à vontade para consultar nosso guia sobre como rastrear a jornada do usuário em formulários de lead do WordPress.

Perguntas Frequentes sobre Como Criar um Modal de Popup de Login no WordPress

Aqui estão algumas perguntas frequentes de nossos leitores sobre como adicionar um modal de pop-up de login no WordPress:

Posso personalizar o design do meu pop-up de login do WordPress?

Sim, com certeza. Ambos os métodos que abordamos oferecem opções de personalização para combinar com a marca do seu site. Geralmente, você pode alterar cores, fontes, tamanhos e adicionar seu próprio logotipo para criar um visual coeso.

Um modal de pop-up de login funcionará em dispositivos móveis?

Sim. Plugins modernos de pop-up como o OptinMonster são construídos para serem totalmente responsivos. Isso significa que seu modal de login se ajustará automaticamente para ter uma ótima aparência em desktops, tablets e smartphones.

Pop-ups de login deixam um site lento?

Quando você usa plugins bem codificados e otimizados como WPForms e OptinMonster, não deve haver impacto perceptível no desempenho do seu site. Essas ferramentas são projetadas para serem leves e carregar de forma eficiente.

Posso adicionar botões de login social ao meu pop-up?

Alguns plugins oferecem funcionalidade de login social como um recurso integrado ou premium. Por exemplo, a versão pro do plugin Login/Signup Popup suporta logins sociais. Isso pode tornar ainda mais fácil para os usuários fazerem login.

Esperamos que este artigo tenha ajudado você a aprender como criar um modal de popup de login no WordPress. Você também pode conferir nossa lista completa dos melhores plugins de página de login do WordPress e nosso guia sobre como redirecionar usuários após o login bem-sucedido no WordPress.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.