Este artigo explica como corrigir problemas comuns de diagramação em campanhas de e-mail, garantindo que o espaçamento entre textos e imagens seja exibido corretamente em qualquer provedor, como Gmail ou Outlook. Utilize as ferramentas de estrutura do editor para obter um visual profissional e consistente.

• Nível de Acesso: Administrador, Administrador de Dados.
  Persona: Analista de CRM, Analista de E-commerce.

E-mail: Como ajustar espaçamento e diagramação no Editor Visual

Como ajustar o espaçamento vertical com o Distanciador

Muitas vezes, tentar dar "enter" no texto ou ajustar apenas a margem de um bloco não é suficiente para garantir que todos os provedores de e-mail renderizem o espaço corretamente. Para resolver isso, utilize o componente Distanciador (Spacer).

1. Arraste o componente "Distanciador" para o local entre os blocos que deseja separar.

2. Clique sobre o distanciador para selecioná-lo. No menu de Propriedades à direita, ajuste a altura em pixels até alcançar o espaçamento ideal.

Como ajustar o espaçamento lateral com o Preenchimento

Se o texto está encostando nas bordas do e-mail ou ficando sem margem lateral na versão mobile, o ajuste correto é feito na propriedade Preenchimento.

1. Selecione o bloco de texto ou a estrutura (coluna) onde o conteúdo está inserido.

2. Acesse a aba de Propriedades no painel lateral.

3. Localize a opção de Preenchimento.

4. Ajuste os valores para as laterais (Esquerda e Direita) para criar a margem desejada.

Dicas Importantes para Testes

Pré-visualização vs. E-mail Teste: A pré-visualização do editor é uma simulação. O E-mail Teste é a sua prova real. Se um erro de diagramação aparecer no teste, o ajuste deve ser feito com as ferramentas de Distanciador e Preenchimento.

Foco no Mobile: Sempre verifique como os espaçamentos se comportam na visualização mobile. O que parece um espaço pequeno no desktop pode se tornar um espaço excessivo na tela de um celular. Ajuste pensando sempre na melhor experiência mobile.

FAQ – Perguntas Frequentes

1. Pergunta: O que fazer se o e-mail teste apresentar textos "grudados" ou sem espaço?
Resposta: Utilize o componente "Distanciador" para criar um espaço vertical seguro entre os blocos de conteúdo. Evite usar múltiplos "enters", pois eles não são interpretados de forma consistente pelos provedores de e-mail.

2. Pergunta: O espaço criado pelo "Distanciador" ficou muito grande. Como ajustá-lo?
Resposta: Clique sobre o componente "Distanciador" no editor e, no painel de "Propriedades" à direita, altere o valor da altura em pixels para um número menor até que o ajuste fique ideal.

3. Pergunta: Meu texto está encostando na borda da tela no celular. Como crio uma margem lateral?
Resposta: Selecione a estrutura ou o bloco de texto, vá em "Propriedades" e ajuste os valores de "Preenchimento" para a esquerda e para a direita. Isso criará um respiro lateral que funciona bem tanto em desktop quanto em mobile.

4. Pergunta: Qual a diferença entre a pré-visualização do editor e o envio de um e-mail teste?
Resposta: A pré-visualização é uma simulação rápida de como o layout pode se parecer. O e-mail teste é a prova real, pois ele é renderizado pelo seu próprio provedor de e-mail (Gmail, Outlook, etc.) e mostra exatamente como seu cliente o receberá.

Ficou com alguma dúvida ou identificou algum problema? Acione nosso time pelo chat disponível no app dito. (Horário de Atendimento de Segunda a Sexta das 9hrs as 18hrs)