Šabloni za newsletter: besplatna preuzimanja, saveti za dizajn i najbolji primeri (2026.)

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

newsletter templates

Koji je kratak odgovor?

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

Saznajte više
Na ovoj stranici

TL;DR: Dobar šablon za newsletter responzivan je na mobilnim uređajima, jednokolonski, u skladu sa brendom i izgrađen oko jednog jasnog CTA. Brevo uključuje 40+ besplatnih responzivnih šablona u svom „prevuci i pusti” editoru bez kodiranja; Canva, Stripo i BEEFree su solidne alternative za dizajnerske fajlove.

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

Ovaj vodič pokriva sve o šablonima za newsletter: gde ih besplatno nabaviti, kako dizajnirati efikasne i primere iz svake industrije.

Šta čini sjajan šablon za newsletter

Bitni elementi

  1. Responzivan dizajn za mobilne uređaje, više od 60 % e-mejlova otvara se na mobilnom
  2. Jasna vizuelna hijerarhija, vodite oko od naslova ka CTA
  3. Doslednost brenda, boje, fontovi i smeštanje logoa
  4. Jednokolonski izgled, najbolja čitljivost na svim uređajima
  5. Istaknut CTA, jedna jasna akcija po e-mejlu
  6. Tekst predzaglavlja, proširuje vaš predmet u prijemnom sandučetu
  7. Link za odjavu, zakonski obavezan (CAN-SPAM, GDPR)

Anatomija šablona

┌─────────────────────────┐
│ Logo / Zaglavlje brenda│
├─────────────────────────┤
│ Glavna slika │
├─────────────────────────┤
│ Naslov │
│ Telo (2-3 reda) │
│ [Dugme CTA] │
├─────────────────────────┤
│ Odeljak sadržaja 2 │
│ [Sekundarni CTA] │
├─────────────────────────┤
│ Podnožje / Društveni │
│ Link za odjavu │
└─────────────────────────┘
Tajo šabloni

Četiri rasporeda u radu

Svaka ploča ispod je pravi HTML e-pošte šablona, u okviru stvarne širine. Smanjite širinu na 375 px i gledajte kako se kolone slažu jedna ispod druge.

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

Pročitaj HTML šablona The Letter 6 KB, bez izgradnje
<!DOCTYPE html>
<html lang="sr" 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 beleš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 preseč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;">Pre tri nedelje tražio sam tekst koji sam napisao 2019. i nisam ga našao. Ni na sajtu, ni u izvozu, ni u pretrazi same platforme. Hiljadu dvesta brojeva, a jedini indeks koji je radio 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 deo koji vam niko 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 niko 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 ove nedelje stare brojeve pregradio u pravu arhivu, sa oznakama, punom pretragom teksta i trajnim adresama. Trebalo je devet dana. Broj pretplatnika se nije pomerio. Vreme na sajtu 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 delove koji nisu uspeli.</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 ceo 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čitać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 pregledaču</a></p>
      </td></tr>

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

Izvori besplatnih šablona za newsletter

1. Brevo (preporučeno)

Besplatan plan Brevo uključuje 40+ responzivnih šablona za newsletter ugrađenih u „prevuci i pusti” editor. Kategorije uključuju:

  • E-mejlovi dobrodošlice
  • Najave proizvoda
  • Nedeljni sažeci
  • Pozivnice za događaje
  • Sezonske kampanje

Plus: besplatno, responzivno, lako za prilagođavanje, bez HTML-a Krenite: Otvorite besplatan Brevo nalog

2. Canva

Canva nudi šablone prilagođene e-mailu koje podešavate u njihovom alatu za dizajn.

3. Stripo

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

4. BEEFree

BEE nudi besplatan editor šablona sa profesionalnim dizajnima.

Poređenje izvora besplatnih šablona

IzvorBesplatni šabloniNo-code editorIzvoz u bilo koji ESPNajbolji za
Brevo40+ responzivnihDaNativno (ugrađeno)Slanje kampanja od početka do kraja
Canvamnogo dizajnaDaRučni izvozVizuelno orijentisane marketere
Stripo1.100+DaDaRaznolikost i fleksibilnost ESP-a
BEEFreevelika bibliotekaDaDaSamostalan dizajn šablona

Ako želite jedno mesto za dizajn, personalizaciju i slanje, Brevo je najdirektniji put. Ako vam trebaju samo dizajnerski fajlovi za ubacivanje u drugi alat, Stripo i BEEFree imaju najšire biblioteke.

Najbolje prakse šablona za newsletter

Dizajn

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

Izgled sadržaja

  • Obrnuta piramida: najvažniji sadržaj prvi
  • F-šablon skeniranja: ključne informacije sa leve strane
  • Beli prostor: ne gomilajte sadržaj, pustite ga da diše
  • Odnos slike i teksta: 40 % slike, 60 % tekst (zbog dostavljivosti)

Tehničko

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

Šabloni za newsletter prema vrsti

1. Šablon newslettera dobrodošlice

Svrha: ostaviti odličan prvi utisak Ključni elementi: uvod u brend, predlog vrednosti, šta očekivati, brzi CTA

2. Šablon nedeljnog sažetka

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

3. Šablon najave proizvoda

Svrha: lansiranje novih proizvoda/funkcija Ključni elementi: slika proizvoda, ključne koristi, cena, CTA „kupi”

4. Promotivni šablon

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

5. Edukativni šablon

Svrha: pružati vrednost i graditi poverenje Ključni elementi: saveti ili uputstva, čist izgled, suptilan CTA

Pravljenje newslettera u Brevu

  1. Prijavite se za besplatan plan Brevo
  2. Izaberite šablon iz biblioteke ili krenite od nule
  3. Prilagodite metodom „prevuci i pusti”: dodajte logo, boje, blokove sadržaja
  4. Pregledajte na desktopu i mobilnom
  5. Testirajte slanjem sebi i kolegama
  6. Zakažite ili pošaljite odmah

Brevo editor čuva vaše prilagođene šablone za ponovnu upotrebu, a možete praviti i biblioteke šablona pod brendom za vaš tim.

Saveti za viši angažman

  • Personalizujte pozdrav i sadržaj na osnovu segmenata
  • A/B testirajte različite izglede da pronađete šta radi (vodič za A/B testiranje)
  • Neka bude pregledno, čitaoci u proseku provedu 11 sekundi po e-mejlu
  • Jedan glavni CTA, ne dajte čitaocima previše izbora
  • Dosledan raspored, naučite čitaoce da očekuju i otvaraju vaše e-mejlove

Povezivanje šablona sa podacima o kupcima

Doteran šablon vredi onoliko koliko publika koju doseže. Timovi koji najviše izvuku iz newslettera povezuju podatke svoje prodavnice sa e-mail alatom kako bi svako slanje bilo ciljano, ne generičko. Tajo sinhronizuje podatke o kupcima, proizvodima i porudžbinama iz Shopify u Brevo, pa isti šablon može da bude personalizovan po segmentu: izgled dobrodošlice za nove pretplatnike, najava proizvoda za prethodne kupce te kategorije ili win-back ponuda za uspavane kupce. Šablon ostaje dosledan; sadržaj i publika prilagođavaju se automatski.

Sledeći koraci

  1. Krenite sa besplatnim Brevo planom i istražite njihovu biblioteku šablona
  2. Pročitajte naš vodič za dizajn newslettera za napredne savete
  3. Pogledajte primere newslettera za inspiraciju
  4. Postavite svoju prvu e-mail kampanju

Često Postavljana Pitanja

Gde mogu da pronađem besplatne šablone za newsletter?

Brevo uključuje desetine besplatnih responzivnih šablona za newsletter u svom e-mail editoru sa metodom „prevuci i pusti”, bez potrebe za dizajnerskim veštinama. Besplatne šablone možete pronaći i na platformama kao što su Canva, Stripo i BEEFree.

Šta čini dobar šablon za newsletter?

Dobar šablon za newsletter je responzivan na mobilnim uređajima, ima jasnu vizuelnu hijerarhiju, koristi boje vašeg brenda, uključuje istaknut CTA, brzo se učitava i radi u svim e-mail klijentima (Gmail, Outlook, Apple Mail).

Da li mi treba znanje HTML-a za pravljenje šablona za newsletter?

Ne. Moderne e-mail platforme kao što je Brevo nude editore „prevuci i pusti” koji stvaraju lepe, responzivne šablone bez ikakvog kodiranja. Boje, izglede, slike i fontove podešavate vizuelno.

Koliko često slati newsletter?

Izaberite ritam koji možete dosledno održavati. Predvidiv nedeljni ili mesečni raspored uči čitaoce da očekuju i otvaraju vaše e-mejlove, što je važnije od pukog obima.

Zatražite rani pristup

Unesite ime i poslovnu adresu e-pošte. Poslaćemo vam vezu za potvrdu zahteva za pristup Taju.

Preuzmite Brevo