Gratis nyhetsbrev-maler: 25 profesjonelle design du kan bruke i dag
Komplett guide til gratis nyhetsbrev-maler. Lær strategier, beste praksis og hvordan du bruker Brevo og Tajo for å oppnå resultater.
Å starte et nyhetsbrev fra en blank side er skremmende. Du stirrer på den tomme editoren og lurer på hvordan du skal strukturere innholdet, hva slags layout du skal bruke, og hvordan du kan gjøre det profesjonelt uten å bruke timer på design.
Nyhetsbrev-maler løser dette problemet. De gir en velprøvd struktur og profesjonelt design som du kan tilpasse med eget innhold, merkevarebygging og bilder. De beste malene er mobilresponsive, kompatible på tvers av e-postklienter, og designet med konvertering i tankene.
Denne guiden dekker 15 gratis nyhetsbrev-maldesign organisert etter bransje og brukstilfelle. For hver maltype forklarer vi designprinsippene, anbefalt innholdsstruktur og tilpasingstips.
Hva gjør en nyhetsbrev-mal effektiv?
Før vi dykker ned i spesifikke maler, er det viktig å forstå hva som skiller en god mal fra en flott en.
Tekniske krav
| Krav | Hvorfor det er viktig |
|---|---|
| Mobilresponsiv | 60 %+ av e-poster åpnes på mobile enheter |
| Kompatibilitet på tvers av klienter | Vises korrekt i Gmail, Outlook, Apple Mail osv. |
| Rask innlasting | Bilder under 1 MB totalt; mal under 100 KB |
| Støtte for mørk modus | Voksende adopsjon på tvers av e-postklienter |
| Tilgjengelighet | Kompatibel med skjermlesere, tilstrekkelig kontrast |
| Websikre fonter | Konsekvent gjengivelse på tvers av plattformer |
Designprinsipper
Visuelt hierarki. Det viktigste innholdet bør være mest fremtredende. Bruk størrelse, farge og posisjonering for å lede leserens øye fra topp til bunn.
Skannbart oppsett. De fleste e-postmottakere skanner heller enn å lese. Bruk overskrifter, punktlister, korte avsnitt og tydelige seksjonsinndelinger for å gjøre innholdet lett fordøyelig.
Konsekvent merkevarebygging. Nyhetsbrevet ditt bør være umiddelbart gjenkjennelig. Bruk merkevarens farger, logo og typografi konsekvent i hvert nummer.
Enkeltkolonne på mobil. Flerkolomneoppsett kan brekke på mobile enheter. Bruk enkeltkolonneoppsett eller sørg for at flerkolonneseksjoner stable seg pent på mindre skjermer.
Fire oppsett i drift
Hvert panel nedenfor er malens ekte e-post-HTML i en ramme med reell bredde. Dra bredden ned til 375 px og se kolonnene legge seg under hverandre.
Følger temaet ditt — bytt det i toppen for å se det andre.
Les HTML-en til The Letter
<!DOCTYPE html>
<html lang="no" 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;">Sitatet du tar vare på i notatappen din, jobber hardere enn innholdskalenderen din.</span><span style="display:none;font-size:1px;color:#fefefe;"> ͏ ͏ ͏ ͏ ͏</span>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-bg" style="background-color:#f0efec;">
<tr><td align="center" style="padding:32px 12px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" class="wrap d-card" style="width:600px;max-width:600px;background-color:#ffffff;">
<tr><td style="padding:0;">
<img src="/_astro/letter-masthead.BcPkHvz4.png" width="600" height="250" alt="Meridian Press-hode: konsentriske blå buer krysset av et diagonalt bånd" 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 · Nummer 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;">Arkivet er produktet</h1>
<p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">For tre uker siden lette jeg etter en tekst jeg skrev i 2019, og fant den ikke. Ikke på nettstedet, ikke i eksporten, ikke i plattformens eget søk. Tolv hundre numre, og den eneste fungerende registeret var hukommelsen min.</p>
<p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Det er den delen ingen forteller deg om seks år med nyhetsbrev. Å sende er lett. Å bevare er det ikke.</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;">Alt du publiserer er et innskudd. Uttaket bygger nesten ingen.</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;">Så denne uken bygde jeg de gamle numrene om til et ekte arkiv, med etiketter, fritekstsøk og permanente adresser. Det tok ni dager. Antallet abonnenter rørte seg ikke. Tiden på nettstedet ble tredoblet.</p>
<p class="d-ink" style="margin:0 0 28px 0;font-size:18px;line-height:30px;color:#242424;">Alt står nedenfor, også delene som ikke fungerte.</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;">Les hele nummeret →</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;">Skrevet for hånd hver torsdag. Svar, så leser jeg det.</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;">Meld av</a> · <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Vis i nettleser</a></p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html> Følger temaet ditt — bytt det i toppen for å se det andre.
Les HTML-en til The Digest
<!DOCTYPE html>
<html lang="no" 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;">Seks ting som er tirsdagen din verdt. To handler om priser.</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. august 2026 · 6 temaer · 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;">NUMMER 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="Abstrakte turkise buer krysset av et diagonalt bånd" 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 · PRISER</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;">Tre selskaper gikk over til bruksbasert prising, og to gikk tilbake</a>
</p>
<p class="d-mute" style="margin:0;font-size:16px;line-height:26px;color:#555555;">Begge som snudde sier det samme: støttebelastningen økte før inntektene.</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="Abstrakte turkise ringer med et forskjøvet fokuspunkt" 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 · LEVERINGSEVNE</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;">Gmails regler for masseavsendere er ett år gamle. Her er hva som faktisk endret seg</a>
</p>
<p class="d-mute" style="margin:0;font-size:16px;line-height:26px;color:#555555;">Klagefrekvensen er den eneste terskelen noen kom i nærheten av. Resten var allerede en selvfølge.</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="Abstrakte konsentriske turkise buer på brukket hvitt" 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 · HÅNDVERK</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;">Et nyhetsbrevarkiv er et søkeprodukt, ikke en lenkeliste</a>
</p>
<p class="d-mute" style="margin:0;font-size:16px;line-height:26px;color:#555555;">Ni dagers arbeid, ingen vekst i abonnenter, tre ganger så lang tid på nettstedet. Det interessante er avveiningen.</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;">Tre til lenger nede, blant dem den om fakturering som alle svarer på.</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;">Les alle seks</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;">Meld av</a> · <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Administrer innstillinger</a> · <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Vis i nettleser</a></p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html> Følger temaet ditt — bytt det i toppen for å se det andre.
Les HTML-en til The Storefront
<!DOCTYPE html>
<html lang="no" 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;">Fire nye trykk. Det med havnen finnes i 40 eksemplarer og holder ikke uken ut.</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;">Høstslipp · 04</td>
</tr></table>
</td></tr>
<tr><td style="padding:0;">
<img src="/_astro/shop-hero.r4mykM_E.png" width="600" height="360" alt="Fire nye Northlight-trykk: overlappende rustrøde buer på varm brukket hvit" 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;">Fire trykk. Førti eksemplarer av hvert.</h1>
<p class="d-mute" style="margin:0 0 22px 0;font-size:16px;line-height:26px;color:#555555;">Hvert trykk i dette slippet er trukket for hånd, nummerert, og borte når det er borte. Her trykkes ingenting opp igjen.</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;">Se slippet</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, et abstrakt trykk i rustrødt" 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 på bomullspapir</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;">Legg i kurven</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, et abstrakt trykk i rav" 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 på bomullspapir</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;">Legg i kurven</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, et abstrakt trykk i fiolett" 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 på bomullspapir</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;">Legg i kurven</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, et abstrakt trykk i dypgrønt" 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 på bomullspapir</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;">Legg i kurven</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>Gratis frakt i Storbritannia over 75 £.</strong> Innrammingsalternativer i kassen. Retur innen 30 dager, uinnrammet.</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;">Meld av</a> · <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Vis i nettleser</a></p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html> Følger temaet ditt — bytt det i toppen for å se det andre.
Les HTML-en til The Brief
<!DOCTYPE html>
<html lang="no" 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;">Svarprosenten er opp 4 poeng, og vi vet fortsatt ikke hvorfor. Beste gjetning finner du inni.</span><span style="display:none;font-size:1px;color:#fefefe;"> ͏ ͏ ͏ ͏ ͏</span>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-bg" style="background-color:#f1f0f4;">
<tr><td align="center" style="padding:26px 12px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" class="wrap d-card" style="width:600px;max-width:600px;background-color:#ffffff;border-radius:6px;">
<tr><td style="padding:0;background:#141414;border-radius:6px 6px 0 0;">
<img src="/_astro/brief-band.CsaAK-Uv.png" width="600" height="150" alt="Ledger Weekly-hode: fiolette buer på nesten svart" 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 · Uke 35</p>
<h1 class="h1 d-ink" style="margin:0;font-size:26px;line-height:34px;font-weight:800;color:#141414;">Svarprosenten flyttet seg, og ingen lanserte noe</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;">Åpningsrate</p>
<p style="margin:0;font-size:13px;line-height:18px;font-weight:700;color:#007d6a;">▲ 1,2 poeng</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;">Klikkrate</p>
<p style="margin:0;font-size:13px;line-height:18px;font-weight:700;color:#b8442d;">▼ 0,4 poeng</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;">Svarrate</p>
<p style="margin:0;font-size:13px;line-height:18px;font-weight:700;color:#007d6a;">▲ 4,0 poeng</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;">Ingenting ble endret i utsendelsen. Samme liste, samme torsdag, samme mal. Den eneste variabelen vi finner, er at emnefeltet stilte et spørsmål for første gang på elleve numre.</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;">Svar etter segment</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;">Betalende abonnenter</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;">Gratis, aktive 90 d</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;">Gratis, sovende</td>
<td valign="middle" style="padding:7px 0;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-track" style="background:#ebe9f2;border-radius:2px;">
<tr><td width="16%" style="width:16%;background:#8f83ff;border-radius:2px;font-size:0;line-height:0;height:18px;"> </td><td style="font-size:0;line-height:0;"> </td></tr>
</table>
</td>
<td width="64" align="right" valign="middle" class="d-mute" style="width:64px;padding:7px 0;padding-left:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:14px;line-height:20px;font-weight:700;color:#555555;">1.8%</td>
</tr>
<tr>
<td width="150" valign="middle" class="d-ink" style="width:150px;padding:7px 0;padding-right:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:20px;color:#242424;">Prøveperiode</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;">Les hele gjennomgangen</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;">Meld av</a> · <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Vis i nettleser</a></p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html> 15 gratis nyhetsbrev-maldesign
1. Den klassiske bedriftsoppdateringen
Beste for: B2B-selskaper, byråer, profesjonelle tjenester
Denne malen følger en enkel struktur:
- Firmalogo og topptekst
- Kort redaksjonell introduksjon (2-3 setninger)
- 3-4 innholdsblokker med overskrifter, korte beskrivelser og CTA-er
- Bunntekst med sosiale lenker og avmeldingslenke
Designnotater: Rent, profesjonelt oppsett med rikelig hvitt rom. Bruk merkevarens primærfarge for overskrifter og CTA-knapper. Begrens bilder til ett heltbilde og små miniatyrbilder for innholdsblokker.
Innholdsstruktur:
- Personlig hilsen fra et teammedlem
- Fremhevet artikkel eller kunngjøring
- 2-3 sekundære innholdselementer
- Seksjon med hurtiglenker eller ressurser
- Bunntekst med kontaktinformasjon
2. E-handelsproduktvisning
Beste for: Nettbutikker, detaljhandelmerker, DTC-selskaper
Produktfokusert oppsett designet for å drive salg:
- Heltbanner med fremhevet produkt eller kampanje
- Produktrutenett (2x2 eller 3x1) med bilder, navn, priser og handleknapper
- Kundeomtale eller testimonial-seksjon
- Sekundærkampanje eller nye arrivals
Designnotater: Store, høykvalitetsproduktbilder er avgjørende. Bruk et rutenettoppsett som stables til en enkelt kolonne på mobil. Pris og CTA-knapper bør være umiddelbart synlige.
For e-handelsmerker som bruker Tajo med Brevo, kan disse malene dynamisk fylles med personaliserte produktanbefalinger basert på hver abonnents surf- og kjøpshistorikk. Se vår guide om e-postmarkedsføring for e-handel for personaliseringsstrategier.
3. Innholdssammendraget
Beste for: Medieselskaper, innholdsskapere, publikasjoner
En innholdsrik mal designet for å vise frem flere artikler:
- Fremhevet artikkel med stort bilde og utdrag
- Liste over 5-8 tilleggsartikler med titler og enlinjessammendrag
- Kategorietiketter for hver artikkel
- «Mest populære» eller «Redaktørens valg»-utheving
Designnotater: Prioriter lesbarhet med ren typografi og god linjeavstand. Bruk konsekvent formatering for hver artikkeloppføring slik at leserne raskt kan skanne sammendraget.
4. Det personlige nyhetsbrevet
Beste for: Soloentreprenører, tankeleder, konsulenter
En minimal, tekstfokusert mal som føles som et personlig brev:
- Forfatterbilde og navn
- Langformet skriftlig innhold (500-800 ord)
- Minimale bilder og designelementer
- Enkle tekstlenker heller enn stilede knapper
- Personlig avslutning
Designnotater: Denne malen lykkes gjennom enkelhet. Bruk enkeltkolonneoppsett, standardfonter og minimal styling. Målet er å føles som en personlig e-post heller enn en markedsføringskommunikasjon.
5. SaaS-produktoppdateringen
Beste for: Programvareselskaper, teknologiske oppstartsbedrifter, utviklerverktøy
Funksjonsfokusert oppsett for å kommunisere produktoppdateringer:
- Versjonsnummer eller oppdateringstitteltopptekst
- Funksjonshøydepunkt med skjermbilde eller GIF
- Punktliste over forbedringer og feilrettinger
- «Hva kommer neste» teaser
- CTA for å prøve nye funksjoner
Designnotater: Inkluder produktskjermbilder eller grensesnittbilder for å vise i stedet for å fortelle. Bruk et rent, moderne design som gjenspeiler programvarens estetikk.
6. Arrangementsinvitasjonen
Beste for: Arrangementorganisatorer, konferanser, webinarverts
En mal med ett formål, fokusert på å drive registreringer:
- Arrangementsnavn og visuell merkevarebygging
- Dato, tid og sted (eller virtuell plattform)
- Foredragsholderbilder med bilder og biografier
- Agendaoversikt
- Fremtredende registrerings-CTA
- Tidligfuglpris eller begrensede plasser-hastepreg
Designnotater: CTA-knappen bør vises minst to ganger — én gang over folden og én gang etter detaljene. Bruk nedtellingselementer eller hastelanguage når det er hensiktsmessig.
7. Den ukentlige oppsummeringen
Beste for: Bransjenyhetsbrev, kuraterte innholdspublisister
En strukturert mal for å kurere innhold fra hele nettet:
- Redaktørens notat (2-3 setninger)
- 5-10 kuraterte lenker med kildehenvisning, tittel og kort kommentar
- Nummererte eller kategoriserte seksjoner
- «Sponsor»- eller «Fremhevet»-seksjon om monetisert
- Leseravstemning eller tilbakemeldingsprompt
Designnotater: Tydelig nummerering og konsekvent formatering for hvert kuratert element hjelper leserne å navigere. Bruk subtile kanter eller bakgrunnsfarger for å skille seksjoner.
8. Ideell organisasjons effektrapport
Beste for: Veldedighetsorganisasjoner, ideelle organisasjoner, sosiale foretak
En mal designet for å dele historier om effekt og drive donasjoner:
- Statistikkoverskrift om effekt («Vi hjalp 1 000 familier denne måneden»)
- Fortelling med bilde (én mottaker eller prosjekt)
- Fremdriftslinje mot et kampanjemål
- Frivillighets- eller arrangementsmuligheter
- Donasjons-CTA-knapp
Designnotater: Led med emosjonell effekt gjennom fotografier og ekte historier. Bruk datavisualisering (fremdriftslinjer, statistikk) for å vise konkrete resultater.
9. Sesongkampanjen
Beste for: Detaljhandel, hotellit, sesongbaserte bedrifter
En visuelt rik mal designet for høytids- og sesongkampanjer:
- Fullbreddes sesongbilde
- Kampanjetilbud med klare vilkår
- Kuratert produktutvalg eller gaveveiviser
- Tidsfrist- eller nedtellingselement
- Flere CTA-er gjennom hele malen
Designnotater: Fete farger og sesongbilder skaper hastepreg. Sørg for at kampanjetilbudet er umiddelbart tydelig uten å scrolle. Test malen grundig, da bildetunge e-poster kan ha gjengivelsesproblemer på tvers av klienter.
10. Undervisningsserien
Beste for: Nettkurs, coachingvirksomheter, utdanningsinstitusjoner
En strukturert mal for å levere pedagogisk innhold:
- Leksjonsnummer og serietittel
- Viktigste poeng eller læringsmål
- Hovedinnhold med tydelige seksjoner
- Øvelsesoppgave eller handlingselement
- Fremdriftsindikator (Leksjon 3 av 8)
- CTA til neste leksjon eller relatert ressurs
Designnotater: Bruk en konsekvent struktur i alle leksjonene i serien slik at abonnentene vet hva de kan forvente. Inkluder en fremdriftsindikator for å motivere gjennomføring.
11. Eiendomsoppføringen
Beste for: Eiendomsmeglere, eiendomsforvaltningsselskaper
En eiendomsfokusert mal med rike visuelle elementer:
- Fremhevet oppføring med stort bildegalleri
- Eiendomsdetaljer (pris, soverom, bad, kvadratmeter)
- 3-4 tilleggsoppføringer i rutenettformat
- Markedsoppdatering eller nabolagets rampelys
- Meglerkontaktinformasjon med foto
Designnotater: Høykvalitets eiendomsfotografering er avgjørende. Inkluder nøkkeldetaljer (pris, størrelse, beliggenhet) umiddelbart synlige uten å klikke gjennom.
12. Restaurant- eller matbedriften
Beste for: Restauranter, matlevering, cateringselskaper
En visuelt appetittvekkende mal:
- Heltbilde av fremhevet rett eller menypunkt
- Ukentlige spesialtilbud eller nye menypunkter
- Reservasjons- eller bestillings-CTA
- Fremhevet kundeomtale
- Beliggenhet og åpningstider
Designnotater: Matfotografering bør være profesjonell og appetittvekkende. Bruk varme farger og rikelig mellomrom. Primær CTA (bestill, reserver, besøk) bør ikke overses.
13. Trening og velvære
Beste for: Treningssentre, personlige trenere, velværemerker
En energisk mal fokusert på motivasjon og handling:
- Motiverende heltbilde
- Ukens treningsøkt eller velværetips
- Timeplaner eller kommende arrangementer
- Medlemmers rampelys eller transformasjonshistorie
- Booking- eller medlemskaps-CTA
Designnotater: Bruk handlingsorientert fotografering og fet typografi. Hold tonen motiverende uten å være påtrengende.
14. Byråets porteføljevisning
Beste for: Kreative byråer, frilanser, designstudioer
En porteføljestilet mal for å vise frem nylig arbeid:
- Fremhevet prosjekt med store visuelle elementer og kort casestudie
- 2-3 ytterligere nylige prosjekter i et rutenett
- Kundetestimonial
- Team- eller ansettelsesoppdateringer
- Kontakt-CTA for potensielle kunder
Designnotater: La arbeidet tale for seg selv med store, høykvalitetsvisuelle elementer. Hold teksten minimal og fokusert på resultater og utfall heller enn prosessbeskrivelser.
15. Samfunnsnyhetsbrevet
Beste for: Medlemsorganisasjoner, nettsamfunn, lokale bedrifter
En samfunnsfokusert mal som oppmuntrer til engasjement:
- Samfunnsnyheter og kunngjøringer
- Medlemmers rampelys eller intervju
- Kommende arrangementers kalender
- Diskusjonsprompts eller avstemning
- Bruker-generert innholdsseksjon
- Bli med/engasjer CTA
Designnotater: Inkluder medlemsbilder og -navn (med tillatelse) for å bygge samfunnstilknytning. Bruk en varm, inkluderende tone og oppmuntr til svar og deltakelse.
Hvor finner du gratis nyhetsbrev-maler
E-postmarkedsføringsplattformer
De fleste e-postmarkedsføringsplattformer inkluderer gratis maler i planene sine:
| Plattform | Gratis maler | Tilpasningsnivå | Gratis plan tilgjengelig |
|---|---|---|---|
| Brevo | 60+ | Dra-og-slipp editor | Ja |
| Mailchimp | 100+ | Dra-og-slipp editor | Ja (begrenset) |
| HubSpot | 45+ | Dra-og-slipp editor | Ja |
| MailerLite | 80+ | Dra-og-slipp editor | Ja |
| Constant Contact | 200+ | Dra-og-slipp editor | Nei |
Brevos malbibliotek er spesielt godt egnet for e-handelsbedrifter, med maler designet for produktkunngjøringer, ordrebekreftelser og kampanjer som integreres med butikkdataene dine via Tajo.
Tredjepartsmalkilder
- Litmus Community: Gratis, testede maler med kompatibilitetsdata på tvers av klienter
- Really Good Emails: Kuratert galleri med ekte nyhetsbreveksempler for inspirasjon
- Stripo: Gratis e-postmalbygger med 1 500+ design
- BeeFree: Dra-og-slipp editor med 200+ gratis responsive maler
- MJML: Åpen kildekode-rammeverk for å bygge responsive e-postmaler med kode
Tilpasse maler for merket ditt
Nødvendige tilpasninger
Alle maler trenger disse endringene før bruk:
- Logo og merkefarger: Erstatt standardmerkevarebygging med din egen
- Typografi: Bruk merkevarefonter (med websikre reservealternativer)
- Bunntekstinformasjon: Oppdater med forretningsdetaljene og juridiske krav
- Lenker til sosiale medier: Legg til dine faktiske profiler
- Avmeldingslenke: Lovpålagt i alle markedsføringse-poster
Avanserte tilpasninger
Når du er komfortabel med en mal, vurder disse forbedringene:
- Dynamiske innholdsblokker: Vis ulikt innhold til ulike abonnentsegmenter
- Personaliseringstokens: Sett inn abonnentnavn, -steder eller -preferanser
- Betingede seksjoner: Vis eller skjul seksjoner basert på abonnentattributter
- Interaktive elementer: Legg til avstemninger, undersøkelser eller AMP-drevet interaktivitet
Beste praksiser for nyhetsbrev-maler
Test før sending. Send test-e-poster til Gmail, Outlook, Apple Mail og Yahoo som minimum. Bruk et verktøy som Litmus eller Email on Acid for omfattende testing på tvers av klienter.
Optimaliser bilder. Komprimer alle bilder for å redusere lastetid. Inkluder alt-tekst for hvert bilde i tilfelle bilder er blokkert av e-postklienten.
Hold filstørrelsen nede. Total e-poststørrelse (HTML + bilder) bør holde seg under 100 KB for HTML-en og under 1 MB for totalt innhold. Større e-poster risikerer å bli klippet av Gmail eller blokkert av spamfiltre.
Oppretthold konsistens. Bruk den samme malstrukturen for hvert nyhetsbrevsutgave. Abonnenter utvikler leservaner rundt kjente oppsett, og konsistens bygger tillit.
Inkluder ren tekst. Gi alltid et rent-tekst alternativ for e-postklienter som ikke gjengir HTML. De fleste e-postplattformer genererer dette automatisk, men gjennomgå det for å sikre lesbarhet.
Test e-postleveringsevnen regelmessig. En vakker mal er verdiløs hvis den havner i søppelpost. Overvåk avsenderomdømme og autentisering (SPF, DKIM, DMARC) parallelt med designarbeidet.
Komme i gang
Velg en mal som passer bransjeen og innholdsstilen din. Start med minimale tilpasninger — merkefarger, logo og bunntekst — og send det første nummeret. Etter hvert som du lærer hva som resonerer med publikummet gjennom åpningsrater og klikkdata, iterér på design og innholdsstruktur.
Den beste nyhetsbrev-malen er ikke den mest visuelt imponerende. Det er den publikummet ditt leser konsekvent, klikker gjennom regelmessig, og ser frem til å motta.