Como adicionar um formulário de login suspenso ao cabeçalho Divi

Se você estiver construindo um site de membros, é muito necessário pensar sobre a experiência de login. Claro, você pode permitir que os visitantes usem a página de login padrão do WordPress, mas também pode torná-lo mais fácil para eles incluindo um formulário de login em seu cabeçalho. Nesse caso, você deseja acionar o formulário de login ao clicar para economizar espaço em seu cabeçalho. Isso é exatamente o que mostraremos no tutorial Divi de hoje. Construiremos um cabeçalho global do zero e incluiremos um formulário de login suspenso. Você também poderá baixar o arquivo JSON gratuitamente!

Vamos lá.

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Baixe o modelo de cabeçalho global GRATUITAMENTE

Para colocar suas mãos no template de cabeçalho global gratuito, primeiro você precisa baixá-lo 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á “reinscrito” nem 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!

1. Crie um novo modelo de cabeçalho global

Vá para Divi Theme Builder

Comece acessando o Divi Theme Builder no backend do seu site WordPress. Uma vez lá, clique em “Add Global Header”.

Adicionar Novo Cabeçalho Global

Um menu suspenso aparecerá. Para começar a construir do zero, continue selecionando “Build Global Header”.

2. Construir Design de Cabeçalho

Adicionar Seção # 1

Imagem de fundo

Uma vez dentro do editor de template, você notará uma seção lá já. Abra as configurações da seção e carregue uma imagem de fundo ou use uma cor de fundo.

Espaçamento

Vá para a guia de design da seção e modifique o preenchimento superior e inferior a seguir.

• Enchimento superior: 10 px
• Preenchimento inferior: 10 px

Adicionar linha à seção

Estrutura da Coluna

Continue adicionando uma nova linha usando a seguinte estrutura de coluna:

Dimensionamento

Sem adicionar módulos ainda, abra as configurações de linha e modifique as configurações de dimensionamento da seguinte forma:

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Equalize Alturas de Coluna: Sim
• Largura:
  • Desktop: 80%
  • Tablet e telefone: 95%
• Largura máxima: 2580 px

Espaçamento

Modifique os valores de preenchimento a seguir.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px
• Preenchimento esquerdo: 1%
• Preenchimento direito: 1%

CSS do elemento principal

Para alinhar automaticamente as colunas verticalmente, adicionaremos as seguintes linhas de código CSS ao elemento principal da linha na guia avançada:

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

Adicionar Módulo de Acompanhamento de Mídia Social à Coluna 1

Adicionar redes sociais

É hora de adicionar módulos, começando com um Módulo de Acompanhamento de Mídia Social na coluna 1. Adicione as redes sociais de sua escolha.

Alterar a cor de fundo de cada rede social individualmente

Em seguida, altere a cor de fundo de cada rede social individualmente para branco.

• Cor de fundo: #ffffff

Configurações de ícone

Volte para as configurações gerais do módulo e altere a cor do ícone na guia de design.

• Cor do ícone: # 141414

Fronteira

Aplique algumas configurações de canto arredondado nas configurações de borda a seguir.

• Todos os cantos: 100px

Adicionar Módulo de Botão à Coluna 2

Adicionar cópia

Na coluna 2, o único módulo de que precisamos é um Módulo de botão. Adicione alguma cópia de sua escolha.

Alinhamento de Botão

Altere o alinhamento do módulo a seguir.

• Alinhamento do Botão: Direito

Configurações de botão

Em seguida, defina o estilo do botão.

• Usar estilos personalizados para botão: Sim
• Tamanho do texto do botão: 12 px
• Cor do texto do botão: #ffffff
• Cor de fundo do botão: # ff4700
• Largura da borda do botão: 0 px
• Raio da borda do botão: 0 px
• Espaçamento entre letras dos botões: 2 px

• Fonte do botão: Prata
• Estilo da fonte do botão: maiúscula

Espaçamento

E conclua as configurações do botão aplicando os seguintes valores de preenchimento às configurações de espaçamento:

• Preenchimento superior: 16 px
• Preenchimento inferior: 16 px
• Preenchimento esquerdo: 24px
• Preenchimento direito: 24px

Adicionar Seção # 2

Cor de fundo

Adicione outra seção logo abaixo da anterior e use a seguinte cor de fundo para ela:

• Cor de fundo: # fff4ef

Espaçamento

Remova todo o preenchimento padrão superior e inferior na guia de design a seguir.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Adicionar linha # 1

Estrutura da Coluna

Continue adicionando uma nova linha usando a seguinte estrutura de coluna:

Dimensionamento

Sem adicionar módulos ainda, abra as configurações de linha e altere as configurações de dimensionamento da seguinte forma:

• Equalize Alturas de Coluna: Sim
• Largura:
  • Desktop: 80%
  • Tablet e telefone: 95%
• Largura máxima: 2580 px

Espaçamento

Modifique os valores de preenchimento nas configurações de espaçamento também.

• Preenchimento superior: 5 px
• Preenchimento inferior: 5 px
• Preenchimento esquerdo: 2%
• Preenchimento direito: 2%

Configurações da coluna 2

Cor de fundo

Em seguida, abra as configurações da coluna 2 e aplique uma cor de fundo apenas no tablet e no telefone.

• Área de Trabalho: /
• Tablet e telefone: # f2e8e3

Espaçamento

Estamos adicionando um pouco de preenchimento superior e inferior em tamanhos de tela menores também.

• Enchimento superior:
  • Tablet e telefone: 25px
• Preenchimento inferior:
  • Tablet e telefone: 25px

Adicionar Módulo de Menu à Coluna 1

Selecione o menu

A seguir, adicionaremos um Módulo de Menu à linha. Selecione um menu de sua escolha.

Carregar logotipo

Faça upload de um logotipo para o seu Módulo de Menu.

Remover cor de fundo

Em seguida, remova a cor de fundo do menu.

Configurações de texto do menu

Vá para a guia de design do módulo e estilize o texto do menu da seguinte maneira:

• Fonte do Menu: Prata
• Cor do texto do menu: # 111821
• Tamanho do texto do menu: 18 px
• Altura da linha do menu: 1,4em
• Alinhamento de Texto: Direito

Configurações do menu suspenso

Altere também as configurações do menu suspenso.

• Cor de fundo do menu suspenso: # fff4ef
• Cor da linha do menu suspenso: # 191919
• Cor do texto do menu suspenso: # 191919
• Cor de fundo do menu móvel: # fff4ef
• Cor do texto do menu móvel: # 191919

Configurações de ícones

Em seguida, altere as cores dos ícones nas configurações dos ícones.

• Cor do ícone do carrinho de compras: # 191919
• Cor do ícone de pesquisa: # 191919
• Cor do ícone do menu de hambúrguer: # 191919

Dimensionamento

E conclua as configurações do módulo aplicando as seguintes configurações de dimensionamento:

• Largura máxima do logotipo: 50 px
• Largura: 100%

3. Adicionar formulário de login suspenso e funcionalidade de clique

Adicionar Módulo Blurb à Coluna 2

Adicionar Título

Agora que a base do nosso cabeçalho foi construída, podemos nos concentrar na criação do gatilho e do formulário da lista suspensa de login. A primeira coisa de que precisaremos é um Módulo Blurb na coluna 2 de nossa linha. Aqui, vamos adicionar um título.

Selecione o ícone

A seguir, selecionaremos um ícone.

Configurações de ícone

Vá para a guia de design do módulo e altere as configurações do ícone da seguinte forma:

• Cor do ícone: #ffffff
• Ícone de círculo: Sim
• Cor do círculo: # ff4700
• Posicionamento de imagem / ícone: esquerda

Configurações de texto do título

Em seguida, defina o estilo do texto do título.

• Fonte do título: Lato
• Peso da fonte do título: pesado
• Estilo da fonte do título: maiúsculas
• Tamanho do texto do título: 12 px
• Espaçamento entre letras de título: 3px

Animação

Também estamos removendo a animação padrão deste módulo nas configurações de animação.

• Animação de imagem / ícone: sem animação

Blurb Title CSS

E adicionaremos uma margem superior ao título da sinopse na guia avançada.

margin-top: 10px;

Posição

Por último, mas não menos importante, vamos reposicionar o módulo nas configurações de posição.

• Posição: Absoluta
• Localização: Centro

Adicione a linha 2 à seção 2

Estrutura da Coluna

Para adicionar o formulário de login, vamos usar uma nova linha abaixo da anterior, com a seguinte estrutura de colunas:

Dimensionamento

Sem adicionar módulos ainda, abra as configurações de linha e altere as configurações de dimensionamento da seguinte forma:

• Equalize Alturas de Coluna: Sim
• Largura máxima: 2580 px

Espaçamento

Modifique os valores de preenchimento também.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px
• Preenchimento esquerdo: 2%
• Preenchimento direito: 2%

Adicionar Módulo de Login à Coluna 2

Remover Conteúdo

Adicione um Módulo de Login à coluna 2. Certifique-se de que as caixas de conteúdo estejam vazias.

Cor de fundo

Altere a cor do plano de fundo a seguir.

• Cor de fundo: # ff4700

Configurações de campos

Vá para a guia de design e defina o estilo dos campos.

• Cor de fundo dos campos: rgba (0,0,0,0)
• Cor do texto dos campos: rgba (255,255,255,0,73)
• Preenchimento esquerdo dos campos: 0px
• Preenchimento direito dos campos: 0 px
• Fonte dos Campos: Lato
• Tamanho do texto dos campos: 16px

• Altura da linha dos campos: 1.8em
• Todos os cantos: 0px
• Largura da borda inferior dos campos: 1px
• Cor da borda inferior dos campos: #ffffff

Configurações de botão

Em seguida, modifique as configurações do botão da seguinte forma:

• Usar estilos personalizados para botão: Sim
• Tamanho do texto do botão: 12 px
• Cor do texto do botão: #ffffff
• Cor de fundo do botão: # 141414
• Largura da borda do botão: 0 px
• Raio da borda do botão: 0 px
• Espaçamento entre letras dos botões: 2 px
• Fonte do botão: Prata

• Estilo da fonte do botão: maiúscula
• Preenchimento da parte superior do botão: 16 px
• Preenchimento inferior do botão: 16 px

Dimensionamento

Certifique-se de que a largura seja “100%” também.

• Largura: 100%

CSS do botão de login

Aplique alguma margem superior à caixa CSS do botão de login na guia avançado.

margin-top: 30px;

Posição

E reposicione o módulo de acordo:

• Posição: Absoluta
• Localização: Cima direita
• Deslocamento vertical: 1px

Adicionar CSS ID ao Módulo Blurb na linha 1

Agora que temos todos os elementos de que precisamos, podemos nos concentrar na funcionalidade de clique. Primeiro, abra o Módulo Blurb e adicione o seguinte ID CSS:

• ID CSS: divi-login-toggle

Adicionar CSS ID ao Módulo de Login na Linha 2

Abra o Módulo de Login a seguir e aplique o seguinte ID CSS:

• ID CSS: divi-login-form

Adicionar Módulo de Código Abaixo do Módulo de Login

Em seguida, adicione um Módulo de Código logo abaixo do Módulo de Login.

Adicionar tags de estilo e script

Para criar a funcionalidade de clique, usaremos alguns códigos CSS e JQuery. Para preparar esse código, adicionaremos tags de estilo (para o código CSS) e tags de script (para o código JQuery).

Insira o código CSS entre as tags de estilo

Coloque as seguintes linhas de código CSS entre as tags de estilo:

#divi-login-toggle {
cursor: pointer;    
}

#divi-login-form {
margin-top: -20px;
visibility: hidden;
opacity: 0;
  
-webkit-transition: all 0.2s ease !important;
-moz-transition: all 0.2s ease !important;
-o-transition: all 0.2s ease !important;
transition: all 0.2s ease !important;
}
  
.show-login-form {
visibility: visible !important;
margin-top: 0px !important;
opacity: 1 !important;
}

Inserir JQuery entre tags de script

E o seguinte código entre as tags de script:

jQuery(document).ready(function($){

var loginForm =  $('#divi-login-form');

$('#divi-login-toggle').click(function() {

loginForm.toggleClass('show-login-form');

});
});

4. Salve as alterações do Divi Theme Builder

Agora que tudo está no lugar, a única coisa que resta a fazer é salvar todas as alterações do Divi Theme Builder e ver o resultado!

Antevisão

Agora que já passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Pensamentos finais

Nesta postagem, mostramos como ser criativo com seu cabeçalho ao construir um site de associação. Mais especificamente, mostramos como incluir um formulário de login suspenso que permite que seus visitantes façam login em suas contas sem ter que ir para a página de login do WordPress. Você também conseguiu baixar o arquivo JSON do modelo de cabeçalho gratuitamente! Se você tiver dúvidas ou sugestões, fique à vontade para deixar um comentário na seção de comentários abaixo.

Se você está ansioso para aprender mais sobre o Divi e obter mais brindes do Divi, certifique-se de assinar nosso boletim informativo por e-mail e canal no YouTube para que você sempre seja uma das primeiras pessoas a saber e obter os benefícios desse conteúdo gratuito.