Como adicionar um formulário de contato suspenso ao seu cabeçalho global

Ao construir um cabeçalho personalizado para o seu site, usando o criador de temas do Divi, você se encontrará procurando a maneira ideal de adicionar um CTA. Uma maneira de fazer isso é adicionando um formulário de contato suspenso. Isso o ajudará a manter a aparência geral de sua plataforma limpa, ao mesmo tempo em que oferece a possibilidade de entrar em contato sem a necessidade de rolar. Neste tutorial, mostraremos como criar um formulário de contato suspenso usando Divi e alguns códigos JQuery e CSS. 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. Vá para Divi Theme Builder e comece a construir o cabeçalho global

Vá para Divi Theme Builder

Comece acessando o Divi Theme Builder no backend do seu site WordPress.

Construir Cabeçalho Global

Clique em 'Adicionar Cabeçalho Global' e selecione 'Construir Cabeçalho Global' para começar a construir um cabeçalho global personalizado.

2. Construir Design de Cabeçalho

Configurações da seção

Cor de fundo

Uma vez dentro do template de cabeçalho global, você notará uma seção. Abra essa seção e use uma cor de fundo branca.

• Cor de fundo: #FFFFFF

Espaçamento

Em seguida, remova o preenchimento padrão superior e inferior da seção.

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

Sombra da caixa

Aplique uma sombra de caixa sutil também.

• Força do desfoque de sombra da caixa: 50 px
• Cor da sombra: rgba (0,0,0,0.15)

Adicionar nova linha

Estrutura da Coluna

Continue adicionando uma nova linha à seção usando a seguinte estrutura de coluna:

Dimensionamento

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

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Equalize Alturas de Coluna: Sim
• Largura: 95%
• Largura máxima: 100%

Espaçamento

Adicione um pouco de preenchimento personalizado superior e inferior a seguir.

• Enchimento superior: 1vw
• Preenchimento 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;

Índice Z da coluna 2

Também estamos garantindo que a segunda coluna tenha um valor de índice z mais alto para fins de resposta.

• Índice Z: 12

Adicionar Módulo de Imagem à Coluna 1

Carregar logotipo

É hora de começar a adicionar módulos! Começando com um Módulo de Imagem na coluna 1. Carregue um logotipo.

Alinhamento

Altere o alinhamento do módulo a seguir.

• Alinhamento de imagem: centro

Dimensionamento

Modifique a largura também.

• Largura: 3vw (desktop), 5vw (tablet), 7vw (telefone)

Adicionar Módulo de Menu à Coluna 2

Selecione o menu

Na segunda coluna, adicionaremos um Módulo de Menu.

Layout

Vá para a guia de design do módulo e altere o estilo do layout.

• Estilo: centrado

Configurações de texto do menu

Modifique as configurações de texto do menu do módulo a seguir.

• Fonte do menu: Open Sans
• Peso da fonte do menu: Semi negrito
• Cor do texto do menu: # 000000
• Tamanho do texto do menu: 0.8vw (desktop), 2vw (tablet), 3vw (telefone)
• Espaçamento entre letras do menu: 1px

Configurações de texto do menu suspenso

Em seguida, altere a cor da linha do menu suspenso.

• Cor da linha do menu suspenso: # 007dff

Ícones

Junto com a cor do ícone do menu de hambúrguer.

• Cor do ícone do menu de hambúrguer: # 007dff

Adicionar Módulo de Texto 1 à Coluna 3

Adicionar cópia

Para o terceiro módulo! Adicione um Módulo de Texto com alguma cópia de sua escolha.

Cor de fundo

Adicione uma cor de fundo a seguir.

• Cor de fundo: # 007dff

Configurações de texto

Vá para a guia de design do módulo e altere as configurações de texto de acordo:

• Fonte do texto: Open Sans
• Peso da fonte do texto: negrito
• Cor do texto: #ffffff
• Tamanho do texto: 0.8vw (desktop), 2vw (tablet), 3vw (telefone)
• Alinhamento de Texto: Centro

Dimensionamento

Modifique as configurações de dimensionamento do módulo a seguir.

• Largura: 33%
• Alinhamento do Módulo: Centro

Espaçamento

Em seguida, adicione algum preenchimento personalizado superior e inferior.

• Preenchimento superior: 0,8vw (desktop), 2vw (tablet e telefone)
• Preenchimento inferior: 0,8vw (desktop), 2vw (tablet e telefone)

Fronteira

E complete as configurações do módulo adicionando algum raio de borda.

• Todos os cantos: 100px

Adicionar Módulo de Texto 2 à Coluna 3

Adicionar símbolo à caixa de conteúdo

Passe para o próximo módulo, que é outro Módulo de Texto. Adicione o seguinte símbolo de seta à caixa de conteúdo: '▼'.

Configurações de texto

Vá para a guia de design do módulo e altere as configurações de texto de acordo:

• Fonte do texto: Open Sans
• Cor do texto: # 007fff
• Tamanho do texto: 3vw
• Altura da linha de texto: 0em
• Alinhamento de Texto: Centro

Índice Z

Estamos aumentando o índice z do módulo também.

• Índice Z: 11

Adicionar Módulo de Formulário de Contato à Coluna 3

Adicionar campos de escolha de largura total

O próximo e último módulo de que precisamos na terceira coluna é um Módulo de formulário de contato. Adicione todos os campos de largura total de que você precisa.

Adicionar Título

Use um título também.

Cor de fundo

Estamos mudando a cor de fundo a seguir.

• Cor de fundo: # e7f2ff

Configurações de campos

Em seguida, vá para a guia de design do módulo e altere as configurações dos campos.

• Cor de fundo dos campos: #ffffff
• Cor do texto dos campos: #dddddd
• Cor do texto do foco dos campos: # 007dff
• Preenchimento superior dos campos: 1vw (desktop), 2vw (tablet), 3vw (telefone)
• Preenchimento inferior dos campos: 1vw (desktop), 2vw (tablet), 3vw (telefone)
• Fonte dos Campos: Open Sans

• Tamanho do texto dos campos: 0,7vw (desktop), 1,8vw (tablet), 3vw (telefone)

Configurações de texto do título

Modifique as configurações de texto do título a seguir.

• Nível do título do título: H3
• Peso da fonte do título: negrito
• Alinhamento do Texto do Título: Centro
• Cor do texto do título: # 007dff
• Tamanho do texto do título: 1vw (desktop), 2,5vw (tablet), 3,5vw (telefone)
• Altura da linha do título: 1,6em

Configurações de texto captcha

Junto com as configurações de texto captcha.

• Fonte Captcha: Open Sans
• Cor do texto captcha: # 007dff

Configurações de botão

Continue definindo o estilo do botão.

• Usar estilos personalizados para botão: Sim
• Tamanho do texto do botão: 0.8vw (desktop), 2vw (tablet), 3vw (telefone)
• Cor do texto do botão: #ffffff
• Cor de fundo do botão: # 007dff
• Largura da borda do botão: 0 px
• Raio da borda do botão: 100 px

• Fonte do botão: Open Sans
• Peso da fonte do botão: negrito

• Margem superior do botão: 1vw
• Preenchimento superior do botão: 1vw (desktop), 2vw (tablet e telefone)
• Preenchimento inferior do botão: 1vw (desktop), 2vw (tablet e telefone)
• Preenchimento do botão esquerdo: 2vw (desktop), 7vw (tablet e telefone)
• Preenchimento do botão direito: 2vw (desktop), 7vw (tablet e telefone)

Espaçamento

Em seguida, use alguns valores de preenchimento personalizados em diferentes tamanhos de tela.

• Preenchimento superior: 4vw (desktop), 6vw (tablet e telefone)
• Preenchimento inferior: 4vw (desktop), 6vw (tablet e telefone)
• Preenchimento esquerdo: 2vw (desktop), 6vw (tablet e telefone)
• Preenchimento direito: 2vw (desktop), 6vw (tablet e telefone)

Fronteira

Modifique as configurações de borda a seguir.

• Todos os cantos: 10px

Elemento principal, título do contato e CSS captcha

Conclua as configurações do módulo adicionando algumas pequenas alterações CSS à guia avançada.

Elemento Principal:

border-radius: 20px;

Título do contato:

margin-bottom: 1vw;

CAPTCHA:

margin-top: 1.5vw;

3. Personalize os elementos para criar um formulário de contato com um clique

Adicionar altura da coluna 3

Depois de ter todos os módulos no lugar, é hora de criar o efeito. O primeiro passo para alcançar o resultado desejado é abrir as configurações da coluna 3 e adicionar alguma altura personalizada responsiva na guia avançada.

Área de Trabalho:

height: 3vw;

Tábua:

height: 5vw;

Telefone:

height: 6vw;

Adicionar 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: show-contact

Adicionar classe CSS ao formulário de contato

Também precisaremos de uma classe CSS personalizada para o Módulo do Formulário de Contato.

• Classe CSS: contact-form-module

Ocultar Módulo de Formulário de Contato

Continue adicionando uma linha extra de código CSS ao elemento principal do Módulo de formulário de contato. Isso nos permitirá ocultar o módulo antes de clicar.

display: none;

Adicionar Módulo de Código à Coluna 3 com Código JQuery e CSS

E para criar a função de clique, vamos precisar de algum código JQuery. Usaremos algum código CSS personalizado também. 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;
}

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 adicionar um formulário de contato suspenso ao seu cabeçalho personalizado. Esta é uma ótima maneira de desencadear ações desde o início. Também compartilhamos o arquivo JSON 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.