Passar para o conteúdo principal

Como Criar ou Editar Página de Contato no WordPress com Elementor

Aprenda a criar uma página de Contato do zero usando Elementor ou editar uma já existente. No final, você saberá estruturar banner, título, formulário, informações de contato e deixar tudo alinhado ao design da sua loja.

🧭 Quando usar

  • Ao criar sua primeira página de contato

  • Ao modernizar um layout antigo

  • Ao adicionar formulário, WhatsApp, e-mail ou endereço da loja

✅ Pré-requisitos

  • WordPress instalado

  • Elementor Pro ativo (necessário para o widget de formulário)

  • Cores e tipografias da identidade visual definidas

🛠️ Passo a passo

Passo 1 – Criar nova página ou editar existente

  1. No painel do WordPress, vá em Páginas » Adicionar nova.

  2. Nomeie a página (ex.: Contato).

  3. Clique em Editar com Elementor.

Passo 2 – Criar o banner inicial

  1. Adicione uma seção e defina altura mínima de ~400px.

  2. Insira um título com o texto Contatos.

  3. Altere a cor da fonte para branco.

  4. Defina uma cor de fundo ou imagem de fundo conforme sua identidade visual.

Passo 3 – Construir a seção principal

  1. Crie uma nova seção logo abaixo do banner.

  2. Adicione um título: Fale conosco.

  3. Escolha uma cor de destaque (ex.: laranja da marca).

Passo 4 – Inserir o formulário de contato

  1. No painel de widgets, busque por Formulário (Elementor Pro).

  2. Arraste para a seção.

  3. Configure os campos:

    • Nome

    • E-mail

    • Mensagem

  4. Ajuste:

    • Texto do botão

    • Ações após envio (e-mail, integração, webhook etc.)

  5. Em Estilo, personalize cores, bordas e tipografia para combinar com a loja.

Passo 5 – Inserir informações de contato

  1. Adicione o widget Lista de ícones.

  2. Configure itens como:

    • WhatsApp

    • E-mail

    • Endereço

  3. Ajuste:

    • Ícones

    • Cores

    • Tamanho

    • Espaçamento

Passo 6 – Ajustar layout e espaçamentos

  1. Use padding superior e inferior para criar respiro visual.

  2. Centralize os itens ou distribua conforme seu design.

  3. Ajuste tipografias (H1, H2, corpo) para manter hierarquia clara.

Passo 7 – Publicar e revisar

  1. Clique em Publicar.

  2. Use o ícone do olho para visualizar.

  3. Revise navegação, espaçamentos e responsividade.

🧩 Exemplos práticos

  • Exemplo 1:
    Entrada: Loja moderna com identidade laranja
    Saída esperada: Banner laranja + formulário branco + lista de ícones preta.

  • Exemplo 2:
    Entrada: Página de contato minimalista
    Saída esperada: Fundo branco + formulário centralizado + ícones cinza.

🧪 Solução de problemas

  • Erro/Sintoma: Formulário não envia
    ​Causa provável: Ações pós-envio não configuradas
    ​Como resolver: Adicione ação de E-mail e configure destinatário.

  • Erro/Sintoma: Ícones desalinhados ou pequenos
    ​Causa provável: Padding ou tamanho padrão do widget
    ​Como resolver: Ajuste espaçamento e tamanho no painel de estilo.

  • Erro/Sintoma: Cabeçalho cobre parte do banner
    ​Causa provável: Altura da seção insuficiente
    ​Como resolver: Aumente a altura mínima ou adicione padding superior.

🔎 Referências e links úteis

🗂️ Metadados

  • Categoria: Páginas e estrutura

  • Subcategoria: Página de contato

  • Tags: contato, formulário, Elementor, WordPress, página institucional

  • Nível: básico

  • Atualizado em: 2025-11-14

Artigos relacionados
Respondeu à sua pergunta?