Pemasaran Email
Desain

Template Newsletter: Unduhan Gratis, Tips Desain & Contoh Terbaik (2026)

Dapatkan template newsletter gratis dan inspirasi desain. Mencakup template HTML responsif, praktik terbaik desain, dan contoh untuk setiap industri.

Set Noa
Set Noa
Diperbarui
0 kunjungan · 7 hari
newsletter templates
Template Newsletter?

Dapatkan template newsletter gratis dan tips desain. Brevo menyertakan template responsif yang dapat disesuaikan di paket gratisnya, tanpa coding.

Pelajari selengkapnya

Ringkasan: Template newsletter yang baik adalah responsif terhadap mobile, satu kolom, on-brand, dan dibangun di sekitar satu CTA yang jelas. Brevo menyertakan 40+ template responsif gratis di editor drag-and-drop tanpa coding; Canva, Stripo, dan BEEFree adalah alternatif yang solid untuk file desain.

Template newsletter yang hebat melakukan pekerjaan berat untuk email marketing Anda, membuat konten Anda terlihat profesional, mengarahkan pembaca ke CTA Anda, dan bekerja dengan sempurna di setiap perangkat dan klien email.

Panduan ini membahas segala hal tentang template newsletter: di mana mendapatkannya secara gratis, cara mendesain yang efektif, dan contoh dari setiap industri.

Apa yang Membuat Template Newsletter Hebat

Elemen Penting

  1. Desain responsif mobile, 60%+ email dibuka di mobile
  2. Hierarki visual yang jelas, Arahkan mata dari headline ke CTA
  3. Konsistensi brand, Warna, font, dan penempatan logo
  4. Layout satu kolom, Keterbacaan terbaik di semua perangkat
  5. CTA yang menonjol, Satu tindakan yang jelas per email
  6. Teks preheader, Perluas subject line Anda di inbox
  7. Link unsubscribe, Diwajibkan oleh hukum (CAN-SPAM, GDPR)

Anatomi Template

┌─────────────────────────┐
│  Logo / Header Brand    │
├─────────────────────────┤
│  Hero Image             │
├─────────────────────────┤
│  Headline               │
│  Body Text (2-3 baris)  │
│  [Tombol CTA]           │
├─────────────────────────┤
│  Bagian Konten 2        │
│  [CTA Sekunder]         │
├─────────────────────────┤
│  Footer / Link Sosial   │
│  Link Unsubscribe       │
└─────────────────────────┘
Templat Tajo

Empat tata letak yang berjalan

Setiap panel di bawah adalah HTML email asli dari templat, dalam bingkai berlebar sungguhan. Tarik lebarnya ke 375 px dan lihat kolom-kolomnya menumpuk.

Mengikuti tema Anda — ganti di bagian atas untuk melihat yang satunya.

Baca HTML The Letter 6 KB, tanpa langkah build 
<!DOCTYPE html>
<html lang="in" 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;">Kutipan yang Anda simpan di aplikasi catatan bekerja lebih keras daripada kalender konten Anda.</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="Kepala surat Meridian Press: busur biru sepusat yang dipotong pita 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 · Edisi 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;">Arsip itulah produknya</h1>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Tiga minggu lalu saya mencari tulisan yang saya buat pada 2019 dan tidak menemukannya. Tidak di situs, tidak di hasil ekspor, tidak di pencarian platformnya sendiri. Seribu dua ratus edisi, dan satu-satunya indeks yang berfungsi adalah ingatan saya.</p>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Itulah bagian yang tak seorang pun ceritakan tentang enam tahun menjalankan buletin. Mengirim itu mudah. Menyimpan tidak.</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;">Semua yang Anda terbitkan adalah setoran. Nyaris tak ada yang membangun penarikannya.</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;">Maka minggu ini saya membangun ulang arsip lama menjadi arsip sungguhan: dengan tag, pencarian teks penuh, dan alamat permanen. Butuh sembilan hari. Jumlah pelanggan tidak bergerak. Waktu kunjung di situs naik tiga kali lipat.</p>
        <p class="d-ink" style="margin:0 0 28px 0;font-size:18px;line-height:30px;color:#242424;">Semuanya ada di bawah, termasuk bagian yang gagal.</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;">Baca edisi lengkapnya &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;">Ditulis tangan setiap Kamis. Balas saja, saya membacanya.</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;">Berhenti berlangganan</a> &middot; <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Lihat di peramban</a></p>
      </td></tr>

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

Sumber Template Newsletter Gratis

1. Brevo (Direkomendasikan)

Paket gratis Brevo mencakup 40+ template newsletter responsif yang terintegrasi dalam editor drag-and-drop. Kategori meliputi:

  • Email selamat datang
  • Pengumuman produk
  • Digest mingguan
  • Undangan acara
  • Kampanye musiman

Kelebihan: Gratis, responsif, mudah disesuaikan, tidak perlu HTML Mulai: Buat akun Brevo gratis

2. Canva

Canva menawarkan template ramah email yang dapat Anda sesuaikan dengan alat desain mereka.

3. Stripo

Stripo menyediakan 1.100+ template email responsif gratis yang dapat diekspor ke ESP mana pun.

4. BEEFree

BEE menawarkan editor template gratis dengan desain profesional.

Perbandingan Sumber Template Gratis

SumberTemplate gratisEditor tanpa kodeEkspor ke ESP mana punTerbaik untuk
Brevo40+ responsifYaNative (terintegrasi)Mengirim kampanye dari awal hingga akhir
CanvaBanyak desainYaEkspor manualMarketer yang mengutamakan visual
Stripo1.100+YaYaVariasi dan fleksibilitas ESP
BEEFreePustaka besarYaYaDesain template berdiri sendiri

Jika Anda ingin satu tempat untuk mendesain, mempersonalisasi, dan mengirim, Brevo adalah jalan paling langsung. Jika Anda hanya membutuhkan file desain untuk diunggah ke alat lain, Stripo dan BEEFree memiliki pustaka terluas.

Praktik Terbaik Template Newsletter

Desain

  • Gunakan lebar maksimal 600px untuk kompatibilitas klien email
  • Pertahankan ukuran font 14-16px untuk body text
  • Gunakan tombol CTA bukan link teks (target ketuk minimum 44x44px)
  • Batasi pada 2-3 warna dari palet brand Anda
  • Gunakan font yang aman untuk web (Arial, Georgia, Verdana) dengan fallback

Layout Konten

  • Piramida terbalik: Konten paling penting di awal
  • Pemindaian pola F: Info penting di sebelah kiri
  • White space: Jangan padatkan konten, beri ruang bernapas
  • Rasio gambar-ke-teks: 40% gambar, 60% teks (untuk deliverability)

Teknis

  • Selalu sertakan alt text untuk gambar
  • Uji di berbagai klien: Gmail, Outlook, Apple Mail, Yahoo
  • Pertahankan total ukuran email di bawah 100KB untuk pemuatan cepat
  • Gunakan inline CSS untuk rendering yang konsisten

Template Newsletter berdasarkan Tipe

1. Template Newsletter Selamat Datang

Tujuan: Membuat kesan pertama yang hebat Elemen kunci: Perkenalan brand, value proposition, apa yang diharapkan, CTA quick-win

2. Template Digest Mingguan

Tujuan: Rangkuman konten reguler Elemen kunci: Bagian yang dikurasi, ringkasan singkat, link baca selengkapnya

3. Template Pengumuman Produk

Tujuan: Meluncurkan produk/fitur baru Elemen kunci: Gambar produk, manfaat utama, harga, CTA beli

4. Template Promosi

Tujuan: Mendorong penjualan dengan penawaran Elemen kunci: Kode diskon, gambar produk, elemen urgensi, CTA belanja

5. Template Edukasi

Tujuan: Memberi nilai dan membangun kepercayaan Elemen kunci: Tips atau konten how-to, layout yang bersih, CTA halus

Membuat Newsletter Anda di Brevo

  1. Daftar untuk paket gratis Brevo
  2. Pilih template dari pustaka atau mulai dari awal
  3. Sesuaikan dengan drag-and-drop: tambahkan logo, warna, blok konten
  4. Preview di desktop dan mobile
  5. Uji dengan mengirim ke diri sendiri dan rekan
  6. Jadwalkan atau kirim segera

Editor Brevo menyimpan template kustom Anda untuk digunakan kembali, dan Anda dapat membuat pustaka template ber-brand untuk tim Anda.

Tips untuk Engagement Lebih Tinggi

  • Personalisasi sapaan dan konten berdasarkan segmen
  • A/B test layout yang berbeda untuk menemukan yang berhasil (panduan A/B testing)
  • Pertahankan agar mudah dipindai, pembaca menghabiskan rata-rata 11 detik per email
  • Satu CTA utama, Jangan beri pembaca terlalu banyak pilihan
  • Jadwal yang konsisten, Latih pembaca untuk mengharapkan dan membuka email Anda

Menghubungkan Template ke Data Pelanggan

Template yang dipoles hanya sebagus audiens yang dijangkaunya. Tim yang mendapatkan hasil terbaik dari newsletter menghubungkan data toko mereka ke alat email sehingga setiap pengiriman ditargetkan, bukan generik. Tajo melakukan sinkronisasi data pelanggan, produk, dan pesanan Shopify ke Brevo, sehingga template yang sama dapat dipersonalisasi per segmen: layout selamat datang untuk pelanggan baru, pengumuman produk untuk pembeli sebelumnya dari kategori itu, atau penawaran win-back untuk pelanggan yang sudah lama tidak aktif. Template tetap konsisten; konten dan audiens beradaptasi secara otomatis.

Langkah Selanjutnya

  1. Mulai dengan paket gratis Brevo dan jelajahi pustaka template mereka
  2. Baca panduan desain newsletter kami untuk tips tingkat lanjut
  3. Lihat contoh newsletter untuk inspirasi
  4. Siapkan kampanye email pertama Anda

Pertanyaan yang sering diajukan

Di mana saya bisa mendapatkan template newsletter gratis?
Brevo menyertakan puluhan template newsletter gratis yang responsif di editor email drag-and-drop, tanpa keahlian desain. Anda juga dapat menemukan template gratis di platform seperti Canva, Stripo, dan BEEFree.
Apa yang membuat template newsletter yang baik?
Template newsletter yang baik adalah responsif terhadap mobile, memiliki hierarki visual yang jelas, menggunakan warna brand Anda, menyertakan CTA yang menonjol, memuat dengan cepat, dan bekerja di semua klien email (Gmail, Outlook, Apple Mail).
Apakah saya perlu keterampilan HTML untuk membuat template newsletter?
Tidak. Platform email modern seperti Brevo menyediakan editor drag-and-drop yang menciptakan template yang indah dan responsif tanpa coding. Anda dapat menyesuaikan warna, layout, gambar, dan font secara visual.
Seberapa sering saya harus mengirim newsletter?
Pilih kadens yang dapat Anda pertahankan secara konsisten. Jadwal mingguan atau bulanan yang dapat diprediksi melatih pembaca untuk mengharapkan dan membuka email Anda, yang lebih penting daripada frekuensi mentah.
Bagikan artikel ini:
Kembali ke semua artikel

Ajukan akses awal

Masukkan nama depan serta email atau nomor telepon Anda. Kami akan menghubungi Anda dengan detail akses Tajo.

deteksi otomatis
Dapatkan Brevo