Besplatni predlošci za newslettere: 15 najboljih dizajna za svaku industriju
Otkrij 15 besplatnih predložaka za newslettere za e-commerce, SaaS, agencije i više. Profesionalni dizajni koje možeš prilagoditi i početi koristiti već danas s bilo kojom e-mail platformom.
Početak newslettera na praznom platnu je zastrašujuć. Zuriš u prazan urednik, pitajući se kako strukturirati sadržaj, koji raspored koristiti i kako ga učiniti profesionalnim bez trošenja sati na dizajn.
Predlošci za newslettere rješavaju ovaj problem. Pružaju dokazanu strukturu i profesionalni dizajn koji možeš prilagoditi vlastitim sadržajem, brendiranjem i slikama. Najboli predlošci su mobilno responzivni, kompatibilni na e-mail klijentima i dizajnirani s konverzijom na umu.
Ovaj vodič pokriva 15 besplatnih dizajna predložaka newslettera organiziranih prema industriji i slučaju upotrebe. Za svaku vrstu predloška, objašnjavamo principe dizajna, preporučenu strukturu sadržaja i savjete za prilagodbu.
Što čini predložak newslettera učinkovitim
Prije nego zaronimo u specifične predloške, važno je razumjeti što odvaja dobar predložak od izvrsnog.
Tehnički zahtjevi
| Zahtjev | Zašto je važan |
|---|---|
| Mobilno responzivan | 60%+ e-mailova otvaraju se na mobilnim uređajima |
| Kompatibilnost na klijentima | Ispravno se prikazuje u Gmailu, Outlooku, Apple Mailu itd. |
| Brzo učitavanje | Ukupno slike ispod 1 MB; predložak ispod 100 KB |
| Podrška za tamni način | Rastuće usvajanje na e-mail klijentima |
| Pristupačnost | Kompatibilno s čitačima zaslona, dovoljan kontrast |
| Web-sigurni fontovi | Dosljedno prikazivanje na platformama |
Principi dizajna
Vizualna hijerarhija. Najvažniji sadržaj treba biti najistaknutiji. Koristi veličinu, boju i pozicioniranje za vođenje čitateljevog pogleda od vrha do dna.
Raspored pogodan za pregledavanje. Većina primatelja e-maila pregledava, a ne čita. Koristi naslove, točke, kratke odlomke i jasne prijelome sekcija za lakše konzumiranje sadržaja.
Dosljedno brendiranje. Tvoj newsletter treba biti odmah prepoznatljiv. Dosljedno koristi boje brenda, logo i tipografiju u svakom izdanju.
Jedan stupac na mobitelu. Višestupanjski rasporedi mogu se pokvariti na mobilnim uređajima. Koristi raspored u jednom stupcu ili osiguraj da se višestupanjske sekcije čisto slažu na manjim zaslonima.
Četiri rasporeda u pogonu
Svaka ploča ispod pravi je HTML e-pošte predloška, u okviru stvarne širine. Smanjite širinu na 375 px i gledajte kako se stupci slažu jedan ispod drugoga.
Prati vašu temu — promijenite je u zaglavlju da vidite drugu.
Pročitaj HTML predloška The Letter
<!DOCTYPE html>
<html lang="hr" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>The Letter</title>
<style>
body { margin:0; padding:0; width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
img { border:0; outline:none; line-height:100%; -ms-interpolation-mode:bicubic; display:block; }
a { text-decoration:underline; }
@media only screen and (max-width:620px) {
.wrap { width:100% !important; }
.stack { display:block !important; width:100% !important; max-width:100% !important; }
.gutter { padding-left:20px !important; padding-right:20px !important; }
.cta { display:block !important; width:100% !important; box-sizing:border-box !important; text-align:center !important; }
.h1 { font-size:26px !important; line-height:32px !important; }
.thumb { width:100% !important; height:auto !important; max-width:100% !important; }
/* A digest row is the one two-column layout that should NOT stack: the
thumbnail shrinks and stays beside the headline, because a roundup is
read by scanning and a full-width decorative image per story destroys
that. */
.row-thumb { width:80px !important; }
.row-thumb img { width:80px !important; height:80px !important; }
.hide-sm { display:none !important; }
}
@media (prefers-color-scheme: dark) {
.d-bg { background-color:#151515 !important; }
.d-card { background-color:#1c1c1c !important; }
.d-ink { color:#f2f2f2 !important; }
.d-mute { color:#a8a8a8 !important; }
.d-rule { border-color:#3a3a3a !important; }
}
</style>
</head>
<body class="d-bg" style="margin:0;padding:0;background-color:#f0efec;">
<span style="display:none;font-size:1px;color:#fefefe;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">Citat koji čuvate u aplikaciji za bilješke radi više od vašeg kalendara sadržaja.</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="Zaglavlje Meridian Pressa: koncentrični plavi lukovi presječeni dijagonalnom trakom" style="width:100%;height:auto;max-width:600px;">
</td></tr>
<tr><td class="gutter" style="padding:36px 88px 0 88px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-mute" style="margin:0 0 6px 0;font-size:13px;line-height:18px;letter-spacing:.08em;text-transform:uppercase;color:#6b6b6b;">Meridian Press · Broj 47</p>
</td></tr>
<tr><td class="gutter" style="padding:0 88px;font-family:Georgia,'Times New Roman',Times,serif;">
<h1 class="h1 d-ink" style="margin:0 0 20px 0;font-size:34px;line-height:42px;font-weight:400;color:#141414;">Arhiva je proizvod</h1>
<p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Prije tri tjedna tražio sam tekst koji sam napisao 2019. i nisam ga našao. Ni na stranici, ni u izvozu, ni u tražilici same platforme. Tisuću dvjesto brojeva, a jedino kazalo koje je radilo bilo je moje pamćenje.</p>
<p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">To je dio koji vam nitko ne kaže o šest godina newslettera. Slati je lako. Čuvati nije.</p>
</td></tr>
<tr><td class="gutter" style="padding:8px 88px 28px 88px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr><td class="quote" style="border-left:3px solid #0084d1;padding:4px 0 4px 0;padding-left:20px;font-family:Georgia,'Times New Roman',Times,serif;">
<p class="d-ink" style="margin:0;font-size:19px;line-height:30px;font-style:italic;color:#141414;">Sve što objavite je uplata. Isplatu gotovo nitko ne gradi.</p>
</td></tr>
</table>
</td></tr>
<tr><td class="gutter" style="padding:0 88px;font-family:Georgia,'Times New Roman',Times,serif;">
<p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Zato sam ovaj tjedan stare brojeve pregradio u pravu arhivu, s oznakama, punim pretraživanjem teksta i trajnim adresama. Trebalo je devet dana. Broj pretplatnika se nije pomaknuo. Vrijeme na stranici se utrostručilo.</p>
<p class="d-ink" style="margin:0 0 28px 0;font-size:18px;line-height:30px;color:#242424;">Sve je ispod, uključujući dijelove koji nisu uspjeli.</p>
</td></tr>
<tr><td class="gutter" style="padding:0 88px 36px 88px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<a href="https://example.com" style="font-size:17px;line-height:24px;font-weight:600;color:#0084d1;text-decoration:underline;">Pročitaj cijeli broj →</a>
</td></tr>
<tr><td class="gutter d-rule" style="padding:0 88px;border-top:1px solid #e4e2de;"></td></tr>
<tr><td class="gutter" style="padding:24px 88px 40px 88px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<p class="d-mute" style="margin:0 0 10px 0;font-size:14px;line-height:22px;color:#6b6b6b;">Pisano rukom svakog četvrtka. Odgovorite i pročitat ću.</p>
<p class="d-mute" style="margin:0;font-size:13px;line-height:20px;color:#8a8a8a;">Meridian Press, 14 Harbour Lane, Bristol BS1 4TT<br>
<a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Odjava</a> · <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Prikaži u pregledniku</a></p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html> Prati vašu temu — promijenite je u zaglavlju da vidite drugu.
Pročitaj HTML predloška The Digest
<!DOCTYPE html>
<html lang="hr" 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 stvari vrijednih vašeg utorka. Dvije su o cijenama.</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. kolovoza 2026. · 6 tema · 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;">BROJ 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="Apstraktni tirkizni lukovi presječeni dijagonalnom trakom" 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 · CIJENE</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;">Tri tvrtke prešle su na naplatu po potrošnji, dvije su se vratile natrag</a>
</p>
<p class="d-mute" style="margin:0;font-size:16px;line-height:26px;color:#555555;">Obje koje su se vratile kažu isto: opterećenje podrške poraslo je prije prihoda.</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="Apstraktni tirkizni prstenovi s pomaknutom žarišnom točkom" 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 · ISPORUČIVOST</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;">Gmailova pravila za masovne pošiljatelje stara su godinu dana. Evo što se stvarno promijenilo</a>
</p>
<p class="d-mute" style="margin:0;font-size:16px;line-height:26px;color:#555555;">Stopa pritužbi jedini je prag kojemu se itko približio. Ostalo je ionako bilo podrazumijevano.</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="Apstraktni koncentrični tirkizni lukovi na slomljenoj bijeloj" 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 · ZANAT</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;">Arhiva newslettera je proizvod pretraživanja, a ne popis poveznica</a>
</p>
<p class="d-mute" style="margin:0;font-size:16px;line-height:26px;color:#555555;">Devet dana rada, nula rasta pretplatnika, trostruko vrijeme na stranici. Zanimljiv je upravo taj 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;">Još tri niže, uključujući onaj o izdavanju računa na koji svi odgovaraju.</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;">Pročitaj svih š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;">Odjava</a> · <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Upravljanje postavkama</a> · <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Prikaži u pregledniku</a></p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html> Prati vašu temu — promijenite je u zaglavlju da vidite drugu.
Pročitaj HTML predloška The Storefront
<!DOCTYPE html>
<html lang="hr" 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;">Četiri nova otiska. Onaj s lukom ima 40 primjeraka i neće izdržati tjedan.</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;">Jesenska kolekcija · 04</td>
</tr></table>
</td></tr>
<tr><td style="padding:0;">
<img src="/_astro/shop-hero.r4mykM_E.png" width="600" height="360" alt="Četiri nova Northlight otiska: preklapajući hrđavocrveni lukovi na toploj slomljenoj bijeloj" 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;">Četiri otiska. Po četrdeset primjeraka.</h1>
<p class="d-mute" style="margin:0 0 22px 0;font-size:16px;line-height:26px;color:#555555;">Svaki otisak u ovoj kolekciji tiskan je ručno, numeriran i nestaje kad ga nestane. Ovdje se ništa ne dotiskuje.</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;">Pogledaj kolekciju</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, apstraktni otisak u hrđavocrvenoj" 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 pamučnom papiru</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;">Dodaj u košaricu</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, apstraktni otisak u jantarnoj" 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 pamučnom papiru</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;">Dodaj u košaricu</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, apstraktni otisak u ljubičastoj" 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 pamučnom papiru</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;">Dodaj u košaricu</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, apstraktni otisak u tamnozelenoj" 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 pamučnom papiru</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;">Dodaj u košaricu</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>Besplatna dostava u Ujedinjenom Kraljevstvu iznad 75 £.</strong> Mogućnosti uokviravanja pri plaćanju. Povrat u 30 dana, bez okvira.</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;">Odjava</a> · <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Prikaži u pregledniku</a></p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html> Prati vašu temu — promijenite je u zaglavlju da vidite drugu.
Pročitaj HTML predloška The Brief
<!DOCTYPE html>
<html lang="hr" 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;">Stopa odgovora porasla je 4 boda i još uvijek ne znamo zašto. Najbolja pretpostavka je unutra.</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="Zaglavlje Ledger Weeklyja: ljubičasti lukovi na gotovo crnoj" 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 · Tjedan 35</p>
<h1 class="h1 d-ink" style="margin:0;font-size:26px;line-height:34px;font-weight:800;color:#141414;">Stopa odgovora se pomaknula i nitko ništa nije izdao</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;">Stopa otvaranja</p>
<p style="margin:0;font-size:13px;line-height:18px;font-weight:700;color:#007d6a;">▲ 1,2 boda</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;">Stopa klikova</p>
<p style="margin:0;font-size:13px;line-height:18px;font-weight:700;color:#b8442d;">▼ 0,4 boda</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;">Stopa odgovora</p>
<p style="margin:0;font-size:13px;line-height:18px;font-weight:700;color:#007d6a;">▲ 4,0 boda</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;">U slanju se ništa nije promijenilo. Ista lista, isti četvrtak, isti predložak. Jedina varijabla koju nalazimo jest da je predmet prvi put u jedanaest brojeva postavio pitanje.</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;">Odgovori po 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;">Plaćeni pretplatnici</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;">Besplatni, aktivni 90 dana</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;">Besplatni, uspavani</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;">Probno razdoblje</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;">Pročitaj cijelu analizu</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;">Odjava</a> · <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Prikaži u pregledniku</a></p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html> 15 besplatnih dizajna predložaka newslettera
1. Klasično ažuriranje tvrtke
Idealno za: B2B tvrtke, agencije, profesionalne usluge
Ovaj predložak slijedi jednostavnu strukturu:
- Logo tvrtke i zaglavlje
- Kratki urednički uvod (2-3 rečenice)
- 3-4 bloka sadržaja s naslovima, kratkim opisima i CTA-ovima
- Podnožje s linkovima na društvenim mrežama i odjava
Napomene o dizajnu: Čist, profesionalni raspored s dovoljno bijelog prostora. Koristi primarnu boju brenda za naslove i CTA gumbe. Ograniči slike na jednu hero sliku i male sličice za blokove sadržaja.
Struktura sadržaja:
- Osobni pozdrav člana tima
- Istaknuti članak ili najava
- 2-3 sekundarne stavke sadržaja
- Sekcija brzih linkova ili resursa
- Podnožje s kontaktnim informacijama
2. Prikaz e-commerce proizvoda
Idealno za: Online prodavaonice, maloprodajni brendovi, DTC tvrtke
Raspored usmjeren na proizvode dizajniran za povećanje prodaje:
- Hero banner s istaknutim proizvodom ili promocijom
- Mreža proizvoda (2x2 ili 3x1) sa slikama, imenima, cijenama i gumbima za kupnju
- Sekcija recenzija ili svjedočanstava kupaca
- Sekundarna promocija ili nova dolazeća roba
Napomene o dizajnu: Velike, visokokvalitetne slike proizvoda su ključne. Koristi mrežni raspored koji se na mobitelu slaže u jedan stupac. Cijena i CTA gumbi trebaju biti odmah vidljivi.
Za e-commerce brendove koji koriste Tajo s Brevom, ovi predlošci mogu se dinamički popuniti personaliziranim preporukama proizvoda na temelju povijesti pregledavanja i kupovine svakog pretplatnika. Pogledaj naš vodič o e-commerce e-mail marketingu za strategije personalizacije.
3. Sažetak sadržaja
Idealno za: Medijske tvrtke, kreatori sadržaja, publikacije
Predložak bogat sadržajem dizajniran za prikaz više članaka:
- Istaknuti članak s velikom slikom i isječkom
- Lista 5-8 dodatnih članaka s naslovima i jednorednim sažetcima
- Oznake kategorija za svaki članak
- Isticanje “Najpopularnijeg” ili “Urednički izbor”
Napomene o dizajnu: Prioritiziraj čitljivost s čistom tipografijom i velikodušnim proredom. Koristi dosljedno formatiranje za svaki unos članka kako bi čitatelji mogli brzo pregledati sažetak.
4. Osobni newsletter
Idealno za: Solopoduzetnike, misaone lidere, konzultante
Minimalni predložak usmjeren na tekst koji se osjeća kao osobno pismo:
- Fotografija i ime autora
- Sadržaj u dugom formatu (500-800 riječi)
- Minimalne slike i dizajnerski elementi
- Jednostavni tekstualni linkovi umjesto stiliziranih gumba
- Osobno zaključivanje
Napomene o dizajnu: Ovaj predložak uspijeva kroz jednostavnost. Koristi raspored u jednom stupcu, standardne fontove i minimalnu stilizaciju. Cilj je osjećati se kao osobni e-mail, a ne marketinška komunikacija.
5. Ažuriranje SaaS proizvoda
Idealno za: Software tvrtke, tech startupove, razvojne alate
Raspored usmjeren na značajke za komunikaciju ažuriranja proizvoda:
- Zaglavlje s brojem verzije ili naslovom ažuriranja
- Isticanje značajke sa snimkom zaslona ili GIF-om
- Tabeliran popis poboljšanja i popravaka
- Najava “Što slijedi”
- CTA za isprobavanje novih značajki
Napomene o dizajnu: Uključi snimke zaslona ili slike sučelja kako bi prikazao umjesto pričao. Koristi čist, moderan dizajn koji odražava estetiku tvog softvera.
6. Pozivnica na događaj
Idealno za: Organizatori događaja, konferencije, domaćini webinara
Predložak s jednom svrhom usredotočen na pokretanje registracija:
- Ime događaja i vizualno brendiranje
- Datum, vrijeme i lokacija (ili virtualna platforma)
- Isticanja govornika s fotografijama i biografijama
- Pregled programa
- Istaknuti CTA za registraciju
- Hitnost s ranom registracijom ili ograničenim mjestima
Napomene o dizajnu: CTA gumb trebao bi se pojaviti najmanje dvaput, jednom iznad preloma i jednom nakon detalja. Koristi elemente odbrojavanja ili jezik hitnosti kada je primjereno.
7. Tjedni pregled
Idealno za: Industrijski newslettere, kurirani izdavači sadržaja
Strukturirani predložak za kuriranje sadržaja s weba:
- Napomena urednika (2-3 rečenice)
- 5-10 kuriranih linkova s atribucijom izvora, naslovom i kratkim komentarom
- Numerirane ili kategorizirane sekcije
- Sekcija “Sponzor” ili “Istaknuto” ako je monetizirano
- Anketa čitatelja ili poziv za povratne informacije
Napomene o dizajnu: Jasno numeriranje i dosljedno formatiranje za svaku kuriranu stavku pomažu čitateljima u navigaciji. Koristi suptilne rubove ili boje pozadine za odvajanje sekcija.
8. Izvještaj o utjecaju neprofitne organizacije
Idealno za: Dobrotvorne organizacije, NGO-ovi, socijalna poduzeća
Predložak dizajniran za dijeljenje priča o utjecaju i pokretanje donacija:
- Naslov s statistikom utjecaja (“Pomogli smo 1.000 obitelji ovog mjeseca”)
- Priča s fotografijom (jedan korisnik ili projekt)
- Traka napretka prema cilju kampanje
- Mogućnosti volontiranja ili događaji
- CTA gumb za donaciju
Napomene o dizajnu: Vodi s emocionalnim utjecajem kroz fotografiju i stvarne priče. Koristi vizualizaciju podataka (trake napretka, statistike) za prikaz konkretnih rezultata.
9. Sezonska promocija
Idealno za: Maloprodaja, ugostiteljstvo, sezonske tvrtke
Vizualno bogat predložak dizajniran za blagdanske i sezonske kampanje:
- Hero slika punom širinom s sezonskim motivom
- Promotivna ponuda s jasnim uvjetima
- Kurirani odabir proizvoda ili vodič za darove
- Element s rokom ili odbrojavanjem
- Višestruki CTA-ovi kroz cijeli e-mail
Napomene o dizajnu: Smjele boje i sezonske slike stvaraju hitnost. Pobrinj se da je promotivna ponuda odmah jasna bez skroliranja. Temeljito testiraj predložak jer e-mailovi bogati slikama mogu imati probleme s prikazivanjem na različitim klijentima.
10. Edukacijska serija
Idealno za: Online tečajevi, coaching tvrtke, obrazovne institucije
Strukturirani predložak za isporuku edukativnog sadržaja:
- Broj lekcije i naziv serije
- Ključni zaključak ili cilj učenja
- Glavni sadržaj s jasnim sekcijama
- Vježba ili aktivnost
- Indikator napretka (Lekcija 3 od 8)
- CTA za sljedeću lekciju ili srodni resurs
Napomene o dizajnu: Koristi dosljedno strukturu za sve lekcije u seriji kako bi pretplatnici znali što očekivati. Uključi indikator napretka za motivaciju dovršetka.
11. Oglas nekretnina
Idealno za: Agenti za nekretnine, tvrtke za upravljanje nekretninama
Predložak usmjeren na nekretnine s bogatim vizualnim elementima:
- Istaknuta nekretnina s velikom galerijorn slika
- Detalji o nekretnini (cijena, spavaće sobe, kupaonice, kvadratura)
- 3-4 dodatna oglasa u mrežnom formatu
- Ažuriranje tržišta ili spotlight kvarta
- Kontaktni podaci agenta s fotografijom
Napomene o dizajnu: Visokokvalitetna fotografija nekretnina je ključna. Uključi ključne detalje (cijena, veličina, lokacija) odmah vidljive bez klikanja.
12. Restoran ili prehrambena tvrtka
Idealno za: Restorani, dostava hrane, caterinške tvrtke
Vizualno apetitivan predložak:
- Hero slika istaknutog jela ili stavke jelovnika
- Tjedne posebnosti ili nove stavke jelovnika
- CTA za rezervaciju ili narudžbu
- Isticanje recenzije kupca
- Informacije o lokaciji i radnom vremenu
Napomene o dizajnu: Fotografija hrane treba biti profesionalna i apetitna. Koristi tople boje i velikodušne razmake. Primarni CTA (naruči, rezerviraj, posjeti) mora biti nemoguće propustiti.
13. Fitness i wellness
Idealno za: Teretane, osobni treneri, wellness brendovi
Energičan predložak usmjeren na motivaciju i akciju:
- Motivacijska hero slika
- Trening tjedna ili wellness savjet
- Raspored sati ili predstojeći događaji
- Spotlight člana ili priča o transformaciji
- CTA za rezervaciju ili članstvo
Napomene o dizajnu: Koristi akcijsku fotografiju i smjelu tipografiju. Zadržavaj ton motivirajućim bez nametljivosti.
14. Agencijski prikaz portfelja
Idealno za: Kreativne agencije, freelanceri, dizajnerski studiji
Predložak u stilu portfelja za prikaz nedavnih radova:
- Istaknuti projekt s velikim vizualima i kratkim prikazom slučaja
- 2-3 dodatna nedavna projekta u mreži
- Svjedočanstvo klijenta
- Ažuriranje tima ili zapošljavanje
- CTA za kontakt za potencijalne klijente
Napomene o dizajnu: Neka radovi govore sami za sebe s velikim, visokokvalitetnim vizualima. Zadržavaj tekst minimalnim i usmjerenim na rezultate i ishode, a ne na opise procesa.
15. Newsletter zajednice
Idealno za: Članstvene organizacije, online zajednice, lokalne tvrtke
Predložak usmjeren na zajednicu koji potiče angažman:
- Vijesti i najave zajednice
- Spotlight ili intervju s članom
- Kalendar nadolazećih događaja
- Pozivi za diskusiju ili anketa
- Sekcija korisnički generiranog sadržaja
- CTA za pridruživanje/angažiranje
Napomene o dizajnu: Uključi fotografije i imena članova (uz dopuštenje) za izgradnju veze u zajednici. Koristi topao, inkluzivni ton i potiči odgovore i sudjelovanje.
Gdje pronaći besplatne predloške za newslettere
Platforme za e-mail marketing
Većina platformi za e-mail marketing uključuje besplatne predloške u planove:
| Platforma | Besplatni predlošci | Razina prilagodbe | Dostupan besplatni plan |
|---|---|---|---|
| Brevo | 60+ | Editor s povlači i ispusti | Da |
| Mailchimp | 100+ | Editor s povlači i ispusti | Da (ograničeno) |
| HubSpot | 45+ | Editor s povlači i ispusti | Da |
| MailerLite | 80+ | Editor s povlači i ispusti | Da |
| Constant Contact | 200+ | Editor s povlači i ispusti | Ne |
Brevova knjižnica predložaka posebno je prikladna za e-commerce tvrtke, s predlošcima dizajniranim za najave proizvoda, potvrde narudžbi i promotivne kampanje koje se integriraju s podacima prodavaonice putem Taja.
Izvori predložaka trećih strana
- Litmus Community: Besplatni, testirani predlošci s podacima o kompatibilnosti na klijentima
- Really Good Emails: Kurirani galerija stvarnih primjera newslettera za inspiraciju
- Stripo: Besplatni graditelj predložaka e-maila s 1.500+ dizajna
- BeeFree: Editor s povlači i ispusti s 200+ besplatnih responzivnih predložaka
- MJML: Open-source framework za izgradnju responzivnih predložaka e-maila s kodom
Prilagodba predložaka za tvoj brend
Ključne prilagodbe
Svaki predložak treba ove modifikacije prije upotrebe:
- Logo i boje brenda: Zamijeni zadano brendiranje vlastitim
- Tipografija: Koristi fontove brenda (s web-sigurnim zamjenama)
- Informacije u podnožju: Ažuriraj poslovnim detaljima i zakonskim zahtjevima
- Linkovi na društvenim mrežama: Dodaj stvarne profile
- Link za odjavu: Zakonski obvezan u svakom marketinškom e-mailu
Napredne prilagodbe
Kad se udobno osjećaš s predloškom, razmotri ova poboljšanja:
- Dinamički blokovi sadržaja: Prikaži različiti sadržaj različitim segmentima pretplatnika
- Tokeni personalizacije: Unesi imena, lokacije ili preferencije pretplatnika
- Uvjetne sekcije: Prikaži ili sakrij sekcije na temelju atributa pretplatnika
- Interaktivni elementi: Dodaj ankete, upitnike ili AMP-pokrenute interaktivnosti
Najbolje prakse za predloške newslettera
Testiraj prije slanja. Pošalji testne e-mailove u Gmail, Outlook, Apple Mail i Yahoo kao minimum. Koristi alat poput Litmusa ili Email on Acid za sveobuhvatno testiranje na klijentima.
Optimiziraj slike. Komprimiraj sve slike za smanjenje vremena učitavanja. Uključi alt tekst za svaku sliku u slučaju da e-mail klijent blokira slike.
Drži veličinu datoteke malom. Ukupna veličina e-maila (HTML + slike) treba ostati ispod 100 KB za HTML i ispod 1 MB za ukupni sadržaj. Veći e-mailovi riskiraju da ih Gmail odreže ili spam filtri blokiraju.
Zadržavaj dosljednost. Koristi iste predloške za svako izdanje newslettera. Pretplatnici razvijaju navike čitanja oko poznatih rasporeda, a dosljednost gradi povjerenje.
Uključi plaintext. Uvijek pruži alternativu u obliku običnog teksta za e-mail klijente koji ne prikazuju HTML. Većina e-mail platformi ovo automatski generira, ali pregledaj da osiguraš čitljivost.
Redovito testiraj isporučivost e-maila. Lijep predložak je beskoristan ako završi u spamu. Prati reputaciju pošiljatelja i autentikaciju (SPF, DKIM, DMARC) uz napore u dizajnu.
Početak rada
Odaberi predložak koji odgovara tvojoj industriji i stilu sadržaja. Počni s minimalnim prilagodbama, boje brenda, logo i podnožje, i pošalji svoe prvo izdanje. Kako saznavaš što odjekuje kod tvoje publike kroz podatke o stopama otvaranja i klikanja, iteratiraj dizajn i strukturu sadržaja.
Najboli predložak newslettera nije vizualno najdojmljiviji. To je onaj koji tvoja publika dosljedno čita, redovito klikće i jedva čeka primiti.