Como incluir perfeitamente um formulário de contato de coluna deslizante na seção Divi Hero
Publicados: 2020-07-26Ao pensar em maneiras de incluir CTAs em seu design de página, você pode considerar incluir um formulário de contato em sua seção de herói. Essa abordagem permite que as pessoas entrem em contato com você imediatamente, sem precisar navegar mais em seu site. Se você está procurando uma maneira perfeita de fazer isso funcionar dentro do Divi, vai adorar este post. Neste tutorial, mostraremos como adicionar um formulário de contato de coluna deslizante à sua seção de herói usando apenas as opções integradas do Divi. 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 layout da seção do herói do formulário de contato da coluna GRATUITAMENTE
Para colocar as mãos no layout da seção do herói do formulário de contato da coluna gratuita, 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á “reinscrito” nem receberá e-mails extras.
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.
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!
Vamos começar a recriar
Adicionar nova seção
Cor de fundo
Comece adicionando uma nova seção à página em que está trabalhando. Abra as configurações da seção e altere a cor de fundo.
- Cor de fundo: # ff8949
Imagem de fundo
Estamos carregando um padrão de plano de fundo que faz parte do Pacote de Layout do Consultor Financeiro a seguir. Você pode encontrar esta imagem de fundo na pasta que você baixou no início deste post.
- Tamanho da imagem de fundo: Ajustar
- Posição da imagem de fundo: centro
Espaçamento
Vá para a guia de design da seção e remova todo o preenchimento padrão superior e inferior.
- Preenchimento superior: 0 px
- Preenchimento inferior: 0 px
Transbordamentos
Conclua as configurações da seção, ocultando os transbordamentos na guia avançada. Isso garantirá que as animações adicionadas posteriormente não ultrapassem o contêiner da seção.
- Excesso horizontal: oculto
- Estouro vertical: oculto
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 modifique as configurações de dimensionamento da seguinte forma:
- Equalize Alturas de Coluna: Sim
- Largura: 80% (desktop), 100% (tablet e telefone)
- Largura máxima: 1380 px
- Alinhamento de linha: direita
Espaçamento
Em seguida, remova todo o preenchimento padrão superior e inferior.
- Preenchimento superior: 0 px
- Preenchimento inferior: 0 px
Configurações da coluna 1
Espaçamento
Em seguida, abra as configurações da coluna 1 e modifique as configurações de espaçamento em diferentes tamanhos de tela.
- Enchimento superior: 22%
- Estofamento inferior: 22%
- Preenchimento esquerdo: 10% (apenas tablet e telefone)
- Preenchimento direito: 10% (apenas tablet e telefone)
Configurações da coluna 2
Cor de fundo
A seguir, vamos abrir as configurações da coluna 2 e usar uma cor de fundo branca.
- Cor de fundo: #ffffff
Animação
Concluiremos as configurações da coluna 2 aplicando as seguintes configurações de animação:
- Direção da animação: esquerda (desktop), cima (tablet e telefone)
- Duração da animação: 1500ms
- Intensidade de animação: 70%
- Opacidade inicial da animação: 100%
Adicione o Módulo de Texto # 1 à Coluna 1
Adicionar conteúdo H1
É hora de adicionar módulos, começando com um primeiro Módulo de texto na coluna 1. Adicione algum conteúdo H1 de sua escolha.
Configurações de texto H1
Vá para a guia de design do módulo e altere as configurações de texto H1 da seguinte forma:
- Fonte do cabeçalho: Oswald
- Estilo da fonte do título: maiúscula
- Cor do texto do título: #ffffff
- Tamanho do texto do título: 120 px (desktop), 70 px (tablet), 60 px (telefone)
Dimensionamento
Estamos mudando as configurações de dimensionamento do módulo também.
- Largura: 75% (desktop), 100% (tablet e telefone)
- Alinhamento do Módulo: Esquerda
Adicione o Módulo de Texto # 2 à Coluna 1
Adicionar conteúdo de descrição
Passe para o próximo módulo, que é outro Módulo de Texto. Adicione algum conteúdo descritivo de sua escolha.
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: #ffffff
- Altura da linha de texto: 1,9em
Dimensionamento
Modifique as configurações de dimensionamento também.
- Largura: 75% (desktop), 100% (tablet e telefone)
- Alinhamento do Módulo: Esquerda
Adicionar Módulo de Botão à Coluna 1
Adicionar cópia
O último módulo de que precisamos na coluna 1 é um Módulo de botão. Adicione alguma cópia de sua escolha.
Configurações de botão
Vá para a guia de design do módulo e altere as configurações do botão da seguinte forma:
- Usar estilos personalizados para botão: Sim
- Cor do texto do botão: #ffffff
- Raio da borda do botão: 1px
- Fonte do botão: Oswald
- Estilo da fonte do botão: maiúscula
Adicionar Módulo Blurb à Coluna 2
Adicionar conteúdo
Para a segunda coluna. Lá, o primeiro módulo de que precisamos é um Módulo Blurb. Adicione um título de sua escolha.
Selecione o ícone
Em seguida, selecione 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: # ffd8c6
- Posicionamento do ícone: topo
- Alinhamento do ícone: Centro
- Use o tamanho da fonte do ícone: Sim
- Tamanho da fonte do ícone: 250 px (área de trabalho), 150 px (tablet e telefone)
Configurações de texto do título
Modifique as configurações de texto do título a seguir.
- Título Título Nível: H2
- Fonte do título: Oswald
- Estilo da fonte do título: maiúsculas
- Alinhamento do Texto do Título: Centro
- Cor do texto do título: # ff8949
- Tamanho do texto do título: 38px
Espaçamento
Adicione um pouco de preenchimento esquerdo e direito também.
- Preenchimento esquerdo: 11%
- Preenchimento direito: 11%
Animação
E conclua o módulo adicionando as seguintes configurações de animação:
- Direção da animação: baixo
- Duração da animação: 1100ms
- Atraso de animação: 400 ms
- Opacidade inicial da animação: 100%
Adicionar Módulo de Formulário de Contato à Coluna 2
Turn Fields Fullwidth
Passe para o último módulo, que é um Módulo de formulário de contato. Abra os campos de nome e e-mail individualmente e amplie-os nas configurações de layout.
- Faça largura total: Sim
Cor de fundo
Em seguida, volte às configurações gerais do Módulo do formulário de contato e adicione uma cor de fundo.
- Cor de fundo: # f7f7f7
Configurações de campos
Vá para a guia de design e faça algumas alterações nas configurações dos campos a seguir.
- Cor de fundo dos campos: #ffffff
- Cor do texto dos campos: # ff8949
- Margem superior dos campos: 15px
- Margem inferior dos campos: 15px
- Preenchimento superior dos campos: 20 px
- Preenchimento inferior dos campos: 20 px
- Fonte dos Campos: Oswald
- Estilo da fonte dos campos: maiúsculas
- Alinhamento de Texto de Campos: Centro
- Tamanho do texto dos campos: 21px
Configurações de botão
Em seguida, defina o estilo do botão de acordo:
- Usar estilos personalizados para botão: Sim
- Cor do texto do botão: # ff8949
- Raio da borda do botão: 1px
- Fonte do botão: Oswald
- Estilo da fonte do botão: maiúscula
Dimensionamento
Também estamos garantindo que a largura seja '100%' nas configurações de dimensionamento.
- Largura: 100%
Espaçamento
Passe para as configurações de espaçamento a seguir e aplique alguns valores de preenchimento personalizados.
- Enchimento superior: 14%
- Estofamento inferior: 14%
- Preenchimento esquerdo: 12%
- Preenchimento direito: 12%
Animação
Em seguida, use as seguintes configurações de animação:
- Estilo de animação: slide
- Direção da animação: para cima
- Duração da animação: 1100ms
- Atraso de animação: 400 ms
- Opacidade inicial da animação: 100%
Posição
E conclua as configurações do módulo (e o tutorial) reposicionando o módulo apenas na área de trabalho:
- Posição: Absoluta (Desktop), Padrão (Tablet e Telefone)
- Localização: Centro Inferior
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 incluir perfeitamente um formulário de contato em sua seção de herói. Mais especificamente, criamos um formulário de contato de coluna deslizante que parece ótimo em todos os tamanhos de tela. Você também conseguiu baixar o arquivo JSON gratuitamente! Se você tiver alguma dúvida, sinta-se à 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.