Marketing e-poštom
Dizajn

Predlošci za newsletter: besplatna preuzimanja, savjeti za dizajn i najbolji primjeri (2026.)

Preuzmite besplatne predloške za newsletter i pronađite inspiraciju za dizajn. Uključuje responzivne HTML predloške, najbolje prakse dizajna i primjere za svaku industriju.

Set Noa
Set Noa
Ažurirano
0 posjeti · 7 d
newsletter templates
Predlošci za newsletter?

Preuzmite besplatne predloške za newsletter i savjete za dizajn. Brevo uključuje responzivne, prilagodljive predloške u svom besplatnom planu, bez kodiranja.

Saznajte više

TL;DR: Dobar predložak za newsletter responzivan je na mobilnim uređajima, jednostupčani, u skladu s brendom i izgrađen oko jednog jasnog CTA. Brevo uključuje 40+ besplatnih responzivnih predložaka u svom „povuci i ispusti” uredniku bez potrebe za kodiranjem; Canva, Stripo i BEEFree solidne su alternative za dizajnerske datoteke.

Sjajan predložak za newsletter obavlja teški posao za vaš e-mail marketing: čini da vaš sadržaj izgleda profesionalno, vodi čitatelje do vašeg CTA i savršeno radi na svakom uređaju i u svakom e-mail klijentu.

Ovaj vodič pokriva sve o predlošcima za newsletter: gdje ih nabaviti besplatno, kako dizajnirati učinkovite i primjere iz svake industrije.

Što čini sjajan predložak za newsletter

Bitni elementi

  1. Responzivan dizajn za mobilne uređaje, više od 60 % e-pošte otvara se na mobitelu
  2. Jasna vizualna hijerarhija, vodite oko od naslova prema CTA
  3. Dosljednost brenda, boje, fontovi i smještaj loga
  4. Jednostupčani izgled, najbolja čitljivost na svim uređajima
  5. Istaknuti CTA, jedna jasna radnja po e-pošti
  6. Tekst predzaglavlja, proširite svoj predmet u pretincu pošte
  7. Poveznica za odjavu, zakonom obavezna (CAN-SPAM, GDPR)

Anatomija predloška

┌─────────────────────────┐
│  Logo / Zaglavlje brenda│
├─────────────────────────┤
│  Glavna slika           │
├─────────────────────────┤
│  Naslov                 │
│  Tijelo (2-3 retka)     │
│  [Gumb CTA]             │
├─────────────────────────┤
│  Odjeljak sadržaja 2    │
│  [Sekundarni CTA]       │
├─────────────────────────┤
│  Podnožje / Društveni   │
│  Poveznica za odjavu    │
└─────────────────────────┘
Tajo predlošci

Četiri rasporeda u pogonu

Svaka ploča ispod pravi je HTML e-pošte predloška, u okviru stvarne širine. Smanjite širinu na 375 px i gledajte kako se stupci slažu jedan ispod drugoga.

Prati vašu temu — promijenite je u zaglavlju da vidite drugu.

Pročitaj HTML predloška The Letter 6 KB, bez izgradnje 
<!DOCTYPE html>
<html lang="hr" 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;">Citat koji čuvate u aplikaciji za bilješke radi više od vašeg kalendara sadržaja.</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="Zaglavlje Meridian Pressa: koncentrični plavi lukovi presječeni dijagonalnom trakom" 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 · Broj 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;">Arhiva je proizvod</h1>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Prije tri tjedna tražio sam tekst koji sam napisao 2019. i nisam ga našao. Ni na stranici, ni u izvozu, ni u tražilici same platforme. Tisuću dvjesto brojeva, a jedino kazalo koje je radilo bilo je moje pamćenje.</p>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">To je dio koji vam nitko ne kaže o šest godina newslettera. Slati je lako. Čuvati nije.</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;">Sve što objavite je uplata. Isplatu gotovo nitko ne gradi.</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;">Zato sam ovaj tjedan stare brojeve pregradio u pravu arhivu, s oznakama, punim pretraživanjem teksta i trajnim adresama. Trebalo je devet dana. Broj pretplatnika se nije pomaknuo. Vrijeme na stranici se utrostručilo.</p>
        <p class="d-ink" style="margin:0 0 28px 0;font-size:18px;line-height:30px;color:#242424;">Sve je ispod, uključujući dijelove koji nisu uspjeli.</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;">Pročitaj cijeli broj &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;">Pisano rukom svakog četvrtka. Odgovorite i pročitat ću.</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;">Odjava</a> &middot; <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Prikaži u pregledniku</a></p>
      </td></tr>

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

Izvori besplatnih predložaka za newsletter

1. Brevo (preporučeno)

Besplatan plan Brevo uključuje 40+ responzivnih predložaka za newsletter ugrađenih u „povuci i ispusti” urednik. Kategorije uključuju:

  • E-poruke dobrodošlice
  • Najave proizvoda
  • Tjedne sažetke
  • Pozivnice na događaje
  • Sezonske kampanje

Plus: besplatno, responzivno, lako za prilagodbu, bez HTML-a Krenite: Otvorite besplatan Brevo račun

2. Canva

Canva nudi predloške prilagođene e-pošti koje prilagođavate u njihovom alatu za dizajn.

3. Stripo

Stripo pruža više od 1.100 besplatnih responzivnih e-mail predložaka koji se izvoze u bilo koji ESP.

4. BEEFree

BEE nudi besplatan urednik predložaka s profesionalnim dizajnima.

Usporedba izvora besplatnih predložaka

IzvorBesplatni predlošciNo-code urednikIzvoz u bilo koji ESPNajbolji za
Brevo40+ responzivnihDaNativno (ugrađeno)Slanje kampanja od početka do kraja
Canvamnogo dizajnaDaRučni izvozVizualno orijentirane marketere
Stripo1.100+DaDaRaznolikost i fleksibilnost ESP-a
BEEFreevelika knjižnicaDaDaSamostalni dizajn predložaka

Ako želite jedno mjesto za dizajn, personalizaciju i slanje, Brevo je najizravniji put. Ako trebate samo dizajnerske datoteke koje ćete ubaciti u drugi alat, Stripo i BEEFree imaju najšire knjižnice.

Najbolje prakse predložaka za newsletter

Dizajn

  • Koristite najviše 600 px širine za kompatibilnost s e-mail klijentima
  • Zadržite veličinu fonta 14-16 px za tijelo teksta
  • Koristite gumbove CTA, ne tekstualne poveznice (minimalan cilj dodira 44x44 px)
  • Ograničite na 2-3 boje iz palete vašeg brenda
  • Koristite web-sigurne fontove (Arial, Georgia, Verdana) s pričuvama

Izgled sadržaja

  • Obrnuta piramida: najvažniji sadržaj prvi
  • F-uzorak skeniranja: ključne informacije s lijeve strane
  • Bijeli prostor: nemojte gomilati sadržaj, pustite ga da diše
  • Omjer slike i teksta: 40 % slike, 60 % tekst (radi dostavljivosti)

Tehničko

  • Uvijek dodajte alt tekst za slike
  • Testirajte u različitim klijentima: Gmail, Outlook, Apple Mail, Yahoo
  • Ukupnu veličinu e-pošte držite ispod 100 KB za brzo učitavanje
  • Koristite inline CSS za dosljedno prikazivanje

Predlošci za newsletter prema vrsti

1. Predložak newslettera dobrodošlice

Svrha: ostaviti izvrstan prvi dojam Ključni elementi: uvod u brend, prijedlog vrijednosti, što očekivati, brz CTA

2. Predložak tjednog sažetka

Svrha: redoviti pregled sadržaja Ključni elementi: kuratorske sekcije, kratki sažeci, poveznice „čitaj dalje”

3. Predložak najave proizvoda

Svrha: lansiranje novih proizvoda/značajki Ključni elementi: slika proizvoda, ključne koristi, cijena, CTA „kupi”

4. Promotivni predložak

Svrha: poticati prodaju ponudama Ključni elementi: kod za popust, slike proizvoda, element hitnosti, CTA „kupuj”

5. Edukativni predložak

Svrha: pružati vrijednost i graditi povjerenje Ključni elementi: savjeti ili upute, čist izgled, suptilan CTA

Izrada newslettera u Brevu

  1. Prijavite se za besplatan plan Brevo
  2. Odaberite predložak iz knjižnice ili krenite od nule
  3. Prilagodite metodom „povuci i ispusti”: dodajte logo, boje, blokove sadržaja
  4. Pregledajte na računalu i mobitelu
  5. Testirajte slanjem sebi i kolegama
  6. Rasporedite ili pošaljite odmah

Brevo urednik sprema vaše prilagođene predloške za ponovnu uporabu, a možete stvarati i knjižnice predložaka pod brendom za svoj tim.

Savjeti za viši angažman

  • Personalizirajte pozdrav i sadržaj na temelju segmenata
  • A/B testirajte različite izglede da pronađete što radi (vodič za A/B testiranje)
  • Neka bude pregledno, čitatelji prosječno provedu 11 sekundi po e-poruci
  • Jedan glavni CTA, ne dajte čitateljima previše izbora
  • Dosljedan raspored, naučite čitatelje da očekuju i otvaraju vaše e-poruke

Povezivanje predložaka s podacima o kupcima

Brušeni predložak vrijedi onoliko koliko publika koju dosegne. Timovi koji najviše izvuku iz newslettera povezuju podatke svoje trgovine s e-mail alatom kako bi svako slanje bilo ciljano, ne generičko. Tajo sinkronizira podatke o kupcima, proizvodima i narudžbama iz Shopifyja u Brevo, pa se isti predložak može personalizirati po segmentu: izgled dobrodošlice za nove pretplatnike, najava proizvoda za prošle kupce te kategorije ili win-back ponuda za uspavane kupce. Predložak ostaje dosljedan; sadržaj i publika prilagođavaju se automatski.

Sljedeći koraci

  1. Krenite s besplatnim Brevo planom i istražite njihovu knjižnicu predložaka
  2. Pročitajte naš vodič za dizajn newslettera za napredne savjete
  3. Pogledajte primjere newslettera za inspiraciju
  4. Postavite svoju prvu e-mail kampanju

Često postavljana pitanja

Gdje mogu pronaći besplatne predloške za newsletter?
Brevo uključuje desetke besplatnih responzivnih predložaka za newsletter u svojem e-mail uredniku „povuci i ispusti”, bez potrebe za dizajnerskim vještinama. Besplatne predloške možete pronaći i na platformama poput Canve, Stripa i BEEFree-a.
Što čini dobar predložak za newsletter?
Dobar predložak za newsletter responzivan je na mobilnim uređajima, ima jasnu vizualnu hijerarhiju, koristi boje vašeg brenda, uključuje istaknuti CTA, brzo se učitava i radi u svim e-mail klijentima (Gmail, Outlook, Apple Mail).
Trebam li znanje HTML-a za izradu predložaka za newsletter?
Ne. Moderne e-mail platforme poput Breva nude urednike „povuci i ispusti” koji stvaraju lijepe, responzivne predloške bez ikakvog kodiranja. Boje, izglede, slike i fontove prilagođavate vizualno.
Koliko često slati newsletter?
Odaberite ritam koji možete dosljedno održavati. Predvidljiv tjedni ili mjesečni raspored uči čitatelje da očekuju i otvaraju vaše e-poruke, što je važnije od pukog volumena.
Podijelite ovaj članak:
Natrag na sve članke

Zatražite rani pristup

Unesite ime te adresu e-pošte ili telefonski broj. Poslat ćemo vam pojedinosti o pristupu platformi Tajo.

automatsko prepoznavanje
Nabavi Brevo