Como criar e enviar um e-mail HTML personalizado

Um e-mail HTML interativo é uma ferramenta poderosa. As empresas podem usá-los para ofertas promocionais, freelancers podem usá-los para apresentar seus serviços para clientes em potencial e netos podem trazer um sorriso aos rostos de seus avós com um costume fofo Projeto. As únicas duas tecnologias de que você precisa para criar um e-mail personalizado do zero são HTML e CSS embutido. Tudo o que você precisa fazer é ter um design em mente, analisá-lo na forma de linhas e colunas da tabela e você estará pronto para começar a construir. Neste artigo, você aprenderá um método passo a passo para criar e enviar um e-mail HTML personalizado.

Construir o modelo de email usando HTML

O modelo de email depende de técnicas tradicionais de HTML. Você trabalhará com tabelas e empilhará as linhas da tabela e dados da tabela o tempo todo. O modelo de e-mail HTML básico é parecido com este:

...
...
...
...
...
...
...




...

Saída:

Seria melhor preparar um design de forma que você pudesse mapear onde e como dividir o design. Além disso, você estará mentalmente preparado para esboçar uma estrutura de tabela a partir dela.

Aqui, você está começando com o DOCTYPE para o documento. Em seguida, você define o conjunto de caracteres, o tipo de conteúdo, as metatags e o título dentro do marcação. A parte essencial começa com o tag onde você coloca um pai e adicionar várias linhas de tabela dentro dele. Depois de dividir o conteúdo em um número adequado de linhas, é hora de inserir os dados da tabela dentro deles.

Como disse, você deve trabalhar apenas com tabelas. Portanto, para inserir dados diferentes dentro do tag, você precisa seguir uma rota definida. Por exemplo, vamos formar um modelo de e-mail com um logotipo e data dentro de um marcação.

 Logotipo e data dentro da tag 
 

















05 de dezembro de 2021

Agora você sabe como colocar tags HTML e construir uma boa estrutura para seu modelo de e-mail. Vamos seguir em frente para entender melhor o estilo do e-mail.

Estilize seu e-mail em HTML

Definir o estilo de um e-mail em HTML é uma tarefa complicada, pois você só pode usar CSS embutido. Além disso, você precisará iterar o estilo para cada elemento se ele possuir um estilo semelhante. Se você não está familiarizado com as folhas de estilo em cascata, explore começando com CSS.

Antevisão:

 05 de dezembro de 2021 






































Oi John Doe



Obrigado por visitar o nosso site. Esperamos que você tenha aprendido algo novo hoje.





 A sua opinião é importante para nós! 

 Avalie nossos artigos aqui. 


012345678910

Saída:

Se você quiser, você pode acesse o código completo no GitHub e clonar o repositório para usá-lo.

Enviando o Correio

Agora copie e cole todo o código do GitHub. Se você estiver usando o VS Code, abra o arquivo HTML usando a extensão do servidor ao vivo e copie o conteúdo clicando em Ctrl + A>Ctrl + C. Abra o Gmail e escreva um novo e-mail. Cole o conteúdo e insira o id do e-mail do destinatário. Envie o e-mail e você obterá os resultados conforme mostrado abaixo:

Teste o código em diferentes dispositivos para ver como ele se parece e se comporta. Personalize seu e-mail em HTML e torne-o limpo, simples e responsivo.

Modificar Modelos de Email Existentes

Criar um e-mail em HTML do zero exige um domínio sólido de HTML e CSS embutido. Você também pode modificar um modelo de e-mail existente e personalizá-lo de acordo com suas necessidades. Lembre-se de que os e-mails em HTML tendem a demorar alguns segundos para carregar. Planeje, projete, codifique e conduza testes completos para evitar quaisquer inconsistências do usuário final. Você pode aprender mais sobre HTML semântico e CSS para escrever um código melhor e mais acessível.

Naincy Mourya (17 artigos publicados)

A Naincy é especializada na construção de sites altamente responsivos e estratégia de conteúdo eficiente, juntamente com cópias da web. Ela é redatora freelance de tecnologia que fica de olho nas tendências de tecnologia.

Mais de Naincy Mourya