Newsletter šablóny: bezplatné stiahnutia, tipy na dizajn a najlepšie príklady (2026)

Získajte bezplatné newsletter šablóny a inšpiráciu pre dizajn. Obsahuje responzívne HTML šablóny, najlepšie postupy dizajnu a príklady pre každé odvetvie.

newsletter templates
Newsletter šablóny?

Získajte bezplatné newsletter šablóny a tipy na dizajn. Brevo obsahuje responzívne, prispôsobiteľné šablóny vo svojom bezplatnom pláne, bez kódovania.

Zistiť viac

TL;DR: Dobrá newsletter šablóna je mobilne responzívna, jednostĺpcová, v duchu značky a postavená okolo jedného jasného CTA. Brevo obsahuje 40+ bezplatných responzívnych šablón vo svojom drag-and-drop editore bez kódovania; Canva, Stripo a BEEFree sú solídne alternatívy pre dizajnové súbory.

Skvelá newsletter šablóna urobí ťažkú prácu za váš e-mail marketing: zabezpečí, že váš obsah vyzerá profesionálne, vedie čitateľov k vášmu CTA a funguje perfektne na každom zariadení i v každom e-mailovom klientovi.

Tento sprievodca pokrýva všetko o newsletter šablónach: kde ich získať zadarmo, ako navrhovať účinné a príklady z každého odvetvia.

Čo robí skvelú newsletter šablónu

Nevyhnutné prvky

  1. Mobilne responzívny dizajn, 60 %+ e-mailov sa otvára na mobile
  2. Jasná vizuálna hierarchia, veďte oko od titulku k CTA
  3. Konzistencia značky, farby, fonty a umiestnenie loga
  4. Jednostĺpcové rozloženie, najlepšia čitateľnosť naprieč zariadeniami
  5. Výrazné CTA, jedna jasná akcia na e-mail
  6. Preheader text, rozširuje váš predmet v doručenej pošte
  7. Odhlasovací odkaz, vyžadovaný zákonom (CAN-SPAM, GDPR)

Anatómia šablóny

┌─────────────────────────┐
│ Logo / Hlavička značky │
├─────────────────────────┤
│ Hlavný obrázok │
├─────────────────────────┤
│ Titulok │
│ Text tela (2-3 riadky) │
│ [Tlačidlo CTA] │
├─────────────────────────┤
│ Sekcia obsahu 2 │
│ [Sekundárne CTA] │
├─────────────────────────┤
│ Päta / Sociálne │
│ Odhlasovací odkaz │
└─────────────────────────┘
Šablóny Tajo

Štyri rozloženia v prevádzke

Každý panel nižšie je skutočné e-mailové HTML šablóny v ráme so skutočnou šírkou. Stiahnite šírku na 375 px a sledujte, ako sa stĺpce skladajú pod seba.

Sleduje váš motív — prepnite ho v hlavičke a uvidíte ten druhý.

Prečítať HTML šablóny The Letter 6 KB, bez zostavenia
<!DOCTYPE html>
<html lang="sk" 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;">Citát, ktorý si necháte v poznámkach, odvádza viac práce než váš obsahový kalendár.</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="Hlavička Meridian Press: sústredné modré oblúky pretnuté šikmým pásom" 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 · Číslo 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;">Archív je ten produkt</h1>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Pred tromi týždňami som hľadal text, ktorý som napísal v roku 2019, a nenašiel som ho. Ani na webe, ani v exporte, ani vo vyhľadávaní samotnej platformy. Tisícdvesto čísel a jediný fungujúci register bola moja pamäť.</p>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">To je tá časť, ktorú vám o šiestich rokoch newslettera nikto nepovie. Odosielať je ľahké. Uchovávať nie.</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;">Všetko, čo publikujete, je vklad. Výber takmer nikto nestavia.</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;">Tento týždeň som teda staršie čísla prestaval na skutočný archív, so štítkami, fulltextovým vyhľadávaním a trvalými adresami. Trvalo to deväť dní. Počet odberateľov sa nepohol. Čas strávený na webe sa strojnásobil.</p>
        <p class="d-ink" style="margin:0 0 28px 0;font-size:18px;line-height:30px;color:#242424;">Všetko je nižšie, vrátane častí, ktoré nevyšli.</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;">Prečítať celé číslo &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;">Písané rukou každý štvrtok. Odpovedzte a ja si to prečítam.</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;">Odhlásiť odber</a> &middot; <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Zobraziť v prehliadači</a></p>
      </td></tr>

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

Zdroje bezplatných newsletter šablón

1. Brevo (odporúčané)

Bezplatný plán Brevo obsahuje 40+ responzívnych newsletter šablón vstavaných do drag-and-drop editora. Kategórie zahŕňajú:

  • Uvítacie e-maily
  • Oznámenia o produktoch
  • Týždenné súhrny
  • Pozvánky na akcie
  • Sezónne kampane

Plusy: zdarma, responzívne, ľahko prispôsobiteľné, bez HTML Začnite: Vytvorte si bezplatný účet Brevo

2. Canva

Canva ponúka e-mailové šablóny, ktoré si prispôsobíte v ich dizajnovom nástroji.

3. Stripo

Stripo poskytuje 1 100+ bezplatných responzívnych e-mailových šablón exportovateľných do akéhokoľvek ESP.

4. BEEFree

BEE ponúka bezplatný editor šablón s profesionálnymi dizajnmi.

Porovnanie zdrojov bezplatných šablón

ZdrojBezplatné šablónyNo-code editorExport do akéhokoľvek ESPNajlepšie pre
Brevo40+ responzívnychÁnoNatívne (vstavané)Posielanie kampaní od začiatku do konca
Canvamnoho dizajnovÁnoManuálny exportVizuálne zameraných marketérov
Stripo1 100+ÁnoÁnoVariabilitu a flexibilitu ESP
BEEFreeveľká knižnicaÁnoÁnoSamostatný dizajn šablón

Ak chcete jedno miesto na návrh, personalizáciu a odoslanie, Brevo je najpriamejšia cesta. Ak potrebujete iba dizajnové súbory na vloženie do iného nástroja, Stripo a BEEFree majú najširšie knižnice.

Najlepšie postupy newsletter šablón

Dizajn

  • Používajte max 600 px šírku pre kompatibilitu s e-mailovými klientmi
  • Udržujte veľkosť písma 14-16 px pre text tela
  • Používajte tlačidlá CTA, nie textové odkazy (minimálny cieľ pre poklepanie 44x44 px)
  • Obmedzte na 2-3 farby z palety vašej značky
  • Používajte webovo bezpečné fonty (Arial, Georgia, Verdana) so zálohami

Rozloženie obsahu

  • Obrátená pyramída: najdôležitejší obsah ako prvý
  • F-pattern skenovanie: kľúčové informácie vľavo
  • Biele miesto: nedávajte obsah na seba, nechajte ho dýchať
  • Pomer obrázok/text: 40 % obrázky, 60 % text (kvôli doručiteľnosti)

Technické

  • Vždy pridajte alt text k obrázkom
  • Testujte naprieč klientmi: Gmail, Outlook, Apple Mail, Yahoo
  • Udržujte celkovú veľkosť e-mailu pod 100 KB pre rýchle načítanie
  • Používajte inline CSS pre konzistentné vykreslenie

Newsletter šablóny podľa typu

1. Šablóna uvítacieho newslettera

Účel: urobiť skvelý prvý dojem Kľúčové prvky: predstavenie značky, hodnotová ponuka, čo očakávať, rýchle CTA

2. Šablóna týždenného súhrnu

Účel: pravidelný prehľad obsahu Kľúčové prvky: kurátorské sekcie, krátke zhrnutia, odkazy „čítať viac”

3. Šablóna oznámenia o produkte

Účel: uvedenie nových produktov/funkcií Kľúčové prvky: obrázok produktu, kľúčové výhody, cena, CTA „kúpiť”

4. Promo šablóna

Účel: podpora predaja prostredníctvom ponúk Kľúčové prvky: zľavový kód, obrázky produktov, prvok naliehavosti, CTA „nakupovať”

5. Vzdelávacia šablóna

Účel: poskytnúť hodnotu a budovať dôveru Kľúčové prvky: tipy alebo návody, čisté rozloženie, nenápadné CTA

Tvorba newslettera v Brevo

  1. Zaregistrujte sa do bezplatného plánu Brevo
  2. Vyberte šablónu z knižnice alebo začnite od nuly
  3. Prispôsobte pomocou drag-and-drop: pridajte logo, farby, bloky obsahu
  4. Náhľad na desktope i mobile
  5. Otestujte odoslaním sebe a kolegom
  6. Naplánujte alebo odošlite hneď

Editor Brevo ukladá vaše vlastné šablóny na opätovné použitie a môžete vytvárať značkové knižnice šablón pre váš tím.

Tipy pre vyššie zapojenie

  • Personalizujte oslovenie a obsah na základe segmentov
  • A/B testujte rôzne rozloženia a nájdite, čo funguje (sprievodca A/B testovaním)
  • Udržujte skenovateľnosť, čitatelia trávia v priemere 11 sekúnd na e-mail
  • Jedno hlavné CTA, nedávajte čitateľom príliš veľa možností
  • Konzistentný rozvrh, naučte čitateľov očakávať a otvárať vaše e-maily

Prepojenie šablón s dátami zákazníkov

Vypilovaná šablóna je taká dobrá, ako publikum, ktoré zasahuje. Tímy, ktoré z newsletterov získavajú najviac, prepájajú svoje obchodné dáta s e-mailovým nástrojom, aby každé odoslanie bolo cielené, nie generické. Tajo synchronizuje dáta zákazníkov, produktov a objednávok zo Shopify do Brevo, takže tá istá šablóna môže byť personalizovaná na segment: uvítacie rozloženie pre nových odberateľov, oznámenie produktu pre predošlých kupcov danej kategórie alebo win-back ponuka pre odlivajúcich sa zákazníkov. Šablóna zostáva konzistentná; obsah a publikum sa prispôsobujú automaticky.

Ďalšie kroky

  1. Začnite s bezplatným plánom Brevo a preskúmajte ich knižnicu šablón
  2. Prečítajte si nášho sprievodcu dizajnom newslettera pre pokročilé tipy
  3. Pozrite si príklady newsletterov pre inšpiráciu
  4. Nastavte si svoju prvú e-mailovú kampaň

Často Kladené Otázky

Kde získam bezplatné newsletter šablóny?
Brevo obsahuje desiatky bezplatných responzívnych newsletter šablón vo svojom e-mailovom editore s funkciou drag-and-drop, bez potreby dizajnových zručností. Bezplatné šablóny nájdete aj na platformách ako Canva, Stripo a BEEFree.
Čo robí dobrú newsletter šablónu?
Dobrá newsletter šablóna je mobilne responzívna, má jasnú vizuálnu hierarchiu, používa farby vašej značky, obsahuje výrazné CTA, rýchlo sa načítava a funguje vo všetkých e-mailových klientoch (Gmail, Outlook, Apple Mail).
Potrebujem znalosť HTML na tvorbu newsletter šablón?
Nie. Moderné e-mailové platformy ako Brevo ponúkajú drag-and-drop editory, ktoré vytvárajú krásne responzívne šablóny bez akéhokoľvek kódovania. Farby, rozloženia, obrázky a fonty si prispôsobíte vizuálne.
Ako často mám newsletter posielať?
Vyberte si kadenciu, ktorú udržíte konzistentne. Predvídateľný týždenný alebo mesačný rozvrh učí čitateľov očakávať a otvárať vaše e-maily, čo je dôležitejšie než holá frekvencia.

Požiadajte o skorý prístup

Uveďte svoje krstné meno a e-mailovú adresu alebo telefónne číslo. Pošleme Vám podrobnosti o prístupe k platforme Tajo.

automatické rozpoznanie
Získať Brevo