Nesta página
Começar uma newsletter do zero é intimidador. Você olha para o editor vazio, se perguntando como estruturar seu conteúdo, qual layout usar e como fazer parecer profissional sem gastar horas no design.
Templates de newsletter resolvem esse problema. Fornecem uma estrutura comprovada e design profissional que você pode personalizar com seu próprio conteúdo, marca e imagens. Os melhores templates são responsivos para celular, compatíveis entre clientes de email e desenhados com foco em conversão.
Este guia cobre 15 designs gratuitos de templates de newsletter organizados por setor e caso de uso. Para cada tipo de template, explicamos os princípios de design, estrutura de conteúdo recomendada e dicas de personalização.
O Que Faz um Template de Newsletter Eficaz
Antes de mergulhar em templates específicos, é importante entender o que separa um bom template de um ótimo.
Requisitos Técnicos
| Requisito | Por Que Importa |
|---|---|
| Responsivo para celular | Mais de 60% dos emails são abertos em dispositivos móveis |
| Compatibilidade entre clientes | Renderiza corretamente em Gmail, Outlook, Apple Mail, etc. |
| Carregamento rápido | Imagens com menos de 1MB no total; template abaixo de 100KB |
| Suporte a modo escuro | Adoção crescente entre clientes de email |
| Acessibilidade | Compatível com leitores de tela, contraste suficiente |
| Fontes seguras para web | Renderização consistente entre plataformas |
Princípios de Design
Hierarquia visual. O conteúdo mais importante deve ser o mais proeminente. Use tamanho, cor e posicionamento para guiar o olhar do leitor de cima para baixo.
Layout escaneável. A maioria dos destinatários de email escaneia, em vez de ler. Use títulos, pontos em tópicos, parágrafos curtos e quebras claras de seção para tornar o conteúdo digerível.
Marca consistente. Sua newsletter deve ser reconhecida instantaneamente. Use suas cores de marca, logotipo e tipografia de forma consistente em cada edição.
Coluna única no celular. Layouts com múltiplas colunas podem quebrar em dispositivos móveis. Use layout de coluna única ou garanta que seções com várias colunas se empilhem de forma limpa em telas menores.
Quatro layouts, a funcionar
Cada painel abaixo é o HTML real do modelo, numa moldura com largura real. Reduza a largura para 375 px e veja as colunas empilharem-se.
Segue o seu tema — mude-o no cabeçalho para ver o outro.
Ler o HTML de The Letter
<!DOCTYPE html>
<html lang="pt" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>The Letter</title>
<style>
body { margin:0; padding:0; width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
img { border:0; outline:none; line-height:100%; -ms-interpolation-mode:bicubic; display:block; }
a { text-decoration:underline; }
@media only screen and (max-width:620px) {
.wrap { width:100% !important; }
.stack { display:block !important; width:100% !important; max-width:100% !important; }
.gutter { padding-left:20px !important; padding-right:20px !important; }
.cta { display:block !important; width:100% !important; box-sizing:border-box !important; text-align:center !important; }
.h1 { font-size:26px !important; line-height:32px !important; }
.thumb { width:100% !important; height:auto !important; max-width:100% !important; }
/* A digest row is the one two-column layout that should NOT stack: the
thumbnail shrinks and stays beside the headline, because a roundup is
read by scanning and a full-width decorative image per story destroys
that. */
.row-thumb { width:80px !important; }
.row-thumb img { width:80px !important; height:80px !important; }
.hide-sm { display:none !important; }
}
@media (prefers-color-scheme: dark) {
.d-bg { background-color:#151515 !important; }
.d-card { background-color:#1c1c1c !important; }
.d-ink { color:#f2f2f2 !important; }
.d-mute { color:#a8a8a8 !important; }
.d-rule { border-color:#3a3a3a !important; }
}
</style>
</head>
<body class="d-bg" style="margin:0;padding:0;background-color:#f0efec;">
<span style="display:none;font-size:1px;color:#fefefe;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">A citação que guarda na sua aplicação de notas trabalha mais do que o seu calendário editorial.</span><span style="display:none;font-size:1px;color:#fefefe;"> ͏ ͏ ͏ ͏ ͏</span>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-bg" style="background-color:#f0efec;">
<tr><td align="center" style="padding:32px 12px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" class="wrap d-card" style="width:600px;max-width:600px;background-color:#ffffff;">
<tr><td style="padding:0;">
<img src="/_astro/letter-masthead.BcPkHvz4.png" width="600" height="250" alt="Cabeçalho da Meridian Press: arcos azuis concêntricos atravessados por uma faixa diagonal" style="width:100%;height:auto;max-width:600px;">
</td></tr>
<tr><td class="gutter" style="padding:36px 88px 0 88px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-mute" style="margin:0 0 6px 0;font-size:13px;line-height:18px;letter-spacing:.08em;text-transform:uppercase;color:#6b6b6b;">Meridian Press · Número 47</p>
</td></tr>
<tr><td class="gutter" style="padding:0 88px;font-family:Georgia,'Times New Roman',Times,serif;">
<h1 class="h1 d-ink" style="margin:0 0 20px 0;font-size:34px;line-height:42px;font-weight:400;color:#141414;">O arquivo é o produto</h1>
<p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Há três semanas fui à procura de um texto que escrevi em 2019 e não o encontrei. Nem no site, nem na exportação, nem na pesquisa da própria plataforma. Mil e duzentos números, e o único índice que funcionava era a minha memória.</p>
<p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">É a parte que ninguém nos conta sobre seis anos de newsletter. Enviar é fácil. Guardar não é.</p>
</td></tr>
<tr><td class="gutter" style="padding:8px 88px 28px 88px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr><td class="quote" style="border-left:3px solid #0084d1;padding:4px 0 4px 0;padding-left:20px;font-family:Georgia,'Times New Roman',Times,serif;">
<p class="d-ink" style="margin:0;font-size:19px;line-height:30px;font-style:italic;color:#141414;">Tudo o que publica é um depósito. Quase ninguém constrói o levantamento.</p>
</td></tr>
</table>
</td></tr>
<tr><td class="gutter" style="padding:0 88px;font-family:Georgia,'Times New Roman',Times,serif;">
<p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Por isso, esta semana reconstruí o catálogo como um arquivo a sério, com etiquetas, pesquisa de texto integral e URL permanentes. Levou nove dias. O número de subscritores não se mexeu. O tempo no site triplicou.</p>
<p class="d-ink" style="margin:0 0 28px 0;font-size:18px;line-height:30px;color:#242424;">Está tudo abaixo, incluindo as partes que não resultaram.</p>
</td></tr>
<tr><td class="gutter" style="padding:0 88px 36px 88px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<a href="https://example.com" style="font-size:17px;line-height:24px;font-weight:600;color:#0084d1;text-decoration:underline;">Ler o número completo →</a>
</td></tr>
<tr><td class="gutter d-rule" style="padding:0 88px;border-top:1px solid #e4e2de;"></td></tr>
<tr><td class="gutter" style="padding:24px 88px 40px 88px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-mute" style="margin:0 0 10px 0;font-size:14px;line-height:22px;color:#6b6b6b;">Escrito à mão todas as quintas-feiras. Responda, que eu leio.</p>
<p class="d-mute" style="margin:0;font-size:13px;line-height:20px;color:#8a8a8a;">Meridian Press, 14 Harbour Lane, Bristol BS1 4TT<br>
<a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Cancelar subscrição</a> · <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Ver no navegador</a></p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html> Segue o seu tema — mude-o no cabeçalho para ver o outro.
Ler o HTML de The Digest
<!DOCTYPE html>
<html lang="pt" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>The Digest</title>
<style>
body { margin:0; padding:0; width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
img { border:0; outline:none; line-height:100%; -ms-interpolation-mode:bicubic; display:block; }
a { text-decoration:underline; }
@media only screen and (max-width:620px) {
.wrap { width:100% !important; }
.stack { display:block !important; width:100% !important; max-width:100% !important; }
.gutter { padding-left:20px !important; padding-right:20px !important; }
.cta { display:block !important; width:100% !important; box-sizing:border-box !important; text-align:center !important; }
.h1 { font-size:26px !important; line-height:32px !important; }
.thumb { width:100% !important; height:auto !important; max-width:100% !important; }
/* A digest row is the one two-column layout that should NOT stack: the
thumbnail shrinks and stays beside the headline, because a roundup is
read by scanning and a full-width decorative image per story destroys
that. */
.row-thumb { width:80px !important; }
.row-thumb img { width:80px !important; height:80px !important; }
.hide-sm { display:none !important; }
}
@media (prefers-color-scheme: dark) {
.d-bg { background-color:#131313 !important; }
.d-card { background-color:#1b1b1b !important; }
.d-ink { color:#f3f3f3 !important; }
.d-mute { color:#a5a5a5 !important; }
.d-rule { border-color:#333333 !important; }
.d-chip { background-color:#10352f !important; color:#7fd8c6 !important; }
}
</style>
</head>
<body class="d-bg" style="margin:0;padding:0;background-color:#f4f3f0;">
<span style="display:none;font-size:1px;color:#fefefe;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">Seis coisas que valem a sua terça-feira. Duas são sobre preços.</span><span style="display:none;font-size:1px;color:#fefefe;"> ͏ ͏ ͏ ͏ ͏</span>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-bg" style="background-color:#f4f3f0;">
<tr><td align="center" style="padding:28px 12px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" class="wrap d-card" style="width:600px;max-width:600px;background-color:#ffffff;border-radius:6px;">
<tr><td class="gutter" style="padding:30px 32px 22px 32px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="middle" style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-ink" style="margin:0;font-size:20px;line-height:26px;font-weight:800;color:#141414;">The Tuesday Digest</p>
<p class="d-mute" style="margin:4px 0 0 0;font-size:14px;line-height:20px;color:#6b6b6b;">26 de agosto de 2026 · 6 temas · 9 min</p>
</td>
<td valign="middle" align="right" class="hide-sm">
<span class="d-chip" style="display:inline-block;background:#e2f4ef;color:#00614f;border-radius:999px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:12px;font-weight:700;padding:6px 12px;">NÚMERO 212</span>
</td>
</tr>
</table>
</td></tr>
<tr><td class="gutter" style="padding:0 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="d-rule" style="border-top:2px solid #141414;font-size:0;line-height:0;"> </td></tr></table></td></tr>
<tr><td class="gutter" style="padding:0 32px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="padding:22px 0;">
<tr>
<td class="row-thumb" width="112" valign="top" style="width:112px;padding:0;padding-right:20px;">
<img src="/_astro/digest-1.gDWNYw1C.png" width="112" height="112" alt="Arcos turquesa abstratos atravessados por uma faixa diagonal" style="width:112px;height:112px;border-radius:4px;">
</td>
<td valign="top" style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-mute" style="margin:0 0 6px 0;font-size:12px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:#007d6a;">01 · PREÇOS</p>
<p style="margin:0 0 6px 0;font-size:18px;line-height:26px;font-weight:700;">
<a href="https://example.com" class="d-ink" style="color:#141414;text-decoration:none;">Três empresas passaram a preços por utilização e duas voltaram atrás</a>
</p>
<p class="d-mute" style="margin:0;font-size:16px;line-height:26px;color:#555555;">As duas que recuaram dizem o mesmo: a carga de suporte subiu antes da receita.</p>
</td>
</tr>
</table>
</td></tr>
<tr><td class="gutter" style="padding:0 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="d-rule" style="border-top:1px solid #eceae6;font-size:0;line-height:0;"> </td></tr></table></td></tr>
<tr><td class="gutter" style="padding:0 32px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="padding:22px 0;">
<tr>
<td class="row-thumb" width="112" valign="top" style="width:112px;padding:0;padding-right:20px;">
<img src="/_astro/digest-2.ch7Avmad.png" width="112" height="112" alt="Anéis turquesa abstratos com um ponto focal deslocado" style="width:112px;height:112px;border-radius:4px;">
</td>
<td valign="top" style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-mute" style="margin:0 0 6px 0;font-size:12px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:#007d6a;">02 · ENTREGABILIDADE</p>
<p style="margin:0 0 6px 0;font-size:18px;line-height:26px;font-weight:700;">
<a href="https://example.com" class="d-ink" style="color:#141414;text-decoration:none;">As regras do Gmail para grandes remetentes fazem um ano. Eis o que mudou mesmo</a>
</p>
<p class="d-mute" style="margin:0;font-size:16px;line-height:26px;color:#555555;">A taxa de reclamações é o único limiar de que alguém se aproximou. O resto já era dado como certo.</p>
</td>
</tr>
</table>
</td></tr>
<tr><td class="gutter" style="padding:0 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="d-rule" style="border-top:1px solid #eceae6;font-size:0;line-height:0;"> </td></tr></table></td></tr>
<tr><td class="gutter" style="padding:0 32px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="padding:22px 0;">
<tr>
<td class="row-thumb" width="112" valign="top" style="width:112px;padding:0;padding-right:20px;">
<img src="/_astro/digest-3.DP0eG3wj.png" width="112" height="112" alt="Arcos concêntricos turquesa abstratos sobre branco sujo" style="width:112px;height:112px;border-radius:4px;">
</td>
<td valign="top" style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-mute" style="margin:0 0 6px 0;font-size:12px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:#007d6a;">03 · OFÍCIO</p>
<p style="margin:0 0 6px 0;font-size:18px;line-height:26px;font-weight:700;">
<a href="https://example.com" class="d-ink" style="color:#141414;text-decoration:none;">O arquivo de uma newsletter é um produto de pesquisa, não uma lista de ligações</a>
</p>
<p class="d-mute" style="margin:0;font-size:16px;line-height:26px;color:#555555;">Nove dias de trabalho, zero crescimento de subscritores, o triplo de tempo no site. O interessante é o compromisso.</p>
</td>
</tr>
</table>
</td></tr>
<tr><td class="gutter" style="padding:0 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="d-rule" style="border-top:1px solid #eceae6;font-size:0;line-height:0;"> </td></tr></table></td></tr>
<tr><td class="gutter" style="padding:24px 32px 34px 32px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-mute" style="margin:0 0 14px 0;font-size:15px;line-height:24px;color:#555555;">Mais três abaixo da dobra, incluindo o da faturação a que toda a gente responde.</p>
<!--[if mso]><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#007d6a" style="border-radius:4px;"><![endif]-->
<a href="https://example.com" class="cta" style="background:#007d6a;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">Ler os seis</a>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
<tr><td class="gutter d-rule" style="padding:0 32px;border-top:1px solid #eceae6;"></td></tr>
<tr><td class="gutter" style="padding:20px 32px 30px 32px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-mute" style="margin:0;font-size:13px;line-height:20px;color:#8a8a8a;">The Tuesday Digest, 9 Fitzroy Street, Manchester M1 2AL<br>
<a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Cancelar subscrição</a> · <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Gerir preferências</a> · <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Ver no navegador</a></p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html> Segue o seu tema — mude-o no cabeçalho para ver o outro.
Ler o HTML de The Storefront
<!DOCTYPE html>
<html lang="pt" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>The Storefront</title>
<style>
body { margin:0; padding:0; width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
img { border:0; outline:none; line-height:100%; -ms-interpolation-mode:bicubic; display:block; }
a { text-decoration:underline; }
@media only screen and (max-width:620px) {
.wrap { width:100% !important; }
.stack { display:block !important; width:100% !important; max-width:100% !important; }
.gutter { padding-left:20px !important; padding-right:20px !important; }
.cta { display:block !important; width:100% !important; box-sizing:border-box !important; text-align:center !important; }
.h1 { font-size:26px !important; line-height:32px !important; }
.thumb { width:100% !important; height:auto !important; max-width:100% !important; }
/* A digest row is the one two-column layout that should NOT stack: the
thumbnail shrinks and stays beside the headline, because a roundup is
read by scanning and a full-width decorative image per story destroys
that. */
.row-thumb { width:80px !important; }
.row-thumb img { width:80px !important; height:80px !important; }
.hide-sm { display:none !important; }
}
@media (prefers-color-scheme: dark) {
.d-bg { background-color:#141210 !important; }
.d-card { background-color:#1d1a18 !important; }
.d-ink { color:#f5f2ef !important; }
.d-mute { color:#aaa39d !important; }
.d-rule { border-color:#38322d !important; }
.d-tile { background-color:#241f1c !important; }
}
</style>
</head>
<body class="d-bg" style="margin:0;padding:0;background-color:#efece8;">
<span style="display:none;font-size:1px;color:#fefefe;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">Quatro gravuras novas. A do porto tem 40 cópias e não aguenta a semana.</span><span style="display:none;font-size:1px;color:#fefefe;"> ͏ ͏ ͏ ͏ ͏</span>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-bg" style="background-color:#efece8;">
<tr><td align="center" style="padding:24px 12px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" class="wrap d-card" style="width:600px;max-width:600px;background-color:#ffffff;">
<tr><td class="gutter" style="padding:22px 24px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr>
<td class="d-ink" style="font-size:17px;line-height:22px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#141414;">Northlight</td>
<td align="right" class="d-mute hide-sm" style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:13px;line-height:20px;color:#6b6b6b;">Coleção de outono · 04</td>
</tr></table>
</td></tr>
<tr><td style="padding:0;">
<img src="/_astro/shop-hero.r4mykM_E.png" width="600" height="360" alt="Quatro gravuras novas da Northlight: arcos vermelho ferrugem sobrepostos sobre branco sujo quente" style="width:100%;height:auto;max-width:600px;">
</td></tr>
<tr><td class="gutter" style="padding:30px 40px 0 40px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<h1 class="h1 d-ink" style="margin:0 0 12px 0;font-size:30px;line-height:38px;font-weight:800;color:#141414;">Quatro gravuras. Quarenta cópias cada.</h1>
<p class="d-mute" style="margin:0 0 22px 0;font-size:16px;line-height:26px;color:#555555;">Cada gravura desta coleção é tirada à mão, numerada, e acaba quando acaba. Aqui não se reimprime nada.</p>
</td></tr>
<tr><td class="gutter" style="padding:0 40px 26px 40px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<!--[if mso]><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#b8442d" style="border-radius:4px;"><![endif]-->
<a href="https://example.com" class="cta" style="background:#b8442d;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">Ver a coleção</a>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
<tr><td class="gutter" style="padding:0 32px 8px 32px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td class="stack" width="50%" valign="top" style="width:50%;padding:0 8px 16px 8px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-tile" style="background-color:#faf9f7;border-radius:4px;">
<tr><td style="padding:0;"><img src="/_astro/shop-print-1.B7Z7OyM8.png" width="272" height="272" alt="Harbour, uma gravura abstrata em vermelho ferrugem" class="thumb" style="width:100%;height:auto;border-radius:4px 4px 0 0;"></td></tr>
<tr><td style="padding:16px 16px 18px 16px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-ink" style="margin:0 0 2px 0;font-size:16px;line-height:22px;font-weight:700;color:#141414;">Harbour</p>
<p class="d-mute" style="margin:0 0 10px 0;font-size:14px;line-height:20px;color:#6b6b6b;">50 × 70 cm · giclée sobre papel de algodão</p>
<p style="margin:0 0 14px 0;font-size:18px;line-height:24px;font-weight:700;color:#b8442d;">£85</p>
<!--[if mso]><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#b8442d" style="border-radius:4px;"><![endif]-->
<a href="https://example.com" class="cta" style="background:#b8442d;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">Adicionar ao cesto</a>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
</table>
</td>
<td class="stack" width="50%" valign="top" style="width:50%;padding:0 8px 16px 8px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-tile" style="background-color:#faf9f7;border-radius:4px;">
<tr><td style="padding:0;"><img src="/_astro/shop-print-2.CMBKLJ38.png" width="272" height="272" alt="Dusk, uma gravura abstrata em âmbar" class="thumb" style="width:100%;height:auto;border-radius:4px 4px 0 0;"></td></tr>
<tr><td style="padding:16px 16px 18px 16px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-ink" style="margin:0 0 2px 0;font-size:16px;line-height:22px;font-weight:700;color:#141414;">Dusk</p>
<p class="d-mute" style="margin:0 0 10px 0;font-size:14px;line-height:20px;color:#6b6b6b;">50 × 70 cm · giclée sobre papel de algodão</p>
<p style="margin:0 0 14px 0;font-size:18px;line-height:24px;font-weight:700;color:#b8442d;">£85</p>
<!--[if mso]><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#b8442d" style="border-radius:4px;"><![endif]-->
<a href="https://example.com" class="cta" style="background:#b8442d;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">Adicionar ao cesto</a>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
</table>
</td>
</tr>
<tr>
<td class="stack" width="50%" valign="top" style="width:50%;padding:0 8px 16px 8px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-tile" style="background-color:#faf9f7;border-radius:4px;">
<tr><td style="padding:0;"><img src="/_astro/shop-print-3.C9XLoBz6.png" width="272" height="272" alt="Tide, uma gravura abstrata em violeta" class="thumb" style="width:100%;height:auto;border-radius:4px 4px 0 0;"></td></tr>
<tr><td style="padding:16px 16px 18px 16px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-ink" style="margin:0 0 2px 0;font-size:16px;line-height:22px;font-weight:700;color:#141414;">Tide</p>
<p class="d-mute" style="margin:0 0 10px 0;font-size:14px;line-height:20px;color:#6b6b6b;">40 × 50 cm · giclée sobre papel de algodão</p>
<p style="margin:0 0 14px 0;font-size:18px;line-height:24px;font-weight:700;color:#b8442d;">£65</p>
<!--[if mso]><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#b8442d" style="border-radius:4px;"><![endif]-->
<a href="https://example.com" class="cta" style="background:#b8442d;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">Adicionar ao cesto</a>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
</table>
</td>
<td class="stack" width="50%" valign="top" style="width:50%;padding:0 8px 16px 8px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-tile" style="background-color:#faf9f7;border-radius:4px;">
<tr><td style="padding:0;"><img src="/_astro/shop-print-4.jL_6WDwF.png" width="272" height="272" alt="Quarry, uma gravura abstrata em verde profundo" class="thumb" style="width:100%;height:auto;border-radius:4px 4px 0 0;"></td></tr>
<tr><td style="padding:16px 16px 18px 16px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-ink" style="margin:0 0 2px 0;font-size:16px;line-height:22px;font-weight:700;color:#141414;">Quarry</p>
<p class="d-mute" style="margin:0 0 10px 0;font-size:14px;line-height:20px;color:#6b6b6b;">40 × 50 cm · giclée sobre papel de algodão</p>
<p style="margin:0 0 14px 0;font-size:18px;line-height:24px;font-weight:700;color:#b8442d;">£65</p>
<!--[if mso]><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#b8442d" style="border-radius:4px;"><![endif]-->
<a href="https://example.com" class="cta" style="background:#b8442d;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">Adicionar ao cesto</a>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
</table>
</td>
</tr>
</table>
</td></tr>
<tr><td class="gutter" style="padding:6px 40px 30px 40px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-tile" style="background:#faf9f7;border-radius:4px;">
<tr><td style="padding:16px 20px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-ink" style="margin:0;font-size:15px;line-height:24px;color:#242424;"><strong>Envio grátis no Reino Unido a partir de 75 £.</strong> Opções com moldura no pagamento. Devoluções em 30 dias, sem moldura.</p>
</td></tr>
</table>
</td></tr>
<tr><td class="gutter d-rule" style="padding:0 40px;border-top:1px solid #ebe7e2;"></td></tr>
<tr><td class="gutter" style="padding:20px 40px 30px 40px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-mute" style="margin:0;font-size:13px;line-height:20px;color:#8a8a8a;">Northlight Print Co., Unit 4 Wharf Road, Leeds LS10 1JQ<br>
<a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Cancelar subscrição</a> · <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Ver no navegador</a></p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html> Segue o seu tema — mude-o no cabeçalho para ver o outro.
Ler o HTML de The Brief
<!DOCTYPE html>
<html lang="pt" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>The Brief</title>
<style>
body { margin:0; padding:0; width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
img { border:0; outline:none; line-height:100%; -ms-interpolation-mode:bicubic; display:block; }
a { text-decoration:underline; }
@media only screen and (max-width:620px) {
.wrap { width:100% !important; }
.stack { display:block !important; width:100% !important; max-width:100% !important; }
.gutter { padding-left:20px !important; padding-right:20px !important; }
.cta { display:block !important; width:100% !important; box-sizing:border-box !important; text-align:center !important; }
.h1 { font-size:26px !important; line-height:32px !important; }
.thumb { width:100% !important; height:auto !important; max-width:100% !important; }
/* A digest row is the one two-column layout that should NOT stack: the
thumbnail shrinks and stays beside the headline, because a roundup is
read by scanning and a full-width decorative image per story destroys
that. */
.row-thumb { width:80px !important; }
.row-thumb img { width:80px !important; height:80px !important; }
.hide-sm { display:none !important; }
}
@media (prefers-color-scheme: dark) {
.d-bg { background-color:#121212 !important; }
.d-card { background-color:#1a1a1a !important; }
.d-ink { color:#f2f2f2 !important; }
.d-mute { color:#a6a6a6 !important; }
.d-rule { border-color:#333333 !important; }
.d-tile { background-color:#232323 !important; }
.d-track { background-color:#2c2c2c !important; }
}
</style>
</head>
<body class="d-bg" style="margin:0;padding:0;background-color:#f1f0f4;">
<span style="display:none;font-size:1px;color:#fefefe;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">A taxa de resposta sobe 4 pontos e continuamos sem saber porquê. A melhor hipótese está lá dentro.</span><span style="display:none;font-size:1px;color:#fefefe;"> ͏ ͏ ͏ ͏ ͏</span>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-bg" style="background-color:#f1f0f4;">
<tr><td align="center" style="padding:26px 12px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" class="wrap d-card" style="width:600px;max-width:600px;background-color:#ffffff;border-radius:6px;">
<tr><td style="padding:0;background:#141414;border-radius:6px 6px 0 0;">
<img src="/_astro/brief-band.CsaAK-Uv.png" width="600" height="150" alt="Cabeçalho da Ledger Weekly: arcos violeta sobre quase preto" style="width:100%;height:auto;max-width:600px;border-radius:6px 6px 0 0;">
</td></tr>
<tr><td class="gutter" style="padding:26px 32px 18px 32px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p style="margin:0 0 4px 0;font-size:12px;line-height:16px;letter-spacing:.1em;text-transform:uppercase;color:#8f83ff;">Ledger Weekly · Semana 35</p>
<h1 class="h1 d-ink" style="margin:0;font-size:26px;line-height:34px;font-weight:800;color:#141414;">A taxa de resposta mexeu-se e ninguém lançou nada</h1>
</td></tr>
<tr><td class="gutter" style="padding:0 26px 8px 26px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr>
<td class="stack" width="33.33%" valign="top" style="width:33.33%;padding:0 6px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-tile" style="background:#f6f5f8;border-radius:4px;">
<tr><td style="padding:18px 16px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-ink" style="margin:0 0 2px 0;font-size:30px;line-height:36px;font-weight:800;color:#141414;">31.4%</p>
<p class="d-mute" style="margin:0 0 6px 0;font-size:13px;line-height:18px;color:#6b6b6b;">Taxa de abertura</p>
<p style="margin:0;font-size:13px;line-height:18px;font-weight:700;color:#007d6a;">▲ 1,2 pts</p>
</td></tr>
</table>
</td>
<td class="stack" width="33.33%" valign="top" style="width:33.33%;padding:0 6px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-tile" style="background:#f6f5f8;border-radius:4px;">
<tr><td style="padding:18px 16px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-ink" style="margin:0 0 2px 0;font-size:30px;line-height:36px;font-weight:800;color:#141414;">8.9%</p>
<p class="d-mute" style="margin:0 0 6px 0;font-size:13px;line-height:18px;color:#6b6b6b;">Taxa de cliques</p>
<p style="margin:0;font-size:13px;line-height:18px;font-weight:700;color:#b8442d;">▼ 0,4 pts</p>
</td></tr>
</table>
</td>
<td class="stack" width="33.33%" valign="top" style="width:33.33%;padding:0 6px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-tile" style="background:#f6f5f8;border-radius:4px;">
<tr><td style="padding:18px 16px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-ink" style="margin:0 0 2px 0;font-size:30px;line-height:36px;font-weight:800;color:#141414;">6.1%</p>
<p class="d-mute" style="margin:0 0 6px 0;font-size:13px;line-height:18px;color:#6b6b6b;">Taxa de resposta</p>
<p style="margin:0;font-size:13px;line-height:18px;font-weight:700;color:#007d6a;">▲ 4,0 pts</p>
</td></tr>
</table>
</td>
</tr></table>
</td></tr>
<tr><td class="gutter" style="padding:20px 32px 0 32px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-ink" style="margin:0 0 18px 0;font-size:16px;line-height:26px;color:#242424;">Nada mudou no envio. Mesma lista, mesma quinta-feira, mesmo modelo. A única variável que encontrámos é que o assunto fez uma pergunta pela primeira vez em onze números.</p>
<p class="d-mute" style="margin:0 0 10px 0;font-size:12px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:#6b6b6b;">Respostas por segmento</p>
</td></tr>
<tr><td class="gutter" style="padding:0 32px 22px 32px;">
<table role="presentation" class="chart" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="150" valign="middle" class="d-ink" style="width:150px;padding:7px 0;padding-right:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:20px;color:#242424;">Subscritores pagos</td>
<td valign="middle" style="padding:7px 0;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-track" style="background:#ebe9f2;border-radius:2px;">
<tr><td width="100%" style="width:100%;background:#8f83ff;border-radius:2px;font-size:0;line-height:0;height:18px;"> </td><td style="font-size:0;line-height:0;"> </td></tr>
</table>
</td>
<td width="64" align="right" valign="middle" class="d-mute" style="width:64px;padding:7px 0;padding-left:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:14px;line-height:20px;font-weight:700;color:#555555;">11.2%</td>
</tr>
<tr>
<td width="150" valign="middle" class="d-ink" style="width:150px;padding:7px 0;padding-right:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:20px;color:#242424;">Gratuitos, ativos 90 d</td>
<td valign="middle" style="padding:7px 0;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-track" style="background:#ebe9f2;border-radius:2px;">
<tr><td width="57%" style="width:57%;background:#8f83ff;border-radius:2px;font-size:0;line-height:0;height:18px;"> </td><td style="font-size:0;line-height:0;"> </td></tr>
</table>
</td>
<td width="64" align="right" valign="middle" class="d-mute" style="width:64px;padding:7px 0;padding-left:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:14px;line-height:20px;font-weight:700;color:#555555;">6.4%</td>
</tr>
<tr>
<td width="150" valign="middle" class="d-ink" style="width:150px;padding:7px 0;padding-right:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:20px;color:#242424;">Gratuitos, inativos</td>
<td valign="middle" style="padding:7px 0;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-track" style="background:#ebe9f2;border-radius:2px;">
<tr><td width="16%" style="width:16%;background:#8f83ff;border-radius:2px;font-size:0;line-height:0;height:18px;"> </td><td style="font-size:0;line-height:0;"> </td></tr>
</table>
</td>
<td width="64" align="right" valign="middle" class="d-mute" style="width:64px;padding:7px 0;padding-left:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:14px;line-height:20px;font-weight:700;color:#555555;">1.8%</td>
</tr>
<tr>
<td width="150" valign="middle" class="d-ink" style="width:150px;padding:7px 0;padding-right:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:20px;color:#242424;">Teste</td>
<td valign="middle" style="padding:7px 0;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-track" style="background:#ebe9f2;border-radius:2px;">
<tr><td width="44%" style="width:44%;background:#8f83ff;border-radius:2px;font-size:0;line-height:0;height:18px;"> </td><td style="font-size:0;line-height:0;"> </td></tr>
</table>
</td>
<td width="64" align="right" valign="middle" class="d-mute" style="width:64px;padding:7px 0;padding-left:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:14px;line-height:20px;font-weight:700;color:#555555;">4.9%</td>
</tr>
</table>
</td></tr>
<tr><td class="gutter" style="padding:0 32px 28px 32px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<!--[if mso]><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#141414" style="border-radius:4px;"><![endif]-->
<a href="https://example.com" class="cta" style="background:#141414;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">Ler a análise completa</a>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
<tr><td class="gutter d-rule" style="padding:0 32px;border-top:1px solid #e9e7ee;"></td></tr>
<tr><td class="gutter" style="padding:20px 32px 28px 32px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-mute" style="margin:0;font-size:13px;line-height:20px;color:#8a8a8a;">Ledger Weekly, 2 Cathedral Square, Edinburgh EH1 2QN<br>
<a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Cancelar subscrição</a> · <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Ver no navegador</a></p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html> 15 Designs Gratuitos de Templates de Newsletter
1. Atualização Clássica da Empresa
Ideal para: Empresas B2B, agências, serviços profissionais
Este template segue uma estrutura direta:
- Logotipo e cabeçalho da empresa
- Introdução editorial breve (2-3 frases)
- 3-4 blocos de conteúdo com títulos, descrições curtas e CTAs
- Rodapé com links sociais e descadastro
Notas de design: Layout limpo e profissional, com bastante espaço em branco. Use a cor principal da sua marca para títulos e botões de CTA. Limite imagens a uma imagem hero e miniaturas pequenas para blocos de conteúdo.
Estrutura de conteúdo:
- Saudação pessoal de um membro da equipe
- Artigo em destaque ou anúncio
- 2-3 itens de conteúdo secundário
- Seção de links rápidos ou recursos
- Rodapé com informações de contato
2. Vitrine de Produtos de E-Commerce
Ideal para: Lojas online, marcas de varejo, empresas DTC
Layout focado em produto desenhado para gerar vendas:
- Banner hero com produto em destaque ou promoção
- Grade de produtos (2x2 ou 3x1) com imagens, nomes, preços e botões de compra
- Seção de avaliação ou depoimento de cliente
- Promoção secundária ou novidades
Notas de design: Imagens grandes e de alta qualidade dos produtos são essenciais. Use um layout em grade que se empilha para coluna única no celular. Preços e botões de CTA devem estar imediatamente visíveis.
Para marcas de e-commerce usando o Tajo com a Brevo, esses templates podem ser preenchidos dinamicamente com recomendações personalizadas de produtos com base no histórico de navegação e compra de cada assinante. Veja nosso guia sobre email marketing para e-commerce para estratégias de personalização.
3. O Resumo de Conteúdo
Ideal para: Empresas de mídia, criadores de conteúdo, publicações
Um template focado em conteúdo, desenhado para exibir vários artigos:
- Artigo em destaque com imagem grande e resumo
- Lista de 5-8 artigos adicionais com títulos e resumos de uma linha
- Rótulos de categoria para cada artigo
- Destaque “Mais popular” ou “Escolha do editor”
Notas de design: Priorize a legibilidade com tipografia limpa e espaçamento generoso entre linhas. Use formatação consistente para cada entrada de artigo para que os leitores possam escanear rapidamente o resumo.
4. A Newsletter Pessoal
Ideal para: Solopreneurs, líderes de opinião, consultores
Um template minimalista, focado em texto, que parece uma carta pessoal:
- Foto e nome do autor
- Conteúdo escrito longo (500-800 palavras)
- Imagens e elementos de design mínimos
- Links simples de texto em vez de botões estilizados
- Despedida pessoal
Notas de design: Este template tem sucesso pela simplicidade. Use layout de coluna única, fontes padrão e estilização mínima. O objetivo é parecer um email pessoal, em vez de uma comunicação de marketing.
5. A Atualização de Produto SaaS
Ideal para: Empresas de software, startups de tech, ferramentas para desenvolvedores
Layout focado em funcionalidades para comunicar atualizações de produto:
- Cabeçalho com número da versão ou título da atualização
- Destaque de funcionalidade com captura de tela ou GIF
- Lista em tópicos de melhorias e correções
- Provocação “O que vem a seguir”
- CTA para experimentar novas funcionalidades
Notas de design: Inclua capturas de tela ou imagens da interface do produto para mostrar, em vez de contar. Use um design limpo e moderno que reflita a estética do seu software.
6. O Convite para Evento
Ideal para: Organizadores de eventos, conferências, anfitriões de webinar
Um template de único propósito, focado em gerar inscrições:
- Nome do evento e marca visual
- Data, horário e local (ou plataforma virtual)
- Destaque dos palestrantes com fotos e biografias
- Visão geral da agenda
- CTA proeminente de inscrição
- Preço para inscrições antecipadas ou urgência por vagas limitadas
Notas de design: O botão de CTA deve aparecer pelo menos duas vezes, uma vez acima da dobra e uma vez após os detalhes. Use elementos de contagem regressiva ou linguagem de urgência quando apropriado.
7. O Resumo Semanal
Ideal para: Newsletters do setor, editores de conteúdo curado
Um template estruturado para curar conteúdo de diversas fontes:
- Nota do editor (2-3 frases)
- 5-10 links curados com atribuição de fonte, título e comentário breve
- Seções numeradas ou categorizadas
- Seção “Patrocinador” ou “Em destaque” se monetizado
- Enquete ou pedido de feedback do leitor
Notas de design: Numeração clara e formatação consistente para cada item curado ajuda os leitores a navegar. Use bordas sutis ou cores de fundo para separar seções.
8. O Relatório de Impacto de ONG
Ideal para: Organizações de caridade, ONGs, empresas sociais
Um template desenhado para compartilhar histórias de impacto e gerar doações:
- Manchete com estatística de impacto (“Ajudamos 1.000 famílias este mês”)
- História com foto (um beneficiário ou projeto)
- Barra de progresso em direção à meta da campanha
- Oportunidades para voluntários ou eventos
- Botão de CTA para doação
Notas de design: Comece com impacto emocional por meio de fotografia e histórias reais. Use visualização de dados (barras de progresso, estatísticas) para mostrar resultados concretos.
9. A Promoção Sazonal
Ideal para: Varejo, hospitalidade, negócios sazonais
Um template visualmente rico desenhado para campanhas sazonais e de feriados:
- Imagem hero sazonal em largura total
- Oferta promocional com termos claros
- Seleção curada de produtos ou guia de presentes
- Elemento de prazo ou contagem regressiva
- Múltiplos CTAs ao longo do email
Notas de design: Cores ousadas e imagens sazonais criam urgência. Garanta que a oferta promocional seja imediatamente clara sem precisar rolar. Teste o template minuciosamente, pois emails com muitas imagens podem ter problemas de renderização em diferentes clientes.
10. A Série Educacional
Ideal para: Cursos online, negócios de coaching, instituições educacionais
Um template estruturado para entregar conteúdo educacional:
- Número da aula e título da série
- Principal aprendizado ou objetivo de aprendizagem
- Conteúdo principal com seções claras
- Exercício prático ou item de ação
- Indicador de progresso (Aula 3 de 8)
- CTA para a próxima aula ou recurso relacionado
Notas de design: Use uma estrutura consistente em todas as aulas da série para que os assinantes saibam o que esperar. Inclua um indicador de progresso para motivar a conclusão.
11. O Anúncio de Imóvel
Ideal para: Corretores de imóveis, empresas de gestão de propriedades
Um template focado em imóveis, com elementos visuais ricos:
- Anúncio em destaque com galeria grande de fotos
- Detalhes da propriedade (preço, quartos, banheiros, metragem)
- 3-4 anúncios adicionais em formato de grade
- Atualização de mercado ou destaque do bairro
- Informações de contato do corretor com foto
Notas de design: Fotografia de alta qualidade das propriedades é essencial. Inclua detalhes-chave (preço, tamanho, localização) imediatamente visíveis sem precisar clicar.
12. O Negócio de Restaurante ou Comida
Ideal para: Restaurantes, entrega de comida, empresas de catering
Um template visualmente apetitoso:
- Imagem hero do prato em destaque ou item do cardápio
- Ofertas semanais ou novos itens do cardápio
- CTA de reserva ou pedido
- Destaque de avaliação de cliente
- Informações de localização e horários
Notas de design: A fotografia de comida deve ser profissional e apetitosa. Use cores quentes e espaçamento generoso. O CTA principal (pedir, reservar, visitar) deve ser impossível de perder.
13. Fitness e Bem-Estar
Ideal para: Academias, personal trainers, marcas de bem-estar
Um template energético focado em motivação e ação:
- Imagem hero motivacional
- Treino da semana ou dica de bem-estar
- Cronograma de aulas ou próximos eventos
- Destaque de aluno ou história de transformação
- CTA de agendamento ou assinatura
Notas de design: Use fotografia orientada à ação e tipografia ousada. Mantenha um tom motivador sem ser agressivo.
14. Vitrine de Portfólio de Agência
Ideal para: Agências criativas, freelancers, estúdios de design
Um template em estilo de portfólio para exibir trabalhos recentes:
- Projeto em destaque com visuais grandes e breve estudo de caso
- 2-3 projetos recentes adicionais em grade
- Depoimento de cliente
- Atualizações de equipe ou vagas
- CTA de contato para clientes em potencial
Notas de design: Deixe o trabalho falar por si mesmo com visuais grandes e de alta qualidade. Mantenha texto mínimo e focado em resultados, em vez de descrições de processo.
15. A Newsletter da Comunidade
Ideal para: Organizações de membros, comunidades online, negócios locais
Um template focado em comunidade que incentiva o engajamento:
- Notícias e anúncios da comunidade
- Destaque de membro ou entrevista
- Calendário de eventos futuros
- Perguntas para discussão ou enquete
- Seção de conteúdo gerado pelo usuário
- CTA para participar/engajar
Notas de design: Inclua fotos e nomes de membros (com permissão) para construir conexão com a comunidade. Use um tom caloroso e inclusivo, e incentive respostas e participação.
Onde Encontrar Templates Gratuitos de Newsletter
Plataformas de Email Marketing
A maioria das plataformas de email marketing inclui templates gratuitos em seus planos:
| Plataforma | Templates Gratuitos | Nível de Personalização | Plano Gratuito Disponível |
|---|---|---|---|
| Brevo | 60+ | Editor drag-and-drop | Sim |
| Mailchimp | 100+ | Editor drag-and-drop | Sim (limitado) |
| HubSpot | 45+ | Editor drag-and-drop | Sim |
| MailerLite | 80+ | Editor drag-and-drop | Sim |
| Constant Contact | 200+ | Editor drag-and-drop | Não |
A biblioteca de templates da Brevo é particularmente adequada para negócios de e-commerce, com templates desenhados para anúncios de produtos, confirmações de pedido e campanhas promocionais que se integram aos dados da sua loja por meio do Tajo.
Fontes de Templates de Terceiros
- Litmus Community: Templates gratuitos e testados, com dados de compatibilidade entre clientes
- Really Good Emails: Galeria curada de exemplos reais de newsletter para inspiração
- Stripo: Construtor gratuito de templates de email com mais de 1.500 designs
- BeeFree: Editor drag-and-drop com mais de 200 templates responsivos gratuitos
- MJML: Framework open-source para criar templates de email responsivos com código
Personalizando Templates para sua Marca
Personalizações Essenciais
Todo template precisa dessas modificações antes do uso:
- Logotipo e cores de marca: Substitua a marca padrão pela sua
- Tipografia: Use as fontes da sua marca (com fallbacks seguros para web)
- Informações de rodapé: Atualize com seus dados empresariais e requisitos legais
- Links de redes sociais: Adicione seus perfis reais
- Link de descadastro: Obrigatório por lei em todo email de marketing
Personalizações Avançadas
Depois que você estiver confortável com um template, considere estas melhorias:
- Blocos de conteúdo dinâmico: Mostre conteúdos diferentes para diferentes segmentos de assinantes
- Tokens de personalização: Insira nomes, localizações ou preferências dos assinantes
- Seções condicionais: Mostre ou esconda seções com base em atributos do assinante
- Elementos interativos: Adicione enquetes, pesquisas ou interatividade baseada em AMP
Melhores Práticas para Templates de Newsletter
Teste antes de enviar. Envie emails de teste para Gmail, Outlook, Apple Mail e Yahoo, no mínimo. Use uma ferramenta como Litmus ou Email on Acid para testes abrangentes entre clientes.
Otimize imagens. Comprima todas as imagens para reduzir o tempo de carregamento. Inclua texto alternativo para cada imagem caso sejam bloqueadas pelo cliente de email.
Mantenha o tamanho do arquivo baixo. O tamanho total do email (HTML + imagens) deve ficar abaixo de 100KB para o HTML e abaixo de 1MB para o conteúdo total. Emails maiores correm o risco de serem cortados pelo Gmail ou bloqueados por filtros de spam.
Mantenha consistência. Use a mesma estrutura de template para cada edição da newsletter. Os assinantes desenvolvem hábitos de leitura em torno de layouts familiares, e a consistência constrói confiança.
Inclua texto simples. Sempre forneça uma alternativa em texto simples para clientes de email que não renderizam HTML. A maioria das plataformas de email gera isso automaticamente, mas revise para garantir legibilidade.
Teste sua entregabilidade de email regularmente. Um template bonito não vale nada se cair no spam. Monitore a reputação do remetente e a autenticação (SPF, DKIM, DMARC) junto com seus esforços de design.
Começando
Escolha um template que combine com seu setor e estilo de conteúdo. Comece com personalizações mínimas, cores de marca, logotipo e rodapé, e envie sua primeira edição. Conforme aprende o que ressoa com seu público por meio das taxas de abertura e dados de cliques, itere no design e na estrutura de conteúdo.
O melhor template de newsletter não é o mais visualmente impressionante. É aquele que seu público lê consistentemente, clica regularmente e aguarda com expectativa para receber.
Perguntas frequentes
Onde posso encontrar templates gratuitos de newsletter?
Templates gratuitos de newsletter estão disponíveis em plataformas de email marketing como Brevo, Mailchimp e HubSpot, além de marketplaces de templates como Litmus Community, Email on Acid e Really Good Emails. A maioria das plataformas oferece mais de 50 templates gratuitos que você pode personalizar.
O que faz um bom template de newsletter?
Um bom template de newsletter é responsivo para celular, renderiza corretamente em diferentes clientes de email, tem hierarquia visual clara, usa fontes seguras para web e inclui seções bem estruturadas para conteúdo. Deve carregar rapidamente com imagens otimizadas e suportar modo escuro.
Posso usar templates gratuitos de newsletter para fins comerciais?
Sim, a maioria dos templates gratuitos de newsletter de plataformas de email marketing são licenciados para uso comercial. Templates de sites de terceiros podem ter licenças variadas, então confira os termos antes de usá-los para comunicações comerciais.