E-mails marketing parecem diferentes no Outlook

Modelos de e-mail do HubSpot e e-mails criados com o editor de arrastar e soltar são projetados para ser consistentes e responsivos em clientes comuns de e-mail. Você também pode visualizar seu e-mail em clientes de e-mail. Dado que o Outlook oferece suporte limitado para CSS, você pode ver discrepâncias na maneira como seu e-mail é renderizado no Outlook. Se você observar que o posicionamento ou o espaçamento de e-mail parece errado no Outlook, há etapas que você pode tomar para corrigi-lo. 

Observação: O suporte da HubSpot não pode apoiar modelos de e-mail codificados personalizados. Se você estiver usando um modelo codificado personalizado, procure o provedor que criou o modelo. Como alternativa, você pode se conectar com outros usuários e designers na Comunidade HubSpot.

Centralizar as imagens

Se sua imagem não estiver centralizada no Outlook, você pode ajustar o HTML dentro do código fonte do módulo.

• Na sua conta da HubSpot, navegue até Marketing > Email.
• Clique no nome do e-mail.
• No módulo de rich text com a sua imagem, clique no código do ícone de código fonte code.
• Localize o código para a imagem que você está tentando centralizar que começa com <img>.
• Adicione tags <center> </center> ou <p style="text-align: center;"> </p> ao redor do código <img>. Por exemplo:

<center><img src="http://www.hubspot.com/test.jpg"></center>

<p style="text-align: center;"><img src="http://www.hubspot.com/test.jpg"></p>

Espaçamento

Há dois métodos para ajustar o espaçamento em torno de imagens no Outlook: usando hspace ou vspace, e usando tabelas.

Usar hspace e vspace

O atributo HTML vspacedefine espaço vertical e adicionará espaçamento igual à parte superior e inferior da sua imagem. O atributo hspace define espaço horizontal e adicionará espaçamento igual à direita e à esquerda da sua imagem.

• Na sua conta da HubSpot, navegue até Marketing > Email.

• Clique no nome do e-mail.

• Clique no módulo de conteúdo e, em seguida, clique no código do ícone de código fonte code.

• No final do código de imagem, adicione um dos códigos a seguir: hspace="10" vspace="10", substituindo 10 pelo valor desejado de espaçamento.

Usar tabelas

Se estiver usando o editor de e-mail clássico, poderá criar uma tabela de 3 colunas para conter sua imagem, o espaçamento e o texto:

• Na sua conta da HubSpot, navegue até Marketing > Email.

• Clique no nome do e-mail.

• No editor de rich text, clique em Tabela > Inserir tabela. Criar uma tabela 3 x 1.
  
  

• Clique no código de ícone de código fonte code.

• Especifique uma largura na célula vazia, como <td width="10"> para o valor de espaçamento que você gostaria entre a imagem e o texto.

• Especifique uma família de fontes, tamanho de fonte, cor de fonte e altura de linha, como style="font-family: sans-serif; font-size:15px; line-height: 1.5em; color: #000000" dado que o Outlook adicionará seu próprio estilo quando nada for especificado.

Observação: você não pode inserir tabelas em um e-mail se estiver usando o editor de e-mail do tipo arrastar e soltar.

Saiba mais sobre o design de e-mail na nossa Comunidade de designers.