Quando você cria um cabeçalho personalizado para seu site da Web, usando o construtor de temas Divi, você se encontrará procurando a maneira perfeita de adicionar um AAL (chamada à ação). Uma maneira de fazer isso é adicionar um formulário de contato rolagem. Isso ajudará você a manter a aparência geral do seu cabeçalho limpa, ao mesmo tempo em que oferece a capacidade de inserir entrar em com você, sem ter que rolar para baixo. Neste tutorial, mostraremos como criar um formulário de contato drop-down usando código Divi e JQuery & CSS. Você também poderá baixar o arquivo JSON gratuitamente!
Vamos.
Visão geral
Antes de mergulharmos no tutorial, vamos dar uma olhada no resultado em diferentes tamanhos de tela.
1. Vá para o Divi Theme Builder e comece a criar um cabeçalho global
Vá para o Divi Theme Builder
Comece acessando o Divi Theme Builder no backend do seu site WordPress.
Crie um cabeçalho global
Clique em "Adicionar cabeçalho global" e selecione "Criar cabeçalho global" para começar a criar um cabeçalho global personalizado.
2. Construir o design do cabeçalho
Configurações de seção
Cor de fundo
Uma vez dentro do template de cabeçalho geral, você notará uma seção. Abra esta seção e use uma cor de fundo branca.
- Cor de fundo: #FFFFFF
espaçamento
Em seguida, remova o preenchimento superior e inferior padrão da seção.
- Estofamento superior: 0px
- Preenchimento inferior: 0px
Caixa de sombra
Aplique também uma sombra de caixa sutil.
- Força do Borrão da Sombra da Caixa: 50px
- Cor da sombra: rgba (0,0,0,0,15)
Adicione uma nova linha
Estrutura da coluna
Continue adicionando uma nova linha à seção usando a seguinte estrutura de colunas:
dimensionamento
Sem adicionar mais módulos, abra os parâmetros de linha e modifique os parâmetros de dimensionamento da seguinte maneira:
- Use uma largura de calha personalizada: Sim
- Largura da calha: 1
- Equalizar as alturas das colunas: Sim
- Largura: 95%
- Largura máxima: 100%
espaçamento
Em seguida, adicione preenchimento superior e inferior personalizado.
- Estofamento superior: 1vw
- Estofamento inferior: 1vw
Elemento principal
E alinhe todo o conteúdo da coluna adicionando uma única linha de código CSS ao elemento principal da linha.
align-items: center;
Coluna 2 Índice Z
Também nos certificamos de que a segunda coluna tenha um valor de índice z mais alto para fins reativos.
- Índice Z: 12
Adicione um módulo de imagem à coluna 1
Baixar logo
É hora de começar a adicionar módulos! Comece com um módulo de imagem na coluna 1. Carregue um logotipo.
alignement
Em seguida, altere o alinhamento do módulo.
- Alinhamento da imagem: centro
dimensionamento
Mude também a largura.
- Largura: 3vw (computador), 5vw (tablet), 7vw (telefone)
Adicione um módulo de menu à coluna 2
Selecione o menu
Na segunda coluna, adicionaremos um módulo de menu.
Provisão
Alterne para a guia de design do módulo e altere o estilo do layout.
- Estilo: Centrado
Configurações de texto do menu
Em seguida, altere as configurações de texto no menu do módulo.
- Fonte do menu: Abrir sem
- Peso da fonte do menu: Semi bold
- Cor do texto do menu: # 000000
- Tamanho do texto do menu: 0.8vw (desktop), 2vw (tablet), 3vw (telefone)
- Espaçamento entre letras do menu: 1 px
Configurações de texto do menu suspenso
Em seguida, altere a cor da linha no menu suspenso.
- Cor da linha do menu suspenso: # 007dff
ícones
Com a cor do ícone do menu de hambúrguer.
- Cor do ícone do menu de hambúrguer: # 007dff
Adicione o módulo de texto 1 à coluna 3
Adicione uma cópia
Vamos passar para o terceiro módulo! Adicione um módulo de texto com uma cópia de sua escolha.
Cor de fundo
Em seguida, adicione uma cor de fundo.
- Cor de fundo: # 007dff
Configurações de texto
Mude para a guia de design do módulo e altere as configurações de texto de acordo:
- Fonte de texto: Open Sans
- Peso da fonte do texto: negrito
- Cor do texto: #ffffff
- Tamanho do texto: 0.8vw (computador), 2vw (tablet), 3vw (telefone)
- Alinhamento do texto: centro
dimensionamento
Em seguida, modifique os parâmetros de dimensionamento do módulo.
- Largura: 33%
- Alinhamento do módulo: centro
espaçamento
Em seguida, adicione preenchimento superior e inferior personalizado.
- Estofamento superior: 0.8vw (mesa), 2vw (tablet e telefone)
- Estofamento inferior: 0.8vw (mesa), 2vw (tablet e telefone)
Fronteira
E complete os parâmetros do módulo adicionando um raio da borda.
- Todos os cantos: 100px
Adicione o módulo de texto 2 à coluna 3
Adicione um símbolo à área de conteúdo
Vamos passar para o próximo módulo, que é outro módulo de texto. Adicione a seguinte seta na área de conteúdo: "▼".
Configurações de texto
Mude para a guia de design do módulo e altere as configurações de texto de acordo:
- Fonte de texto: Open Sans
- Cor do texto: # 007fff
- Tamanho do texto: 3vw
- Altura da linha de texto: 0em
- Alinhamento do texto: centro
Índice Z
Também aumentamos o índice z do módulo.
- Índice Z: 11
Adicione o módulo do formulário de contato à coluna 3
Agora você pode adicionar um formulário de contato logo na parte inferior do módulo de texto que contém a seta. Este módulo é bastante simples de usar, então você precisará personalizar quais campos deseja tornar visíveis.
3. Personalize os elementos para criar um formulário de contato com um clique
Adicione a altura da coluna 3
Depois que todos os mods estiverem no lugar, é hora de criar o efeito. A primeira etapa para alcançar o resultado desejado é abrir as configurações na coluna 3 e adicionar altura personalizada responsiva na guia avançada.
Escritório:
height: 3vw;
tablet:
height: 5vw;
Telefone:
height: 6vw;
Adicione uma classe CSS ao botão e à seta
Em seguida, adicionaremos a mesma classe CSS aos dois primeiros módulos de texto na coluna 3.
- Classe CSS: mostrar-entrar em
Adicione uma classe CSS ao formulário de contato
Também precisaremos de uma classe CSS personalizada para o módulo Formulário de contato.
- Classe CSS: entrar em-form-módulo
Ocultar o módulo do formulário de contato
Continue adicionando uma linha adicional de código CSS ao elemento principal do módulo Formulário de contato. Isso nos permitirá ocultar o módulo antes de clicar.
display: none;
Adicione um módulo de código à coluna 3 com código JQuery e CSS
E para criar a função de clique, precisaremos de algum código JQuery. Também usaremos código CSS personalizado. Adicione um novo módulo de código à coluna 2 com o código. Certifique-se de colocar o código JQuery entre as tags de script e o código CSS entre as tags de estilo.
jQuery(function($){$(".show-contact").click(function() {$('.contact-form-module').slideToggle();});});
.show-contact {cursor: pointer;} .et-menu>li {padding-left: 0.7vw !important;padding-right: 0.7vw !important;}
Visão geral
Agora que passamos por todas as etapas, vamos dar uma última olhada no resultado em diferentes tamanhos de tela.
escritório
O que lembrar
Neste artigo, mostramos como adicionar um formulário de contato suspenso ao seu cabeçalho personalizado. É uma ótima maneira de desencadear a ação desde o início.