Crie uma seção de contato flutuante com efeitos Divi Scroll Motion

Todo site precisa de uma seção de contato, mas isso não significa que você precisa ir para um design padrão. Com os efeitos de rolagem do Divi, você pode criar uma seção de contato flutuante que se destacará. Melhore sua interação com o usuário com um layout de seção de contato de rolagem vertical que convidará os visitantes a interagir com seu formulário de contato. Nesta postagem, mostraremos como criar uma seção de contato flutuante de largura total que você pode adicionar a qualquer página. Você pode até adicioná-lo no topo de um rodapé de todo o site com o Divi Theme Builder.

Abaixo, você encontrará uma pasta para download gratuito com o layout JSON para fazer upload para sua própria biblioteca Divi. Também incluímos um modelo PSD para ajudá-lo a recriar o plano de fundo do mapa, além de um SVG do pino do mapa para que você possa personalizá-lo com suas próprias cores.

Vamos lá!

Antevisão

Antes de começarmos a construir o layout do formulário de contato, dê uma olhada no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Baixe a seção de contato flutuante GRATUITAMENTE

Para colocar as mãos no layout da seção de contato flutuante livre, 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.

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. Crie o plano de fundo do mapa para a seção de contato flutuante

Abra o Google Maps

A primeira etapa deste tutorial é criar o plano de fundo do mapa em preto e branco. Para criar o seu próprio, siga as etapas abaixo:

• Primeiro, abra o Google Maps e pesquise seu endereço.
• Quando carregar, diminua o zoom para ver uma grande parte da cidade ou ruas próximas ao seu endereço.

• Em seguida, posicione o mapa de forma que sua localização fique no quadrante superior direito do mapa.
• Em seguida, remova o pino de localização.
• Finalmente, capture a imagem do mapa evitando as guias nos cantos.

Personalize o Pin

Nos arquivos para download acima, incluímos um arquivo SVG do pino que usamos no design. Você está convidado a usá-lo e alterar as cores com seu editor de gráficos vetoriais. Também incluímos um PNG transparente se você quiser alterar a cor no Photoshop.

Siga estas etapas para o pin SVG:

• Primeiro, baixe os arquivos gratuitos no início deste tutorial e descompacte a pasta.
• Em segundo lugar, abra o pino gráfico SVG com o Illustrator, Inkscape ou seu editor de vetores favorito.
• Terceiro, mude a cor para combinar com sua marca ou site.
• Finalmente, salve como um PNG transparente.

Editar no Photoshop

Agora é hora de colocar tudo junto. Primeiro, abra o mapa em seu editor gráfico favorito para remover a saturação da cor. Em segundo lugar, adicione o alfinete.

Se você tiver o Photoshop, pode usar o arquivo PSD que incluímos e simplesmente adicionar a captura de tela do mapa ao objeto inteligente na segunda camada.

Para usar o objeto inteligente, siga estas etapas

• Abra o arquivo PSD.
• Clique duas vezes na layer com a cor laranja. Uma nova janela se abrirá.
• Substitua nosso mapa pelo seu.
• Não se esqueça de clicar em salvar.
• Volte para a janela principal de edição e clique em salvar lá também.
• Exporte para a web como .jpg.

Se você não tem o Photoshop, siga estas etapas:

• Primeiro, crie um novo projeto em 1920 px x 700 px.
• Em segundo lugar, coloque a captura de tela do mapa na tela. Certifique-se de manter sua localização no quadrante superior direito, um pouco acima do centro.
• Terceiro, o uso de ajustes de imagem transforma a imagem em preto e branco.
• Além disso, adicione um pouco de contraste.
  1. Brilho: -25
  2. Contraste: -50
• Em seguida, clique na camada da imagem e adicione transparência em cerca de 55%.
• Se você for criar este design em uma página da web com um fundo não branco, adicione uma camada branca abaixo da imagem para manter a cor de base branca, independentemente da cor de fundo do site.
• Continue colocando o alfinete em sua localização. Dimensione para cerca de 90 px de altura. Deixe-o na camada superior.
• Finalmente, baixe como .jpg.

2. Crie a estrutura do elemento

Adicionar nova seção

Fundo

Agora é hora de começar a construir a seção de contato flutuante com o Divi Builder! A primeira coisa que faremos é abrir uma página nova ou existente e adicionar uma nova seção.

Na guia de conteúdo, adicione o plano de fundo do mapa que você criou no Photoshop.

• Imagem de fundo: seu mapa editado

Espaçamento

Em seguida, personalize as configurações de espaçamento da seção na guia de design.

• Margem superior e inferior: 50vh
• Preenchimento inferior: 0vw

Visibilidade

Em seguida, ajuste os transbordamentos para visíveis.

• Excesso horizontal e vertical: visível

Posição

Por fim, defina o índice Z da seção como 10.

• Índice Z: 10

Adicionar nova linha

Estrutura da Coluna

Agora é hora de adicionar alguns elementos. Primeiro, adicione uma linha com 2 colunas.

Dimensionamento

Abra as configurações de linha e ajuste o tamanho da seguinte forma.

• Largura
  • Desktop: 90%
  • Tablet e telefone: 80%
• Largura máxima: 90%

Visibilidade

Clique na guia avançado e ajuste os transbordamentos a seguir.

• Excesso horizontal e vertical: visível

Posição

Conclua as configurações de linha, modificando as configurações de posição.

• Cargo: Relativo
• Origem do deslocamento: canto superior esquerdo
• Deslocamento Vertical
  • Desktop: -8vw

Configurações da coluna 1

Fundo

Antes de adicionar módulos, precisaremos definir o estilo das colunas individuais. Adicione uma cor de fundo à coluna 1.

• Cor sólida: # 25274d

Espaçamento

Ajuste as configurações de espaçamento a seguir.

• Preenchimento superior e inferior
  • Desktop e Tablet: 7vw
• Preenchimento esquerdo e direito
  • Desktop: 3vw
  • Tablet e telefone: 6vw

Fronteira

Em seguida, adicione alguns cantos arredondados às configurações de borda.

• Cantos arredondados: 10px nos quatro cantos

Efeitos de rolagem

Por último, mas não menos importante, use algum movimento vertical nas configurações de efeitos de rolagem. Isso nos ajudará a criar um efeito flutuante.

• Efeitos de transformação de rolagem: movimento vertical
• Definir movimento vertical / área de trabalho
  • Compensação inicial: 4
  • Deslocamento médio: 0 (em 50%)
  • Compensação final: -4
• Definir movimento vertical / tablet e telefone
  • Compensação inicial: 4
  • Offset médio: 0 (em 40% e 60%)
  • Compensação final: -3
• Gatilho de efeito de movimento: meio do elemento

Configurações da coluna 2

Posição

Agora, nas configurações da segunda coluna. Ajuste as configurações de posição de acordo.

• Cargo: Relativo
• Origem do deslocamento: canto superior esquerdo
• Deslocamento Vertical
  • Desktop: 25vw

Efeitos de rolagem

Estamos adicionando algum movimento vertical a esta coluna também.

• Efeitos de transformação de rolagem: movimento vertical
• Definir movimento vertical / área de trabalho
  • Compensação inicial: 2
  • Deslocamento médio: 0 (em 50%)
  • Compensação final: -2
• Definir movimento vertical / tablet e telefone
  • Compensação inicial: 0
  • Deslocamento médio: 0 (em 50%)
  • Compensação final: -2
• Gatilho de efeito de movimento: parte superior do elemento

Adicionar Módulo de Texto à Coluna 1

Contente

É hora de adicionar módulos, começando com um módulo de texto na coluna 1. Adicione algum conteúdo H2 de sua escolha.

Texto do Título

Vá para a guia de design e estilize o texto H2 da seguinte maneira.

• Nível de direção: H2
• Fonte: Palanquin Dark
• Intensidade da fonte: Negrito
• Estilo da fonte: TT
• Cor: Amarelo # ffd868
• Tamanho
  • Desktop: 5vw
  • Tablet: 10vw
  • Telefone: 12vw
• Espaçamento entre letras: 4px

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

Contente

Abaixo do módulo de texto, adicione um formulário de contato. Estes são os campos que estamos usando:

• Nome
• O email
• Sujeito
• Mensagem

Proteção contra SPAM

Antes de definir o estilo do módulo do formulário de contato. ligue a proteção contra spam e conecte sua conta ReCaptcha.

• Use um serviço de proteção contra spam: Sim
• Provedor de serviços: ReCaptcha
• Selecione a conta

Campos

Vá para a guia de design e defina o estilo dos campos conforme a seguir.

• Cor de fundo: azul escuro # 25274d
• Cor do texto: cinza claro # d1d1d1
• Cor de fundo do foco: Azul escuro # 25274d
• Cor do texto do foco: cinza claro # d1d1d1
• Fonte: Palanquin
• Estilo: TT
• Tamanho do texto
  • Desktop: 0.9vw
  • Tablet: 2vw
  • Telefone: 3vw
• Espaçamento entre letras: 1px

Botão

Em seguida, defina o estilo do botão.

• Estilos Personalizados: Sim
• Tamanho do texto: 20px
• Cor do Texto: Azul Escuro # 25274d
• Cor de fundo: amarelo # ffd868
• Raio da borda: 7px
• Cor do ícone: Azul escuro # 25274d
• Margem superior: 5px

Dimensionamento

Estamos modificando as configurações de dimensionamento a seguir.

• Largura: 100%
• Largura máxima: 100%

Espaçamento

Vamos adicionar um pouco de preenchimento superior também.

• Preenchimento superior: 4vw

Fronteira

Conclua as configurações do módulo personalizando as configurações da borda.

• Cantos arredondados de entradas: 6px nos quatro cantos
• Estilos de borda de entradas: todos os quatro lados
• Largura da borda das entradas: 2 px
• Cor da borda das entradas: amarelo # ffd868

Adicionar Módulo de Acompanhamento de Mídia Social à Coluna 2

Contente

Passe para a coluna 2 e adicione um módulo de mídia social. Use todas as redes sociais de que você precisa.

• Facebook
• Twitter
• Linkedin

Ligação

Antes de estilizar, adicione links às redes correspondentes.

Fundo do item

Agora, abra a primeira rede social e mude a cor de fundo.

• Cor: Azul Escuro # 25274d

Ícone de item

Na guia de design do mesmo elemento, altere as configurações do ícone conforme a seguir.

• Cor: Amarelo # ffd868
• Tamanho da fonte do ícone
  • Computador e tablet: 31 px
  • Telefone: 26px

Espaçamento de item

Em seguida, adicione uma pequena margem para separar os ícones uns dos outros.

• Margem direita: 1vw

Copiar e colar estilos de itens

Para estilizar as redes sociais restantes, volte para a janela de conteúdo principal e copie os estilos de item do primeiro ícone. Em seguida, cole os estilos de item nas redes sociais restantes.

Alinhamento

Vá para a guia de design principal e certifique-se de que o módulo esteja alinhado à esquerda.

• Alinhamento do Módulo: Esquerda

Dimensionamento

Em seguida, ajuste o dimensionamento do módulo.

• Largura: 100%

Espaçamento

Apague todo o preenchimento padrão também.

• Preenchimento superior, inferior, esquerdo e direito: 0vw

Fronteira

Finalmente, adicione alguns cantos arredondados nas configurações de borda. Isso ajustará as bordas de todos os ícones de uma vez.

• Cantos arredondados
  • Superior esquerdo e direito: 7px
  • Esquerda e direita inferior: 0 px

Adicionar Módulo de Texto à Coluna 2

Contente

Abaixo do módulo de mídia social, adicione outro módulo de texto. Adicione algum conteúdo de sua escolha. Adicionamos dois endereços, um número de telefone e um e-mail. Use negrito no título de cada item em maiúsculas.

• SEDE: 1587 Sukhumvit Soi 21, Bangkok, Tailândia.
• LOCALIZAÇÃO DE VAREJO : Emporium Mall, 2º andar
• TELEFONE: (321) 564 2398
• EMAIL: [email protegido]

Fundo

Modifique a cor de fundo do módulo.

• Cor: Azul Escuro # 25274d

Texto

Vá para a guia de design e estilize o texto.

• Fonte: Palanquin
• Cor: Amarelo # ffd868
• Tamanho: 18 px

Espaçamento

Adicione alguns valores de espaçamento personalizados também.

• Margem superior
  • Desktop: -60px
  • Tablet e telefone: -50px
• Preenchimento superior, inferior, esquerdo e direito
  • Desktop: 3vw
  • Tablet: 6vw
  • Telefone: 8vw

Fronteira

E complete o módulo adicionando cantos arredondados nas configurações de borda. É isso!

• Cantos arredondados: 10px superior direito, inferior esquerdo e inferior direito.

Antevisão

Agora que terminamos de recriar a seção de contato flutuante, dê uma olhada final no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Acabou de recriar o layout da seção de contato flutuante!

Usar os novos efeitos de rolagem Divi ajuda a transformar qualquer layout padrão em um design excelente. Ao criar o seu próprio plano de fundo do mapa, você tem mais controle sobre a aparência do design final. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!