Como criar uma página de contato de alta conversão com o Elementor [2022]

Você sabia que uma das páginas mais subestimadas da maioria dos sites é a página Fale Conosco ?

Sim!

Muitos proprietários e designers de sites não entendem o quão crucial é a página de contato. Este é o cantinho aconchegante do seu site, onde o usuário vem até você ou para ter sua consulta resolvida.

Mas como não é dada muita importância às páginas de contato, elas se tornam pouco acolhedoras e, às vezes, o mau posicionamento dificulta que os usuários encontrem a página de contato. Precisamos entender como evitar esse problema e melhorar o design da nossa página de contato para torná-la mais atraente.

Neste artigo, veremos o que torna uma página de contato melhor e como você pode projetá-la com o construtor Elementor Page.

Então, o que torna uma página de contato melhor? Vamos ver!

Práticas recomendadas da página de contato

Aqui está uma lista de recursos e práticas de páginas de contato bem-sucedidas. Cada elemento aqui desempenha um papel crucial para tornar a página de contato o que ela precisa ser.

1. Disponibilize-os prontamente – Um dos locais de destaque que o link da página de contato precisa estar presente é no rodapé. Cada página deve ter um link de contato na parte inferior da página da web. Se você tiver espaço, adicionar o formulário de contato no cabeçalho também é uma boa opção.
2. Inclua links importantes – Para um site de produto, é bom adicionar um link para a documentação do produto, pois muitas pessoas podem surgir com dúvidas relacionadas ao uso ou faturamento em suas mentes. Isso também evita a superlotação da caixa de entrada de contatos.
3. Adicionar outras informações de contato – É altamente recomendável adicionar um número de telefone, e-mail e endereço de correspondência para seus usuários. Isso ajuda a tornar sua página de contato mais engenhosa para eles.
4. Evite campos e palavras desnecessários – Tente minimizar o número de áreas em seu formulário de contato. Isso tornará mais simples para os usuários colocarem suas consultas. Muitos bons plugins de criação de formulários, como Gravity e WPForms, funcionam muito bem com o WordPress.
5. Adicione uma mensagem de sucesso – Muitas vezes, o botão de envio de formulários de contato leva os usuários a uma página sem mensagem. Simplesmente adicionar um link de redirecionamento a uma página de sucesso ou personalizar o formulário de contato para exibir uma mensagem de sucesso ajuda muito. Você pode adicionar um simples “obrigado por entrar em contato” e pode adicionar seu tempo de resposta. Você também pode vincular suas contas de mídia social para que seus usuários possam se conectar com você em outras plataformas.
6. Torne-o acolhedor – Este é um dos erros mais comuns que os designers de sites cometem. Você deve garantir que o formulário de contato não pareça monótono e seja acolhedor. Veremos como você pode fazer isso com a ajuda do construtor Elementor Page.
7. Torne-o interativo – Em nenhum lugar está escrito que sua página de contato deve ter apenas um campo de nome, email e mensagem. Você pode adicionar elementos interativos, como mapas do Google, com um alfinete em sua localização.

Quando integrados ao seu formulário de contato, todos esses pontos podem fazer muito mais pelo seu negócio.

Agora, veremos como você pode incorporar todos esses pontos em seu site, mesmo que você não saiba codificar.

Usaremos o construtor de páginas Elementor e o PowerPack Addon for Elementor para projetar nossa página de contato.

Vamos mergulhar!

Como criar uma página de contato com o Elementor Page Builder

Antes de começarmos, verifique se você tem o Elementor Page Builder e os complementos do PowerPack para Elementor instalados e ativados. Depois de fazer isso, podemos iniciar nosso processo de design.

Etapa 1: iniciar o construtor de páginas Elementor

Primeiro, faça login no seu painel do WordPress e clique na opção de página à esquerda. Agora procure sua página Fale Conosco e clique no botão Editar com Elementor .

Isso iniciará o Construtor de Páginas.

Etapa 2: projetar a seção Hero da página de contato

Começaremos adicionando uma imagem de herói no topo e um título. Para isso, clique no “+ ” ou adicione um novo ícone de seção e, em seguida, adicione uma estrutura de coluna única à sua página.

Agora clique nas configurações de linha e adicione uma imagem de fundo à linha na guia de estilo.

Para tornar a imagem e a linha mais visíveis, você precisará alterar a altura da linha na guia Layout. Estamos definindo o tamanho mínimo para '600'.

Também adicionamos a sobreposição de fundo com uma opacidade de 0,57 usando a seção de sobreposição de fundo na guia Estilo . Aqui estão as alterações que fizemos:

Etapa 3: Personalizando o título da página de contato

Arraste e solte um widget Dual Heading do PowerPack Add-on pack na linha.

Agora altere a aparência e o design do texto para se parecer com o que fizemos abaixo. Você pode usar sua criatividade e projetar seu título da maneira que quiser.

Se você não quiser começar a criar títulos do zero, você também pode escolher entre as predefinições do widget de título duplo.

Etapa 4: adicione o formulário de contato à sua página

É hora de adicionar um formulário de contato decente à página. Para isso, estamos usando o plugin Contact Form 7 .

Você pode usar qualquer plugin popular do construtor de formulários do WordPress, como formulários Gravity, formulários Caldera, formulários Ninja ou o plugin WPForms. Certifique-se de instalar e ativar o plugin antes de prosseguirmos.

Se você não instalou o formulário de contato 7, pode obtê-lo aqui. Instale o plug-in e atualize a página que projetamos para obter o widget de formulário de contato.

Adicionando o widget de formulário de contato do Elementor na página

Agora arraste e solte o widget Contact Form 7 na página e escolha o formulário de contato que deseja exibir.

Agora é hora de personalizar o formulário. Desative os títulos usando o botão de alternância e vá para a guia de estilo. Aqui você pode alterar a cor, plano de fundo, tipografia, largura e preenchimento do formulário.

Para este formulário, fizemos as seguintes alterações –

• Alterada a cor do plano de fundo e a cor do texto dos campos e aumentado o espaçamento para 20.
• Bordas adicionadas aos campos e raio da borda alterado.
• Alterada a cor do texto do placeholder.
• Para o botão de envio, alterou a largura para 170 e alterou a cor também.
• Adicionados efeitos de borda e foco ao botão.

É assim que o formulário de contato se parece depois de preenchido.

Etapa 3: adicionar outras informações de contato

Agora apenas o formulário de contato não é suficiente para a página de contato, e você precisa fornecer mais informações aos seus usuários se eles quiserem entrar em contato com você além do seu formulário de contato.

Para isso, adicionaremos outra coluna à mesma linha e, em seguida, adicionaremos o widget Elementor Info List.

Clique com o botão direito do mouse no ícone da coluna na coluna e, em seguida, clique no botão “Adicionar nova coluna” .

Agora arraste e solte o widget de lista de informações na página.

Altere os ícones, cor, texto, espaçamento e preenchimento nas respectivas configurações. Para esta lista, alteramos as seguintes configurações-

• Ícone, descrição e título alterados.
• Espaçamento entre itens: 30
• Tamanho do ícone, tamanho da caixa e espaçamento 39, 77 e 25, respectivamente.
• Alterado o título, a descrição e a cor do ícone na guia de estilo.
• Acolchoamento superior e inferior adicionado: 50

Você pode manter os mesmos valores mencionados acima ou pode alterá-los e alterá-los conforme suas necessidades.

Esta é a aparência de toda a linha depois que todas as alterações são feitas.

Etapa 4: adicionar o Google Maps à página de contato

A página de contato deve ter mais do que apenas texto e campos simples. Alguns elementos criativos e interativos somam muito. Para isso, adicionaremos um mapa do google personalizado à nossa página.

Adicionando mapas do Google

Primeiro, arraste e solte o widget do Google Maps dos Complementos do PowerPack na página. Certifique-se de verificar o ícone “PP” no canto superior direito do widget:

Depois de adicioná-lo, insira a localização do seu escritório com a ajuda de latitudes e longitudes. Você também pode definir vários locais ou pinos. Se você estiver recebendo um erro, consulte este documento.

Você também pode alterar os controles e o estilo do mapa escolhendo um dos temas predefinidos.

Depois de configurar o widget do Google Maps, sua página de contato está pronta.

Agora, a única coisa que resta é fazer as mudanças ao vivo. Para isso, clique no botão Publicar no canto inferior esquerdo da página.

Isso é tudo, pessoal!

Bingo! Você criou com sucesso uma página de contato bonita. Esta é a aparência de toda a página de contato depois de concluída.

Se você quiser fazer mais alterações, poderá fazer isso facilmente com o Elementor Page Builder. Você pode adicionar muitos outros elementos interativos à sua página usando o Elementor e os complementos do PowerPack para Elementor.

Para saber mais sobre o Elementor, você pode verificar nossos guias populares em:

• Como usar o Elementor: guia detalhado para iniciantes
• Erros do Elementor e como corrigi-los
• A lista definitiva dos melhores recursos gratuitos de aprendizado do Elementor

Se você achou este tutorial útil, compartilhe-o e deixe um comentário abaixo se tiver mais dúvidas!