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.

Menu suspenso Divi

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.

Cabeçalho divi global

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.

Construir cabeçalho divi global

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
Ajuste de fundo

espaçamento

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

  • Estofamento superior: 0px
  • Preenchimento inferior: 0px
Configuração de enchimento

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)
Configuração de sombra Divi

Adicione uma nova linha

Estrutura da coluna

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

Escolha um layout

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%
Configure a dimensão da linha divi

espaçamento

Em seguida, adicione preenchimento superior e inferior personalizado.

  • Estofamento superior: 1vw
  • Estofamento inferior: 1vw
Configuração de espaçamento de seção

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;

CSS customizado

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
Parâmetro de coluna

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.

Divi do módulo de imagem

alignement

Em seguida, altere o alinhamento do módulo.

  • Alinhamento da imagem: centro
Módulo de imagem de alinhamento

dimensionamento

Mude também a largura.

  • Largura: 3vw (computador), 5vw (tablet), 7vw (telefone)
formulário de contato suspenso

Adicione um módulo de menu à coluna 2

Selecione o menu

Na segunda coluna, adicionaremos um módulo de menu.

Personalização do módulo de menu divi

Provisão

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

  • Estilo: Centrado
Estilo do módulo de menu

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
Texto do menu Divi

Configurações de texto do menu suspenso

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

  • Cor da linha do menu suspenso: # 007dff
Menu suspenso Divi

ícones

Com a cor do ícone do menu de hambúrguer.

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

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.

Fale conosco módulo divi

Cor de fundo

Em seguida, adicione uma cor de fundo.

  • Cor de fundo: # 007dff
Fundo Divi

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
Cor da fonte Divi

dimensionamento

Em seguida, modifique os parâmetros de dimensionamento do módulo.

  • Largura: 33%
  • Alinhamento do módulo: centro
Dimensionamento da seção de texto divi

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)
Configuração de espaçamento do módulo de texto

Fronteira

E complete os parâmetros do módulo adicionando um raio da borda.

  • Todos os cantos: 100px
Configuração da borda do módulo de texto

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: "▼".

Módulo de texto Divi fleche

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
Módulo de texto divi da fonte

Índice Z

Também aumentamos o índice z do módulo.

  • Índice Z: 11
Posição do módulo de texto divi

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.

Módulo de formulário de contato

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;

Formulário de contato para folheto de amostra

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.

Adicionar mostrar seção de contato

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.

Adicione uma classe ao formulário divi

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;

Estilo css módulo divi

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;}

Adicionar código javascript

Visão geral

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

escritório

Exemplo de design

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.