1. Home
  2. Iniciando com a Bybrand
  3. Criando uma assinatura de e-mail usando o próprio HTML

Criando uma assinatura de e-mail usando o próprio HTML

This post is also available in: English

Criar uma assinatura de e-mail personalizada por meio de seu próprio HTML geralmente é a opção preferida, independentemente de você ter adquirido um código pré-criado de um designer interno, comprado em uma plataforma como a Fiverr ou criado por conta própria usando um IDE.

Com o HTML, você consegue personalizar sua assinatura com toques finos, desde fontes personalizadas, cores, links e imagens com hospedagem externa.

Portando, este tutorial o guiará pelas etapas da criação de uma assinatura usando HTML próprio.

Antes de começar

O modo de editar HTML é perfeito para especialistas que dominam HTML. Aqui estão as considerações que você deve ler antes de usar o recurso.

  • Uma assinatura de e-mail não aceita JavaScript;
  • O código CSS deve ser no modo inline, e não incorporado;
  • Apenas o conteúdo dentro da tag HTML body é carregado;
  • Nem todas as propriedades CSS são suportadas, detalhes em Campaign Monitor ou Mailchimp.

Primeira assinatura com HTML próprio

Após iniciar sessão na Bybrand, navegue até o menu Assinaturas, e clique no botão Criar nova assinatura. Aqui, encontrará a galeria de modelos, clique na opção HTML próprio para começar.

Opção HTML próprio
Exemplo da opção HTML próprio.

Ao clique na opção, você será redirecionado para a página de criação. Use seu próprio HTML de uma assinatura já criada, ou inicie digitando do zero no editor.

Exemplo de editor de assinatura para HTML próprio.

Área do editor de assinatura com HTML próprio.
Editor de assinatura com HTML próprio.

Você pode mover um arquivo HTML completo para dentro do editor.

Movendo o arquivo HTML para o editor.

Note que ao salvar a assinatura, o editor vai aplicar estilo do código para deixá-lo legível, e remover propriedades não permitidas no HTML, como JavaScript ou CSS embutidos.

Opção Code View

Opcionalmente, você pode criar na opção Code View, para ver o HTML renderizado.

Opção Code View

Nessa parte você também pode fazer edições, e carregar novas imagens da galeria. Você também pode selecionar um texto para apontar no HTML onde ele está localizado.

  • Realizar edição simples na assinatura;
  • Alterar imagens e ícones;
  • Localizar o texto dentro do HTML;

Perceba que o botão de salvar é desativado no modo Code View, então precisa alterar para o HTML e assim, ativar a opção de salvar.

Vídeo tutorial

Aqui temos um vídeo tutorial completo com todas as etapas acima, mostrando etapas para criar uma assinatura de e-mail usando o seu próprio HTML.

Updated on 16 de junho de 2023

Was this article helpful?

Need Support?
Can’t find the answer you’re looking for? Don’t worry we’re here to help!
Contact Support