Necessidade de combinar campos embutidos e campos de largura total do módulo Formulário de Contato de Divi ?
Le formulário de contato é um elemento importante para incluir em seu site se você deseja capturar e-mails e converter seus visitantes em clientes.
O módulo Formulário de Contato de Divi pode ser facilmente personalizado para criar formas cartões de contato atraentes e cativantes para todos os tipos de sites. Este módulo vem com duas opções de exibição que podem ser aplicadas a cada campo do formulário: en ligne ou largura total.
Neste tutorial, apresentaremos quatro possibilidades exclusivas de layout para o seu formulário de contato Divi usando campos embutidos e de largura total.
Vamos começar!
Visão geral
Aqui está uma prévia do que vamos projetar.
Primeiro layout
Segundo layout
Terceiro layout
Quarto layout
O que você precisa para começar
Antes de começarmos, instale e ative o tema Divi e certifique-se de ter a versão mais recente do Divi em seu site.
Agora você está pronto para começar!
4 layouts de amostra para o módulo de formulário de contato do Divi usando campos embutidos e de largura total
Selecione o layout predefinido
Cada um dos 4 modelos é modificado a partir do layout da página de contato do sapateiro de Pacote de Layout para Conserto de Sapatos, que você pode encontrar na Biblioteca Divi.
Adicione uma nova página ao seu site e dê um título a ela e selecione a opção Usar o Construtor Divi.
Usaremos um layout pré-fabricado da biblioteca Divi para este exemplo, então selecione Procurar layouts.
Localize e selecione o layout da página de contato da sapataria.
selecionar Usar este layout para adicionar o layout à sua página.
Agora estamos prontos para projetar nossos exemplos.
Primeiro layout
Primeiro, mova a linha que contém o módulo Formulário de Contato para a seção acima, logo abaixo da linha com os módulos do Blurb. Então você pode excluir a seção vazia restante.
Abra as configurações de linha e adicione preenchimento esquerdo e direito,
- Preenchimento (Esquerda e Direita): 15%
Selecione as opções responsivas e defina o preenchimento para dispositivos móveis.
- Preenchimento (Esquerda e Direita): 5%
Layout do formulário de contato alterado com campos embutidos e de largura total
Para este layout, criaremos dois campos separados para nome e sobrenome.
Abra as configurações do módulo Formulário de contato e altere o campo ID e Título do campo Sobrenome para Nome.
Adicione um novo campo abaixo do campo Nome. Defina o campo ID e Título como Nome.
Nas configurações do campo de nome, abra as configurações de layout e defina Tornar largura total como Não.
- Fazer largura total: NÃO
Então, nas configurações do formulário de contato, altere a ordem do assunto e do telefone para que o telefone seja listado antes do assunto.
Abra as configurações de layout do campo Assunto e defina o campo para largura total.
- Fazer largura total: SIM
Personalização do design do formulário de contato
Agora vamos alterar algumas configurações para concluir o design. Navegue até a guia Design das configurações do módulo Formulário de contato.
Primeiro, altere a cor de fundo do botão.
- Plano de fundo do botão: #DBC2B3
Adicione uma margem superior ao botão.
- Margem do botão (superior): 10px
Por fim, vá para as configurações de borda e adicione cantos arredondados aos campos.
- Entradas Cantos arredondados: 30px
Veja também: Divi: Como adicionar um logotipo responsivo ao módulo "Fullwidth Menu"
Resultado final do exemplo 1
Aqui está o resultado final no desktop e no celular.
Segundo exemplo
Para o nosso segundo exemplo, moveremos os módulos do Blurb para o lado esquerdo da página e colocaremos o formulário de contato no lado direito da página. Mova os módulos do Blurb para uma coluna.
Altere o layout da linha.
Abra as configurações de design de linha e desligue Usar largura da calha personalizada.
- Usar largura de calha personalizada: NÃO
Adicione código ao CSS personalizado do elemento principal para alinhar verticalmente os módulos Blurb e Formulário de contato.
align-items:center;
Agora precisamos remover a borda fina entre as colunas. Abra as configurações de linha e abra as configurações de coluna 1. Na guia Design, vá para configurações de borda e remova a borda.
- Largura da borda direita: 0px
Em seguida, abra as configurações da coluna 2 e repita as etapas para remover a borda.
- Largura da borda direita: 0px
Defina o texto "Fale conosco" para ser centralizado.
Mova o formulário de contato para a coluna da direita. Exclua a seção vazia restante.
Layout do formulário de contato alterado com campos embutidos e de largura total
Esse layout também terá dois campos separados para nome e sobrenome. Abra as configurações do módulo Formulário de contato e altere o campo ID e Título do campo Sobrenome para Nome.
Adicione um novo campo abaixo do campo Nome. Defina o campo ID e Título como Nome.
Nas configurações do campo de nome, abra as configurações de layout e defina Tornar largura total como Não.
- Fazer largura total: NÃO
Altere a ordem dos campos de telefone e assunto para que o telefone apareça antes do assunto.
Abra as configurações de campo para E-mail, Telefone e Assunto e defina o layout para largura total.
- Fazer largura total: SIM
Personalização do design do formulário de contato
Abra as configurações de linha e, em seguida, abra as configurações de coluna 2. Defina a cor de fundo.
- Plano de fundo: #DBC2B3
Nas configurações da coluna 2, vá para a guia Design e adicione preenchimento.
- Preenchimento (superior, inferior, esquerda e direita: 50px
Selecione o ícone móvel para alterar as configurações responsivas. Definir preenchimento para celular.
- Preenchimento (superior, inferior, esquerda e direita): 30px
Em seguida, adicione uma sombra de caixa à coluna.
Por fim, abra as configurações do módulo Formulário de contato e altere a cor do texto do campo.
- Cor do texto dos campos: #000000
Resultado final do exemplo 2
Aqui está o resultado final do segundo layout.
Terceiro exemplo
Para o terceiro layout, teremos o formulário de contato à esquerda e os módulos do Blurb à direita. Vamos começar alterando a estrutura da coluna da linha que contém os módulos Blurb.
Mova o módulo de endereço para a coluna da direita.
Em seguida, mova o módulo de texto “Contate-nos” para a coluna da esquerda e exclua a linha vazia restante.
Mova o Módulo de Formulário de Contato para a coluna da esquerda, sob o módulo de Texto “Contate-nos”. Exclua a seção em branco restante.
Abra as configurações de linha, na guia Design e desative Usar largura da calha personalizada
- Usar largura de calha personalizada: NÃO
Adicione código ao CSS personalizado do elemento principal para alinhar verticalmente os módulos Blurb e Formulário de contato.
align-items:center;
Abra as configurações de linha e abra as configurações de coluna 1. Na guia Design, vá para configurações de borda e remova a borda. Repita as etapas para remover a borda da coluna 2.
- Largura da borda direita: 0px
Alterando o layout do formulário de contato
Deixaremos as larguras dos campos como estão para o terceiro design, no entanto, abra as configurações do formulário de contato e altere a ordem do número de telefone e do campo de assunto para que o telefone venha primeiro.
Resultado final do exemplo 3
Aqui está o resultado final do terceiro layout.
Leia também: Divi: Como exibir o módulo Fullwidth Header em tela cheia
Quarto exemplo
Para o quarto e último layout, o módulo Formulário de contato estará à esquerda e os módulos Blurb à direita. Novamente, começaremos alterando a estrutura da coluna da linha que contém os módulos Blurb.
Mova o módulo de endereço para a coluna da direita.
Em seguida, mova o módulo Formulário de contato para a coluna da esquerda. Exclua a seção em branco restante.
Abra as configurações de linha, na guia Design e desative Usar largura da calha personalizada.
- Usar largura de calha personalizada: NÃO
Adicione código ao CSS personalizado do elemento principal para alinhar verticalmente os módulos Blurb e Formulário de contato.
align-items:center;
Abra as configurações de linha e abra as configurações de coluna 1. Na guia Design, vá para configurações de borda e remova a borda.
- Largura da borda direita: 0px
Em seguida, abra as configurações da coluna 2 e repita as etapas para remover a borda.
- Largura da borda direita: 0px
Abra as configurações do módulo de texto para o texto "Fale conosco" e centralize o texto.
- Alinhamento do texto: centralizado
Layout do formulário de contato alterado com campos embutidos e de largura total
Para este design, todos os nossos campos serão de largura total. Abra as configurações do módulo Formulário de contato e abra as configurações de cada campo. Na guia Design, selecione traçado e definir Fazer largura total defende SIM.
Depois de criar cada campo de largura total, o formulário deve ficar assim.
Agora altere o campo ID e Título do campo Sobrenome para Nome.
Adicione um novo campo abaixo do campo Nome. Defina o campo ID e Título como Nome.
Altere a ordem dos campos de telefone e assunto para que o telefone apareça antes do assunto.
Personalizando o design do módulo Formulário de contato
Nas configurações do módulo, na guia Design, defina a cor do texto do campo como preto.
- Cor do texto dos campos: #000000
Abra as configurações da seção e adicione uma cor de fundo.
- Plano de fundo: #DBC2B3
Finalmente, adicione uma máscara de fundo.
- Máscara de fundo: Arco
- Transformação da máscara: horizontal
Para que a máscara de fundo funcione melhor no celular, vamos usar as configurações responsivas.
- Mask Transform (Telefone): horizontal e rotação
Resultado final
Aqui está o resultado final do quarto layout.
Resultados finais
Vamos dar uma olhada em todos os nossos exemplos mais uma vez.
Primeiro exemplo
Segundo exemplo
Terceiro exemplo
Quarto exemplo
Baixe o DIVI agora!!!
Conclusão
Ter um formulário de contato atraente pode aumentar suas conversões e permitir que seus visitantes se conectem diretamente com você.
Como demonstramos neste artigo, você pode usar as opções de campo embutido e de largura total para criar diferentes aparências e layouts para o seu formulário, e as opções de design integradas do Divi permitem criar designs exclusivos e atraentes para ajudar o formulário a se destacar.
Espero que esta técnica adicione outra habilidade de design útil para projetos futuros.
Esperamos que este tutorial o inspire para seus próximos projetos Divi. Se você tiver alguma dúvida ou sugestão, encontre-nos em a seção de comentários para discutir isso.
Você também pode consultar nossos recursos, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet.
Não hesite em consultar também o nosso guia sobre o Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.
Mas enquanto isso, compartilhe este artigo em suas diferentes redes sociais.
...
