E-postmarknadsföring
Design

Nyhetsbrevsmallar: gratis nedladdningar, designtips och bästa exempel (2026)

Få gratis nyhetsbrevsmallar och designinspiration. Inkluderar responsiva HTML-mallar, bästa praxis för design och exempel för alla branscher.

Set Noa
Set Noa
Uppdaterad
0 besök · 7 d
newsletter templates
Nyhetsbrevsmallar?

Få gratis nyhetsbrevsmallar och designtips. Brevo har responsiva, anpassningsbara mallar i sitt gratisabonnemang, utan kod.

Läs mer

TL;DR: En bra nyhetsbrevsmall är mobilresponsiv, enspaltig, varumärkesanpassad och byggd kring en tydlig CTA. Brevo har 40+ gratis responsiva mallar i sin drag-and-drop-editor utan kod. Canva, Stripo och BEEFree är solida alternativ för designfiler.

En stark nyhetsbrevsmall gör det tunga arbetet i din e-postmarknadsföring. Den får ditt innehåll att se proffsigt ut, leder läsaren till din CTA och fungerar perfekt på varje enhet och i varje e-postklient.

Den här guiden täcker allt om nyhetsbrevsmallar: var du får dem gratis, hur du designar effektiva, och exempel från alla branscher.

Vad som gör en bra nyhetsbrevsmall

Viktiga element

  1. Mobilresponsiv design, 60+ % av e-post öppnas i mobilen
  2. Tydlig visuell hierarki, led ögat från rubrik till CTA
  3. Varumärkeskonsekvens, färger, typsnitt och logotypplacering
  4. Enspaltig layout, bäst läsbarhet på alla enheter
  5. Tydlig CTA, en klar handling per e-post
  6. Preheader-text, förlängning av ämnesraden i inkorgen
  7. Avregistreringslänk, krav enligt lag (CAN-SPAM, GDPR)

Mallens anatomi

┌─────────────────────────┐
│  Logo / Brand Header    │
├─────────────────────────┤
│  Hero Image             │
├─────────────────────────┤
│  Headline               │
│  Body Text (2-3 lines)  │
│  [CTA Button]           │
├─────────────────────────┤
│  Content Section 2      │
│  [Secondary CTA]        │
├─────────────────────────┤
│  Footer / Social Links  │
│  Unsubscribe Link       │
└─────────────────────────┘
Tajo-mallar

Fyra layouter i drift

Varje panel nedan är mallens riktiga e-post-HTML, i en ram med verklig bredd. Dra ned bredden till 375 px och se kolumnerna lägga sig under varandra.

Följer ditt tema — byt det i sidhuvudet för att se det andra.

Läs HTML för The Letter 6 kB, utan byggsteg 
<!DOCTYPE html>
<html lang="se" 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;">Citatet du sparar i din anteckningsapp arbetar hårdare än din innehållskalender.</span><span style="display:none;font-size:1px;color:#fefefe;">&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;</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-huvud: koncentriska blå bågar korsade av ett diagonalt band" 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 är produkten</h1>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">För tre veckor sedan letade jag efter en text jag skrev 2019 och hittade den inte. Inte på webbplatsen, inte i exporten, inte i plattformens egen sökning. Tolvhundra nummer, och det enda register som fungerade var mitt minne.</p>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Det är den delen ingen berättar om sex år med nyhetsbrev. Att skicka är lätt. Att bevara är det inte.</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;">Allt du publicerar är en insättning. Uttaget bygger nästan 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å den här veckan byggde jag om de gamla numren till ett riktigt arkiv, med etiketter, fritextsökning och permanenta adresser. Det tog nio dagar. Antalet prenumeranter rörde sig inte. Tiden på webbplatsen tredubblades.</p>
        <p class="d-ink" style="margin:0 0 28px 0;font-size:18px;line-height:30px;color:#242424;">Allt står nedan, även de delar som inte fungerade.</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;">Läs hela numret &rarr;</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;">Skrivet för hand varje torsdag. Svara, så läser jag 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;">Avprenumerera</a> &middot; <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Visa i webbläsare</a></p>
      </td></tr>

    </table>
  </td></tr>
</table>
</body>
</html>

Källor till gratis nyhetsbrevsmallar

1. Brevo (rekommenderas)

Brevos gratisabonnemang innehåller 40+ responsiva nyhetsbrevsmallar inbyggda i drag-and-drop-editorn. Kategorier:

  • Välkomstmejl
  • Produktlanseringar
  • Veckodigest
  • Eventinbjudningar
  • Säsongskampanjer

Fördelar: gratis, responsivt, lätt att anpassa, ingen HTML krävs Kom igång: Skapa gratis Brevo-konto

2. Canva

Canva erbjuder e-postvänliga mallar som du anpassar i deras designverktyg.

3. Stripo

Stripo erbjuder 1.100+ gratis responsiva e-postmallar som exporteras till valfri ESP.

4. BEEFree

BEE erbjuder en gratis malleditor med professionella designer.

Jämförelse av gratis mallkällor

KällaGratis mallarNo-code-editorExport till valfri ESPBäst för
Brevo40+ responsivaJaNative (inbyggt)Att skicka kampanjer från start till mål
CanvaMånga designerJaManuell exportVisuellt orienterade marknadsförare
Stripo1.100+JaJaVariation och ESP-flexibilitet
BEEFreeStort bibliotekJaJaFristående malldesign

Vill du designa, personalisera och skicka på ett ställe är Brevo den mest direkta vägen. Behöver du bara designfiler att klistra in i ett annat verktyg har Stripo och BEEFree de bredaste biblioteken.

Bästa praxis för nyhetsbrevsmallar

Design

  • Använd max 600 px bredd för kompatibilitet med e-postklienter
  • Behåll typsnittsstorlek 14-16 px för brödtext
  • Använd knapp-CTA:er i stället för textlänkar (minsta tap-target 44x44 px)
  • Begränsa till 2-3 färger ur din varumärkespalett
  • Använd webbsäkra typsnitt (Arial, Georgia, Verdana) med fallback

Innehållslayout

  • Omvänd pyramid: viktigaste innehållet först
  • F-pattern-scanning: nyckelinformation till vänster
  • Vitt utrymme: överlasta inte, låt innehållet andas
  • Förhållande mellan bild och text: 40 % bilder, 60 % text (för leverans)

Tekniskt

  • Lägg alltid till alt-text för bilder
  • Testa i klienter: Gmail, Outlook, Apple Mail, Yahoo
  • Håll total e-poststorlek under 100 KB för snabb laddning
  • Använd inline CSS för konsekvent rendering

Nyhetsbrevsmallar per typ

1. Mall för välkomstnyhetsbrev

Syfte: ge ett bra första intryck Nyckelelement: varumärkesintro, värdeerbjudande, vad man kan förvänta sig, quick-win-CTA

2. Mall för veckodigest

Syfte: regelbunden innehållssammanställning Nyckelelement: kurerade sektioner, korta sammanfattningar, läs-mer-länkar

3. Mall för produktlansering

Syfte: lansera nya produkter eller funktioner Nyckelelement: produktbild, kärnfördelar, pris, köp-CTA

4. Mall för kampanj

Syfte: driva försäljning med erbjudanden Nyckelelement: rabattkod, produktbilder, urgency-element, shop-CTA

5. Mall för utbildning

Syfte: leverera värde och bygga förtroende Nyckelelement: tips eller how-to-innehåll, ren layout, diskret CTA

Skapa ditt nyhetsbrev i Brevo

  1. Registrera dig för Brevos gratisabonnemang
  2. Välj en mall ur biblioteket eller börja från noll
  3. Anpassa med drag-and-drop: lägg till logotyp, färger, innehållsblock
  4. Förhandsgranska på desktop och mobil
  5. Testa genom att skicka till dig själv och kollegor
  6. Schemalägg eller skicka direkt

Brevos editor sparar dina anpassade mallar för återanvändning, och du kan skapa varumärkesanpassade mallbibliotek till ditt team.

Tips för högre engagemang

  • Personalisera hälsningen och innehållet utifrån segment
  • A/B-testa olika layouter för att hitta vad som fungerar (A/B-testguide)
  • Håll det scanningsbart, läsare lägger i snitt 11 sekunder per e-post
  • En primär CTA, ge inte läsaren för många val
  • Konsekvent schema, träna läsaren att förvänta sig och öppna dina e-postmeddelanden

Koppla mallar till kunddata

En polerad mall är bara så bra som publiken den når. De team som får mest ut av nyhetsbrev kopplar sin butiksdata till sitt e-postverktyg så att varje utskick blir riktat, inte generiskt. Tajo synkar Shopify-kund-, produkt- och orderdata till Brevo, så att samma mall kan personaliseras per segment: en välkomstlayout för nya prenumeranter, en produktlansering för tidigare köpare i kategorin, eller ett win-back-erbjudande för kunder som tappats. Mallen förblir konsekvent, innehållet och målgruppen anpassas automatiskt.

Nästa steg

  1. Starta med Brevos gratisabonnemang och utforska deras mallbibliotek
  2. Läs vår designguide för nyhetsbrev för avancerade tips
  3. Kolla in nyhetsbrevsexempel för inspiration
  4. Sätt upp din första e-postkampanj

Vanliga Frågor

Var hittar jag gratis nyhetsbrevsmallar?
Brevo har dussintals gratis, responsiva nyhetsbrevsmallar i sin drag-and-drop-editor, utan att du behöver designkunskaper. Du hittar också gratis mallar på plattformar som Canva, Stripo och BEEFree.
Vad utmärker en bra nyhetsbrevsmall?
En bra nyhetsbrevsmall är mobilresponsiv, har en tydlig visuell hierarki, använder dina varumärkesfärger, innehåller en tydlig CTA, laddar snabbt och fungerar i alla e-postklienter (Gmail, Outlook, Apple Mail).
Behöver jag HTML-kunskaper för att skapa nyhetsbrevsmallar?
Nej. Moderna e-postplattformar som Brevo erbjuder drag-and-drop-editorer som skapar snygga, responsiva mallar utan kod. Du anpassar färger, layouter, bilder och typsnitt visuellt.
Hur ofta ska jag skicka ett nyhetsbrev?
Välj en kadens du kan hålla över tid. Ett förutsägbart veckovis eller månatligt schema tränar läsaren att förvänta sig och öppna dina mejl, och det betyder mer än ren frekvens.
Dela denna artikel:
Tillbaka till alla artiklar

Ansök om tidig åtkomst

Fyll i ditt förnamn och en e-postadress eller ett telefonnummer. Vi hör av oss med information om hur du får åtkomst till Tajo.

automatisk identifiering
Skaffa Brevo