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.

Como ajustar o tamanho das imagens no Editor Visual

Imagens com dimensões inadequadas podem comprometer a diagramação da campanha, causando desalinhamentos entre os blocos, espaçamentos inesperados e até a ausência de elementos, como o cabeçalho do e-mail.

Para evitar esses problemas, verifique se as imagens estão dimensionadas corretamente e se respeitam a estrutura do layout.

1. No Editor Visual, clique sobre a imagem que deseja ajustar.

2. Acesse o painel de Propriedades, localizado à direita.

3. Verifique as configurações de tamanho disponíveis para a imagem e ajuste suas dimensões conforme o espaço destinado a ela no layout.

4. Confira se a imagem está adequada à largura da coluna ou estrutura em que foi inserida, evitando que ultrapasse os limites definidos.

5. Após realizar os ajustes, envie um E-mail Teste e verifique o resultado nos diferentes dispositivos e provedores de e-mail.

Importante: se o problema persistir, confira também as dimensões e a proporção do arquivo original. Para orientações mais detalhadas sobre como preparar e otimizar imagens para campanhas, consulte o artigo de referência sobre otimização de imagens.

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á.

5. Pergunta: Meu e-mail ficou desconfigurado, com elementos desalinhados ou sem o cabeçalho. Isso pode estar relacionado ao tamanho das imagens?

Resposta: Sim. Imagens com dimensões inadequadas podem comprometer a estrutura e a renderização do e-mail em determinados provedores, causando desalinhamentos ou problemas na exibição de elementos, como o cabeçalho. Para corrigir, selecione a imagem no Editor Visual, acesse o painel de Propriedades e ajuste seu tamanho de acordo com o espaço disponível no layout. Depois, envie um E-mail Teste para validar o resultado. Para mais informações, consulte também o artigo sobre otimização de imagens.

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)