E-mailový marketing
Design

Šablony newsletteru: bezplatná stažení, tipy pro design a nejlepší příklady (2026)

Získejte bezplatné šablony newsletteru a designovou inspiraci. Obsahuje responzivní HTML šablony, osvědčené postupy designu a příklady pro každý obor.

Set Noa
Set Noa
Aktualizováno
0 návštěvy · 7 dní
newsletter templates
Šablony newsletteru?

Získejte bezplatné šablony newsletteru a tipy pro design. Brevo obsahuje responzivní, přizpůsobitelné šablony ve svém bezplatném plánu, bez kódování.

Zjistit více

TL;DR: Dobrá šablona newsletteru je mobilně responzivní, jednosloupcová, v duchu značky a postavená kolem jednoho jasného CTA. Brevo obsahuje 40+ bezplatných responzivních šablon ve svém drag-and-drop editoru bez nutnosti kódovat; Canva, Stripo a BEEFree jsou solidní alternativy pro designové soubory.

Skvělá šablona newsletteru udělá těžkou práci za váš e-mail marketing: zajistí, že váš obsah vypadá profesionálně, vede čtenáře k vašemu CTA a funguje perfektně na každém zařízení i v každém e-mailovém klientovi.

Tento průvodce pokrývá vše o šablonách newsletteru: kde je získat zdarma, jak navrhovat účinné a příklady z každého oboru.

Co dělá skvělou šablonu newsletteru

Nezbytné prvky

  1. Mobilně responzivní design, 60 %+ e-mailů se otevírá na mobilu
  2. Jasná vizuální hierarchie, veďte oko od titulku k CTA
  3. Konzistence značky, barvy, fonty a umístění loga
  4. Jednosloupcové rozvržení, nejlepší čitelnost napříč zařízeními
  5. Výrazné CTA, jedna jasná akce na e-mail
  6. Preheader text, rozšiřuje váš předmět v doručené poště
  7. Odhlašovací odkaz, vyžadovaný zákonem (CAN-SPAM, GDPR)

Anatomie šablony

┌─────────────────────────┐
│  Logo / Hlavička značky │
├─────────────────────────┤
│  Hlavní obrázek         │
├─────────────────────────┤
│  Titulek                │
│  Text těla (2-3 řádky)  │
│  [Tlačítko CTA]         │
├─────────────────────────┤
│  Sekce obsahu 2         │
│  [Sekundární CTA]       │
├─────────────────────────┤
│  Patička / Sociální     │
│  Odhlašovací odkaz      │
└─────────────────────────┘
Šablony Tajo

Čtyři rozvržení v provozu

Každý panel níže je skutečné e-mailové HTML šablony v rámu o skutečné šířce. Stáhněte šířku na 375 px a sledujte, jak se sloupce skládají pod sebe.

Sleduje váš motiv — přepněte jej v záhlaví a uvidíte ten druhý.

Přečíst HTML šablony The Letter 6 KB, bez sestavení 
<!DOCTYPE html>
<html lang="cz" 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, který si necháváte v poznámkách, odvádí víc práce než váš obsahový kalendář.</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: soustředné modré oblouky protnuté šikmým pásem" 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;">Archiv je ten produkt</h1>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Před třemi týdny jsem hledal text, který jsem napsal v roce 2019, a nenašel jsem ho. Ani na webu, ani v exportu, ani ve vyhledávání samotné platformy. Dvanáct set čísel a jediný fungující rejstřík byla moje paměť.</p>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">To je ta část, kterou vám o šesti letech newsletteru nikdo neřekne. Odesílat je snadné. Uchovávat ne.</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šechno, co publikujete, je vklad. Výběr skoro nikdo nestaví.</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;">Tenhle týden jsem tedy starší čísla přestavěl na skutečný archiv, se štítky, fulltextovým vyhledáváním a trvalými adresami. Zabralo to devět dní. Počet odběratelů se nehnul. Čas strávený na webu se ztrojnásobil.</p>
        <p class="d-ink" style="margin:0 0 28px 0;font-size:18px;line-height:30px;color:#242424;">Všechno je níže, včetně částí, které nevyšly.</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;">Přečíst 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;">Psáno rukou každý čtvrtek. Odpovězte a já si to přečtu.</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ásit odběr</a> &middot; <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Zobrazit v prohlížeči</a></p>
      </td></tr>

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

Zdroje bezplatných šablon newsletteru

1. Brevo (doporučeno)

Bezplatný plán Brevo obsahuje 40+ responzivních šablon newsletteru vestavěných do drag-and-drop editoru. Kategorie zahrnují:

  • Uvítací e-maily
  • Oznámení o produktech
  • Týdenní souhrny
  • Pozvánky na akce
  • Sezónní kampaně

Plus: zdarma, responzivní, snadno přizpůsobitelné, bez HTML Začněte: Vytvořte si bezplatný účet Brevo

2. Canva

Canva nabízí e-mailové šablony, které si přizpůsobíte v jejich designovém nástroji.

3. Stripo

Stripo poskytuje 1 100+ bezplatných responzivních e-mailových šablon exportovatelných do jakéhokoli ESP.

4. BEEFree

BEE nabízí bezplatný editor šablon s profesionálními designy.

Srovnání zdrojů bezplatných šablon

ZdrojBezplatné šablonyNo-code editorExport do jakéhokoli ESPNejlepší pro
Brevo40+ responzivníchAnoNativně (vestavěno)Posílání kampaní od začátku do konce
Canvamnoho designůAnoRuční exportVizuálně zaměřené marketéry
Stripo1 100+AnoAnoVariabilitu a flexibilitu ESP
BEEFreevelká knihovnaAnoAnoSamostatný design šablon

Pokud chcete jedno místo k návrhu, personalizaci a odeslání, Brevo je nejpřímější cesta. Pokud potřebujete jen designové soubory pro vložení do jiného nástroje, Stripo a BEEFree mají nejširší knihovny.

Osvědčené postupy šablon newsletteru

Design

  • Používejte max 600 px šířku pro kompatibilitu s e-mailovými klienty
  • Udržujte velikost písma 14-16 px pro text těla
  • Používejte tlačítka CTA, ne textové odkazy (minimální cíl pro klepnutí 44x44 px)
  • Omezte na 2-3 barvy z palety vaší značky
  • Používejte webově bezpečné fonty (Arial, Georgia, Verdana) se zálohami

Rozvržení obsahu

  • Obrácená pyramida: nejdůležitější obsah jako první
  • F-pattern skenování: klíčové informace vlevo
  • Bílý prostor: nemačkejte obsah, nechte ho dýchat
  • Poměr obrázek/text: 40 % obrázky, 60 % text (kvůli doručitelnosti)

Technické

  • Vždy přidejte alt text k obrázkům
  • Testujte napříč klienty: Gmail, Outlook, Apple Mail, Yahoo
  • Udržujte celkovou velikost e-mailu pod 100 KB pro rychlé načítání
  • Používejte inline CSS pro konzistentní vykreslování

Šablony newsletteru podle typu

1. Šablona uvítacího newsletteru

Účel: udělat skvělý první dojem Klíčové prvky: představení značky, hodnotová nabídka, co očekávat, rychlé CTA

2. Šablona týdenního souhrnu

Účel: pravidelný přehled obsahu Klíčové prvky: kurátorské sekce, krátká shrnutí, odkazy „číst více”

3. Šablona oznámení o produktu

Účel: uvedení nových produktů/funkcí Klíčové prvky: obrázek produktu, klíčové výhody, cena, CTA „koupit”

4. Promo šablona

Účel: podpora prodeje pomocí nabídek Klíčové prvky: slevový kód, obrázky produktů, prvek naléhavosti, CTA „nakupovat”

5. Vzdělávací šablona

Účel: poskytovat hodnotu a budovat důvěru Klíčové prvky: tipy nebo návody, čisté rozvržení, nenápadné CTA

Tvorba newsletteru v Brevo

  1. Zaregistrujte se do bezplatného plánu Brevo
  2. Vyberte šablonu z knihovny nebo začněte od nuly
  3. Přizpůsobte pomocí drag-and-drop: přidejte logo, barvy, bloky obsahu
  4. Náhled na desktopu i mobilu
  5. Otestujte odesláním sobě a kolegům
  6. Naplánujte nebo odešlete ihned

Editor Brevo ukládá vaše vlastní šablony pro opětovné použití a můžete vytvářet značkové knihovny šablon pro váš tým.

Tipy pro vyšší zapojení

  • Personalizujte oslovení a obsah na základě segmentů
  • A/B testujte různá rozvržení a najděte, co funguje (průvodce A/B testováním)
  • Udržujte skenovatelnost, čtenáři tráví průměrně 11 sekund na e-mail
  • Jedno hlavní CTA, nedávejte čtenářům příliš mnoho možností
  • Konzistentní rozvrh, naučte čtenáře očekávat a otevírat vaše e-maily

Propojení šablon s daty zákazníků

Vypilovaná šablona je tak dobrá, jak publikum, které zasahuje. Týmy, které z newsletterů získávají nejvíc, propojují svá obchodní data s e-mailovým nástrojem, aby každé odeslání bylo cílené, ne obecné. Tajo synchronizuje data zákazníků, produktů a objednávek ze Shopify do Brevo, takže stejná šablona může být personalizována na segment: uvítací rozvržení pro nové odběratele, oznámení produktu pro dřívější kupce dané kategorie nebo win-back nabídka pro odešlé zákazníky. Šablona zůstává konzistentní; obsah a publikum se přizpůsobují automaticky.

Další kroky

  1. Začněte s bezplatným plánem Brevo a prozkoumejte jejich knihovnu šablon
  2. Přečtěte si našeho průvodce designem newsletteru pro pokročilé tipy
  3. Podívejte se na příklady newsletterů pro inspiraci
  4. Nastavte si svou první e-mailovou kampaň

Často Kladené Otázky

Kde získám bezplatné šablony newsletteru?
Brevo obsahuje desítky bezplatných responzivních šablon newsletteru ve svém e-mailovém editoru s funkcí drag-and-drop, bez nutnosti designových dovedností. Bezplatné šablony najdete také na platformách jako Canva, Stripo a BEEFree.
Co dělá dobrou šablonu newsletteru?
Dobrá šablona newsletteru je mobilně responzivní, má jasnou vizuální hierarchii, používá barvy vaší značky, obsahuje výrazné CTA, rychle se načítá a funguje napříč všemi e-mailovými klienty (Gmail, Outlook, Apple Mail).
Potřebuji znalost HTML pro tvorbu šablon newsletteru?
Ne. Moderní e-mailové platformy jako Brevo nabízejí drag-and-drop editory, které vytvářejí krásné, responzivní šablony bez jakéhokoli kódování. Barvy, rozvržení, obrázky a fonty si přizpůsobíte vizuálně.
Jak často mám newsletter posílat?
Vyberte si kadenci, kterou udržíte konzistentně. Předvídatelný týdenní nebo měsíční rozvrh učí čtenáře očekávat a otevírat vaše e-maily, což je důležitější než holá frekvence.
Sdílet tento článek:
Zpět na všechny články

Požádejte o přednostní přístup

Uveďte své křestní jméno a e-mail nebo telefonní číslo. Pošleme Vám informace o přístupu k platformě Tajo.

automatické rozpoznání
Získat Brevo