Ingyenes hírlevél sablonok: 15 legjobb design minden iparágnak
Fedezz fel 15 ingyenes hírlevél sablont e-kereskedelemhez, SaaS-hoz, ügynökségekhez és máshoz. Professzionális dizájnok, amelyeket testreszabhatsz és használhatsz bármely e-mail platformmal.
Egy hírlevél megírása üres lapról ijesztő feladat. Csak nézed az üres szerkesztőt, és azon töprengsz, hogyan strukturáld a tartalmat, milyen elrendezést válassz, és hogyan tedd professzionálissá anélkül, hogy órákat töltenél a dizájnnal.
A hírlevél sablonok megoldják ezt a problémát. Bevált struktúrát és professzionális dizájnt adnak, amelyet a saját tartalmaddal, márkaarculatoddal és képeiddel tudsz testreszabni. A legjobb sablonok mobilbarátok, kompatibilisek a különböző e-mail kliensekkel, és konverzióra optimalizáltak.
Ez az útmutató 15 ingyenes hírlevél sablont mutat be iparágak és felhasználási esetek szerint csoportosítva. Minden sablontípusnál bemutatjuk a tervezési alapelveket, a javasolt tartalomstruktúrát és a testreszabási tippeket.
Mi tesz egy hírlevél sablont hatékonnyá
Mielőtt belevágnánk a konkrét sablonokba, fontos megérteni, mi különbözteti meg a jó sablont a kiválótól.
Technikai követelmények
| Követelmény | Miért fontos |
|---|---|
| Mobilbarát | Az e-mailek 60%-át mobil eszközökön nyitják meg |
| Kliens-kompatibilitás | Helyesen jelenik meg Gmailben, Outlookban, Apple Mailben stb. |
| Gyors betöltés | A képek összesen 1MB alatt; a sablon 100KB alatt |
| Sötét mód támogatás | Egyre több e-mail kliens támogatja |
| Akadálymentesség | Képernyőolvasó-kompatibilis, megfelelő kontraszt |
| Web-biztos betűtípusok | Egységes megjelenés különböző platformokon |
Tervezési alapelvek
Vizuális hierarchia. A legfontosabb tartalomnak kell a leghangsúlyosabbnak lennie. Méret, szín és pozicionálás segítségével vezesd az olvasó tekintetét fentről lefelé.
Átlátható elrendezés. A legtöbb e-mail címzett átfutja, nem olvassa végig az üzeneteket. Használj fejléceket, felsorolásokat, rövid bekezdéseket és egyértelmű szakaszhatárokat, hogy a tartalom emészthető legyen.
Egységes márkaarculat. A hírleveled azonnal felismerhető legyen. Használd márkád színeit, logóját és tipográfiáját következetesen minden számban.
Egyoszlopos elrendezés mobilon. A többoszlopos elrendezések megtörhetnek mobil eszközökön. Használj egyoszlopos elrendezést, vagy gondoskodj róla, hogy a többoszlopos szakaszok tisztán egymás alá rendeződjenek kisebb képernyőkön.
Négy elrendezés működés közben
Az alábbi panelek mindegyike a sablon valódi e-mail HTML-je, valódi szélességű keretben. Húzza a szélességet 375 px-re, és nézze meg, hogyan rendeződnek egymás alá az oszlopok.
Követi a témáját — váltson a fejlécben, ha a másikat szeretné látni.
A(z) The Letter HTML-jének elolvasása
<!DOCTYPE html>
<html lang="hu" 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;">Az az idézet, amit a jegyzetalkalmazásában őriz, többet dolgozik, mint a tartalomnaptára.</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="Meridian Press fejléc: koncentrikus kék ívek, átlós sávval keresztezve" 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 · 47. szám</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;">Az archívum maga a termék</h1>
<p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Három hete kerestem egy 2019-ben írt szöveget, és nem találtam. Sem az oldalon, sem az exportban, sem a platform saját keresőjében. Ezerkétszáz szám, és az egyetlen működő mutató a memóriám volt.</p>
<p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Ezt nem mondja el senki hat év hírlevélről. Küldeni könnyű. Megőrizni nem.</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;">Minden, amit közzétesz, betét. A kivételt szinte senki nem építi meg.</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;">Ezen a héten tehát valódi archívummá építettem újra a korábbi számokat: címkékkel, teljes szöveges kereséssel és állandó címekkel. Kilenc napig tartott. Az előfizetők száma nem mozdult. Az oldalon töltött idő megháromszorozódott.</p>
<p class="d-ink" style="margin:0 0 28px 0;font-size:18px;line-height:30px;color:#242424;">Az egész lent van, azokkal a részekkel együtt, amelyek nem működtek.</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;">A teljes szám elolvasása →</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;">Minden csütörtökön kézzel írom. Válaszoljon, és elolvasom.</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;">Leiratkozás</a> · <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Megtekintés böngészőben</a></p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html> Követi a témáját — váltson a fejlécben, ha a másikat szeretné látni.
A(z) The Digest HTML-jének elolvasása
<!DOCTYPE html>
<html lang="hu" 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;">Hat dolog, ami megéri a keddjét. Kettő az árazásról szól.</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;">2026. augusztus 26. · 6 téma · 9 perc</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;">212. SZÁM</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="Absztrakt türkiz ívek, átlós sávval keresztezve" 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 · ÁRAZÁS</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;">Három cég áttért a használatalapú árazásra, kettő visszatért</a>
</p>
<p class="d-mute" style="margin:0;font-size:16px;line-height:26px;color:#555555;">Mindkét visszatérő ugyanazt mondja: a támogatási terhelés hamarabb nőtt, mint a bevétel.</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="Absztrakt türkiz gyűrűk eltolt fókuszponttal" 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 · KÉZBESÍTHETŐSÉG</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;">A Gmail tömeges feladókra vonatkozó szabályai egyévesek. Íme, ami valóban változott</a>
</p>
<p class="d-mute" style="margin:0;font-size:16px;line-height:26px;color:#555555;">A panaszarány az egyetlen küszöb, amelyet bárki megközelített. A többi eddig is alapelvárás volt.</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="Absztrakt koncentrikus türkiz ívek törtfehér alapon" 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 · MESTERSÉG</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;">A hírlevélarchívum keresési termék, nem hivatkozáslista</a>
</p>
<p class="d-mute" style="margin:0;font-size:16px;line-height:26px;color:#555555;">Kilenc nap munka, nulla előfizetőnövekedés, háromszoros idő az oldalon. Éppen a kompromisszum az érdekes.</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;">Lent még három, köztük az a számlázásról szóló, amelyre mindenki válaszol.</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;">Mind a hat elolvasása</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;">Leiratkozás</a> · <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Beállítások kezelése</a> · <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Megtekintés böngészőben</a></p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html> Követi a témáját — váltson a fejlécben, ha a másikat szeretné látni.
A(z) The Storefront HTML-jének elolvasása
<!DOCTYPE html>
<html lang="hu" 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;">Négy új nyomat. A kikötős 40 példány, és nem éli túl a hetet.</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;">Őszi kollekció · 04</td>
</tr></table>
</td></tr>
<tr><td style="padding:0;">
<img src="/_astro/shop-hero.r4mykM_E.png" width="600" height="360" alt="Négy új Northlight nyomat: egymást átfedő rozsdavörös ívek meleg törtfehér alapon" 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;">Négy nyomat. Egyenként negyven példány.</h1>
<p class="d-mute" style="margin:0 0 22px 0;font-size:16px;line-height:26px;color:#555555;">A kollekció minden nyomata kézzel készült, számozott, és elfogy, amikor elfogy. Itt semmit nem nyomunk újra.</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;">Kollekció megtekintése</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, absztrakt nyomat rozsdavörösben" 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 pamutpapíron</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;">Kosárba</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, absztrakt nyomat borostyánsárgában" 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 pamutpapíron</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;">Kosárba</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, absztrakt nyomat ibolyakékben" 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 pamutpapíron</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;">Kosárba</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, absztrakt nyomat mélyzöldben" 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 pamutpapíron</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;">Kosárba</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>Ingyenes szállítás az Egyesült Királyságban 75 £ felett.</strong> Keretezési lehetőségek a fizetésnél. Visszaküldés 30 napon belül, keret nélkül.</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;">Leiratkozás</a> · <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Megtekintés böngészőben</a></p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html> Követi a témáját — váltson a fejlécben, ha a másikat szeretné látni.
A(z) The Brief HTML-jének elolvasása
<!DOCTYPE html>
<html lang="hu" 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;">A válaszarány 4 ponttal nőtt, és még mindig nem tudjuk, miért. A legjobb tippünk odabent.</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="Ledger Weekly fejléc: ibolyakék ívek majdnem feketén" 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 · 35. hét</p>
<h1 class="h1 d-ink" style="margin:0;font-size:26px;line-height:34px;font-weight:800;color:#141414;">A válaszarány elmozdult, és senki nem adott ki semmit</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;">Megnyitási arány</p>
<p style="margin:0;font-size:13px;line-height:18px;font-weight:700;color:#007d6a;">▲ 1,2 pont</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;">Kattintási arány</p>
<p style="margin:0;font-size:13px;line-height:18px;font-weight:700;color:#b8442d;">▼ 0,4 pont</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;">Válaszarány</p>
<p style="margin:0;font-size:13px;line-height:18px;font-weight:700;color:#007d6a;">▲ 4,0 pont</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;">A küldésben semmi nem változott. Ugyanaz a lista, ugyanaz a csütörtök, ugyanaz a sablon. Az egyetlen változó, amit találunk: a tárgy tizenegy szám óta először tett fel kérdést.</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;">Válaszok szegmensenként</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;">Fizető előfizetők</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;">Ingyenes, 90 napja aktív</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;">Ingyenes, alvó</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;">Próbaidőszak</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;">A teljes elemzés elolvasása</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;">Leiratkozás</a> · <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Megtekintés böngészőben</a></p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html> 15 ingyenes hírlevél sablon dizájn
1. A klasszikus céges hírlevél
Kinek ajánlott: B2B vállalatok, ügynökségek, professzionális szolgáltatók
Ez a sablon egyszerű felépítést követ:
- Céglogó és fejléc
- Rövid szerkesztői bevezető (2-3 mondat)
- 3-4 tartalomblokk címsorokkal, rövid leírásokkal és CTA gombokkal
- Lábléc közösségi linkekkel és leiratkozással
Tervezési megjegyzések: Letisztult, professzionális elrendezés bőséges üres területtel. Használd márkád elsődleges színét a fejlécekhez és CTA gombokhoz. Korlátozd a képeket egy hero képre és kis méretű előnézeti képekre a tartalomblokkokhoz.
Tartalomstruktúra:
- Személyes üdvözlés egy csapattagtól
- Kiemelt cikk vagy bejelentés
- 2-3 másodlagos tartalmi elem
- Gyors linkek vagy források szekció
- Lábléc kapcsolati információkkal
2. Az e-kereskedelmi termékbemutató
Kinek ajánlott: Webáruházak, kiskereskedelmi márkák, DTC vállalatok
Termékközpontú elrendezés értékesítés ösztönzésére:
- Hero banner kiemelt termékkel vagy akcióval
- Termékrács (2x2 vagy 3x1) képekkel, nevekkel, árakkal és vásárlás gombokkal
- Vásárlói értékelés vagy ajánlás szekció
- Másodlagos akció vagy újdonságok
Tervezési megjegyzések: A nagy, jó minőségű termékképek elengedhetetlenek. Használj rácsos elrendezést, amely mobilon egy oszlopba rendeződik. Az ár és a CTA gombok azonnal láthatók legyenek.
A Tajót Brevóval használó e-kereskedelmi márkák esetében ezek a sablonok dinamikusan feltölthetők személyre szabott termékajánlásokkal az egyes feliratkozók böngészési és vásárlási előzményei alapján. Nézd meg e-kereskedelmi e-mail marketing útmutatónkat a személyre szabási stratégiákról.
3. A tartalmi összefoglaló
Kinek ajánlott: Médiavállalatok, tartalomkészítők, kiadványok
Tartalomgazdag sablon több cikk bemutatására:
- Kiemelt cikk nagy képpel és kivonattal
- Lista 5-8 további cikkről címekkel és egysoros összefoglalókkal
- Kategória címkék minden cikkhez
- “Legnépszerűbb” vagy “Szerkesztői ajánlat” kiemelés
Tervezési megjegyzések: Helyezd előtérbe az olvashatóságot letisztult tipográfiával és bőséges sorközzel. Használj egységes formázást minden cikkbejegyzésnél, hogy az olvasók gyorsan átfuthassák az összefoglalót.
4. A személyes hírlevél
Kinek ajánlott: Szólóvállalkozók, véleményvezérek, tanácsadók
Minimalista, szövegközpontú sablon, amely személyes levél hangulatát kelti:
- A szerző fotója és neve
- Hosszabb formátumú szöveges tartalom (500-800 szó)
- Minimális képek és dizájnelemek
- Egyszerű szöveges linkek formázott gombok helyett
- Személyes záróüzenet
Tervezési megjegyzések: Ennek a sablonnak az egyszerűség adja az erejét. Használj egyoszlopos elrendezést, standard betűtípusokat és minimális stilizálást. A cél az, hogy személyes e-mailnek tűnjön, ne marketing kommunikációnak.
5. A SaaS termékfrissítés
Kinek ajánlott: Szoftvercégek, tech startupok, fejlesztői eszközök
Funkcióközpontú elrendezés termékfrissítések kommunikálására:
- Verziószám vagy frissítési cím a fejlécben
- Funkció bemutatása képernyőképpel vagy GIF-fel
- Felsorolás a fejlesztésekről és javításokról
- “Mi várható legközelebb” előzetes
- CTA az új funkciók kipróbálására
Tervezési megjegyzések: Tartalmazz termékképernyőképeket vagy felülethelyzeteket, hogy mutasd, ne csak elmondd. Használj letisztult, modern dizájnt, amely tükrözi a szoftvered esztétikáját.
6. Az eseménymeghívó
Kinek ajánlott: Eseményszervezők, konferenciák, webinárium-házigazdák
Egycélú sablon, amely a regisztrációkra fókuszál:
- Esemény neve és vizuális arculata
- Időpont, helyszín (vagy virtuális platform)
- Előadók kiemelése fotókkal és bemutatkozásokkal
- Programáttekintés
- Kiemelt regisztrációs CTA
- Korai regisztrációs ár vagy korlátozott helyek sürgetése
Tervezési megjegyzések: A CTA gombnak legalább kétszer meg kell jelennie: egyszer a hajtás felett, egyszer a részletek után. Használj visszaszámláló elemeket vagy sürgető nyelvezetet, ahol indokolt.
7. A heti összefoglaló
Kinek ajánlott: Iparági hírlevelek, kurátori tartalmat publikálók
Strukturált sablon a webről válogatott tartalmak közléséhez:
- Szerkesztői megjegyzés (2-3 mondat)
- 5-10 válogatott link forrásmegjelöléssel, címmel és rövid kommentárral
- Számozott vagy kategorizált szakaszok
- “Szponzor” vagy “Kiemelt” szekció, ha monetizált
- Olvasói szavazás vagy visszajelzés-kérés
Tervezési megjegyzések: A világos számozás és az egységes formázás minden válogatott elemnél segíti az olvasók navigációját. Használj finom kereteket vagy háttérszíneket a szakaszok elválasztására.
8. A nonprofit hatásjelentés
Kinek ajánlott: Jótékonysági szervezetek, NGO-k, társadalmi vállalkozások
Sablon, amely a hatástörténetek megosztására és adományozás ösztönzésére készült:
- Hatásstatisztika címsor (“Ebben a hónapban 1000 családon segítettünk”)
- Történet fotóval (egy kedvezményezett vagy projekt)
- Folyamatjelző egy kampánycél felé haladva
- Önkéntes vagy esemény lehetőségek
- Adományozás CTA gomb
Tervezési megjegyzések: Vezess érzelmi hatással fotókon és valós történeteken keresztül. Használj adatvizualizációt (folyamatjelzők, statisztikák) a konkrét eredmények bemutatására.
9. A szezonális promóció
Kinek ajánlott: Kiskereskedelem, vendéglátás, szezonális vállalkozások
Vizuálisan gazdag sablon ünnepi és szezonális kampányokhoz:
- Teljes szélességű szezonális hero kép
- Promóciós ajánlat egyértelmű feltételekkel
- Válogatott termékkínálat vagy ajándékötletek
- Határidő vagy visszaszámláló elem
- Több CTA az e-mailben
Tervezési megjegyzések: A bátor színek és szezonális képek sürgősséget keltenek. Gondoskodj róla, hogy a promóciós ajánlat görgetés nélkül is azonnal egyértelmű legyen. Alaposan teszteld a sablont, mert a képgazdag e-mailek megjelenítési problémákat okozhatnak különböző kliensekben.
10. Az oktatási sorozat
Kinek ajánlott: Online tanfolyamok, coaching vállalkozások, oktatási intézmények
Strukturált sablon oktatási tartalom kézbesítésére:
- Lecke száma és sorozat címe
- Kulcsfontosságú tanulság vagy tanulási cél
- Fő tartalom világos szakaszokkal
- Gyakorlati feladat vagy cselekvési pont
- Folyamatjelző (3. lecke 8-ból)
- CTA a következő leckéhez vagy kapcsolódó forráshoz
Tervezési megjegyzések: Használj egységes struktúrát a sorozat minden leckéjénél, hogy a feliratkozók tudják, mire számíthatnak. Tartalmazz folyamatjelzőt a befejezés motiválására.
11. Az ingatlanhirdetés
Kinek ajánlott: Ingatlanügynökök, ingatlankezelő cégek
Ingatlanközpontú sablon gazdag vizuális elemekkel:
- Kiemelt hirdetés nagy fotógalériával
- Ingatlanadatok (ár, hálószobák, fürdőszobák, alapterület)
- 3-4 további hirdetés rácsos elrendezésben
- Piaci frissítés vagy környékbemutató
- Ügynök elérhetőségei fotóval
Tervezési megjegyzések: A jó minőségű ingatlanfotózás elengedhetetlen. A kulcsadatok (ár, méret, helyszín) átkattintás nélkül is azonnal láthatók legyenek.
12. Az étterem vagy élelmiszer-vállalkozás
Kinek ajánlott: Éttermek, ételkiszállítás, catering cégek
Vizuálisan étvágygerjesztő sablon:
- Hero kép a kiemelt fogásról vagy étlapelemről
- Heti ajánlatok vagy új étlap-tételek
- Asztalfoglalás vagy rendelés CTA
- Vásárlói vélemény kiemelése
- Helyszín és nyitvatartási idő
Tervezési megjegyzések: Az ételfotózás legyen professzionális és étvágygerjesztő. Használj meleg színeket és bőséges térközöket. Az elsődleges CTA-nak (rendelés, foglalás, látogatás) feltűnőnek kell lennie.
13. A fitnesz és wellness
Kinek ajánlott: Edzőtermek, személyi edzők, wellness márkák
Energikus sablon, amely a motivációra és cselekvésre fókuszál:
- Motiváló hero kép
- A hét edzése vagy wellness tipp
- Óratervek vagy közelgő események
- Tagok kiemelése vagy átalakulási történet
- Foglalás vagy tagsági CTA
Tervezési megjegyzések: Használj cselekvésorientált fotózást és bátor tipográfiát. Tartsd motiválónak a hangnemet anélkül, hogy nyomulósnak tűnne.
14. Az ügynökségi portfólió bemutató
Kinek ajánlott: Kreatív ügynökségek, szabadúszók, dizájnstúdiók
Portfólió jellegű sablon a friss munkák bemutatására:
- Kiemelt projekt nagy vizuális elemekkel és rövid esettanulmánnyal
- 2-3 további friss projekt rácsos elrendezésben
- Ügyfélreferencia
- Csapat- vagy toborzási hírek
- Kapcsolatfelvételi CTA potenciális ügyfeleknek
Tervezési megjegyzések: Hagyd, hogy a munka önmagáért beszéljen nagy, jó minőségű vizuális elemekkel. Tartsd minimálisan a szöveget, és inkább az eredményekre és kimenetelekre fókuszálj, mint a folyamat leírására.
15. A közösségi hírlevél
Kinek ajánlott: Tagsági szervezetek, online közösségek, helyi vállalkozások
Közösségközpontú sablon, amely ösztönzi az elköteleződést:
- Közösségi hírek és bejelentések
- Tagok kiemelése vagy interjú
- Közelgő események naptára
- Beszélgetésindító kérdések vagy szavazás
- Felhasználók által generált tartalom szekciója
- Csatlakozás/részvétel CTA
Tervezési megjegyzések: Tartalmazz tagok fotóit és neveit (engedéllyel) a közösségi kapcsolatok építésére. Használj meleg, befogadó hangnemet, és bátoríts válaszadásra és részvételre.
Hol találsz ingyenes hírlevél sablonokat
E-mail marketing platformok
A legtöbb e-mail marketing platform ingyenes sablonokat kínál a csomagjaiban:
| Platform | Ingyenes sablonok | Testreszabási szint | Ingyenes csomag |
|---|---|---|---|
| Brevo | 60+ | Drag-and-drop szerkesztő | Igen |
| Mailchimp | 100+ | Drag-and-drop szerkesztő | Igen (korlátozott) |
| HubSpot | 45+ | Drag-and-drop szerkesztő | Igen |
| MailerLite | 80+ | Drag-and-drop szerkesztő | Igen |
| Constant Contact | 200+ | Drag-and-drop szerkesztő | Nem |
A Brevo sablonkönyvtára különösen jól illeszkedik az e-kereskedelmi vállalkozásokhoz, termékbejelentésekhez, rendelésvisszaigazolásokhoz és promóciós kampányokhoz tervezett sablonokkal, amelyek a Tajón keresztül integrálódnak az áruházi adataiddal.
Harmadik féltől származó sablonforrások
- Litmus Community: Ingyenes, tesztelt sablonok kliens-kompatibilitási adatokkal
- Really Good Emails: Válogatott galéria valós hírlevél példákról inspirációként
- Stripo: Ingyenes e-mail sablonkészítő több mint 1500 dizájnnal
- BeeFree: Drag-and-drop szerkesztő több mint 200 ingyenes responsive sablonnal
- MJML: Nyílt forráskódú keretrendszer responsive e-mail sablonok kódból építéséhez
Sablonok testreszabása a márkádhoz
Alapvető testreszabások
Minden sablon ezeket a módosításokat igényli a használat előtt:
- Logó és márkaszínek: Cseréld le az alapértelmezett arculatot a sajátodra
- Tipográfia: Használd márkád betűtípusait (web-biztos tartalékokkal)
- Lábléc információ: Frissítsd a vállalkozásod adataival és jogi követelményeivel
- Közösségi média linkek: Add hozzá a tényleges profiljaidat
- Leiratkozási link: Törvényileg kötelező minden marketing e-mailben
Haladó testreszabások
Amint kényelmesen használod a sablont, fontold meg ezeket a fejlesztéseket:
- Dinamikus tartalomblokkok: Mutass különböző tartalmat különböző feliratkozói szegmenseknek
- Személyre szabási tokenek: Illessz be feliratkozói neveket, helyszíneket vagy preferenciákat
- Feltételes szakaszok: Mutass vagy rejts el szakaszokat a feliratkozói attribútumok alapján
- Interaktív elemek: Adj hozzá szavazásokat, felméréseket vagy AMP-alapú interaktivitást
A hírlevél sablonok legjobb gyakorlatai
Tesztelj küldés előtt. Küldj teszt e-maileket legalább Gmailre, Outlookra, Apple Mailre és Yahoo-ra. Használj olyan eszközt, mint a Litmus vagy az Email on Acid az átfogó kliens-kompatibilitás teszteléséhez.
Optimalizáld a képeket. Tömörítsd az összes képet a betöltési idő csökkentésére. Adj meg alt szöveget minden képhez, arra az esetre, ha az e-mail kliens blokkolja a képeket.
Tartsd alacsonyan a fájlméretet. A teljes e-mail méret (HTML + képek) maradjon 100KB alatt a HTML-nél, és 1MB alatt a teljes tartalomnál. A nagyobb e-maileket a Gmail levághatja, vagy a spamszűrők blokkolhatják.
Tartsd fenn a következetességet. Használd ugyanazt a sablonstruktúrát minden hírlevélszámhoz. A feliratkozók olvasási szokásokat alakítanak ki a megszokott elrendezések körül, és a következetesség bizalmat épít.
Tartalmazz egyszerű szöveget. Mindig biztosíts egyszerű szöveges alternatívát az olyan e-mail kliensekhez, amelyek nem jelenítenek meg HTML-t. A legtöbb e-mail platform ezt automatikusan generálja, de ellenőrizd az olvashatóság érdekében.
Rendszeresen teszteld az e-mail kézbesíthetőségedet. Egy gyönyörű sablon hiábavaló, ha a spam mappába kerül. Figyeld a feladói reputációt és a hitelesítést (SPF, DKIM, DMARC) a dizájnerőfeszítések mellett.
Kezdeti lépések
Válassz egy sablont, amely illeszkedik az iparágadhoz és tartalmi stílusodhoz. Kezdd minimális testreszabással (márkaszínek, logó és lábléc), és küldd ki az első számodat. Ahogy megnyitási arányok és kattintási adatok alapján megtanulod, mi rezonál a közönségeddel, fokozatosan finomítsd a dizájnt és a tartalomstruktúrát.
A legjobb hírlevél sablon nem a vizuálisan leglátványosabb. Az, amelyiket a közönséged következetesen elolvas, rendszeresen átkattint, és várja a következő számot.