Como enviar e-mails com HTML

Em certos casos, os e-mails com textos simples não bastam. É aí que entram as mensagens com HTML. O Snov.io dá suporte ao envio de códigos HTML em e-mails, e você pode enviar páginas ou boletins HTML com muita facilidade. Saiba como enviar seu e-mail com HTML no Snov.io.

Resumo:

Passo 1. Criar um e-mail baseado em HTML

É recomendável criar seu e-mail antes de inserir um modelo HTML nele. Criar mensagens em HTML pode ser tedioso. Se você gosta de desafios, ou quer um e-mail criativo completamente diferente dos outros, projetar o seu pode ser divertido e vantajoso.

Caso contrário, você pode encontrar modelos prontos de e-mail em HTML. Como HTML às vezes é complicado, esse pode ser o jeito mais fácil. Por sorte, há vários modelos de e-mail em HTML disponíveis na internet. Aqui estão alguns:

Para criar um e-mail com HTML, é preciso saber que os modelos de HTML consistem em cabeçalho e corpo.

Cabeçalho

Na seção de cabeçalho, indicamos metatags e título. Todas as solicitações de mídia, estilo e animações CSS são mencionadas aqui. Ela fica localizada entre <head> e </head>.

A seção de cabeçalho de um e-mail tem o seguinte aspecto:

Head

  1. <!DOCTYPE> é usada para notificar o renderizador sobre quais tags HTML esperar e qual conjunto de regras deve ser seguido pelo HTML e pelo CSS. Embora alguns clientes de e-mail, como Gmail, Outlook ou Yahoo! Mail removam o código e apliquem um código próprio, é recomendável adicioná-lo ao código HTML do seu modelo de e-mail.
  2. <meta http-equiv=”Content-Type” /> é usada para notificar como o texto e os caracteres especiais serão processados na sua mensagem.
  3. “text/html” é usada para informar ao renderizador que ele deve reconhecer as seguintes cadeias de texto como HTML.
  4. <title> </title> é o título do e-mail. Os destinatários o verão na aba do navegador quando abrirem uma mensagem.
  5. <meta name = “viewport” /> é usada para criar um e-mail de HTML responsivo. Informa a escala correta ao dispositivo no qual a mensagem é visualizada.

Corpo

O corpo é a seção principal do e-mail que contém tudo que fica visível quando o destinatário abre o e-mail. Ela fica localizada entre <body> e </body> e começa com a formatação.

Para exibir a estrutura do e-mail em todos os clientes como ela foi produzida, é recomendável formatá-la usando tabelas aninhadas.

Crie pelo menos duas tabelas: um contêiner do modelo do e-mail e uma tabela do conteúdo do e-mail.

O contêiner do modelo de e-mail é a tabela principal. Configure a largura para 100%. Assim, você cobrirá um espaço de e-mail. Também é recomendável configurar um valor 0 para a margem, o enchimento, o enchimento da célula e o espaçamento da célula. Isso eliminará espaços inesperados dentro dessa tabela.

A tabela de conteúdo do e-mail é colocada dentro da tabela principal. Configure a largura para até 700 pixels. É um padrão suportado sem problemas pela maioria dos clientes de e-mail. Alinhe essa tabela ao centro.

Fica assim:

Body

A seguir, dependendo do modelo selecionado, você pode adicionar texto, imagens, botões (CTAs) e também alterar as cores. Posicione cada bloco de texto ou elemento em uma célula separada e aplique um estilo inline.

Aqui está uma estrutura simples de bloco de conteúdo e botão adicionado como tabela separada:

Content

Finalize o seu código HTML com um rodapé. É a parte que fecha o e-mail. É essencial adicionar as informações do remetente e adicionar um link de descadastramento aqui. Você também pode mencionar links para os seus perfis sociais ou informações adicionais.

Footer

Pronto! Você conseguiu criar um e-mail com HTML! Agora você pode usá-lo facilmente na sua campanha de gotejamento por e-mail.

Passo 2: Copiar e colar seu e-mail baseado em HTML

Na sua conta do Snov.io, inicie uma campanha de gotejamento por e-mail e navegue até o elemento E-mail.

Email

Selecione o ícone de Código-fonte e cole em um e-mail o código do seu modelo HTML já pronto.

Source code

Então clique em OK.

Insert source code

Recomendamos que envie um e-mail de teste clicando no botão Enviar e-mail de teste para garantir que seu e-mail baseado em HTML seja enviado como esperado.

Send a test email

Verifique o e-mail de teste em dispositivos móveis e no notebook; use pelo menos dois navegadores e clientes de e-mail diferentes.

Saiba sobre as limitações do design de e-mails em HTML.

Se tiver dúvidas, entre em contato conosco. Será um prazer ajudar você!

Isso te ajudou?

Obrigado por seu feedback!

Sinto por isso 😢

Como podemos melhorar?