{"id":50835,"date":"2022-06-30T05:58:07","date_gmt":"2022-06-30T08:58:07","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=50835&#038;preview=true&#038;preview_id=50835"},"modified":"2023-08-21T10:30:12","modified_gmt":"2023-08-21T13:30:12","slug":"email-html","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/email-html\/","title":{"rendered":"Um Guia para Iniciantes na Cria\u00e7\u00e3o e Envio de um E-mail HTML"},"content":{"rendered":"<p>R\u00e1pido Quiz pop: Qual \u00e9 o nome da linguagem que os desenvolvedores web usam para criar as estruturas dos sites que voc\u00ea visita todos os dias? Respostas inteligentes e super inteligentes \u00e0 parte, o <a href=\"https:\/\/kinsta.com\/pt\/blog\/aprender-html\/\">Hypertext Markup Language (HTML)<\/a>\u00a0\u00e9 um padr\u00e3o sempre verde, presente no nascimento da web. No entanto, isto n\u00e3o se aplica apenas \u00e0s p\u00e1ginas web. Sua caixa de entrada \u00e9 um terreno f\u00e9rtil para o design de e-mails HTML.<\/p>\n<p>Isto faz sentido se voc\u00ea considerar quantas imagens, GIFs, v\u00eddeos e conte\u00fado de marca voc\u00ea v\u00ea quase todas as horas em seus e-mails. Enquanto voc\u00ea poderia oferecer um e-mail de texto simples, uma vers\u00e3o HTML oferecer\u00e1 mais benef\u00edcios e lhe dar\u00e1 mais oportunidades para <a href=\"https:\/\/kinsta.com\/pt\/blog\/estrategia-de-posicionamento\/\">marcar e comercializar voc\u00ea mesmo e sua empresa<\/a>.<\/p>\n<p>Para este artigo, vamos discutir como criar e enviar e-mails HTML, e porque voc\u00ea deve fazer isso. Em alguns pontos, vamos aprofundar em como voc\u00ea codificaria um e-mail, mas voc\u00ea n\u00e3o vai precisar desse conhecimento para criar o seu pr\u00f3prio.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>O que \u00e9 um e-mail HTML?<\/h2>\n<p>Os e-mails que <a href=\"https:\/\/kinsta.com\/pt\/blog\/design-email\/\" rel=\"noopener\">chegam \u00e0 sua caixa de entrada<\/a> podem vir em dois sabores:<\/p>\n<ul>\n<li><strong>Texto simples:<\/strong> \u00c9 quase um telegrama para a era moderna. N\u00e3o h\u00e1 estilo ou formata\u00e7\u00e3o m\u00ednima, e o destinat\u00e1rio ver\u00e1 palavras com exclus\u00e3o de todas as outras.<\/li>\n<li><strong>HTML:<\/strong> Este \u00e9 um quebra-fogos de artif\u00edcio comparado ao texto simples, e \u00e9 pesado em termos de design. Ele usa c\u00f3digo HTML para apresentar um e-mail, embora, como discutiremos, nem sempre vai utilizar os padr\u00f5es modernos da web.<\/li>\n<\/ul>\n<p>Por exemplo, voc\u00ea saber\u00e1 se voc\u00ea receber um e-mail em texto simples, pois ele se parece exatamente com um documento em texto simples. Em contraste, um e-mail HTML parece quase o mesmo que uma p\u00e1gina web moderna (dar ou receber algumas preocupa\u00e7\u00f5es de estilo e formata\u00e7\u00e3o):<\/p>\n<figure id=\"attachment_123704\" aria-describedby=\"caption-attachment-123704\" style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-123704\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/html-email-example.png\" alt=\"Um e-mail HTML dentro do navegador.\" width=\"1000\" height=\"756\"><figcaption id=\"caption-attachment-123704\" class=\"wp-caption-text\">Um e-mail HTML dentro do navegador.<\/figcaption><\/figure>\n<p>Na maioria dos casos, um e-mail HTML n\u00e3o se esfor\u00e7ar\u00e1 para fornecer o m\u00e1ximo em interatividade ou engajamento din\u00e2mico. Mais uma vez, \u00e9 algo que cobriremos mais tarde, mas o e-mail HTML est\u00e1 <a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-html\/\">atrasado em rela\u00e7\u00e3o \u00e0 web<\/a>, em termos de padr\u00f5es. Como tal, HTML \u00e9 mais uma ferramenta voltada para o design do que uma ferramenta para ajudar a fornecer uma experi\u00eancia. Mas isso levanta uma quest\u00e3o: Por que voc\u00ea gostaria de usar o e-mail HTML se a \u00fanica raz\u00e3o \u00e9 visual? N\u00f3s procuraremos responder isso a seguir.<\/p>\n\n<h2>Porque voc\u00ea usaria o e-mail HTML sobre a formata\u00e7\u00e3o de texto simples<\/h2>\n<p>\u00c9 raro que voc\u00ea veja um simples e-mail de uma empresa, por algumas raz\u00f5es. Entretanto, o texto simples n\u00e3o \u00e9 <em>errado por si s\u00f3<\/em>, mais do que n\u00e3o oferece nenhum dos benef\u00edcios da formata\u00e7\u00e3o de e-mails HTML. Por exemplo, o texto simples n\u00e3o oferece nenhum dos benef\u00edcios da formata\u00e7\u00e3o HTML:<\/p>\n<ul>\n<li>Voc\u00ea pode usar os elementos visuais inerentes para ajudar a focar a aten\u00e7\u00e3o nas v\u00e1rias partes do <a href=\"https:\/\/kinsta.com\/pt\/blog\/design-email\/\">conte\u00fado do seu e-mail<\/a>.<\/li>\n<li>Por extens\u00e3o, um e-mail HTML \u00e9 um formato rico para apresentar seu conte\u00fado. Isto significa que voc\u00ea pode alavancar os elementos que os usu\u00e1rios esperam se envolver com eles, tais como imagens, <a href=\"https:\/\/kinsta.com\/pt\/blog\/hospedagem-video\/\" rel=\"noopener\">v\u00eddeo<\/a> e muito mais.<\/li>\n<li>Combinados, estes dois aspectos podem oferecer a voc\u00ea uma excelente oportunidade de marcar seu conte\u00fado, assim como voc\u00ea faria com seu site principal.<\/li>\n<\/ul>\n<p>No entanto, decidir usar um e-mail HTML n\u00e3o \u00e9 a tempestade perfeita que voc\u00ea pensaria. H\u00e1 tamb\u00e9m alguns inconvenientes a considerar. Primeiro, voc\u00ea tem que considerar a experi\u00eancia do usu\u00e1rio, assim como voc\u00ea consideraria quando voc\u00ea projeta um site. Isto pode n\u00e3o <a href=\"https:\/\/kinsta.com\/pt\/participacao-mercado-navegadores-desktop\/\">incluir apenas um navegador<\/a> &#8211; muitos usu\u00e1rios tamb\u00e9m preferem ler e-mails em um cliente dedicado.<\/p>\n<p>E mais, voc\u00ea tamb\u00e9m tem que considerar algumas das <a href=\"https:\/\/kinsta.com\/pt\/blog\/seguranca-para-trabalhar-desde-casa\/\">quest\u00f5es de privacidade e seguran\u00e7a<\/a> que dominam o desenvolvimento web. Isto \u00e9 especialmente verdade se voc\u00ea quiser incluir o JavaScript, voc\u00ea puxa fontes de terceiros, e outros aspectos.<\/p>\n<p>Por causa disso, voc\u00ea tem que combater a acessibilidade e batalhas de padr\u00f5es quase em mais frentes do que a web. \u00c9 dif\u00edcil criar um e-mail HTML que funcione com base no cross-browser e no cliente. \u00c9 claro que \u00e9 poss\u00edvel fazer isso, e n\u00f3s cobriremos o aspecto t\u00e9cnico em uma se\u00e7\u00e3o futura. Por enquanto, voc\u00ea vai querer ter os v\u00e1rios elementos do seu e-mail decididos, ent\u00e3o procure implement\u00e1-los.<\/p>\n<h2>Os elementos essenciais (e pr\u00e1ticas t\u00edpicas) de um e-mail HTML<\/h2>\n<p>Este artigo ir\u00e1 <a href=\"https:\/\/kinsta.com\/pt\/blog\/cursos-de-web-design\/\" rel=\"noopener\">fazer refer\u00eancia ao web design<\/a> em v\u00e1rios lugares, devido \u00e0s semelhan\u00e7as inerentes. Um aspecto que oferece um fluxo de trabalho similar \u00e9 como decidir sobre as facetas e se\u00e7\u00f5es do seu e-mail HTML.<\/p>\n<p>Assim como a web, h\u00e1 alguns elementos que s\u00e3o praticamente inegoci\u00e1veis para seus e-mails. \u00c9 claro, voc\u00ea precisa de conte\u00fado. H\u00e1 alguns elementos t\u00edpicos a serem considerados aqui:<\/p>\n<ul>\n<li>Seu cabe\u00e7alho \u00e9 importante porque esta \u00e9 a primeira impress\u00e3o que seu e-mail vai oferecer aos leitores.<\/li>\n<li>Assim como o web design, pensar sobre quais elementos aparecem acima da dobra tamb\u00e9m ser\u00e1 ben\u00e9fico.<\/li>\n<li>O conte\u00fado corporal \u00e9 vital porque, afinal de contas, \u00e9 por isso que o leitor <a href=\"https:\/\/kinsta.com\/pt\/blog\/automacao-de-email-marketing\/\">assinar\u00e1 os seus e-mails<\/a>.<\/li>\n<li>O rodap\u00e9 do seu e-mail HTML tamb\u00e9m oferece muito valor para voc\u00ea e seus assinantes tamb\u00e9m, e pode ser um elemento desvalorizado de seus e-mails.<\/li>\n<\/ul>\n<p>H\u00e1 alguns pontos aqui que podemos tocar mais adiante. Primeiro, considere o quanto os emojis permeiam nosso uso cotidiano da web. Embora eles n\u00e3o sejam um elemento HTML rigoroso, a aplica\u00e7\u00e3o de bom gosto dos emojis pode fazer maravilhas para o seu conte\u00fado, especialmente para o seu cabe\u00e7alho:<\/p>\n<figure id=\"attachment_123702\" aria-describedby=\"caption-attachment-123702\" style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-123702\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/emoji-usage.png\" alt=\"Uma sele\u00e7\u00e3o de emojis usados no cabe\u00e7alho do t\u00edtulo\" width=\"1000\" height=\"207\"><figcaption id=\"caption-attachment-123702\" class=\"wp-caption-text\">Uma sele\u00e7\u00e3o de emojis usados no cabe\u00e7alho do t\u00edtulo<\/figcaption><\/figure>\n<p>O rodap\u00e9 \u00e9 tamb\u00e9m o melhor lugar para algumas informa\u00e7\u00f5es legais essenciais. Duas das maiores quest\u00f5es relacionadas a e-mails s\u00e3o spam e se um e-mail atinge as caixas de entrada certas (se \u00e9 que atinge). Isto \u00e9 algo que vamos analisar em uma se\u00e7\u00e3o posterior, pois \u00e9 uma parte vital da cria\u00e7\u00e3o e envio de e-mails HTML.<\/p>\n<h3>Considerando algumas pr\u00e1ticas t\u00edpicas para seus e-mails HTML<\/h3>\n<p>H\u00e1 muito crossover com <a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-email-marketing\/\" rel=\"noopener\">e-mail marketing<\/a> quando se trata de algumas das pr\u00e1ticas mais otimizadas que voc\u00ea usar\u00e1 dentro de seus projetos e layouts. H\u00e1 uma que voc\u00ea vai querer incluir quase como um elemento n\u00e3o negoci\u00e1vel: Um opt-in duplo.<\/p>\n<p>Um dos maiores <a href=\"https:\/\/kinsta.com\/pt\/blog\/estatisticas-email-marketing\/\" rel=\"noopener\">hacks de e-mail marketing<\/a> \u00e9 que voc\u00ea quer levar seus e-mails para o leitor. Em outras palavras, forne\u00e7a um <a href=\"https:\/\/kinsta.com\/pt\/blog\/mailchimp-para-wordpress\/\">formul\u00e1rio de opt-in<\/a> em um site, pois este tem uma <a href=\"https:\/\/kinsta.com\/pt\/blog\/dicas-otimizacao-taxa-conversao\/\" rel=\"noopener\">grande taxa de convers\u00e3o<\/a>. No entanto, n\u00e3o deve ser a \u00fanica vez que voc\u00ea pede confirma\u00e7\u00e3o. \u00c9 uma excelente pr\u00e1tica tamb\u00e9m enviar um segundo opt-in como um e-mail:<\/p>\n<figure id=\"attachment_123710\" aria-describedby=\"caption-attachment-123710\" style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-123710\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/opt-in.png\" alt=\"Um duplo e-mail de opt-in\" width=\"1000\" height=\"585\"><figcaption id=\"caption-attachment-123710\" class=\"wp-caption-text\">Um duplo e-mail de opt-in<\/figcaption><\/figure>\n<p>H\u00e1 algumas raz\u00f5es para isso:<\/p>\n<ul>\n<li>Primeiro, ele constr\u00f3i confian\u00e7a com seu leitor, porque voc\u00ea recebe permiss\u00e3o expressa para enviar-lhes e-mails.<\/li>\n<li>Por extens\u00e3o, voc\u00ea tamb\u00e9m tem consentimento expl\u00edcito no caso de um encaminhamento de spam (mais sobre isso mais tarde).<\/li>\n<li>Voc\u00ea ajuda a parar o <a href=\"https:\/\/kinsta.com\/pt\/blog\/gerenciador-de-entregabilidade-de-emails\/\">abuso de e-mails e spam<\/a> para outros, porque eles t\u00eam que optar especificamente por uma assinatura de seus e-mails.<\/li>\n<\/ul>\n<p>Na verdade, porque uma dupla op\u00e7\u00e3o de inclus\u00e3o envolve o envio de um e-mail para o endere\u00e7o em quest\u00e3o, \u00e9 a melhor maneira de <a href=\"https:\/\/kinsta.com\/pt\/blog\/autenticacao-email\/\" rel=\"noopener\">validar o endere\u00e7o de e-mail<\/a>.<\/p>\n<p>H\u00e1 algumas outras boas pr\u00e1ticas a serem consideradas tamb\u00e9m. Entretanto, as seguintes s\u00e3o mais opcionais, j\u00e1 que voc\u00ea obter\u00e1 resultados fant\u00e1sticos, mas haver\u00e1 momentos em que voc\u00ea n\u00e3o vai querer seguir estas diretrizes:<\/p>\n<ul>\n<li>Sua linha de assunto deve ser perfeita, e seu conte\u00fado de e-mail deve ser direto ao ponto. Dado o advento e agora o <a href=\"https:\/\/kinsta.com\/pt\/dispositivo-movel-vs-desktop\/\">dom\u00ednio da navega\u00e7\u00e3o m\u00f3vel<\/a>, isto \u00e9 especialmente importante.<\/li>\n<li>Por falar nisso, voc\u00ea vai querer ter certeza de que seu e-mail HTML ser\u00e1 lido sem problemas em telas menores &#8211; isto significa que n\u00e3o haver\u00e1 banners de grande alcance ou logos superdimensionados.<\/li>\n<li>Se voc\u00ea incluir um call to action (CTA) forte em cada e-mail, voc\u00ea tem uma boa chance de um melhor envolvimento do usu\u00e1rio.<\/li>\n<li>O rastreamento \u00e9 uma quest\u00e3o controversa, mas isto o ajudar\u00e1 a entender o que seus usu\u00e1rios fazem quando voc\u00ea lhes envia um e-mail. Alguns provedores incluem um s\u00f3lido conjunto de an\u00e1lises como padr\u00e3o.<\/li>\n<\/ul>\n<p>T\u00e3o importante quanto a forma como voc\u00ea apresenta e configura seu e-mail, \u00e9 como criar o design e layout. Nas pr\u00f3ximas se\u00e7\u00f5es, vamos analisar como construir um e-mail HTML, e depois terminar com algumas dicas para envi\u00e1-los.<\/p>\n<h2>A abordagem t\u00e9cnica que voc\u00ea precisar\u00e1 fazer para criar um e-mail HTML<\/h2>\n<p>Se voc\u00ea tem alguma experi\u00eancia em desenvolvimento web, voc\u00ea sem d\u00favida <a href=\"https:\/\/kinsta.com\/pt\/blog\/html-vs-html5\/\" rel=\"noopener\">usar\u00e1 HTML5<\/a> como sua linguagem markup. Este \u00e9 um mundo \u00e0 parte das inst\u00e2ncias anteriores de <a href=\"https:\/\/kinsta.com\/pt\/blog\/xml-vs-html\/\">HTML e XHTML<\/a> e inclui mais uma divis\u00e3o entre estilo (do qual praticamente n\u00e3o h\u00e1 elementos v\u00e1lidos) e estrutura.<\/p>\n<p>Para um exemplo deste \u00faltimo, HTML5 oferece uma s\u00e9rie de tags diferentes para definir as \u00e1reas de conte\u00fado do seu site.<\/p>\n<figure id=\"attachment_123705\" aria-describedby=\"caption-attachment-123705\" style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-123705\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/html-tags.png\" alt=\"Uma s\u00e9rie de tags estruturais HTML\" width=\"1000\" height=\"799\"><figcaption id=\"caption-attachment-123705\" class=\"wp-caption-text\">Uma s\u00e9rie de tags estruturais HTML.<\/figcaption><\/figure>\n<p>Entretanto, o e-mail HTML \u00e9 uma besta diferente, na medida em que est\u00e1 um pouco atrasado em rela\u00e7\u00e3o aos tempos. Como tal, voc\u00ea vai querer usar todas aquelas tabelas HTML4 antigas e estilo inline para criar seu layout. Por isso, voc\u00ea precisar\u00e1 falar com os desenvolvedores dos clientes de e-mail, pois eles frequentemente alterar\u00e3o o e-mail HTML \u00e0 medida que ele entrar na sua caixa de entrada. Um dos atos mais comuns \u00e9 tirar <a href=\"https:\/\/kinsta.com\/pt\/blog\/css-wordpress\/\">CSS<\/a> e <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-javascript\/\">JavaScript<\/a> dos e-mails por raz\u00f5es de seguran\u00e7a (entre outros).<\/p>\n<p>Isto significa que voc\u00ea precisar\u00e1 fornecer outra maneira de adicionar estilo aos seus e-mails HTML &#8211; inline \u00e9 a \u00fanica op\u00e7\u00e3o para compatibilidade. Falando em compatibilidade, esta \u00e9 uma considera\u00e7\u00e3o importante. Voc\u00ea tem que equilibrar um estilo \u00fanico com as capacidades do cliente de e-mail do usu\u00e1rio final. Como tal, h\u00e1 algumas outras considera\u00e7\u00f5es t\u00e9cnicas que voc\u00ea vai querer anotar:<\/p>\n<ul>\n<li>Usando <a href=\"https:\/\/kinsta.com\/pt\/blog\/html-fontes\/\" rel=\"noopener\">fontes do sistema<\/a> ao inv\u00e9s de fontes de terceiros, voc\u00ea economizar\u00e1 uma <a href=\"https:\/\/kinsta.com\/pt\/blog\/lista-codigos-status-http\/\">solicita\u00e7\u00e3o HTTP<\/a>, carregar\u00e1 o e-mail rapidamente para o usu\u00e1rio e entregar\u00e1 um <a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-fontes-para-e-mail\/\" rel=\"noopener\">e-mail com apar\u00eancia consistente<\/a> para inicializa\u00e7\u00e3o.<\/li>\n<li>Voc\u00ea poderia ir ainda mais longe e fornecer uma vers\u00e3o em texto simples do seu e-mail para aqueles que n\u00e3o podem visualizar e-mails HTML em seus clientes. Muitos sites oferecer\u00e3o uma vers\u00e3o HTML que voc\u00ea pode acessar online, tanto por este motivo quanto como backup.<\/li>\n<li>Alt-text \u00e9 t\u00e3o importante para e-mails HTML quanto para a web. Como tal, use o texto alt em qualquer lugar que voc\u00ea adicionar uma imagem ao seu conte\u00fado <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-acessivel\/\" rel=\"noopener\">para acessibilidade<\/a>.<\/li>\n<\/ul>\n<p>H\u00e1 um aspecto t\u00e9cnico de um e-mail HTML no qual voc\u00ea deve pensar mais, pois ele pode se sobrepor \u00e0 linha entre o estilo inline, CSS e outros fatores. Vamos discutir &#8220;condicionais&#8221; em resumo.<\/p>\n<h3>Usando condicionais<\/h3>\n<p>Um dos mais antigos e-mails HTML que costumavam estar no kit de ferramentas de um desenvolvedor web HTML \u00e9 o de condicionais. Aqui \u00e9 onde voc\u00ea especifica qual navegador ir\u00e1 usar um determinado trecho de c\u00f3digo.<\/p>\n<p>Para ser honesto, esta \u00e9 quase sempre uma quest\u00e3o baseada na Microsoft. Para os desenvolvedores web, o Internet Explorer (IE) foi a semente do navegador spawn. No entanto, para e-mails HTML, \u00e9 o <a href=\"https:\/\/kinsta.com\/pt\/blog\/alternativas-outlook\/\">Outlook<\/a>. Entre as diferentes vers\u00f5es, voc\u00ea pode ver que seu estilo renderiza de uma maneira que voc\u00ea n\u00e3o esperava.<\/p>\n<p>Por causa disso, voc\u00ea pode adicionar blocos de condi\u00e7\u00f5es ao seu c\u00f3digo, e definir esses elementos. Por exemplo, voc\u00ea pode direcionar tanto as vers\u00f5es do Outlook baseadas no Word quanto as baseadas no IE.<\/p>\n<p>Primeiro, Word:<\/p>\n<pre><code class=\"language-html\">&lt;!--[if mso]&gt;<\/code><\/pre>\n<p>Isto \u00e9 para as vers\u00f5es do Outlook baseadas em Word:<\/p>\n<pre><code class=\"language-html\">&lt;![endif]--&gt;<\/code><\/pre>\n<p>Para o Internet Explorer, voc\u00ea usa uma tag diferente:<\/p>\n<pre><code class=\"language-html\">&lt;!--[if (IE)]&gt;<\/code><\/pre>\n<p>Isto \u00e9 para as vers\u00f5es do Outlook baseadas no IE:<\/p>\n<pre><code class=\"language-html\">&lt;![endif]--&gt;<\/code><\/pre>\n<p>Se o navegador que voc\u00ea deseja \u00e9 baseado no WebKit (como o Apple Safari, o navegador PlayStation, o Kindle da Amazon, e outros), voc\u00ea pode usar uma consulta de m\u00eddia para fornecer um estilo espec\u00edfico:<\/p>\n<pre><code class=\"language-html\">.html-email-webkit {\n  display: none;\n}\n@media screen and (-webkit-min-device-pixel-ratio:0) {\n  ..html-email-webkit {\n    display: block !important;\n  }\n}<\/code><\/pre>\n<p>Isto lhe d\u00e1 uma maneira um pouco melhor de adaptar seu e-mail HTML para a exibi\u00e7\u00e3o do usu\u00e1rio final. No geral, o estilo HTML para e-mails n\u00e3o \u00e9 perfeito, mas h\u00e1 grunhido suficiente sob o cap\u00f4 de cada <a href=\"https:\/\/kinsta.com\/pt\/topicos\/dicas-de-e-mail-marketing\/\">cliente de e-mail<\/a> para ajud\u00e1-lo a criar alguns layouts impressionantes.<\/p>\n<h2>Suas op\u00e7\u00f5es para construir e-mails HTML<\/h2>\n<p>Apesar do que j\u00e1 discutimos, voc\u00ea tem uma s\u00e9rie de op\u00e7\u00f5es flex\u00edveis para ajud\u00e1-lo a criar e-mails HTML. Por exemplo, voc\u00ea pode construir a partir do zero usando um <a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-editores-texto\/\" rel=\"noopener\">bom editor de texto<\/a> e HTML.<\/p>\n<p>No entanto, existem outras op\u00e7\u00f5es que podemos considerar:<\/p>\n<ul>\n<li>Voc\u00ea pode usar um servi\u00e7o dedicado, como um aplicativo de e-mail marketing, para criar seus e-mails. Muitos aplicativos fornecer\u00e3o um construtor visual, mas tamb\u00e9m dar\u00e3o a voc\u00ea o escopo para escrever seu pr\u00f3prio c\u00f3digo e criar seu pr\u00f3prio template.<\/li>\n<li>Por falar nisso, voc\u00ea poderia baixar um template para seus e-mails HTML. Isto \u00e9 muito parecido com um tema WordPress, na medida em que ele fornece uma base para o resto do seu design. A partir da\u00ed, voc\u00ea pode customiz\u00e1-lo ao seu gosto. \u00c9 um bom meio-termo entre as op\u00e7\u00f5es de codifica\u00e7\u00e3o e constru\u00e7\u00e3o.<\/li>\n<\/ul>\n<p>Mais tarde, construiremos nosso e-mail usando HTML. Entretanto, antes disso, vamos analisar alguns dos provedores de servi\u00e7os de e-mail que voc\u00ea pode querer considerar, independentemente do m\u00e9todo escolhido para criar seus e-mails.<\/p>\n<h2>3 provedores de servi\u00e7os de e-mail perfeitos para criar e-mails HTML<\/h2>\n<p>Como o foco deste artigo \u00e9 a cria\u00e7\u00e3o de e-mails HTML, n\u00e3o precisamos ser muito profundos quando se trata de provedores de servi\u00e7os de e-mail. Mesmo assim, existem <a href=\"https:\/\/kinsta.com\/pt\/blog\/alternativas-mailchimp\/#mailchimp-alternatives-with-free-plans\" rel=\"noopener\">alguns<\/a> que voc\u00ea provavelmente ir\u00e1 considerar.<\/p>\n<p>N\u00e3o podemos cobrir todos eles, ent\u00e3o vamos mencionar tr\u00eas dos mais populares.<\/p>\n<h3>1. Mailchimp<\/h3>\n<figure id=\"attachment_123707\" aria-describedby=\"caption-attachment-123707\" style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-123707\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/mailchimp-logo.png\" alt=\"A logo do Mailchimp\" width=\"1000\" height=\"215\"><figcaption id=\"caption-attachment-123707\" class=\"wp-caption-text\">A logo do Mailchimp.<\/figcaption><\/figure>\n<p>Este provedor de servi\u00e7os de e-mail \u00e9 uma solu\u00e7\u00e3o de ponta a ponta &#8211; quase uma decis\u00e3o irrefletida para muitos. <a href=\"http:\/\/mailchimp.com\" target=\"_blank\" rel=\"noopener noreferrer\">Mailchimp<\/a> \u00e9 o padr\u00e3o ouro em aplicativos de e-mail marketing <a href=\"https:\/\/kinsta.com\/pt\/blog\/como-usar-mailchimp\/\" rel=\"noopener\">aos olhos de muitos<\/a>, e h\u00e1 muitas boas raz\u00f5es para isso:<\/p>\n<ul>\n<li>Ele inclui muitas caracter\u00edsticas t\u00edpicas que voc\u00ea encontrar\u00e1 em muitos outros aplicativos similares.<\/li>\n<li>H\u00e1 muita ajuda quando se trata de promover um neg\u00f3cio, como automa\u00e7\u00e3o de marketing, ferramentas de gerenciamento de audi\u00eancia, e muito mais.<\/li>\n<li>Voc\u00ea tem um conjunto de ferramentas criativas de primeira linha para ajud\u00e1-lo a construir e-mails HTML.<\/li>\n<\/ul>\n<p>\u00c9 claro, queremos olhar para este \u00faltimo aqui. O <a href=\"https:\/\/mailchimp.com\/create-content\/\" target=\"_blank\" rel=\"noopener noreferrer\">Assistente Criativo<\/a> \u00e9 uma forma de Mailchimp aprender sobre sua marca e ajud\u00e1-lo a construir e personalizar seus e-mails. Voc\u00ea tamb\u00e9m pode conectar aplicativos de terceiros, como o Adobe Photoshop, para ajud\u00e1-lo a construir o e-mail perfeito.<\/p>\n<p>Tamb\u00e9m \u00e9 simples trabalhar com HTML existente, especialmente se voc\u00ea usar o Construtor Cl\u00e1ssico do Mailchimp. Independentemente disso, voc\u00ea tem maneiras de <a href=\"https:\/\/kinsta.com\/pt\/blog\/componentes-web\/#html-templates\" rel=\"noopener\">importar templates HTML<\/a> se voc\u00ea precisar deles.<\/p>\n<p>Mailchimp usa um h\u00edbrido complicado de n\u00edveis de assinatura mensal e o n\u00famero de contatos para chegar a um pre\u00e7o final. Sugerimos que as pequenas empresas precisariam de um plano de cerca de $35 por m\u00eas, at\u00e9 2.500 contatos. Entretanto, voc\u00ea precisar\u00e1 pesquisar o melhor plano para voc\u00ea com base nas caracter\u00edsticas que voc\u00ea precisa e no n\u00famero de contatos que voc\u00ea pensar\u00e1 que trar\u00e1 a bordo.<\/p>\n<h3>2. AWeber<\/h3>\n<p>Para alguns, <a href=\"http:\/\/aweber.com\" target=\"_blank\" rel=\"noopener noreferrer\">AWeber<\/a> representa o auge do e-mail marketing. \u00c9 uma plataforma fant\u00e1stica e poderosa e inclui um conjunto de recursos indiscutivelmente mais focado do que o Mailchimp.<\/p>\n<figure id=\"attachment_123699\" aria-describedby=\"caption-attachment-123699\" style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-123699\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/aweber.png\" alt=\"A logo AWeber\" width=\"1000\" height=\"596\"><figcaption id=\"caption-attachment-123699\" class=\"wp-caption-text\">A logo AWeber<\/figcaption><\/figure>\n<p>Ele inclui uma s\u00e9rie de caracter\u00edsticas essenciais que voc\u00ea precisar\u00e1 enviar e-mails:<\/p>\n<ul>\n<li>A habilidade de automatizar e agendar mensagens, campanhas e muito mais.<\/li>\n<li>Voc\u00ea tem \u00f3timas ferramentas organizacionais, como etiquetagem e segmenta\u00e7\u00e3o de assinantes.<\/li>\n<li>AWeber tamb\u00e9m permite que voc\u00ea automatize o conte\u00fado que voc\u00ea cria para seus e-mails. Por exemplo, voc\u00ea pode transformar mensagens de blogs em mensagens de sa\u00edda com um m\u00ednimo de trabalho.<\/li>\n<\/ul>\n<p>Quando se trata de criar seus e-mails, AWeber tem alguns truques na manga. Ele usa um construtor visual de arrastar e soltar e inclui uma <a href=\"https:\/\/www.aweber.com\/html-email-templates.htm\" target=\"_blank\" rel=\"noopener noreferrer\">biblioteca de modelos personalizados<\/a> para iniciar voc\u00ea. Al\u00e9m disso, voc\u00ea pode conectar AWeber \u00e0 sua conta Canva e usar esta \u00faltima para ajudar a criar seus e-mails.<\/p>\n<p>H\u00e1 tamb\u00e9m um <a href=\"https:\/\/help.aweber.com\/hc\/en-us\/articles\/204030836-How-Do-I-Use-The-HTML-Editor-\" target=\"_blank\" rel=\"noopener noreferrer\">editor de HTML dedicado<\/a>, o que n\u00e3o \u00e9 o caso do Mailchimp. Voc\u00ea at\u00e9 recebe isto no n\u00edvel gratuito do AWeber. Por falar nisso, <a href=\"https:\/\/www.aweber.com\/pricing.htm\" target=\"_blank\" rel=\"noopener noreferrer\">o pre\u00e7o<\/a> \u00e9 mais direto aqui. Voc\u00ea pagar\u00e1 cerca de 25 d\u00f3lares por m\u00eas por at\u00e9 2.500 contatos.<\/p>\n<h3>3. Constant Contact<\/h3>\n<p>O <a href=\"https:\/\/www.constantcontact.com\" target=\"_blank\" rel=\"noopener noreferrer\">Constant Contact<\/a> \u00e9 um outlier quando se trata de provedores de servi\u00e7os de e-mail, mas \u00e9 mais como uma arma secreta. Ele oferece uma gama fant\u00e1stica de recursos e funcionalidades, e tamb\u00e9m permite que voc\u00ea trabalhe com HTML quando voc\u00ea precisar.<\/p>\n<figure id=\"attachment_123700\" aria-describedby=\"caption-attachment-123700\" style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-123700\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/constant-contact.png\" alt=\"A logo da Constant Contact\" width=\"1000\" height=\"500\"><figcaption id=\"caption-attachment-123700\" class=\"wp-caption-text\">A logo da Constant Contact<\/figcaption><\/figure>\n<p>Assim como AWeber, <a href=\"https:\/\/kinsta.com\/pt\/blog\/constant-contact-vs-mailchimp\/\">Constant Contact<\/a> foca o e-mail marketing sobre outras \u00e1reas de neg\u00f3cios. Como tal, ele tem um <a href=\"https:\/\/www.constantcontact.com\/features\/view-all-features\" target=\"_blank\" rel=\"noopener noreferrer\">conjunto de recursos<\/a> que voc\u00ea vai gostar:<\/p>\n<ul>\n<li>Voc\u00ea tem ferramentas de gerenciamento de listas de clientes e funcionalidade de automa\u00e7\u00e3o de marketing.<\/li>\n<li>Existem extensas op\u00e7\u00f5es de relat\u00f3rios.<\/li>\n<li>Voc\u00ea \u00e9 capaz de integrar programas de an\u00fancios do Facebook, Instagram e Google.<\/li>\n<li>H\u00e1 muitas maneiras de se engajar e atrair novos assinantes para suas listas.<\/li>\n<\/ul>\n<p>A funcionalidade de projeto do Constant Contact tamb\u00e9m \u00e9 boa. Voc\u00ea pode <a href=\"https:\/\/www.constantcontact.com\/features\/email-templates\" target=\"_blank\" rel=\"noopener noreferrer\">escolher um modelo<\/a> e trabalhar com um editor visual para construir o design inteiro. Entretanto, voc\u00ea tamb\u00e9m pode <a href=\"https:\/\/v3.developer.constantcontact.com\/api_guide\/design_code_emails.html\" target=\"_blank\" rel=\"noopener noreferrer\">trabalhar com HTML<\/a> &#8211; \u00e0s vezes de forma avan\u00e7ada em rela\u00e7\u00e3o a outras ferramentas.<\/p>\n<p>O pre\u00e7o tamb\u00e9m \u00e9 razo\u00e1vel. Voc\u00ea pagar\u00e1 cerca de $35 por m\u00eas pelo plano Core e 2.500 contatos, ou $70 pelo plano Plus.<\/p>\n<h2>O que voc\u00ea vai precisar para construir um e-mail HTML<\/h2>\n<p>Antes de come\u00e7ar a construir seus e-mails HTML, voc\u00ea precisar\u00e1 de algumas ferramentas e habilidades para entregar. Aqui est\u00e1 o que voc\u00ea deve fazer antes de come\u00e7ar:<\/p>\n<ul>\n<li>Voc\u00ea vai querer usar um editor de c\u00f3digo que voc\u00ea ache confort\u00e1vel porque ele precisar\u00e1 apoi\u00e1-lo durante o processo. Se voc\u00ea n\u00e3o souber qual escolher, muitos usu\u00e1rios optam pelo <a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Visual Studio Code<\/a>, embora <a href=\"https:\/\/brackets.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Brackets<\/a> sejam ideais para esta tarefa em particular. Vamos usar <a href=\"https:\/\/www.onivim.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Onivim2<\/a>, que \u00e9 um editor no estilo Vim baseado na infraestrutura central do VS Code.<\/li>\n<li>Embora voc\u00ea precise de <a href=\"https:\/\/kinsta.com\/pt\/blog\/aprender-html\/\" rel=\"noopener\">habilidades HTML<\/a>, voc\u00ea n\u00e3o precisar\u00e1 do mesmo conjunto de conhecimentos que um desenvolvedor web moderno (embora isso n\u00e3o prejudique seus prospectos).<\/li>\n<li>Voc\u00ea precisar\u00e1 de uma maneira de testar seus e-mails &#8211; <a href=\"https:\/\/kinsta.com\/pt\/blog\/mailhog\/\" rel=\"noopener\">MailHog \u00e9 uma solu\u00e7\u00e3o<\/a> que apresentamos em outro lugar no blog Kinsta.<\/li>\n<li>Embora n\u00e3o vamos usar um template pr\u00e9-constru\u00eddo, voc\u00ea pode querer usar um destes no futuro.<\/li>\n<li>Voc\u00ea tamb\u00e9m precisar\u00e1 de um provedor de e-mail, pois voc\u00ea precisar\u00e1 de alguma maneira de enviar seu e-mail HTML finalizado.<\/li>\n<\/ul>\n<p>Com tudo isso no lugar, voc\u00ea est\u00e1 pronto para abrir um editor de texto e come\u00e7ar. Em seguida, n\u00f3s vamos percorrer o processo para criar um e-mail HTML b\u00e1sico.<\/p>\n<h2>Como criar um e-mail HTML a partir do zero<\/h2>\n<p>Antes de come\u00e7armos, vale a pena notar que n\u00e3o vamos usar um servi\u00e7o dedicado como Mailchimp ou AWeber. Ao inv\u00e9s disso, vamos criar um modelo simples do zero que voc\u00ea pode importar para onde voc\u00ea precisar.<\/p>\n<p>N\u00f3s vamos dividir o processo em algumas se\u00e7\u00f5es diferentes porque embora um e-mail HTML seja simplesmente relativo a um site, ainda h\u00e1 muito a considerar.<\/p>\n<h3>1. Crie a base para o seu e-mail HTML<\/h3>\n<p>\u00c9 uma boa ideia come\u00e7ar com o esqueleto do seu modelo de e-mail. Isto seguir\u00e1 algumas pr\u00e1ticas t\u00edpicas para HTML em geral:<\/p>\n<pre><code class=\"language-html\">&lt;!DOCTYPE PUBLIC \u201c-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN\u201d \u201chttps:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd\u201d&gt;\n&lt;html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"&gt;\n  &lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\"&gt;\n    &lt;title&gt;&lt;\/title&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>H\u00e1 algumas coisas que est\u00e3o acontecendo aqui que devemos mencionar. Primeiro, n\u00f3s especificamos um &#8220;doctype&#8221; para o <a href=\"https:\/\/kinsta.com\/pt\/blog\/html-vs-html5\/\" rel=\"noopener\">XHTML 1.0 Transitional<\/a>, que \u00e9 uma pr\u00e1tica comum entre os desenvolvedores de e-mail. A partir da\u00ed, n\u00f3s especificamos um espa\u00e7o de nomes XML, que ser\u00e1 importante mais tarde.<\/p>\n<p>Voc\u00ea tamb\u00e9m notar\u00e1 algumas meta tags, e estas definem o conjunto de caracteres e como o navegador deve renderizar o HTML que segue em seu viewport.<\/p>\n<p>O resto do esqueleto \u00e9 simples &#8211; h\u00e1 o t\u00edtulo e as etiquetas do corpo que usaremos em seguida.<\/p>\n<h3>2. Adicione a estrutura para o seu modelo de e-mail<\/h3>\n<p>Voltando \u00e0 nossa discuss\u00e3o sobre quais tags HTML usar, voc\u00ea vai se lembrar que n\u00e3o queremos usar &lt;div&gt; ou outros elementos estruturais t\u00edpicos. Ao inv\u00e9s disso, n\u00f3s queremos usar tabelas, j\u00e1 que isso se torna bem dentro dos clientes e servi\u00e7os de e-mail.<\/p>\n<p>Tudo come\u00e7ar\u00e1 com um simples conjunto de &lt;table&gt; tags dentro do corpo:<\/p>\n<pre><code class=\"language-html\">&lt;body&gt;\n  &lt;table role=\"presentation\"&gt;\n    &lt;tr&gt;\n      &lt;td&gt;\n      &lt;\/td&gt;\n    &lt;\/tr&gt;\n  &lt;\/table&gt;\n&lt;\/body&gt;<\/code><\/pre>\n<p>O atributo que definimos dentro da &lt;table&gt; tag ajuda os leitores a analisar o texto dentro dela, ent\u00e3o \u00e9 bom para a acessibilidade.<\/p>\n<p>Daqui, voc\u00ea precisar\u00e1 adicionar novas linhas e colunas \u00e0 sua tabela a fim de construir o modelo de e-mail HTML. Como voc\u00ea faz isso depende de voc\u00ea, mas \u00e9 bom come\u00e7ar com uma base de se\u00e7\u00f5es de cabe\u00e7alho, rodap\u00e9 e corpo. N\u00e3o vamos repeti-las aqui por brevidade, mas vamos mencion\u00e1-las \u00e0 medida que progredirmos.<\/p>\n<p>A boa not\u00edcia \u00e9 que voc\u00ea pode continuar a adicionar novas linhas \u00e0 sua mesa se voc\u00ea precisar adicionar mais se\u00e7\u00f5es. No entanto, a partir daqui voc\u00ea vai querer come\u00e7ar a introduzir o estilo e outros elementos.<\/p>\n<h3>3. Inclua o estilo de seus elementos<\/h3>\n<p>A beleza do HTML \u00e9 que ele \u00e9 quase agn\u00f3stico ao seu estilo. A marca\u00e7\u00e3o \u00e9 simples, mas os estilos que voc\u00ea aplica podem n\u00e3o ser. Aqui \u00e9 onde voc\u00ea ver\u00e1 o seu e-mail HTML ganhar vida.<\/p>\n<p>Como um guia enquanto projetamos, vamos adicionar um &lt;style&gt; tag ao &lt;head&gt; para exibir uma borda geral:<\/p>\n<pre><code class=\"language-html\">&lt;style&gt;\n  table, td {border:2px solid #000000 !important;}\n&lt;\/style&gt;<\/code><\/pre>\n<p>Para come\u00e7ar, vamos nos certificar de que n\u00e3o haja espa\u00e7o inesperado no corpo ou na mesa principal (que aqui atua como nosso corpo porque alguns clientes de e-mail remover\u00e3o essa etiqueta):<\/p>\n<pre><code class=\"language-html\">&lt;body style=\"margin:0;padding:0;\"&gt;\n  &lt;table role=\"presentation\" style=\"width:100%;border-collapse:collapse;border:0;border-spacing:0;background:#ffffff;\"&gt;\n&lt;\/body&gt;<\/code><\/pre>\n<p>N\u00f3s tamb\u00e9m vamos adicionar um pouco de centraliza\u00e7\u00e3o e remover qualquer acolchoamento extra de nossas diferentes c\u00e9lulas de se\u00e7\u00e3o:<\/p>\n<pre><code class=\"language-html\">&lt;tr&gt;\n  &lt;td align=\"center\" style=\"padding:0;\"&gt;Header\n  &lt;\/td&gt;\n&lt;\/tr&gt;<\/code><\/pre>\n<p>Se voc\u00ea der uma olhada nisto no seu navegador, n\u00e3o vai parecer muito:<\/p>\n<figure id=\"attachment_123703\" aria-describedby=\"caption-attachment-123703\" style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-123703\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/front-end-skeleton.png\" alt=\"Uma janela do navegador mostrando o esqueleto do e-mail HTML.\" width=\"1000\" height=\"253\"><figcaption id=\"caption-attachment-123703\" class=\"wp-caption-text\">Uma janela do navegador mostrando o esqueleto do e-mail HTML.<\/figcaption><\/figure>\n<p>Entretanto, a partir daqui voc\u00ea pode desenvolver ainda mais seu modelo de e-mail usando tabelas e etiquetas de estilo. Por exemplo, criamos uma se\u00e7\u00e3o &#8216;Hero&#8217; para nosso cabe\u00e7alho e expandimos o rodap\u00e9 e o corpo:<\/p>\n<figure id=\"attachment_123709\" aria-describedby=\"caption-attachment-123709\" style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-123709\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/mockup-email.png\" alt=\"Um modelo de maquete de e-mail durante a cria\u00e7\u00e3o\" width=\"1000\" height=\"616\"><figcaption id=\"caption-attachment-123709\" class=\"wp-caption-text\">Um modelo de maquete de e-mail durante a cria\u00e7\u00e3o (Fonte de imagem: <a href=\"https:\/\/pixabay.com\/vectors\/post-office-airmail-letter-403145\/\" target=\"_blank\" rel=\"noopener noreferrer\">Settergren<\/a>)<\/figcaption><\/figure>\n<p>Voc\u00ea provavelmente criar\u00e1 um template melhor e mais adequado \u00e0s suas necessidades, mas usando tabelas agrupadas e algumas habilidades b\u00e1sicas em HTML, voc\u00ea pode criar um template HTML de email com resposta e personalizado que acerte a marca.<\/p>\n<h3>4. Teste seu e-mail<\/h3>\n<p>Antes de voc\u00ea terminar, voc\u00ea vai querer testar seu e-mail para ter certeza de que ele se encaixa bem em diferentes dispositivos. H\u00e1 alguns servi\u00e7os diferentes que podem ajudar aqui.<\/p>\n<p>Por exemplo, <a href=\"https:\/\/www.emailonacid.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Email on Acid<\/a> inclui uma lista de verifica\u00e7\u00e3o completa antes da implanta\u00e7\u00e3o para ajud\u00e1-lo a garantir que seu modelo n\u00e3o cause problemas:<\/p>\n<figure id=\"attachment_123701\" aria-describedby=\"caption-attachment-123701\" style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-123701\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/email-on-acid.png\" alt=\"O e-mail no site Acid\" width=\"1000\" height=\"602\"><figcaption id=\"caption-attachment-123701\" class=\"wp-caption-text\">O e-mail no site Acid.<\/figcaption><\/figure>\n<p>Os usu\u00e1rios <a href=\"http:\/\/litmus.com\" target=\"_blank\" rel=\"noopener noreferrer\">Litmus<\/a> conhecer\u00e3o o <a href=\"https:\/\/putsmail.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">PutsMail<\/a>, mas ele \u00e9 acess\u00edvel a todos:<\/p>\n<figure id=\"attachment_123706\" aria-describedby=\"caption-attachment-123706\" style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-123706\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/litmus.png\" alt=\"O site da Litmus\" width=\"1000\" height=\"598\"><figcaption id=\"caption-attachment-123706\" class=\"wp-caption-text\">O site da Litmus.<\/figcaption><\/figure>\n<p>Voc\u00ea precisar\u00e1 se cadastrar para usar o servi\u00e7o, mas \u00e9 simples de usar. Voc\u00ea aproveita a funcionalidade para pr\u00e9-visualizar e-mails dentro de v\u00e1rios navegadores diferentes e em v\u00e1rios dispositivos.<\/p>\n<p>A <a href=\"https:\/\/www.mailgun.com\/email-testing-tool\/html-email-tester\/free-html-email-tester\/\" target=\"_blank\" rel=\"noopener noreferrer\">Mailgun tamb\u00e9m oferece<\/a> um servi\u00e7o fant\u00e1stico que se relaciona com sua oferta principal. Voc\u00ea \u00e9 capaz de testar clientes de e-mail, navegadores, e muito mais atrav\u00e9s da interface. Al\u00e9m disso, voc\u00ea pode testar elementos como linhas de assunto, para garantir que voc\u00ea mantenha suas taxas abertas altas.<\/p>\n<figure id=\"attachment_123708\" aria-describedby=\"caption-attachment-123708\" style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-123708\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/mailgun-tester.png\" alt=\"Ferramenta de teste de e-mail da Mailgun.\" width=\"1000\" height=\"522\"><figcaption id=\"caption-attachment-123708\" class=\"wp-caption-text\">Ferramenta de teste de e-mail da Mailgun.<\/figcaption><\/figure>\n<p>Entretanto, uma vez que voc\u00ea testar seu e-mail, voc\u00ea precisar\u00e1 certificar-se de que ele chegue \u00e0 caixa de entrada do destinat\u00e1rio. Na se\u00e7\u00e3o final, discutiremos mais sobre isso.<\/p>\n<h2>Enviando um e-mail HTML: O que voc\u00ea precisa saber<\/h2>\n<p>Um benef\u00edcio de usar um servi\u00e7o de e-mail marketing que ainda n\u00e3o mencionamos \u00e9 como ele ir\u00e1 lidar com o aspecto legal do envio de e-mails. Isto \u00e9 importante porque se voc\u00ea receber algo errado aqui, voc\u00ea n\u00e3o vai simplesmente falhar em chegar a um destinat\u00e1rio, voc\u00ea vai se meter em problemas.<\/p>\n<p>Um servi\u00e7o de e-mail marketing j\u00e1 ter\u00e1 uma boa rela\u00e7\u00e3o de trabalho com as organiza\u00e7\u00f5es que lidam com spam e facetas relacionadas ao envio de um e-mail. Como tal, muitas vezes \u00e9 uma boa ideia escolher um destes se voc\u00ea n\u00e3o quer a preocupa\u00e7\u00e3o de entregar spam.<\/p>\n<p>No entanto, h\u00e1 algumas dicas que podemos dar a esse assunto, independentemente da plataforma que voc\u00ea utiliza:<\/p>\n<ul>\n<li>Certifique-se de seguir todas as diretrizes da <a href=\"https:\/\/www.congress.gov\/bill\/108th-congress\/senate-bill\/877\/text\" target=\"_blank\" rel=\"noopener noreferrer\">lei CAN-SPAM<\/a>, especialmente se o seu p\u00fablico principal estiver nos EUA. \u00c9 claro, pa\u00edses diferentes ter\u00e3o suas <a href=\"https:\/\/mailchimp.com\/help\/anti-spam-requirements-for-email\/\" target=\"_blank\" rel=\"noopener noreferrer\">pr\u00f3prias diretrizes legais<\/a>.<\/li>\n<li>Inclua uma dupla op\u00e7\u00e3o para assinantes. Aqui \u00e9 onde voc\u00ea pede a eles para confirmar uma assinatura, mas tamb\u00e9m enviar uma segunda confirma\u00e7\u00e3o. Isto protege voc\u00ea e o assinante se houver uma consulta de spam ou um pedido de privacidade no final da linha.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/kinsta.com\/pt\/blog\/por-que-meus-e-mails-estao-indo-para-o-spam\/\" rel=\"noopener\">A entregabilidade<\/a> \u00e9 um elemento chave de seus e-mails, e isto \u00e9 algo que n\u00f3s abordamos em outro artigo, em detalhes. Entretanto, este conceito \u00e9 uma mistura de v\u00e1rios aspectos, como usar um bom c\u00f3digo, obter o n\u00edvel certo de permiss\u00e3o, e muito mais.<\/p>\n<p>Isso se encaixa em outra faceta &#8211; a pontua\u00e7\u00e3o do seu envio. Isto \u00e9 semelhante a uma pontua\u00e7\u00e3o de cr\u00e9dito e \u00e9, em \u00faltima an\u00e1lise, uma medida da sua reputa\u00e7\u00e3o. H\u00e1 alguns componentes diferentes aqui que fazem o todo:<\/p>\n<ul>\n<li>A taxa de retorno do seu site.<\/li>\n<li>O n\u00famero de reclama\u00e7\u00f5es que o seu site recebe em rela\u00e7\u00e3o aos e-mails que voc\u00ea envia.<\/li>\n<li>A reputa\u00e7\u00e3o do seu endere\u00e7o IP.<\/li>\n<li>A assinatura do seu nome de dom\u00ednio.<\/li>\n<\/ul>\n<p>Este \u00faltimo est\u00e1 relacionado ao seu <a href=\"https:\/\/kinsta.com\/pt\/blog\/autenticacao-email\/\" rel=\"noopener\">DomainKeys Identified Mail (DKIM)<\/a> e ao Sender Policy Framework (SPF). Al\u00e9m disso, voc\u00ea pode verificar a reputa\u00e7\u00e3o do seu IP atrav\u00e9s de servi\u00e7os como <a href=\"https:\/\/senderscore.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">SenderScore<\/a>, ou <a href=\"https:\/\/www.ipqualityscore.com\/ip-reputation-check\" target=\"_blank\" rel=\"noopener noreferrer\">IPQualityScore<\/a>.<\/p>\n<p>Se voc\u00ea escolher o <a href=\"https:\/\/kinsta.com\/pt\/blog\/servidor-smtp-gratuito\/\" rel=\"noopener\">provedor do protocolo de transporte de correio simples (SMTP) certo<\/a> em primeira inst\u00e2ncia, voc\u00ea pode selecionar algumas dessas caixas de uma s\u00f3 vez. Assim como sua escolha da solu\u00e7\u00e3o de e-mail marketing, este servi\u00e7o ir\u00e1 entender o que voc\u00ea precisa para manter sua entregabilidade alta, e no lado certo dos poderes que est\u00e3o.<\/p>\n<p>Mailgun \u00e9 uma solu\u00e7\u00e3o que mencionamos anteriormente, e esta poderia ser a ideal. Entretanto, existem outras como <a href=\"https:\/\/www.mailjet.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Mailjet<\/a>, <a href=\"https:\/\/www.sendinblue.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Sendinblue<\/a>, e at\u00e9 mesmo <a href=\"https:\/\/kinsta.com\/pt\/blog\/servidor-smtp-gmail\/\" rel=\"noopener\">o pr\u00f3prio servi\u00e7o do Gmail<\/a>.<\/p>\n\n<h2>Resumo<\/h2>\n<p>O e-mail n\u00e3o est\u00e1 nem perto de chegar ao fim. Como tal, usar o e-mail para suas pr\u00f3prias necessidades &#8211; como promo\u00e7\u00e3o e marketing &#8211; \u00e9 uma forma fant\u00e1stica e econ\u00f4mica de alcan\u00e7ar potenciais assinantes, usu\u00e1rios e clientes.<\/p>\n<p>Enquanto voc\u00ea poderia comprar um modelo HTML dedicado, criar seus pr\u00f3prios e-mails HTML n\u00e3o \u00e9 t\u00e3o dif\u00edcil. Pode ser a maneira de voc\u00ea ter sucesso se voc\u00ea tiver uma vis\u00e3o espec\u00edfica em mente. No entanto, voc\u00ea precisar\u00e1 extrair seus velhos truques HTML, tais como condicionadores e tabelas agrupadas. O design de e-mails HTML ainda n\u00e3o est\u00e1 no n\u00edvel do web design moderno, mas voc\u00ea ainda pode conseguir muito com pouco.<\/p>\n<p>Voc\u00ea tem necessidade de criar e-mails HTML, e se sim, que perguntas voc\u00ea tem? Informe-nos na se\u00e7\u00e3o de coment\u00e1rios abaixo!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>R\u00e1pido Quiz pop: Qual \u00e9 o nome da linguagem que os desenvolvedores web usam para criar as estruturas dos sites que voc\u00ea visita todos os dias? &#8230;<\/p>\n","protected":false},"author":117,"featured_media":50836,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[492,588,130,260],"topic":[966],"class_list":["post-50835","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-email-deliverability","tag-email-marketing","tag-html","tag-html-editors","topic-dicas-de-e-mail-marketing"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Um Guia para Iniciantes na Cria\u00e7\u00e3o e Envio de um E-mail HTML - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Se voc\u00ea quiser enviar e-mails interessantes aos assinantes, seu pr\u00f3prio modelo pode ser necess\u00e1rio. Aprenda como criar seus pr\u00f3prios e-mails HTML!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/pt\/blog\/email-html\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Um Guia para Iniciantes na Cria\u00e7\u00e3o e Envio de um E-mail HTML\" \/>\n<meta property=\"og:description\" content=\"Se voc\u00ea quiser enviar e-mails interessantes aos assinantes, seu pr\u00f3prio modelo pode ser necess\u00e1rio. Aprenda como criar seus pr\u00f3prios e-mails HTML!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/email-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-30T08:58:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-21T13:30:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/06\/html-email.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Salman Ravoof\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Se voc\u00ea quiser enviar e-mails interessantes aos assinantes, seu pr\u00f3prio modelo pode ser necess\u00e1rio. Aprenda como criar seus pr\u00f3prios e-mails HTML!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/06\/html-email.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@salmanravoof\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Salman Ravoof\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"23 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/email-html\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/email-html\/\"},\"author\":{\"name\":\"Salman Ravoof\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\"},\"headline\":\"Um Guia para Iniciantes na Cria\u00e7\u00e3o e Envio de um E-mail HTML\",\"datePublished\":\"2022-06-30T08:58:07+00:00\",\"dateModified\":\"2023-08-21T13:30:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/email-html\/\"},\"wordCount\":4828,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/email-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/06\/html-email.jpg\",\"keywords\":[\"email deliverability\",\"email marketing\",\"html\",\"HTML editors\"],\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/email-html\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/email-html\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/email-html\/\",\"name\":\"Um Guia para Iniciantes na Cria\u00e7\u00e3o e Envio de um E-mail HTML - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/email-html\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/email-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/06\/html-email.jpg\",\"datePublished\":\"2022-06-30T08:58:07+00:00\",\"dateModified\":\"2023-08-21T13:30:12+00:00\",\"description\":\"Se voc\u00ea quiser enviar e-mails interessantes aos assinantes, seu pr\u00f3prio modelo pode ser necess\u00e1rio. Aprenda como criar seus pr\u00f3prios e-mails HTML!\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/email-html\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/email-html\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/email-html\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/06\/html-email.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/06\/html-email.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/email-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Dicas de E-mail Marketing\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/dicas-de-e-mail-marketing\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Um Guia para Iniciantes na Cria\u00e7\u00e3o e Envio de um E-mail HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\",\"name\":\"Salman Ravoof\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"caption\":\"Salman Ravoof\"},\"description\":\"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.\",\"sameAs\":[\"https:\/\/salmanravoof.com\",\"https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/\",\"https:\/\/x.com\/salmanravoof\"],\"url\":\"https:\/\/kinsta.com\/pt\/blog\/author\/salmanravoof\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Um Guia para Iniciantes na Cria\u00e7\u00e3o e Envio de um E-mail HTML - Kinsta\u00ae","description":"Se voc\u00ea quiser enviar e-mails interessantes aos assinantes, seu pr\u00f3prio modelo pode ser necess\u00e1rio. Aprenda como criar seus pr\u00f3prios e-mails HTML!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/pt\/blog\/email-html\/","og_locale":"pt_PT","og_type":"article","og_title":"Um Guia para Iniciantes na Cria\u00e7\u00e3o e Envio de um E-mail HTML","og_description":"Se voc\u00ea quiser enviar e-mails interessantes aos assinantes, seu pr\u00f3prio modelo pode ser necess\u00e1rio. Aprenda como criar seus pr\u00f3prios e-mails HTML!","og_url":"https:\/\/kinsta.com\/pt\/blog\/email-html\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2022-06-30T08:58:07+00:00","article_modified_time":"2023-08-21T13:30:12+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/06\/html-email.jpg","type":"image\/jpeg"}],"author":"Salman Ravoof","twitter_card":"summary_large_image","twitter_description":"Se voc\u00ea quiser enviar e-mails interessantes aos assinantes, seu pr\u00f3prio modelo pode ser necess\u00e1rio. Aprenda como criar seus pr\u00f3prios e-mails HTML!","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/06\/html-email.jpg","twitter_creator":"@salmanravoof","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Salman Ravoof","Tempo estimado de leitura":"23 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/email-html\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/email-html\/"},"author":{"name":"Salman Ravoof","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987"},"headline":"Um Guia para Iniciantes na Cria\u00e7\u00e3o e Envio de um E-mail HTML","datePublished":"2022-06-30T08:58:07+00:00","dateModified":"2023-08-21T13:30:12+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/email-html\/"},"wordCount":4828,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/email-html\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/06\/html-email.jpg","keywords":["email deliverability","email marketing","html","HTML editors"],"inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/email-html\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/email-html\/","url":"https:\/\/kinsta.com\/pt\/blog\/email-html\/","name":"Um Guia para Iniciantes na Cria\u00e7\u00e3o e Envio de um E-mail HTML - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/email-html\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/email-html\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/06\/html-email.jpg","datePublished":"2022-06-30T08:58:07+00:00","dateModified":"2023-08-21T13:30:12+00:00","description":"Se voc\u00ea quiser enviar e-mails interessantes aos assinantes, seu pr\u00f3prio modelo pode ser necess\u00e1rio. Aprenda como criar seus pr\u00f3prios e-mails HTML!","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/email-html\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/email-html\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/email-html\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/06\/html-email.jpg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/06\/html-email.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/email-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Dicas de E-mail Marketing","item":"https:\/\/kinsta.com\/pt\/topicos\/dicas-de-e-mail-marketing\/"},{"@type":"ListItem","position":3,"name":"Um Guia para Iniciantes na Cria\u00e7\u00e3o e Envio de um E-mail HTML"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987","name":"Salman Ravoof","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","caption":"Salman Ravoof"},"description":"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.","sameAs":["https:\/\/salmanravoof.com","https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/","https:\/\/x.com\/salmanravoof"],"url":"https:\/\/kinsta.com\/pt\/blog\/author\/salmanravoof\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/50835","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/117"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=50835"}],"version-history":[{"count":8,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/50835\/revisions"}],"predecessor-version":[{"id":53519,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/50835\/revisions\/53519"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/50835\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/50835\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/50835\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/50835\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/50835\/translations\/de"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/50835\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/50835\/translations\/nl"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/50835\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/50836"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=50835"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=50835"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=50835"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}