Como projetar um formulário de login inline para um cabeçalho global personalizado na Divi

Criar um formulário de login embutido para o seu cabeçalho pode ser um ótimo impulso para a experiência do usuário. Eles são perfeitos para sites de membros e lojas online porque tornam muito fácil para os usuários fazerem o login a qualquer momento ou em qualquer página do site. Neste tutorial, mostraremos como criar um formulário de login embutido para um usuário de cabeçalho personalizado, o Divi Theme Builder. Para fazer isso, construiremos um cabeçalho global responsivo simples e, em seguida, criaremos um formulário de login embutido compacto no canto superior direito do cabeçalho usando o Módulo de Login da Divi. A construção requer um pouco de CSS customizado, mas uma vez que tudo esteja no lugar, será fácil customizar o formulário de login inline para combinar facilmente com qualquer design de cabeçalho usando as opções de design integradas do Divi.

Vamos começar!

Espiada

Aqui está uma olhada rápida no cabeçalho personalizado com o formulário de login embutido que construiremos neste tutorial.

E aqui está o formulário de login embutido na tela do tablet e do telefone.

Aqui está a mensagem e o link de “logout” que serão exibidos quando os usuários estiverem logados.

Baixe o layout do cabeçalho do formulário de login inline GRATUITAMENTE

Para colocar suas mãos no layout deste tutorial, primeiro você precisa fazer o download usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será inscrito ou receberá e-mails extras.

Baixe os arquivos

Download de graça

Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.

DOWNLOAD

Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!

Para importar o layout para sua página, simplesmente extraia o arquivo zip e adicione um dos arquivos json no Divi Theme Builder usando a opção Theme Builder Portability.

Vamos para o tutorial, vamos?

O que você precisa para começar

Se ainda não o fez, instale e ative o Divi Theme. Isso é tudo que você precisa para começar. Estaremos criando um novo layout de modelo de cabeçalho do zero com o Divi Theme Builder.

Adicionando um Novo Cabeçalho Global

Para começar, devemos criar um novo Cabeçalho Global para nosso site. Para fazer isso, vá para o painel do WordPress e navegue até Divi> Theme Builder.

No modelo de site padrão, clique em “Adicionar cabeçalho global” e depois em “Criar cabeçalho global”.

Em seguida, selecione a opção Build From Scratch.

Projetando o Divi Global Header com um Formulário de Login Inline

Personalizando a Seção

No editor de Layout de Cabeçalho Global, você poderá construir o cabeçalho personalizado para seu site completamente do zero. Para começar, abra as configurações da seção regular e atualize o seguinte:

• Cor do gradiente de fundo à esquerda:
• Cor certa do gradiente de fundo:
• Direção do gradiente: 48 graus
• Preenchimento: 10px superior, 10px inferior, 20px à esquerda, 20px à direita

Para tornar nosso cabeçalho personalizado mais responsivo, adicionaremos o seguinte CSS personalizado ao elemento principal da seção.

display:flex;
justify-content:center;
align-items:center;

Adicionando o logotipo do cabeçalho à primeira linha

Agora que a seção está pronta, podemos adicionar a primeira linha.

Adicionar linha

Adicione uma linha de uma coluna à seção.

Adicionar Módulo de Imagem com Imagem de Logotipo

Na linha de uma coluna, adicione um módulo de imagem. É aqui que adicionaremos o logotipo para o cabeçalho.

Atualizar imagem e margem do módulo de imagem

Atualize as configurações de imagem da seguinte maneira:

• Imagem: [adicionar logotipo (cerca de 64 x 64 pixels)]

• Margem: 20px certo

Atualizar configurações de linha

Antes de prosseguirmos, abra as configurações da linha e atualize o seguinte:

• Usar largura de calha personalizada: SIM
• Largura da calha: 1
• Largura: 25%
• Alinhamento de linha: esquerda
• Preenchimento: 0 px superior, 0 px inferior

Adicionando o Formulário de Login Inline à Segunda Linha

Adicionar linha

Agora que a primeira linha está pronta, você notará no editor que a primeira linha ocupará 25% da seção à esquerda. Esta será essencialmente a linha designada para o logotipo do nosso cabeçalho. Precisamos criar uma linha de seção para o formulário de login embutido e o menu do lado direito.

Adicione uma segunda linha com uma estrutura de uma coluna à seção.

Adicionar formulário de login

Dentro da linha de uma coluna, adicione um módulo de login.

Excluir conteúdo padrão

Nas configurações de login, exclua o título fictício e o conteúdo do corpo.

Adicionar classe personalizada de formulário de login e CSS

Antes de avançarmos muito no design do formulário de login embutido, vamos primeiro adicionar o CSS customizado e a classe CSS ao módulo de login. Isso nos permitirá obter a estrutura embutida básica do formulário antes de colocar os toques finais de design no formulário com as opções integradas do Divi.

Na guia Avançado, adicione a seguinte classe CSS:

• Classe CSS: header-login-form

Adicione o seguinte CSS personalizado à caixa CSS de descrição de login:

margin-bottom: 0px !important

Em seguida, adicione o seguinte CSS personalizado à caixa CSS do formulário de login:

width: 100%;

O adiciona o seguinte CSS personalizado à caixa CSS dos campos de login:

padding: 5px 4% !important

Adicionar CSS personalizado às configurações de layout do cabeçalho

Uma vez que temos nossa classe CSS personalizada adicionada ao módulo de formulário de login, podemos adicionar nosso CSS personalizado que só terá como alvo esse formulário de login específico.

Abra a configuração de layout do cabeçalho e adicione o seguinte CSS personalizado:

.header-login-form .et_pb_login_form form {
display: flex;
justify-content: flex-end;
align-items: center;
}
.header-login-form .et_pb_login_form .et_pb_contact_form_field {
padding-bottom: 0px;
margin-right: 5px;
}
.header-login-form .et_pb_forgot_password {
display:none;
}

Este CSS fará com que os campos de login e os botões sejam exibidos em linha (horizontalmente), ocultando a mensagem “esqueceu sua senha?” link e adicione uma pequena margem entre os campos.

Configurações de linha

Antes de dar os toques finais no formulário de login inline, vamos atualizar as configurações de linha da seguinte maneira:

• Usar largura de calha personalizada: SIM
• Largura da calha: 1
• Alinhamento de linha: direita
• Preenchimento: 0 px superior, 0 px inferior

Configurações de design do formulário de login

Agora estamos prontos para atualizar as configurações do formulário de login. Abra as configurações do módulo de formulário de login e atualize o seguinte:

• Usar cor de fundo: NÃO

Texto de campo e link

• Fundo dos campos: Cor: rgba (255,255,255,0,2)
• Cor do texto dos campos: #ffffff
• Fonte dos Campos: Lato
• Tamanho do texto dos campos: 14px
• Alinhamento de texto: direita
• Fonte do link: Lato
• Estilo da fonte do link: sublinhado
• Cor do texto do link: # ff3190

Design do botão

• Tamanho do texto do botão: 15px
• Cor de fundo do botão: # ff3190
• Largura da borda do botão: 0 px
• Fonte do botão: Lato
• Preenchimento do botão: 2px superior, 2px inferior
• Margem: 15px inferior
• Preenchimento: 0 px superior, 0 px inferior, 0 px à esquerda, 0 px à direita

Adicionando o Menu à Segunda Linha

Módulo de Menu

Com nosso formulário de login embutido no lugar, podemos adicionar o menu diretamente abaixo dele.

Adicione um módulo de menu no módulo de formulário de login.

Configurações do Módulo de Menu

Atualize as configurações do menu da seguinte forma:

• Cor de fundo: rgba (0,0,0,0)
• Fonte do Menu: Lato
• Peso da fonte do menu: negrito
• Cor do texto do menu: #ffffff
• Tamanho do texto do menu: 16px
• Alinhamento de texto: direita
• Cor de fundo do menu suspenso: #ffffff
• Cor da linha do menu suspenso: rgba (0,0,0,0)
• Cor do texto do menu suspenso: # 000000
• Cor de fundo do menu móvel: #ffffff
• Cor do texto do menu móvel: # 000000
• Cor do ícone do carrinho de compras: #ffffff
• Cor do ícone de pesquisa: #ffffff
• Cor do ícone do menu de hambúrguer: #ffffff

Salvando o cabeçalho do formulário de login inline

Certifique-se de salvar o layout antes de sair do editor de layout de cabeçalho.

Em seguida, salve também as configurações do Theme Builder.

Resultados finais

É isso!

Agora vamos conferir o resultado final. Para ver o resultado final, basta visitar uma página do seu site.

Aqui está o cabeçalho na tela do desktop.

Aqui está o cabeçalho do formulário de login embutido na tela do tablet.

E aqui está o formulário de login embutido no visor do telefone. Observe o menu móvel também.

E aqui está o que o usuário verá depois de fazer login.

Pensamentos finais

Este cabeçalho Global personalizado com um formulário de login embutido certamente será útil para qualquer site de membros ou loja online. Com apenas um pouco de CSS personalizado, fomos capazes de converter o módulo de login do Divi em um elegante formulário de login embutido que se encaixará perfeitamente no cabeçalho de qualquer site. Esperançosamente, isso será útil para seu próximo projeto.

Estou ansioso para ouvir de você nos comentários.

Saúde!