Assinatura Modelos HTML

Modelos HTML de assinatura editáveis para clientes de e-mail

Um modelo de assinatura em HTML é um bloco de código que você abre, edita e cola nas configurações de assinatura de um aplicativo de e-mail. Campos de texto, referências de imagem e links são todos especificados no código, garantindo que cada parte do bloco permaneça separada e fácil de substituir.

Como os blocos de código prontos são construídos

Quase toda assinatura pronta é estruturada em uma tabela. Linhas e células mantêm o nome, o logotipo e os dados de contato em posições fixas, e essa grade sobrevive à transição entre clientes de e-mail muito melhor do que elementos com float. A formatação é aplicada em linha (inline), declarada diretamente nos próprios elementos, já que o bloco é colado na mensagem de outra pessoa.

Abra o arquivo antes de adotá-lo e confira alguns pontos:

• Se cada campo de texto está em sua própria célula
• Se as fontes das imagens utilizam URLs completas em vez de nomes de arquivos locais
• Se as larguras estão definidas nas imagens e na tabela
• Se os contatos foram configurados como links mailto e tel

Logotipos e fotos de perfil precisam de um endereço permanente na web, pois um arquivo arrastado do computador aparecerá apenas para você e falhará para todos os outros. Vale a pena preencher o texto alternativo, já que muitos leitores de e-mail bloqueiam imagens até que o destinatário autorize a exibição.

Por que todo cliente de e-mail merece um envio de teste

O suporte para código varia de um cliente de e-mail para outro, e o código por si só não revela essa extensão. O Outlook renderiza mensagens com motor próprio, o Gmail é mais rígido com o que preserva e um app para celular pode recalcular larguras. O único teste seguro é uma mensagem real.

Envie a assinatura para dois ou três endereços em serviços diferentes e abra um deles no celular. Verifique se a tabela preserva as colunas, se o logotipo carrega no tamanho pretendido e se textos de link longos não quebram de maneira desordenada. No Nicepage, os Responsive Modes exibem uma visualização estreita antes de o código sair do editor.

Substituição de campos antes de instalar o resultado

A edição segue uma ordem prática. Substitua o nome e o cargo fictícios, aponte as tags de imagem para seu próprio logotipo e, em seguida, atualize os links. As fontes de texto e de imagem podem ser alteradas com segurança por conta própria, enquanto células, larguras declaradas e estruturas aninhadas devem ser mantidas intactas, a menos que você pretenda realizar novos testes.

A instalação consiste em colar o código finalizado nas configurações de assinatura. Alguns serviços aceitam o código diretamente, enquanto outros exigem uma versão renderizada copiada de uma janela do navegador — e é por isso que o mesmo modelo pode se comportar de maneira diferente em duas contas distintas. Compare as opções avaliando o quão pouco você precisa mexer no código, como links e imagens reagem a um encaminhamento e a facilidade de instalação do bloco.