Bezplatné šablony newsletterů: 15 nejlepších designů pro každý obor
Objev 15 bezplatných šablon newsletterů pro e-commerce, SaaS, agentury a další. Profesionální designy, které si můžeš přizpůsobit a začít používat ještě dnes s jakoukoliv e-mailovou platformou.
Spouštění newsletteru z prázdného plátna je skličující. Zíráš na prázdný editor a přemýšlíš, jak strukturovat obsah, jaké rozvržení použít a jak to udělat profesionálně, aniž bys strávil hodiny designem.
Šablony newsletterů tento problém řeší. Poskytují osvědčenou strukturu a profesionální design, který si můžeš přizpůsobit vlastním obsahem, brandingem a obrázky. Nejlepší šablony jsou mobilně responzivní, kompatibilní napříč e-mailovými klienty a navrženy s ohledem na konverze.
Tento průvodce pokrývá 15 bezplatných designů šablon newsletterů organizovaných podle oboru a případu použití. Pro každý typ šablony vysvětlujeme principy designu, doporučenou strukturu obsahu a tipy na přizpůsobení.
Co dělá šablonu newsletteru efektivní
Než se ponoříme do konkrétních šablon, je důležité pochopit, co odlišuje dobrou šablonu od skvělé.
Technické požadavky
| Požadavek | Proč záleží |
|---|---|
| Mobilně responzivní | 60 %+ e-mailů je otevíráno na mobilních zařízeních |
| Kompatibilita napříč klienty | Správně se zobrazuje v Gmailu, Outlooku, Apple Mail atd. |
| Rychlé načítání | Obrázky celkem do 1 MB; šablona do 100 KB |
| Podpora tmavého režimu | Rostoucí adopce napříč e-mailovými klienty |
| Přístupnost | Kompatibilní se čtečkami obrazovky, dostatečný kontrast |
| Webově bezpečné fonty | Konzistentní zobrazení napříč platformami |
Principy designu
Vizuální hierarchie. Nejdůležitější obsah by měl být nejvýraznější. Používej velikost, barvu a umístění k vedení čtenářova oka shora dolů.
Přehledné rozvržení. Většina příjemců e-mailů obsah přelétává spíše než čte. Používej nadpisy, odrážky, krátké odstavce a jasné přestávky mezi sekcemi, aby byl obsah stravitelný.
Konzistentní branding. Newsletter by měl být okamžitě rozpoznatelný. Používej firemní barvy, logo a typografii konzistentně v každém čísle.
Jeden sloupec na mobilu. Vícesloupcové rozvržení se může na mobilních zařízeních rozpadnout. Používej jednosloupcové rozvržení nebo zajisti, aby se vícesloupcové sekce čistě skládaly na menších obrazovkách.
Č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
<!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;"> ͏ ͏ ͏ ͏ ͏</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 →</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> · <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> Sleduje váš motiv — přepněte jej v záhlaví a uvidíte ten druhý.
Přečíst HTML šablony The Digest
<!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 Digest</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:#131313 !important; }
.d-card { background-color:#1b1b1b !important; }
.d-ink { color:#f3f3f3 !important; }
.d-mute { color:#a5a5a5 !important; }
.d-rule { border-color:#333333 !important; }
.d-chip { background-color:#10352f !important; color:#7fd8c6 !important; }
}
</style>
</head>
<body class="d-bg" style="margin:0;padding:0;background-color:#f4f3f0;">
<span style="display:none;font-size:1px;color:#fefefe;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">Šest věcí, které stojí za vaše úterý. Dvě jsou o cenách.</span><span style="display:none;font-size:1px;color:#fefefe;"> ͏ ͏ ͏ ͏ ͏</span>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-bg" style="background-color:#f4f3f0;">
<tr><td align="center" style="padding:28px 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;border-radius:6px;">
<tr><td class="gutter" style="padding:30px 32px 22px 32px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="middle" style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-ink" style="margin:0;font-size:20px;line-height:26px;font-weight:800;color:#141414;">The Tuesday Digest</p>
<p class="d-mute" style="margin:4px 0 0 0;font-size:14px;line-height:20px;color:#6b6b6b;">26. srpna 2026 · 6 témat · 9 min</p>
</td>
<td valign="middle" align="right" class="hide-sm">
<span class="d-chip" style="display:inline-block;background:#e2f4ef;color:#00614f;border-radius:999px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:12px;font-weight:700;padding:6px 12px;">ČÍSLO 212</span>
</td>
</tr>
</table>
</td></tr>
<tr><td class="gutter" style="padding:0 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="d-rule" style="border-top:2px solid #141414;font-size:0;line-height:0;"> </td></tr></table></td></tr>
<tr><td class="gutter" style="padding:0 32px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="padding:22px 0;">
<tr>
<td class="row-thumb" width="112" valign="top" style="width:112px;padding:0;padding-right:20px;">
<img src="/_astro/digest-1.gDWNYw1C.png" width="112" height="112" alt="Abstraktní tyrkysové oblouky protnuté šikmým pásem" style="width:112px;height:112px;border-radius:4px;">
</td>
<td valign="top" style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-mute" style="margin:0 0 6px 0;font-size:12px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:#007d6a;">01 · CENY</p>
<p style="margin:0 0 6px 0;font-size:18px;line-height:26px;font-weight:700;">
<a href="https://example.com" class="d-ink" style="color:#141414;text-decoration:none;">Tři firmy přešly na platbu za využití a dvě se vrátily zpět</a>
</p>
<p class="d-mute" style="margin:0;font-size:16px;line-height:26px;color:#555555;">Obě, které couvly, říkají totéž: zátěž podpory vyrostla dřív než tržby.</p>
</td>
</tr>
</table>
</td></tr>
<tr><td class="gutter" style="padding:0 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="d-rule" style="border-top:1px solid #eceae6;font-size:0;line-height:0;"> </td></tr></table></td></tr>
<tr><td class="gutter" style="padding:0 32px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="padding:22px 0;">
<tr>
<td class="row-thumb" width="112" valign="top" style="width:112px;padding:0;padding-right:20px;">
<img src="/_astro/digest-2.ch7Avmad.png" width="112" height="112" alt="Abstraktní tyrkysové kruhy s posunutým ohniskovým bodem" style="width:112px;height:112px;border-radius:4px;">
</td>
<td valign="top" style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-mute" style="margin:0 0 6px 0;font-size:12px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:#007d6a;">02 · DORUČITELNOST</p>
<p style="margin:0 0 6px 0;font-size:18px;line-height:26px;font-weight:700;">
<a href="https://example.com" class="d-ink" style="color:#141414;text-decoration:none;">Pravidla Gmailu pro hromadné odesílatele mají rok. Tohle se skutečně změnilo</a>
</p>
<p class="d-mute" style="margin:0;font-size:16px;line-height:26px;color:#555555;">Míra stížností je jediný práh, ke kterému se vůbec někdo přiblížil. Zbytek byl už tak samozřejmostí.</p>
</td>
</tr>
</table>
</td></tr>
<tr><td class="gutter" style="padding:0 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="d-rule" style="border-top:1px solid #eceae6;font-size:0;line-height:0;"> </td></tr></table></td></tr>
<tr><td class="gutter" style="padding:0 32px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="padding:22px 0;">
<tr>
<td class="row-thumb" width="112" valign="top" style="width:112px;padding:0;padding-right:20px;">
<img src="/_astro/digest-3.DP0eG3wj.png" width="112" height="112" alt="Abstraktní soustředné tyrkysové oblouky na lomené bílé" style="width:112px;height:112px;border-radius:4px;">
</td>
<td valign="top" style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-mute" style="margin:0 0 6px 0;font-size:12px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:#007d6a;">03 · ŘEMESLO</p>
<p style="margin:0 0 6px 0;font-size:18px;line-height:26px;font-weight:700;">
<a href="https://example.com" class="d-ink" style="color:#141414;text-decoration:none;">Archiv newsletteru je vyhledávací produkt, ne seznam odkazů</a>
</p>
<p class="d-mute" style="margin:0;font-size:16px;line-height:26px;color:#555555;">Devět dní práce, nulový přírůstek odběratelů, trojnásobný čas na webu. Zajímavý je právě ten kompromis.</p>
</td>
</tr>
</table>
</td></tr>
<tr><td class="gutter" style="padding:0 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="d-rule" style="border-top:1px solid #eceae6;font-size:0;line-height:0;"> </td></tr></table></td></tr>
<tr><td class="gutter" style="padding:24px 32px 34px 32px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-mute" style="margin:0 0 14px 0;font-size:15px;line-height:24px;color:#555555;">Další tři níže, včetně toho o fakturaci, na který odpovídají všichni.</p>
<!--[if mso]><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#007d6a" style="border-radius:4px;"><![endif]-->
<a href="https://example.com" class="cta" style="background:#007d6a;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">Přečíst všech šest</a>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
<tr><td class="gutter d-rule" style="padding:0 32px;border-top:1px solid #eceae6;"></td></tr>
<tr><td class="gutter" style="padding:20px 32px 30px 32px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-mute" style="margin:0;font-size:13px;line-height:20px;color:#8a8a8a;">The Tuesday Digest, 9 Fitzroy Street, Manchester M1 2AL<br>
<a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Odhlásit odběr</a> · <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Spravovat předvolby</a> · <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> Sleduje váš motiv — přepněte jej v záhlaví a uvidíte ten druhý.
Přečíst HTML šablony The Storefront
<!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 Storefront</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:#141210 !important; }
.d-card { background-color:#1d1a18 !important; }
.d-ink { color:#f5f2ef !important; }
.d-mute { color:#aaa39d !important; }
.d-rule { border-color:#38322d !important; }
.d-tile { background-color:#241f1c !important; }
}
</style>
</head>
<body class="d-bg" style="margin:0;padding:0;background-color:#efece8;">
<span style="display:none;font-size:1px;color:#fefefe;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">Čtyři nové grafiky. Ta s přístavem má 40 kusů a týden nevydrží.</span><span style="display:none;font-size:1px;color:#fefefe;"> ͏ ͏ ͏ ͏ ͏</span>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-bg" style="background-color:#efece8;">
<tr><td align="center" style="padding:24px 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 class="gutter" style="padding:22px 24px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr>
<td class="d-ink" style="font-size:17px;line-height:22px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#141414;">Northlight</td>
<td align="right" class="d-mute hide-sm" style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:13px;line-height:20px;color:#6b6b6b;">Podzimní kolekce · 04</td>
</tr></table>
</td></tr>
<tr><td style="padding:0;">
<img src="/_astro/shop-hero.r4mykM_E.png" width="600" height="360" alt="Čtyři nové grafiky Northlight: překrývající se rezavě červené oblouky na teplé lomené bílé" style="width:100%;height:auto;max-width:600px;">
</td></tr>
<tr><td class="gutter" style="padding:30px 40px 0 40px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<h1 class="h1 d-ink" style="margin:0 0 12px 0;font-size:30px;line-height:38px;font-weight:800;color:#141414;">Čtyři grafiky. Po čtyřiceti kusech.</h1>
<p class="d-mute" style="margin:0 0 22px 0;font-size:16px;line-height:26px;color:#555555;">Každá grafika v této kolekci je tištěná ručně, číslovaná a pryč, jakmile dojde. Tady se nic nedotiskuje.</p>
</td></tr>
<tr><td class="gutter" style="padding:0 40px 26px 40px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<!--[if mso]><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#b8442d" style="border-radius:4px;"><![endif]-->
<a href="https://example.com" class="cta" style="background:#b8442d;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">Prohlédnout kolekci</a>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
<tr><td class="gutter" style="padding:0 32px 8px 32px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td class="stack" width="50%" valign="top" style="width:50%;padding:0 8px 16px 8px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-tile" style="background-color:#faf9f7;border-radius:4px;">
<tr><td style="padding:0;"><img src="/_astro/shop-print-1.B7Z7OyM8.png" width="272" height="272" alt="Harbour, abstraktní grafika v rezavě červené" class="thumb" style="width:100%;height:auto;border-radius:4px 4px 0 0;"></td></tr>
<tr><td style="padding:16px 16px 18px 16px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-ink" style="margin:0 0 2px 0;font-size:16px;line-height:22px;font-weight:700;color:#141414;">Harbour</p>
<p class="d-mute" style="margin:0 0 10px 0;font-size:14px;line-height:20px;color:#6b6b6b;">50 × 70 cm · giclée na bavlněném papíře</p>
<p style="margin:0 0 14px 0;font-size:18px;line-height:24px;font-weight:700;color:#b8442d;">£85</p>
<!--[if mso]><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#b8442d" style="border-radius:4px;"><![endif]-->
<a href="https://example.com" class="cta" style="background:#b8442d;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">Do košíku</a>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
</table>
</td>
<td class="stack" width="50%" valign="top" style="width:50%;padding:0 8px 16px 8px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-tile" style="background-color:#faf9f7;border-radius:4px;">
<tr><td style="padding:0;"><img src="/_astro/shop-print-2.CMBKLJ38.png" width="272" height="272" alt="Dusk, abstraktní grafika v jantarové" class="thumb" style="width:100%;height:auto;border-radius:4px 4px 0 0;"></td></tr>
<tr><td style="padding:16px 16px 18px 16px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-ink" style="margin:0 0 2px 0;font-size:16px;line-height:22px;font-weight:700;color:#141414;">Dusk</p>
<p class="d-mute" style="margin:0 0 10px 0;font-size:14px;line-height:20px;color:#6b6b6b;">50 × 70 cm · giclée na bavlněném papíře</p>
<p style="margin:0 0 14px 0;font-size:18px;line-height:24px;font-weight:700;color:#b8442d;">£85</p>
<!--[if mso]><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#b8442d" style="border-radius:4px;"><![endif]-->
<a href="https://example.com" class="cta" style="background:#b8442d;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">Do košíku</a>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
</table>
</td>
</tr>
<tr>
<td class="stack" width="50%" valign="top" style="width:50%;padding:0 8px 16px 8px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-tile" style="background-color:#faf9f7;border-radius:4px;">
<tr><td style="padding:0;"><img src="/_astro/shop-print-3.C9XLoBz6.png" width="272" height="272" alt="Tide, abstraktní grafika ve fialové" class="thumb" style="width:100%;height:auto;border-radius:4px 4px 0 0;"></td></tr>
<tr><td style="padding:16px 16px 18px 16px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-ink" style="margin:0 0 2px 0;font-size:16px;line-height:22px;font-weight:700;color:#141414;">Tide</p>
<p class="d-mute" style="margin:0 0 10px 0;font-size:14px;line-height:20px;color:#6b6b6b;">40 × 50 cm · giclée na bavlněném papíře</p>
<p style="margin:0 0 14px 0;font-size:18px;line-height:24px;font-weight:700;color:#b8442d;">£65</p>
<!--[if mso]><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#b8442d" style="border-radius:4px;"><![endif]-->
<a href="https://example.com" class="cta" style="background:#b8442d;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">Do košíku</a>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
</table>
</td>
<td class="stack" width="50%" valign="top" style="width:50%;padding:0 8px 16px 8px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-tile" style="background-color:#faf9f7;border-radius:4px;">
<tr><td style="padding:0;"><img src="/_astro/shop-print-4.jL_6WDwF.png" width="272" height="272" alt="Quarry, abstraktní grafika v temně zelené" class="thumb" style="width:100%;height:auto;border-radius:4px 4px 0 0;"></td></tr>
<tr><td style="padding:16px 16px 18px 16px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-ink" style="margin:0 0 2px 0;font-size:16px;line-height:22px;font-weight:700;color:#141414;">Quarry</p>
<p class="d-mute" style="margin:0 0 10px 0;font-size:14px;line-height:20px;color:#6b6b6b;">40 × 50 cm · giclée na bavlněném papíře</p>
<p style="margin:0 0 14px 0;font-size:18px;line-height:24px;font-weight:700;color:#b8442d;">£65</p>
<!--[if mso]><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#b8442d" style="border-radius:4px;"><![endif]-->
<a href="https://example.com" class="cta" style="background:#b8442d;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">Do košíku</a>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
</table>
</td>
</tr>
</table>
</td></tr>
<tr><td class="gutter" style="padding:6px 40px 30px 40px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-tile" style="background:#faf9f7;border-radius:4px;">
<tr><td style="padding:16px 20px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-ink" style="margin:0;font-size:15px;line-height:24px;color:#242424;"><strong>Doprava po Spojeném království zdarma od 75 £.</strong> Možnosti rámování u pokladny. Vrácení do 30 dnů, bez rámu.</p>
</td></tr>
</table>
</td></tr>
<tr><td class="gutter d-rule" style="padding:0 40px;border-top:1px solid #ebe7e2;"></td></tr>
<tr><td class="gutter" style="padding:20px 40px 30px 40px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-mute" style="margin:0;font-size:13px;line-height:20px;color:#8a8a8a;">Northlight Print Co., Unit 4 Wharf Road, Leeds LS10 1JQ<br>
<a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Odhlásit odběr</a> · <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> Sleduje váš motiv — přepněte jej v záhlaví a uvidíte ten druhý.
Přečíst HTML šablony The Brief
<!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 Brief</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:#121212 !important; }
.d-card { background-color:#1a1a1a !important; }
.d-ink { color:#f2f2f2 !important; }
.d-mute { color:#a6a6a6 !important; }
.d-rule { border-color:#333333 !important; }
.d-tile { background-color:#232323 !important; }
.d-track { background-color:#2c2c2c !important; }
}
</style>
</head>
<body class="d-bg" style="margin:0;padding:0;background-color:#f1f0f4;">
<span style="display:none;font-size:1px;color:#fefefe;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">Míra odpovědí vzrostla o 4 body a pořád nevíme proč. Nejlepší odhad uvnitř.</span><span style="display:none;font-size:1px;color:#fefefe;"> ͏ ͏ ͏ ͏ ͏</span>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-bg" style="background-color:#f1f0f4;">
<tr><td align="center" style="padding:26px 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;border-radius:6px;">
<tr><td style="padding:0;background:#141414;border-radius:6px 6px 0 0;">
<img src="/_astro/brief-band.CsaAK-Uv.png" width="600" height="150" alt="Hlavička Ledger Weekly: fialové oblouky na téměř černé" style="width:100%;height:auto;max-width:600px;border-radius:6px 6px 0 0;">
</td></tr>
<tr><td class="gutter" style="padding:26px 32px 18px 32px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p style="margin:0 0 4px 0;font-size:12px;line-height:16px;letter-spacing:.1em;text-transform:uppercase;color:#8f83ff;">Ledger Weekly · Týden 35</p>
<h1 class="h1 d-ink" style="margin:0;font-size:26px;line-height:34px;font-weight:800;color:#141414;">Míra odpovědí se pohnula a nikdo nic nevydal</h1>
</td></tr>
<tr><td class="gutter" style="padding:0 26px 8px 26px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr>
<td class="stack" width="33.33%" valign="top" style="width:33.33%;padding:0 6px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-tile" style="background:#f6f5f8;border-radius:4px;">
<tr><td style="padding:18px 16px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-ink" style="margin:0 0 2px 0;font-size:30px;line-height:36px;font-weight:800;color:#141414;">31.4%</p>
<p class="d-mute" style="margin:0 0 6px 0;font-size:13px;line-height:18px;color:#6b6b6b;">Míra otevření</p>
<p style="margin:0;font-size:13px;line-height:18px;font-weight:700;color:#007d6a;">▲ 1,2 b.</p>
</td></tr>
</table>
</td>
<td class="stack" width="33.33%" valign="top" style="width:33.33%;padding:0 6px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-tile" style="background:#f6f5f8;border-radius:4px;">
<tr><td style="padding:18px 16px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-ink" style="margin:0 0 2px 0;font-size:30px;line-height:36px;font-weight:800;color:#141414;">8.9%</p>
<p class="d-mute" style="margin:0 0 6px 0;font-size:13px;line-height:18px;color:#6b6b6b;">Míra prokliků</p>
<p style="margin:0;font-size:13px;line-height:18px;font-weight:700;color:#b8442d;">▼ 0,4 b.</p>
</td></tr>
</table>
</td>
<td class="stack" width="33.33%" valign="top" style="width:33.33%;padding:0 6px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-tile" style="background:#f6f5f8;border-radius:4px;">
<tr><td style="padding:18px 16px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-ink" style="margin:0 0 2px 0;font-size:30px;line-height:36px;font-weight:800;color:#141414;">6.1%</p>
<p class="d-mute" style="margin:0 0 6px 0;font-size:13px;line-height:18px;color:#6b6b6b;">Míra odpovědí</p>
<p style="margin:0;font-size:13px;line-height:18px;font-weight:700;color:#007d6a;">▲ 4,0 b.</p>
</td></tr>
</table>
</td>
</tr></table>
</td></tr>
<tr><td class="gutter" style="padding:20px 32px 0 32px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-ink" style="margin:0 0 18px 0;font-size:16px;line-height:26px;color:#242424;">V odeslání se nic nezměnilo. Stejný seznam, stejný čtvrtek, stejná šablona. Jediná proměnná, kterou nacházíme, je, že předmět poprvé za jedenáct čísel položil otázku.</p>
<p class="d-mute" style="margin:0 0 10px 0;font-size:12px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:#6b6b6b;">Odpovědi podle segmentu</p>
</td></tr>
<tr><td class="gutter" style="padding:0 32px 22px 32px;">
<table role="presentation" class="chart" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="150" valign="middle" class="d-ink" style="width:150px;padding:7px 0;padding-right:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:20px;color:#242424;">Platící odběratelé</td>
<td valign="middle" style="padding:7px 0;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-track" style="background:#ebe9f2;border-radius:2px;">
<tr><td width="100%" style="width:100%;background:#8f83ff;border-radius:2px;font-size:0;line-height:0;height:18px;"> </td><td style="font-size:0;line-height:0;"> </td></tr>
</table>
</td>
<td width="64" align="right" valign="middle" class="d-mute" style="width:64px;padding:7px 0;padding-left:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:14px;line-height:20px;font-weight:700;color:#555555;">11.2%</td>
</tr>
<tr>
<td width="150" valign="middle" class="d-ink" style="width:150px;padding:7px 0;padding-right:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:20px;color:#242424;">Zdarma, aktivní 90 dní</td>
<td valign="middle" style="padding:7px 0;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-track" style="background:#ebe9f2;border-radius:2px;">
<tr><td width="57%" style="width:57%;background:#8f83ff;border-radius:2px;font-size:0;line-height:0;height:18px;"> </td><td style="font-size:0;line-height:0;"> </td></tr>
</table>
</td>
<td width="64" align="right" valign="middle" class="d-mute" style="width:64px;padding:7px 0;padding-left:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:14px;line-height:20px;font-weight:700;color:#555555;">6.4%</td>
</tr>
<tr>
<td width="150" valign="middle" class="d-ink" style="width:150px;padding:7px 0;padding-right:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:20px;color:#242424;">Zdarma, spící</td>
<td valign="middle" style="padding:7px 0;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-track" style="background:#ebe9f2;border-radius:2px;">
<tr><td width="16%" style="width:16%;background:#8f83ff;border-radius:2px;font-size:0;line-height:0;height:18px;"> </td><td style="font-size:0;line-height:0;"> </td></tr>
</table>
</td>
<td width="64" align="right" valign="middle" class="d-mute" style="width:64px;padding:7px 0;padding-left:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:14px;line-height:20px;font-weight:700;color:#555555;">1.8%</td>
</tr>
<tr>
<td width="150" valign="middle" class="d-ink" style="width:150px;padding:7px 0;padding-right:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:20px;color:#242424;">Zkušební verze</td>
<td valign="middle" style="padding:7px 0;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-track" style="background:#ebe9f2;border-radius:2px;">
<tr><td width="44%" style="width:44%;background:#8f83ff;border-radius:2px;font-size:0;line-height:0;height:18px;"> </td><td style="font-size:0;line-height:0;"> </td></tr>
</table>
</td>
<td width="64" align="right" valign="middle" class="d-mute" style="width:64px;padding:7px 0;padding-left:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:14px;line-height:20px;font-weight:700;color:#555555;">4.9%</td>
</tr>
</table>
</td></tr>
<tr><td class="gutter" style="padding:0 32px 28px 32px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<!--[if mso]><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#141414" style="border-radius:4px;"><![endif]-->
<a href="https://example.com" class="cta" style="background:#141414;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">Přečíst celý rozbor</a>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
<tr><td class="gutter d-rule" style="padding:0 32px;border-top:1px solid #e9e7ee;"></td></tr>
<tr><td class="gutter" style="padding:20px 32px 28px 32px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-mute" style="margin:0;font-size:13px;line-height:20px;color:#8a8a8a;">Ledger Weekly, 2 Cathedral Square, Edinburgh EH1 2QN<br>
<a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Odhlásit odběr</a> · <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> 15 bezplatných designů šablon newsletterů
1. Klasická firemní aktualizace
Vhodné pro: B2B firmy, agentury, profesionální služby
Tato šablona sleduje přímočarou strukturu:
- Logo firmy a záhlaví
- Stručný redakční úvod (2-3 věty)
- 3-4 obsahové bloky s nadpisy, krátkými popisy a CTA
- Zápatí se sociálními odkazy a odhlášením odběru
Designové poznámky: Čisté, profesionální rozvržení s dostatkem bílého prostoru. Používej primární barvu značky pro nadpisy a tlačítka CTA. Omez obrázky na jeden hero obrázek a malé miniatury pro obsahové bloky.
Struktura obsahu:
- Osobní pozdrav od člena týmu
- Hlavní článek nebo oznámení
- 2-3 sekundární obsahové položky
- Sekce rychlých odkazů nebo zdrojů
- Zápatí s kontaktními informacemi
2. Prezentace produktů pro e-commerce
Vhodné pro: Online obchody, retailové značky, DTC firmy
Produktově zaměřené rozvržení navržené k podpoře prodeje:
- Hero banner s hlavním produktem nebo akcí
- Produktová mřížka (2x2 nebo 3x1) s obrázky, názvy, cenami a tlačítky pro nákup
- Sekce s recenzí zákazníka nebo testimonialem
- Sekundární akce nebo novinky
Designové poznámky: Velké, kvalitní obrázky produktů jsou zásadní. Používej mřížkové rozvržení, které se na mobilu skládá do jednoho sloupce. Cena a tlačítka CTA by měla být okamžitě viditelná.
Pro e-commerce značky používající Tajo s Brevo mohou být tyto šablony dynamicky plněny personalizovanými doporučeními produktů na základě prohlížení a nákupní historie každého odběratele. Viz náš průvodce e-commerce e-mail marketingem pro strategie personalizace.
3. Přehled obsahu
Vhodné pro: Mediální firmy, tvůrci obsahu, publikace
Šablona s velkým množstvím obsahu navržená pro prezentaci více článků:
- Hlavní článek s velkým obrázkem a výňatkem
- Seznam 5-8 dalších článků s názvy a jednořádkovými souhrny
- Kategoriové popisky pro každý článek
- Vyznačení “Nejoblíbenější” nebo “Výběr editora”
Designové poznámky: Upřednostni čitelnost s čistou typografií a velkoryse řádkování. Používej konzistentní formátování pro každý článek, aby čtenáři mohli přehled rychle procházet.
4. Osobní newsletter
Vhodné pro: Solopodnikatelé, myšlenkoví lídři, konzultanti
Minimalistická, textově zaměřená šablona, která působí jako osobní dopis:
- Fotografie a jméno autora
- Delší psaný obsah (500-800 slov)
- Minimální obrázky a designové prvky
- Jednoduché textové odkazy spíše než stylizovaná tlačítka
- Osobní podpis
Designové poznámky: Tato šablona uspívá díky jednoduchosti. Použij jednosloupcové rozvržení, standardní fonty a minimální stylizaci. Cílem je působit jako osobní e-mail spíše než marketingová komunikace.
5. Aktualizace SaaS produktu
Vhodné pro: Softwarové firmy, technologické startupy, nástroje pro vývojáře
Funkčně zaměřené rozvržení pro komunikaci aktualizací produktu:
- Záhlaví s číslem verze nebo názvem aktualizace
- Zvýraznění funkcí s obrazovkou nebo GIF
- Odrážkový seznam vylepšení a oprav
- Teaser “Co přijde dál”
- CTA pro vyzkoušení nových funkcí
Designové poznámky: Zahrň snímky obrazovky produktu nebo obrázky rozhraní, aby bylo jasné, co je nového. Použij čistý, moderní design, který odráží estetiku tvého softwaru.
6. Pozvánka na událost
Vhodné pro: Organizátoři akcí, konference, hostitelé webinářů
Jednoúčelová šablona zaměřená na přihlášení:
- Název akce a vizuální branding
- Datum, čas a místo (nebo virtuální platforma)
- Zvýraznění řečníků s fotografiemi a biografiemi
- Přehled programu
- Prominentní CTA pro registraci
- Naléhavost zvýhodněné ceny nebo omezených míst
Designové poznámky: Tlačítko CTA by se mělo zobrazit alespoň dvakrát — jednou nad přelomem stránky a jednou po detailech. Používej odpočítávání nebo naléhavý jazyk tam, kde je to vhodné.
7. Týdenní přehled
Vhodné pro: Oborové newslettery, vydavatelé kurátorovaného obsahu
Strukturovaná šablona pro kurátorování obsahu z celého webu:
- Poznámka editora (2-3 věty)
- 5-10 kurátorovaných odkazů s přiřazením zdroje, názvem a stručným komentářem
- Číslované nebo kategorizované sekce
- Sekce “Sponzor” nebo “Vybrané”, pokud je monetizovaná
- Anketa čtenářů nebo výzva ke zpětné vazbě
Designové poznámky: Jasné číslování a konzistentní formátování pro každou kurátorovanou položku pomáhá čtenářům orientovat se. Používej jemné okraje nebo barvy pozadí pro oddělení sekcí.
8. Zpráva o dopadu neziskové organizace
Vhodné pro: Charity, NGOs, sociální podniky
Šablona navržená pro sdílení příběhů dopadu a podporu darů:
- Titulní statistika dopadu (“Tento měsíc jsme pomohli 1 000 rodinám”)
- Příběh s fotografií (jeden příjemce nebo projekt)
- Ukazatel průběhu k cíli kampaně
- Příležitosti pro dobrovolníky nebo akce
- Tlačítko CTA pro darování
Designové poznámky: Začni s emocionálním dopadem prostřednictvím fotografií a skutečných příběhů. Používej vizualizaci dat (ukazatele průběhu, statistiky) k prokázání konkrétních výsledků.
9. Sezónní akce
Vhodné pro: Retail, pohostinství, sezónní firmy
Vizuálně bohatá šablona navržená pro sváteční a sezónní kampaně:
- Hero obrázek přes celou šířku se sezónní tématikou
- Propagační nabídka s jasně uvedenými podmínkami
- Vybraný výběr produktů nebo dárkový průvodce
- Prvek termínu nebo odpočítávání
- Více CTA v průběhu celého e-mailu
Designové poznámky: Výrazné barvy a sezónní obrazy vyvolávají naléhavost. Zajisti, aby propagační nabídka byla okamžitě jasná bez scrollování. Šablonu důkladně otestuj, protože e-maily s mnoha obrázky mohou mít problémy se zobrazením napříč klienty.
10. Vzdělávací série
Vhodné pro: Online kurzy, koučovací firmy, vzdělávací instituce
Strukturovaná šablona pro doručování vzdělávacího obsahu:
- Číslo lekce a název série
- Klíčový závěr nebo učební cíl
- Hlavní obsah s jasnými sekcemi
- Cvičení nebo výzva k akci
- Ukazatel průběhu (Lekce 3 z 8)
- CTA na další lekci nebo související zdroj
Designové poznámky: Používej konzistentní strukturu ve všech lekcích série, aby odběratelé věděli, co očekávat. Zahrň ukazatel průběhu k motivaci k dokončení.
11. Nabídka nemovitostí
Vhodné pro: Realitní makléři, správcovské firmy nemovitostí
Šablona zaměřená na nemovitosti s bohatými vizuálními prvky:
- Hlavní nabídka s velkou fotogalerií
- Detaily nemovitosti (cena, ložnice, koupelny, rozloha)
- 3-4 další nabídky ve formátu mřížky
- Aktualizace trhu nebo přehled čtvrti
- Kontaktní informace makléře s fotografií
Designové poznámky: Kvalitní fotografie nemovitostí je zásadní. Zahrnout klíčové detaily (cena, velikost, lokalita) viditelné okamžitě bez proklikávání.
12. Restaurace nebo potravinářský podnik
Vhodné pro: Restaurace, rozvoz jídla, cateringové firmy
Vizuálně apetitní šablona:
- Hero obrázek hlavního pokrmu nebo položky menu
- Týdenní speciály nebo nové položky menu
- CTA pro rezervaci nebo objednávku
- Zvýraznění recenze zákazníka
- Informace o poloze a otevírací době
Designové poznámky: Fotografie jídla by měla být profesionální a apetitní. Používej teplé barvy a velkorysé rozestupy. Primární CTA (objednat, rezervovat, navštívit) musí být nepřehlédnutelný.
13. Fitness a wellness
Vhodné pro: Posilovny, osobní trenéři, wellness značky
Energetická šablona zaměřená na motivaci a akci:
- Motivační hero obrázek
- Trénink týdne nebo wellness tip
- Rozvrh lekcí nebo nadcházející akce
- Zvýraznění člena nebo příběh o transformaci
- CTA pro rezervaci nebo členství
Designové poznámky: Používej akčně orientované fotografie a výraznou typografii. Udržuj tón motivující bez toho, aby byl dotěrný.
14. Prezentace portfolia agentury
Vhodné pro: Kreativní agentury, freelanceři, designová studia
Šablona ve stylu portfolia pro prezentaci nedávné práce:
- Hlavní projekt s velkými vizuály a stručnou případovou studií
- 2-3 další nedávné projekty v mřížce
- Testimonial klienta
- Aktualizace týmu nebo náboru
- CTA pro kontakt pro potenciální klienty
Designové poznámky: Nech práci mluvit za sebe pomocí velkých, kvalitních vizuálů. Drž text minimální a zaměřený na výsledky a výstupy spíše než na popisy procesu.
15. Komunitní newsletter
Vhodné pro: Členské organizace, online komunity, místní firmy
Komunitně zaměřená šablona, která podporuje zapojení:
- Komunitní novinky a oznámení
- Zvýraznění nebo rozhovor s členem
- Kalendář nadcházejících akcí
- Diskusní výzvy nebo anketa
- Sekce obsahu generovaného uživateli
- CTA pro přidání/zapojení
Designové poznámky: Zahrň fotografie a jména členů (se svolením) pro budování komunitního spojení. Používej přátelský, inkluzivní tón a povzbuzuj odpovědi a účast.
Kde najít bezplatné šablony newsletterů
Platformy e-mail marketingu
Většina platforem e-mail marketingu zahrnuje bezplatné šablony ve svých plánech:
| Platforma | Bezplatné šablony | Úroveň přizpůsobení | Dostupný bezplatný plán |
|---|---|---|---|
| Brevo | 60+ | Editor drag-and-drop | Ano |
| Mailchimp | 100+ | Editor drag-and-drop | Ano (omezený) |
| HubSpot | 45+ | Editor drag-and-drop | Ano |
| MailerLite | 80+ | Editor drag-and-drop | Ano |
| Constant Contact | 200+ | Editor drag-and-drop | Ne |
Knihovna šablon Brevo je zvláště vhodná pro e-commerce firmy, se šablonami navrženými pro oznámení produktů, potvrzení objednávek a propagační kampaně integrované s daty obchodu přes Tajo.
Zdroje šablon třetích stran
- Litmus Community: Bezplatné, otestované šablony s daty o kompatibilitě napříč klienty
- Really Good Emails: Kurátorovaná galerie skutečných příkladů newsletterů pro inspiraci
- Stripo: Bezplatný tvůrce e-mailových šablon s 1 500+ designy
- BeeFree: Editor drag-and-drop s 200+ bezplatnými responzivními šablonami
- MJML: Open-source framework pro vytváření responzivních e-mailových šablon s kódem
Přizpůsobení šablon pro tvou značku
Základní úpravy
Každá šablona potřebuje před použitím tyto úpravy:
- Logo a firemní barvy: Nahraď výchozí branding vlastním
- Typografie: Používej firemní fonty (s webově bezpečnými záložními)
- Informace v zápatí: Aktualizuj firemními údaji a právními požadavky
- Odkazy na sociální sítě: Přidej skutečné profily
- Odkaz na odhlášení odběru: Ze zákona povinný v každém marketingovém e-mailu
Pokročilé úpravy
Jakmile budeš s šablonou spokojený, zvaž tato vylepšení:
- Dynamické obsahové bloky: Zobrazuj různý obsah různým segmentům odběratelů
- Personalizační tokeny: Vkládej jméno odběratele, lokalitu nebo preference
- Podmíněné sekce: Zobrazuj nebo skrývej sekce na základě atributů odběratele
- Interaktivní prvky: Přidej ankety, průzkumy nebo interaktivitu s podporou AMP
Osvědčené postupy pro šablony newsletterů
Testuj před odesláním. Posílej testovací e-maily minimálně do Gmailu, Outlooku, Apple Mail a Yahoo. Používej nástroj jako Litmus nebo Email on Acid pro komplexní testování napříč klienty.
Optimalizuj obrázky. Komprimuj všechny obrázky pro snížení doby načítání. Zahrň alternativní text pro každý obrázek pro případ, že e-mailový klient obrázky blokuje.
Drž velikost souboru nízkou. Celková velikost e-mailu (HTML + obrázky) by měla být do 100 KB pro HTML a do 1 MB pro celkový obsah. Větší e-maily riskují oříznutí v Gmailu nebo blokování spamovými filtry.
Udržuj konzistenci. Používej stejnou strukturu šablony pro každé číslo newsletteru. Odběratelé si vytvářejí čtenářské návyky kolem známých rozvržení a konzistence buduje důvěru.
Zahrň prostý text. Vždy poskytni alternativu v prostém textu pro e-mailové klienty, které nevykreslují HTML. Většina e-mailových platforem to generuje automaticky, ale zkontroluj čitelnost.
Pravidelně testuj doručitelnost e-mailů. Krásná šablona je k ničemu, pokud přistane ve spamu. Monitoruj reputaci odesílatele a autentizaci (SPF, DKIM, DMARC) spolu se svým designovým úsilím.
Jak začít
Vyber šablonu, která odpovídá tvému oboru a stylu obsahu. Začni s minimálními úpravami — firemní barvy, logo a zápatí — a odešli první číslo. Jak se budeš učit, co rezonuje s tvým publikem prostřednictvím míry otevření a dat o kliknutích, iteruj na designu a struktuře obsahu.
Nejlepší šablona newsletteru není ta vizuálně nejpůsobivější. Je to ta, kterou tvoje publikum konzistentně čte, pravidelně proklikává a těší se na ni.