Besplatni šabloni za newsletter: 15 najboljih dizajna za svaku industriju
Otkrijte 15 besplatnih šablona za newsletter za e-trgovinu, SaaS, agencije i još mnogo toga. Profesionalni dizajni koje možete prilagoditi i početi koristiti danas sa bilo kojom email platformom.
Pokretanje newslettera iz praznog platna je zastrašujuće. Gledate u prazan editor, pitajući se kako da strukturirate sadržaj, koji raspored koristiti i kako da izgleda profesionalno bez satima utrošenih na dizajn.
Šabloni za newsletter rešavaju ovaj problem. Oni pružaju dokazanu strukturu i profesionalni dizajn koji možete prilagoditi sa sopstvenim sadržajem, brendiranjem i slikama. Najbolji šabloni su prilagođeni mobilnim uređajima, kompatibilni sa svim email klijentima i dizajnirani imajući na umu konverziju.
Ovaj vodič pokriva 15 besplatnih dizajna šablona za newsletter organizovanih po industriji i slučaju upotrebe. Za svaki tip šablona, objašnjavamo principe dizajna, preporučenu strukturu sadržaja i savete za prilagođavanje.
Šta čini šablon za newsletter efikasnim
Pre nego što se upustimo u specifične šablone, važno je razumeti šta razdvaja dobar šablon od odličnog.
Tehnički zahtevi
| Zahtev | Zašto je važan |
|---|---|
| Prilagođen mobilnim uređajima | 60%+ emailova se otvara na mobilnim uređajima |
| Kompatibilnost sa svim klijentima | Pravilno se prikazuje u Gmail-u, Outlooku, Apple Mail-u, itd. |
| Brzo učitavanje | Slike ispod 1MB ukupno; šablon ispod 100KB |
| Podrška za tamni režim | Sve veća usvajanje u email klijentima |
| Pristupačnost | Kompatibilno sa čitačima ekrana, dovoljan kontrast |
| Web-bezbedni fontovi | Dosledan prikaz na svim platformama |
Principi dizajna
Vizuelna hijerarhija. Najvažniji sadržaj bi trebalo da bude najistaknutiji. Koristite veličinu, boju i pozicioniranje kako biste vodili čitaočev pogled od vrha do dna.
Raspored koji je lako skenirati. Većina primalaca emailova skenira umesto da čita. Koristite zaglavlja, tačke, kratke pasuse i jasne razdeljnice sekcija da bi sadržaj bio probavljiv.
Dosledna brendiranost. Vaš newsletter bi trebalo da bude odmah prepoznatljiv. Koristite boje, logo i tipografiju svog brenda dosled u svakom broju.
Jedna kolona na mobilnom. Višekolonski rasporedi mogu se pokvariti na mobilnim uređajima. Koristite raspored sa jednom kolonom ili osigurajte da se višekolonske sekcije čisto slažu na manjim ekranima.
Četiri rasporeda u radu
Svaka ploča ispod je pravi HTML e-pošte šablona, u okviru stvarne širine. Smanjite širinu na 375 px i gledajte kako se kolone slažu jedna ispod druge.
Prati vašu temu — promenite je u zaglavlju da vidite drugu.
Pročitaj HTML šablona The Letter
<!DOCTYPE html>
<html lang="sr" 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 beleš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 preseč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;">Pre tri nedelje tražio sam tekst koji sam napisao 2019. i nisam ga našao. Ni na sajtu, ni u izvozu, ni u pretrazi same platforme. Hiljadu dvesta brojeva, a jedini indeks koji je radio 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 deo koji vam niko 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 niko 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 ove nedelje stare brojeve pregradio u pravu arhivu, sa oznakama, punom pretragom teksta i trajnim adresama. Trebalo je devet dana. Broj pretplatnika se nije pomerio. Vreme na sajtu 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 delove koji nisu uspeli.</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 ceo 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čitać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 pregledaču</a></p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html> Prati vašu temu — promenite je u zaglavlju da vidite drugu.
Pročitaj HTML šablona The Digest
<!DOCTYPE html>
<html lang="sr" 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 vrednih vašeg utorka. Dve su o cenama.</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. avgust 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 preseč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 · CENE</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 kompanije prešle su na naplatu po potrošnji, dve su se vratile nazad</a>
</p>
<p class="d-mute" style="margin:0;font-size:16px;line-height:26px;color:#555555;">Obe koje su se vratile kažu isto: opterećenje podrške poraslo je pre 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 sa pomerenom žižnom tač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;">Gmail pravila za masovne pošiljaoce stara su godinu dana. Evo šta se zaista promenilo</a>
</p>
<p class="d-mute" style="margin:0;font-size:16px;line-height:26px;color:#555555;">Stopa žalbi jedini je prag kojem se iko približio. Ostalo je ionako bilo podrazumevano.</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 prelomljenoj beloj" 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 pretrage, a ne spisak linkova</a>
</p>
<p class="d-mute" style="margin:0;font-size:16px;line-height:26px;color:#555555;">Devet dana rada, nula rasta pretplatnika, trostruko vreme na sajtu. 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 fakturisanju 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 podešavanjima</a> · <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Prikaži u pregledaču</a></p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html> Prati vašu temu — promenite je u zaglavlju da vidite drugu.
Pročitaj HTML šablona The Storefront
<!DOCTYPE html>
<html lang="sr" 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 sa lukom ima 40 primeraka i neće izdržati nedelju.</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;">Jesenja 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 rđavocrveni lukovi na toploj prelomljenoj beloj" 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 primeraka.</h1>
<p class="d-mute" style="margin:0 0 22px 0;font-size:16px;line-height:26px;color:#555555;">Svaki otisak u ovoj kolekciji štampan je ručno, numerisan i nestaje kad ga nestane. Ovde se ništa ne doštampava.</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 rđ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 korpu</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 ćilibarskoj" 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 korpu</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 korpu</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 korpu</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 preko 75 £.</strong> Opcije uramljivanja pri plaćanju. Povraćaj u roku od 30 dana, bez rama.</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 pregledaču</a></p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html> Prati vašu temu — promenite je u zaglavlju da vidite drugu.
Pročitaj HTML šablona The Brief
<!DOCTYPE html>
<html lang="sr" 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 poena i još uvek 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 skoro 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 · Nedelja 35</p>
<h1 class="h1 d-ink" style="margin:0;font-size:26px;line-height:34px;font-weight:800;color:#141414;">Stopa odgovora se pomerila i niko 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 poena</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 poena</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 poena</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 promenilo. Ista lista, isti četvrtak, isti šablon. Jedina promenljiva koju nalazimo jeste da je naslov 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;">Probni period</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 celu 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 pregledaču</a></p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html> 15 besplatnih dizajna šablona za newsletter
1. Klasično ažuriranje kompanije
Najpogodnije za: B2B kompanije, agencije, profesionalne usluge
Ovaj šablon prati jednostavnu strukturu:
- Logo kompanije i zaglavlje
- Kratak urednički uvod (2-3 rečenice)
- 3-4 bloka sadržaja sa naslovima, kratkim opisima i CTA dugmadima
- Podnožje sa vezama za društvene mreže i odjavu
Napomene o dizajnu: Čist, profesionalan raspored sa dovoljno belog prostora. Koristite primarnu boju svog brenda za naslove i CTA dugmad. Ograničite slike na jednu hero sliku i male sličice za blokove sadržaja.
Struktura sadržaja:
- Lični pozdrav od člana tima
- Istaknuti članak ili najava
- 2-3 sekundarne stavke sadržaja
- Sekcija sa brzim vezama ili resursima
- Podnožje sa kontakt informacijama
2. Vitrina e-commerce proizvoda
Najpogodnije za: Online prodavnice, maloprodajni brendovi, DTC kompanije
Raspored fokusiran na proizvode dizajniran za pokretanje prodaje:
- Hero baner sa istaknutim proizvodom ili promocijom
- Mreža proizvoda (2x2 ili 3x1) sa slikama, nazivima, cenama i dugmadima za kupovinu
- Sekcija sa recenzijom ili svedočanstvom kupca
- Sekundarna promocija ili novi asortiman
Napomene o dizajnu: Velike, visokokvalitetne slike proizvoda su ključne. Koristite raspored mreže koji se svodi na jednu kolonu na mobilnom. Cena i CTA dugmad bi trebalo da budu odmah vidljivi.
Za e-commerce brendove koji koriste Tajo sa Brevo, ovi šabloni se mogu dinamički popunjavati personalizovanim preporukama proizvoda na osnovu istorije pretraživanja i kupovine svakog pretplatnika. Pogledajte naš vodič o email marketingu za e-commerce za strategije personalizacije.
3. Sažetak sadržaja
Najpogodnije za: Medijske kompanije, kreatori sadržaja, publikacije
Šablon bogat sadržajem dizajniran za prikazivanje više članaka:
- Istaknuti članak sa velikom slikom i odlomkom
- Lista od 5-8 dodatnih članaka sa naslovima i jednolinijskim rezimeima
- Oznake kategorija za svaki članak
- Isticanje “Najpopularnije” ili “Urednički izbor”
Napomene o dizajnu: Prioritizujte čitljivost sa čistom tipografijom i velikodušnim razmakom između redova. Koristite dosled formatiranje za svaki unos članka kako bi čitaoci mogli brzo da skeniraju sažetak.
4. Lični newsletter
Najpogodnije za: Solopreneri, mislioci lidera, konsultanti
Minimalni šablon fokusiran na tekst koji deluje kao lično pismo:
- Fotografija i ime autora
- Dugačak pisani sadržaj (500-800 reči)
- Minimalne slike i dizajnerski elementi
- Jednostavne tekstualne veze umesto stilizovanih dugmadi
- Lični pozdrav na kraju
Napomene o dizajnu: Ovaj šablon uspeva kroz jednostavnost. Koristite raspored sa jednom kolonom, standardne fontove i minimalno stilizovanje. Cilj je da izgleda kao lični email, a ne marketinška komunikacija.
5. Ažuriranje SaaS proizvoda
Najpogodnije za: Softverske kompanije, tehnološki startapi, programerski alati
Raspored fokusiran na funkcije za komunikaciju ažuriranja proizvoda:
- Zaglavlje sa brojem verzije ili naslovom ažuriranja
- Isticanje funkcije sa snimkom ekrana ili GIF-om
- Lista poboljšanja i ispravki u tačkama
- Najava “Šta dolazi sledeće”
- CTA za isprobavanje novih funkcija
Napomene o dizajnu: Uključite snimke ekrana ili slike interfejsa kako biste pokazali umesto da pričate. Koristite čist, moderan dizajn koji odražava estetiku vašeg softvera.
6. Pozivnica za događaj
Najpogodnije za: Organizatori događaja, konferencije, domaćini vebinara
Šablon za jednu svrhu fokusiran na pokretanje registracija:
- Naziv događaja i vizuelna brendiranost
- Datum, vreme i lokacija (ili virtuelna platforma)
- Istaknuti govornici sa fotografijama i biografijama
- Pregled programa
- Istaknut CTA za registraciju
- Hitnost oko early bird cena ili ograničenih mesta
Napomene o dizajnu: CTA dugme bi trebalo da se pojavi najmanje dva puta, jednom iznad preklopa i jednom nakon detalja. Koristite elemente odbrojvanja ili jezik hitnosti kada je prikladno.
7. Nedeljni pregled
Najpogodnije za: Industrijalni newsletteri, kurirani izdavači sadržaja
Strukturirani šablon za kuriranje sadržaja sa interneta:
- Urednikova napomena (2-3 rečenice)
- 5-10 kuriranih veza sa atribucijom izvora, naslovom i kratkim komentarom
- Numerisane ili kategorizovane sekcije
- Sekcija “Sponzor” ili “Istaknuto” ako je monetizovano
- Anketa čitalaca ili zahtev za povratne informacije
Napomene o dizajnu: Jasno numerisanje i dosled formatiranje za svaku kuriranu stavku pomaže čitaocima da se snađu. Koristite suptilne granice ili boje pozadine za razdvajanje sekcija.
8. Izveštaj o uticaju neprofitne organizacije
Najpogodnije za: Dobrotvorne organizacije, NVO, socijalna preduzeća
Šablon dizajniran za deljenje priča o uticaju i prikupljanje donacija:
- Naslov sa statističkim uticajem (“Pomogli smo 1.000 porodica ovog meseca”)
- Priča sa fotografijom (jedan korisnik ili projekat)
- Traka napretka prema cilju kampanje
- Prilike za volontiranje ili događaje
- CTA dugme za donaciju
Napomene o dizajnu: Počnite sa emocionalnim uticajem kroz fotografije i prave priče. Koristite vizualizaciju podataka (trake napretka, statistike) za prikazivanje konkretnih rezultata.
9. Sezonska promocija
Najpogodnije za: Maloprodaja, ugostiteljstvo, sezonska preduzeća
Vizuelno bogat šablon dizajniran za praznične i sezonske kampanje:
- Hero slika na celoj širini sa sezonskim motivima
- Promotivna ponuda sa jasnim uslovima
- Kurirani izbor proizvoda ili vodič za poklone
- Rok ili element odbrojvanja
- Višestruki CTA kroz ceo email
Napomene o dizajnu: Smele boje i sezonske slike stvaraju hitnost. Pazite da promotivna ponuda bude odmah jasna bez skrolovanja. Temeljno testirajte šablon, jer emailovi bogati slikama mogu imati probleme s prikazivanjem u raznim klijentima.
10. Obrazovna serija
Najpogodnije za: Online kursevi, coaching preduzeća, obrazovne institucije
Strukturirani šablon za isporuku obrazovnog sadržaja:
- Broj lekcije i naslov serije
- Ključni zaključak ili cilj učenja
- Glavni sadržaj sa jasnim sekcijama
- Vežba ili zadatak akcije
- Indikator napretka (Lekcija 3 od 8)
- CTA za sledeću lekciju ili srodni resurs
Napomene o dizajnu: Koristite dosled strukturu kroz sve lekcije u seriji kako bi pretplatnici znali šta da očekuju. Uključite indikator napretka za motivisanje završetka.
11. Oglas za nekretninu
Najpogodnije za: Agenti za nekretnine, kompanije za upravljanje imovinom
Šablon fokusiran na imovinu sa bogatim vizuelnim elementima:
- Istaknuti oglas sa velikom galerijom fotografija
- Detalji nekretnine (cena, spavaće sobe, kupatila, kvadratura)
- 3-4 dodatna oglasa u formatu mreže
- Ažuriranje tržišta ili spotlight o kvartu
- Kontakt informacije agenta sa fotografijom
Napomene o dizajnu: Visokokvalitetna fotografija nekretnina je ključna. Uključite ključne detalje (cena, veličina, lokacija) koji su odmah vidljivi bez klikanja.
12. Restoran ili prehrambeno preduzeće
Najpogodnije za: Restorani, dostava hrane, catering kompanije
Vizuelno apetitivan šablon:
- Hero slika istaknutog jela ili stavke jelovnika
- Nedeljne specijale ili nove stavke jelovnika
- CTA za rezervaciju ili narudžbu
- Istaknuta recenzija kupca
- Informacije o lokaciji i radnom vremenu
Napomene o dizajnu: Fotografija hrane bi trebalo da bude profesionalna i apetitna. Koristite tople boje i velikodušan razmak. Primarni CTA (narudžba, rezervacija, poseta) bi trebalo da bude nemoguće propustiti.
13. Fitnes i wellness
Najpogodnije za: Teretane, lični treneri, wellness brendovi
Energičan šablon fokusiran na motivaciju i akciju:
- Motivaciona hero slika
- Trening sedmice ili wellness savet
- Raspored časova ili predstojeći događaji
- Spotlight na člana ili priča o transformaciji
- CTA za rezervaciju ili članstvo
Napomene o dizajnu: Koristite akciono orijentisanu fotografiju i smelu tipografiju. Zadržite ton motivacionim bez nametljivosti.
14. Vitrina portfolija agencije
Najpogodnije za: Kreativne agencije, freelanceri, dizajnerski studiji
Šablon u stilu portfolija za prikazivanje nedavnih radova:
- Istaknuti projekat sa velikim vizuelima i kratkom studijom slučaja
- 2-3 dodatna nedavna projekta u mreži
- Svedočanstvo klijenta
- Ažuriranja tima ili zapošljavanja
- CTA za kontakt potencijalnih klijenata
Napomene o dizajnu: Neka rad govori za sebe sa velikim, visokokvalitetnim vizuelima. Zadržite tekst minimalan i fokusiran na rezultate i ishode umesto na opise procesa.
15. Newsletter zajednice
Najpogodnije za: Organizacije sa članarinom, online zajednice, lokalna preduzeća
Šablon fokusiran na zajednicu koji podstiče angažman:
- Vesti i najave zajednice
- Spotlight na člana ili intervju
- Kalendar predstojećih događaja
- Podsticaji za diskusiju ili anketa
- Sekcija sadržaja generisanog od strane korisnika
- CTA za pridruživanje/angažman
Napomene o dizajnu: Uključite fotografije i imena članova (uz dozvolu) za izgradnju veze u zajednici. Koristite topao, inkluzivan ton i podsticajte odgovore i učešće.
Gde pronaći besplatne šablone za newsletter
Email marketing platforme
Većina email marketing platformi uključuje besplatne šablone u svojim planovima:
| Platforma | Besplatni šabloni | Nivo prilagođavanja | Besplatni plan dostupan |
|---|---|---|---|
| Brevo | 60+ | Editor s prevlačenjem i ispuštanjem | Da |
| Mailchimp | 100+ | Editor s prevlačenjem i ispuštanjem | Da (ograničeno) |
| HubSpot | 45+ | Editor s prevlačenjem i ispuštanjem | Da |
| MailerLite | 80+ | Editor s prevlačenjem i ispuštanjem | Da |
| Constant Contact | 200+ | Editor s prevlačenjem i ispuštanjem | Ne |
Brevo-va biblioteka šablona je posebno pogodna za e-commerce preduzeća, sa šablonima dizajniranim za najave proizvoda, potvrde narudžbi i promotivne kampanje koje se integrišu sa podacima vaše prodavnice putem Tajo.
Izvori šablona trećih strana
- Litmus Community: Besplatni, testirani šabloni sa podacima kompatibilnosti između klijenata
- Really Good Emails: Kurirana galerija stvarnih primera newslettera za inspiraciju
- Stripo: Besplatni graditelj šablona za email sa 1.500+ dizajna
- BeeFree: Editor s prevlačenjem i ispuštanjem sa 200+ besplatnih responzivnih šablona
- MJML: Open-source framework za izgradnju responzivnih šablona emaila uz pomoć koda
Prilagođavanje šablona za vaš brend
Ključna prilagođavanja
Svaki šablon zahteva ove izmene pre upotrebe:
- Logo i boje brenda: Zamenite podrazumevano brendiranje sopstvenim
- Tipografija: Koristite fontove svog brenda (sa web-bezbednim rezervnim opcijama)
- Informacije u podnožju: Ažurirajte sa poslovnim detaljima i pravnim zahtevima
- Veze za društvene mreže: Dodajte stvarne profile
- Veza za odjavu: Obavezna zakonom u svakom marketinškom emailu
Napredna prilagođavanja
Kada se osećate ugodno sa šablonom, razmotrite ova poboljšanja:
- Dinamički blokovi sadržaja: Prikažite različit sadržaj različitim segmentima pretplatnika
- Tokeni personalizacije: Umetnite imena pretplatnika, lokacije ili preference
- Uslovne sekcije: Prikažite ili sakrijte sekcije na osnovu atributa pretplatnika
- Interaktivni elementi: Dodajte ankete, upitnike ili AMP-podržanu interaktivnost
Najbolje prakse šablona newslettera
Testirajte pre slanja. Pošaljite test emailove na Gmail, Outlook, Apple Mail i Yahoo kao minimum. Koristite alat kao što je Litmus ili Email on Acid za sveobuhvatno testiranje između klijenata.
Optimizujte slike. Komprimujte sve slike kako biste smanjili vreme učitavanja. Uključite alt tekst za svaku sliku u slučaju da ih email klijent blokira.
Zadržite malu veličinu datoteke. Ukupna veličina emaila (HTML + slike) treba da ostane ispod 100KB za HTML i ispod 1MB za ukupan sadržaj. Veći emailovi rizikuju da budu isečeni u Gmail-u ili blokirani spam filterima.
Budite dosledni. Koristite istu strukturu šablona za svaki broj newslettera. Pretplatnici razvijaju navike čitanja oko poznatih rasporeda, a doslednost gradi poverenje.
Uključite obični tekst. Uvek obezbedite alternativu u obliku običnog teksta za email klijente koji ne prikazuju HTML. Većina email platformi ovo generiše automatski, ali pregledajte ga da biste osigurali čitljivost.
Redovno testirajte dostavljivost emaila. Lep šablon je beskoristan ako završi u spam-u. Pratite reputaciju pošiljaoca i autentifikaciju (SPF, DKIM, DMARC) zajedno sa naporima u dizajnu.
Početak rada
Odaberite šablon koji odgovara vašoj industriji i stilu sadržaja. Počnite sa minimalnim prilagođavanjima, boje brenda, logo i podnožje, i pošaljite prvi broj. Dok učite šta rezonuje sa vašom publikom putem podataka o stopama otvaranja i klikovima, nadograđujte strukturu dizajna i sadržaja.
Najboji šablon newslettera nije onaj koji je vizuelno najimpresivniji. To je onaj koji vaša publika dosled čita, redovno klikće i veseli se primanju.