E-mail marketing
Design

Modelos de newsletter: downloads gratuitos, dicas de design e melhores exemplos (2026)

Descarrega modelos de newsletter gratuitos e encontra inspiração de design. Inclui modelos HTML responsivos, melhores práticas de design e exemplos para cada sector.

Set Noa
Set Noa
Atualizado
0 visitas · 7 dias
newsletter templates
Modelos de newsletter?

Descarrega modelos de newsletter gratuitos e segue as dicas de design certas. A Brevo inclui modelos responsivos e personalizáveis no plano gratuito, sem código.

Saiba mais

TL;DR: Um bom modelo de newsletter é responsivo em telemóvel, em coluna única, alinhado com a marca e construído à volta de um único CTA claro. A Brevo inclui mais de 40 modelos responsivos gratuitos no editor de arrastar e largar, sem código. Canva, Stripo e BEEFree são alternativas sólidas para ficheiros de design.

Um óptimo modelo de newsletter faz o trabalho pesado do teu e-mail marketing. Deixa o teu conteúdo com aspecto profissional, guia quem lê até ao CTA e funciona bem em qualquer dispositivo e cliente de e-mail.

Este guia cobre tudo sobre modelos de newsletter: onde os obter gratuitamente, como desenhar modelos eficazes e exemplos para cada sector.

O que faz um modelo de newsletter excelente

Elementos essenciais

  1. Design responsivo em telemóvel, mais de 60 % dos e-mails são abertos no telemóvel
  2. Hierarquia visual clara, conduz o olhar do título até ao CTA
  3. Consistência de marca, cores, tipos de letra e posicionamento do logótipo
  4. Layout em coluna única, melhor leitura em todos os dispositivos
  5. CTA em destaque, uma acção clara por e-mail
  6. Texto de pré-cabeçalho, prolonga o assunto na caixa de entrada
  7. Ligação de cancelamento de subscrição, exigida por lei (CAN-SPAM, RGPD)

Anatomia de um modelo

┌─────────────────────────┐
│  Logótipo / Cabeçalho   │
├─────────────────────────┤
│  Imagem principal       │
├─────────────────────────┤
│  Título                 │
│  Corpo (2-3 linhas)     │
│  [Botão CTA]            │
├─────────────────────────┤
│  Secção de conteúdo 2   │
│  [CTA secundário]       │
├─────────────────────────┤
│  Rodapé / Redes sociais │
│  Cancelar subscrição    │
└─────────────────────────┘
Modelos Tajo

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 6 KB, sem build 
<!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;">&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;</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 &rarr;</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> &middot; <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Ver no navegador</a></p>
      </td></tr>

    </table>
  </td></tr>
</table>
</body>
</html>

Fontes de modelos de newsletter gratuitos

1. Brevo (recomendado)

O plano gratuito da Brevo inclui mais de 40 modelos de newsletter responsivos integrados no editor de arrastar e largar. Categorias disponíveis:

  • E-mails de boas-vindas
  • Anúncios de produto
  • Resumos semanais
  • Convites para eventos
  • Campanhas sazonais

Vantagens: grátis, responsivos, fáceis de personalizar, sem HTML Para começar: Cria conta gratuita na Brevo

2. Canva

A Canva oferece modelos compatíveis com e-mail que podes personalizar na ferramenta de design dela.

3. Stripo

A Stripo oferece mais de 1.100 modelos de e-mail responsivos gratuitos, exportáveis para qualquer ESP.

4. BEEFree

A BEE oferece um editor de modelos gratuito com designs profissionais.

Comparativo de fontes gratuitas de modelos

FonteModelos gratuitosEditor sem códigoExporta para qualquer ESPIdeal para
Brevo40+ responsivosSimNativo (integrado)Desenhar e enviar de ponta a ponta
CanvaMuitos designsSimExportação manualProfissionais de marketing mais visuais
Stripo1.100+SimSimVariedade e flexibilidade de ESP
BEEFreeBiblioteca amplaSimSimDesign de modelo autónomo

Se queres um único sítio para desenhar, personalizar e enviar, a Brevo é o caminho mais directo. Se só precisas de ficheiros de design para usar noutra ferramenta, a Stripo e a BEEFree têm as bibliotecas mais amplas.

Melhores práticas para os teus modelos de newsletter

Design

  • Usa 600 px de largura máxima para compatibilidade com clientes de e-mail
  • Mantém o tipo de letra do corpo entre 14 e 16 px
  • Prefere botões de CTA em vez de ligações de texto (área de toque mínima de 44 × 44 px)
  • Limita-te a 2-3 cores da paleta da marca
  • Usa tipos de letra web-safe (Arial, Georgia, Verdana) com fallback

Distribuição do conteúdo

  • Pirâmide invertida: o conteúdo mais importante primeiro
  • Leitura em F: informação-chave à esquerda
  • Espaço em branco: não amontoes o conteúdo, deixa-o respirar
  • Proporção imagem-texto: 40 % imagem, 60 % texto (pela entregabilidade)

Técnico

  • Inclui sempre texto alternativo nas imagens
  • Testa em vários clientes: Gmail, Outlook, Apple Mail, Yahoo
  • Mantém o peso total do e-mail abaixo de 100 KB para carregar depressa
  • Usa CSS inline para uma renderização consistente

Modelos de newsletter por tipo

1. Modelo de newsletter de boas-vindas

Objectivo: causar uma boa primeira impressão Elementos-chave: apresentação da marca, proposta de valor, o que esperar, CTA rápido

2. Modelo de resumo semanal

Objectivo: selecção recorrente de conteúdo Elementos-chave: secções curadas, resumos breves, ligações de “ler mais”

3. Modelo de anúncio de produto

Objectivo: lançar novos produtos ou funcionalidades Elementos-chave: imagem do produto, principais vantagens, preço, CTA de compra

4. Modelo promocional

Objectivo: gerar vendas com ofertas Elementos-chave: código de desconto, imagens do produto, sentido de urgência, CTA de compra

5. Modelo educativo

Objectivo: entregar valor e gerar confiança Elementos-chave: dicas ou tutoriais, layout limpo, CTA discreto

Cria a tua newsletter na Brevo

  1. Regista-te no plano gratuito da Brevo
  2. Escolhe um modelo da biblioteca ou começa do zero
  3. Personaliza com arrastar e largar: adiciona logótipo, cores, blocos de conteúdo
  4. Pré-visualiza no computador e no telemóvel
  5. Testa enviando para ti e para colegas
  6. Agenda ou envia de imediato

O editor da Brevo guarda os teus modelos personalizados para reutilização e podes criar bibliotecas de modelos com a identidade da marca para toda a equipa.

Dicas para mais engagement

  • Personaliza a saudação e o conteúdo com base em segmentos
  • Faz testes A/B a diferentes layouts para descobrir o que funciona (guia de testes A/B)
  • Mantém o conteúdo legível à passagem, quem lê dedica em média 11 segundos por e-mail
  • Um único CTA principal, não dês opções a mais a quem lê
  • Calendário consistente, ensina os leitores a esperar e a abrir os teus e-mails

Ligar modelos aos dados do cliente

Um modelo bem feito vale tanto quanto o público que alcança. As equipas que mais aproveitam as newsletters ligam os dados da loja à ferramenta de e-mail, para que cada envio seja segmentado e não genérico. A Tajo sincroniza clientes, produtos e encomendas de Shopify com a Brevo, por isso o mesmo modelo pode ser personalizado por segmento: um layout de boas-vindas para novos subscritores, um anúncio de produto para quem já comprou nessa categoria, ou uma oferta de recuperação para clientes inactivos. O modelo mantém-se igual e o conteúdo e o público adaptam-se automaticamente.

Próximos passos

  1. Começa com o plano gratuito da Brevo e explora a biblioteca de modelos
  2. Lê o nosso guia de design de newsletter para dicas avançadas
  3. Vê exemplos de newsletter para te inspirares
  4. Monta a tua primeira campanha de e-mail

Perguntas frequentes

Onde posso conseguir modelos de newsletter gratuitos?
A Brevo inclui dezenas de modelos de newsletter gratuitos e responsivos no editor de arrastar e largar, sem necessidade de conhecimentos de design. Também encontras modelos gratuitos em plataformas como Canva, Stripo e BEEFree.
O que faz um bom modelo de newsletter?
Um bom modelo de newsletter é responsivo em telemóvel, tem hierarquia visual clara, usa as cores da tua marca, inclui um CTA em destaque, carrega depressa e funciona em todos os clientes de e-mail (Gmail, Outlook, Apple Mail).
Preciso de saber HTML para criar modelos de newsletter?
Não. Plataformas modernas como a Brevo oferecem editores de arrastar e largar que criam modelos responsivos e bonitos sem código. Personalizas cores, layouts, imagens e tipos de letra de forma visual.
Com que frequência devo enviar uma newsletter?
Escolhe uma cadência que consigas manter ao longo do tempo. Um calendário previsível, semanal ou mensal, ensina os leitores a esperar e a abrir os teus e-mails, e isso pesa mais do que a frequência em bruto.
Compartilhar este artigo:
Voltar a todos os artigos

Solicite acesso antecipado

Informe seu nome e um e-mail ou número de telefone. Entraremos em contato com os detalhes de acesso à Tajo.

detecção automática
Obter Brevo