Como criar um formulário de login pop-up criativo na Divi

Um bom formulário de login ajuda a aumentar a experiência do usuário no seu site. A ideia do nosso tutorial de hoje é criar um formulário de login usando o Divi Builder, que aparecerá quando você clicar no botão de login na página inicial. Na maioria das vezes, quando clicamos no botão de login, somos redirecionados para a página de login, quando um simples formulário pop-up é muito mais conveniente e refrescante. Então, hoje, vamos aprender a criar um formulário de login pop-up criativo. Isso nós criaremos com a ajuda do módulo de login do Divi e alguns módulos de botão. Então, vamos começar o tutorial de hoje sem demora.

Nota: Só trabalharemos com design de front-end. Se alguém tiver problemas para fazer login, por exemplo, alguém precisa redefinir sua senha, precisamos ir para a página de login tradicional. Para pessoas que estão apaixonadas por páginas de login personalizadas, este tutorial é a escolha perfeita.

Antevisão

Aqui está a prévia do design de hoje. Podemos ver, clicar no botão de login empurra os formulários de login para aparecer, e quando clicamos em logout, um pop-up de aviso antes do logout.

Formulário de login pop-up com botões de login / logout

Para começar com o design, você primeiro precisa ir para Divi

Create Amazing Websites

Com o melhor criador de páginas gratuito Elementor

Comece agora

Agora temos que baixar o cabeçalho e rodapé dos pacotes de layout de Crowdfunding da Divi a partir desta página . Insira seu ID de e-mail e clique em download.

Em seguida, você verá uma opção de download novamente e clique nela. Agora, descompacte o arquivo após o download terminar, volte para o Divi builder e clique na opção de portabilidade.

Agora siga o procedimento descrito abaixo.

• Selecione a guia de importação no pop-up de portabilidade.
• Faça upload do arquivo Json baixado da pasta descompactada.
• Clique no botão importar.
• Em seguida, clique em editar para fazer ajustes no cabeçalho.

Parte 1: Criando botão de login / logout

Primeiro, abra as camadas para que possamos ver todos os elementos facilmente. Na linha superior da seção do cabeçalho, exclua os módulos de mídia social.

Criação do botão de login

Já existe um botão de login na 4ª coluna das linhas superiores. Vamos modificá-lo.

Atualize o seguinte na guia de design:

• Ícone do botão: ícone de cadeado (veja a imagem)
• Posicionamento do ícone do botão: Esquerda
• Mostrar apenas o ícone ao passar o mouse para o botão: NÃO
• Preenchimento: 0,5em superior, 0,5em inferior, 2em esquerdo, 0,7em direito

Adicione duas classes CSS personalizadas ao botão da guia avançada da seguinte maneira:

• Classe CSS: et-toggle-popup et-popup-login-button

Botão de logout

Para criar nosso botão de logout, clone o botão Login existente na coluna 4. Além disso, rotule-os para identificação posterior.

Altere o texto do botão clonado como "Logout".

Altere o ícone do botão na guia de design conforme marcado abaixo.

Por último, altere a classe CSS na guia avançada.

• Classe CSS: et-toggle-popup et-popup-logout-button

Parte 2: Criando uma página pop-up

Criamos os botões com sucesso. Não, criaremos a seção pop-up que funcionará como um formulário. Para criar isso, adicione uma seção regular sob a seção do cabeçalho.

Seção Adicionando E Configurações

Vamos dar à seção um fundo branco.

• Cor de fundo: #ffffff

Faça os ajustes a seguir na guia de design da seção.

• Largura: 100%
• Largura máxima: 800 px (desktop), 80% (tablet), 100% (telefone)
• Alinhamento de Seção: Centro
• Altura: auto (desktop e tablet), 100% (telefone)
• Altura máxima: 100%
• Preenchimento: 0 px superior, 0 px inferior

• Cantos arredondados: 10 px
• Sombra da caixa: veja a imagem
• Posição vertical da sombra da caixa: 0 px
• Força do desfoque de sombra da caixa: 100 px
• Força de propagação da sombra da caixa: 50px

Vamos adicionar uma classe CSS da guia avançada.

• Classe CSS: et-popup-login

Em seguida, adicione o seguinte código CSS no elemento principal.

overscroll-behavior: contain;

Em seguida, faça alguns ajustes em Visibilidade e posição.

• Excesso horizontal: oculto
• Estouro vertical: automático
• Cargo: Fixo
• Localização: Centro Centro
• Índice Z: 999999

Adição de linha e configurações

Vamos adicionar uma linha de uma coluna à nova seção.

Abra as configurações de linha e faça os seguintes ajustes.

• Usar largura de calha personalizada: SIM
• Largura da calha: 1
• Largura: 100%
• Largura máxima: 100%
• Preenchimento: 0px superior, 5vh inferior

Parte 3: Criando o ícone de pop-up Fechar

Usaremos um módulo blurb para criar um ícone de fechamento pop-up.

Exclua os textos do módulo das configurações e adicione o ícone a seguir.

• Ícone de uso: SIM
• Ícone: ícone “x” (veja a imagem)

Aplique as seguintes configurações na guia de design.

• Cor do ícone: # 004e43
• Alinhamento de imagem / ícone: centralizado
• Use o tamanho da fonte do ícone: SIM
• Tamanho da fonte do ícone: 50px

• Largura: 50px
• Alinhamento do Módulo: Direito
• Altura: 50px

Adicione uma classe CSS ao módulo blurb na guia avançada.

• Classe CSS: et-toggle-popup

Parte 4: Criando o formulário

Nosso formulário de login tem dois designs, um para login e outro para logout. Portanto, haverá dois módulos de formulário de login diferentes. O primeiro aparecerá quando um usuário estiver desconectado e precisar fazer o login, e o outro é o usuário está conectado e deseja fazer o logout. Conceito fácil, vamos voltar ao trabalho.

Criação de formulário desconectado

Vamos adicionar um módulo de login para criar nosso formulário de logout.

Agora abra as configurações do módulo de formulário e modifique na guia de conteúdo.

• Redirecionar para a página atual: SIM
• Usar cor de fundo: NÃO

Guia Design

• Cor de fundo dos campos: rgba (0,78,67,0,05)
• Cor de fundo do foco dos campos: rgba (0,78,67,0,15)
• Alinhamento de Texto: Centro
• Cor do Texto: Escuro

• Fonte do título: Poppins
• Peso da fonte do título: Semi negrito
• Cor do texto do título: # 000000
• Altura da linha do título: 1,3em
• Fonte do corpo: Work Sans

Agora vamos voltar à seção de cabeçalho das camadas. Em seguida, abra as configurações do botão para da 4ª coluna da 1ª linha. Vá para a guia de design e abra a opção de botão. Em seguida, clique na opção de três pontos e selecione "estilo do botão de cópia".

Agora cole-o no formulário de login que acabamos de criar.

Atualizaremos o estilo do botão do nosso formulário de login.

• Use estilos personalizados para botão: SIM
• Cor do texto do botão: #ffffff
• Cor de fundo do botão: # 004e43
• Cor de fundo do botão (pairar): # 00683c
• Largura da borda do botão: 0 px
• Preenchimento do botão: 15 px superior, 15 px inferior

Vamos fazer o upload das configurações de dimensionamento também.

• Largura: 100%
• Largura máxima: 80% (desktop), 90% (tablet), 95% (telefone)
• Alinhamento do Módulo: Centro

Agora vá para a guia avançada e adicione a classe CSS e o CSS personalizado conforme escrito abaixo.

• Classe CSS: formulário et-desconectado

Adicione o seguinte código à caixa de descrição de login.

width: 100% !important;
float: none !important;

Em seguida, adicione esse código à caixa Formulário de login.

width: 100% !important;
padding: 0px !important;

Isso torna o formulário de login mais ou menos assim.

Criando o formulário “Logged In”

Terminamos o formulário "Logado" e agora vamos criar o formulário "Logado" com diferentes conteúdos para estender a experiência do usuário. Para fazer isso, vamos clonar o formulário de login existente.

Agora, atualize os nomes de cada formulário. Em seguida, abra o formulário "Logado" na configuração de texto aberto da guia de conteúdo. Em seguida, na caixa de título, você terá um menu suspenso do lado direito. Abra-o e selecione "Título do site".

Abra as configurações de título de site dinâmico e atualize-as da seguinte maneira.

• Antes: â € œVocê está tentando sair de â € œ
• Depois: “. â € œ

Agora edite as configurações de descrição de acordo com sua escolha, mas coloque a descrição como Cabeçalho 3.

Em muitos formulários de login de sites, vimos uma mensagem personalizada anexada ao link "logout". Vamos personalizar a opção de corpo de texto da guia avançada para criá-la.

• Selecione a guia do link nas opções do corpo do texto.
• Fonte do link: Work Sans
• Peso da Fonte do Link: Semi Negrito
• Estilo da fonte do link: TT
• Alinhamento do texto do link: centro
• Cor do texto do link: #ffffff

Vá para a guia avançada e adicione uma classe CSS e CSS personalizado.

• Classe CSS: et-logging-in-form

CSS personalizado para formulário de login:

display:none;

Parte 5: Códigos Personalizados

Precisamos adicionar um módulo de código para adicionar códigos personalizados. Vamos adicionar um módulo de código no último módulo de login.

Código CSS

Adicione o código CSS fornecido no módulo em Tags de estilo .

/* hide popup section */
.et-popup-login {
  display: none;
}
 
/* hide login button when logged in */
.logged-in .et-popup-login-button {
  display: none !important;
}
 
/* hide logout button when logged out */
.et-popup-logout-button {
  display: none !important;
}
 
/* show logout button when logged in */
.logged-in .et-popup-logout-button {
  display: inline-block !important;
}
 
/* hide logged out form when logged in */
.logged-in .et-logged-out-form {
  display: none !important;
}
 
/* hide logged in form when logged out */
.et-logged-in-form {
  display: none !important;
}
 
/* show logged in form when logged in */
.logged-in .et-logged-in-form {
  display: block !important;
}
 
/* style logout link within logged in form */
.et-logged-in-form a {
  display: block;
  padding: 15px 1em;
  border-radius: 8px;
  background: #004e43;
  max-width: 400px;
  margin: 20px auto 0px;
}
.et-toggle-popup {
  cursor: pointer;
}
 
/* show hidden elements in visual builder */
body.et-fb .et-popup-login,
body.et-fb .et-logged-out-form {
  display: block !important;
}
body.et-fb .et-popup-login-button {
  display: inline-block !important;
}

Código JQuery

Agora veja o seguinte código JQuery no módulo dentro de Script Tags.

(function ($) {
  $(document).ready(function () {
    $(".et-toggle-popup").click(function (e) {
      e.preventDefault();
      $(".et-popup-login").fadeToggle(500);
    });
  });
})(jQuery);

Resultado do Design

Então, aqui está o resultado do nosso design. Tudo está no lugar e funciona perfeitamente.

Palavras Finais

Hoje você viu como criar um formulário de login personalizado e criativo com o módulo de login da Divi . Dessa forma, você pode combinar a estética do site em um painel de login personalizado. Espero que você ache este tutorial útil e, se for o caso, um compartilhamento será esplêndido!