E-mail-marketing
Dizájn

Hírlevél sablonok: ingyenes letöltések, design tippek és példák (2026)

Szerezz ingyenes hírlevél sablonokat és design inspirációt. Reszponzív HTML sablonok, design bevált gyakorlatok és példák minden iparágra.

Set Noa
Set Noa
Frissítve
0 látogatás · 7 nap
newsletter templates
Hírlevél sablonok?

Szerezz ingyenes hírlevél sablonokat és design tippeket. A Brevo reszponzív, testreszabható sablonokat tartalmaz az ingyenes csomagjában, kódolás nélkül.

Tudjon meg többet

Röviden: Egy jó hírlevél sablon mobilbarát, egyoszlopos, márkahű, és egy világos CTA köré épül. A Brevo 40+ ingyenes reszponzív sablont tartalmaz a drag-and-drop szerkesztőjében kódolás nélkül; a Canva, Stripo és BEEFree szilárd alternatívák design fájlokhoz.

Egy nagyszerű hírlevél sablon elvégzi a nehéz munkát az e-mail marketinged számára, professzionálissá teszi a tartalmadat, a CTA-hoz vezeti az olvasókat, és tökéletesen működik minden eszközön és e-mail kliensen.

Ez az útmutató mindent lefed a hírlevél sablonokról: hol találsz ingyeneseket, hogyan tervezz hatékonyakat, és példákat minden iparágból.

Mi tesz nagyszerűvé egy hírlevél sablont

Alapvető elemek

  1. Mobilbarát design, az e-mailek 60%+-át mobilon nyitják meg
  2. Tiszta vizuális hierarchia, vezesd a szemet a címsortól a CTA-ig
  3. Márkakonzisztencia, színek, betűtípusok és logóelhelyezés
  4. Egyoszlopos elrendezés, a legjobb olvashatóság az eszközökön
  5. Kiemelkedő CTA, egy világos művelet e-mailenként
  6. Preheader szöveg, kiterjeszti a tárgysort a postaládában
  7. Leiratkozási link, törvény által előírt (CAN-SPAM, GDPR)

Sablon anatómia

┌─────────────────────────┐
│  Logó / Márkafejléc      │
├─────────────────────────┤
│  Hero kép                │
├─────────────────────────┤
│  Címsor                  │
│  Törzsszöveg (2-3 sor)   │
│  [CTA gomb]              │
├─────────────────────────┤
│  Tartalom szekció 2      │
│  [Másodlagos CTA]        │
├─────────────────────────┤
│  Lábléc / Közösségi link │
│  Leiratkozási link        │
└─────────────────────────┘
Tajo sablonok

Négy elrendezés működés közben

Az alábbi panelek mindegyike a sablon valódi e-mail HTML-je, valódi szélességű keretben. Húzza a szélességet 375 px-re, és nézze meg, hogyan rendeződnek egymás alá az oszlopok.

Követi a témáját — váltson a fejlécben, ha a másikat szeretné látni.

A(z) The Letter HTML-jének elolvasása 6 KB, fordítási lépés nélkül 
<!DOCTYPE html>
<html lang="hu" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>The Letter</title>
<style>
  body { margin:0; padding:0; width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
  table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
  img { border:0; outline:none; line-height:100%; -ms-interpolation-mode:bicubic; display:block; }
  a { text-decoration:underline; }
  @media only screen and (max-width:620px) {
    .wrap { width:100% !important; }
    .stack { display:block !important; width:100% !important; max-width:100% !important; }
    .gutter { padding-left:20px !important; padding-right:20px !important; }
    .cta { display:block !important; width:100% !important; box-sizing:border-box !important; text-align:center !important; }
    .h1 { font-size:26px !important; line-height:32px !important; }
    .thumb { width:100% !important; height:auto !important; max-width:100% !important; }
    /* A digest row is the one two-column layout that should NOT stack: the
       thumbnail shrinks and stays beside the headline, because a roundup is
       read by scanning and a full-width decorative image per story destroys
       that. */
    .row-thumb { width:80px !important; }
    .row-thumb img { width:80px !important; height:80px !important; }
    .hide-sm { display:none !important; }
  }
@media (prefers-color-scheme: dark) {

    .d-bg { background-color:#151515 !important; }
    .d-card { background-color:#1c1c1c !important; }
    .d-ink { color:#f2f2f2 !important; }
    .d-mute { color:#a8a8a8 !important; }
    .d-rule { border-color:#3a3a3a !important; }
  }
</style>
</head>
<body class="d-bg" style="margin:0;padding:0;background-color:#f0efec;">
<span style="display:none;font-size:1px;color:#fefefe;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">Az az idézet, amit a jegyzetalkalmazásában őriz, többet dolgozik, mint a tartalomnaptára.</span><span style="display:none;font-size:1px;color:#fefefe;">&#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 fejléc: koncentrikus kék ívek, átlós sávval keresztezve" style="width:100%;height:auto;max-width:600px;">
      </td></tr>

      <tr><td class="gutter" style="padding:36px 88px 0 88px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
        <p class="d-mute" style="margin:0 0 6px 0;font-size:13px;line-height:18px;letter-spacing:.08em;text-transform:uppercase;color:#6b6b6b;">Meridian Press · 47. szám</p>
      </td></tr>

      <tr><td class="gutter" style="padding:0 88px;font-family:Georgia,'Times New Roman',Times,serif;">
        <h1 class="h1 d-ink" style="margin:0 0 20px 0;font-size:34px;line-height:42px;font-weight:400;color:#141414;">Az archívum maga a termék</h1>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Három hete kerestem egy 2019-ben írt szöveget, és nem találtam. Sem az oldalon, sem az exportban, sem a platform saját keresőjében. Ezerkétszáz szám, és az egyetlen működő mutató a memóriám volt.</p>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Ezt nem mondja el senki hat év hírlevélről. Küldeni könnyű. Megőrizni nem.</p>
      </td></tr>

      <tr><td class="gutter" style="padding:8px 88px 28px 88px;">
        <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
          <tr><td class="quote" style="border-left:3px solid #0084d1;padding:4px 0 4px 0;padding-left:20px;font-family:Georgia,'Times New Roman',Times,serif;">
            <p class="d-ink" style="margin:0;font-size:19px;line-height:30px;font-style:italic;color:#141414;">Minden, amit közzétesz, betét. A kivételt szinte senki nem építi meg.</p>
          </td></tr>
        </table>
      </td></tr>

      <tr><td class="gutter" style="padding:0 88px;font-family:Georgia,'Times New Roman',Times,serif;">
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Ezen a héten tehát valódi archívummá építettem újra a korábbi számokat: címkékkel, teljes szöveges kereséssel és állandó címekkel. Kilenc napig tartott. Az előfizetők száma nem mozdult. Az oldalon töltött idő megháromszorozódott.</p>
        <p class="d-ink" style="margin:0 0 28px 0;font-size:18px;line-height:30px;color:#242424;">Az egész lent van, azokkal a részekkel együtt, amelyek nem működtek.</p>
      </td></tr>

      <tr><td class="gutter" style="padding:0 88px 36px 88px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
        <a href="https://example.com" style="font-size:17px;line-height:24px;font-weight:600;color:#0084d1;text-decoration:underline;">A teljes szám elolvasása &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;">Minden csütörtökön kézzel írom. Válaszoljon, és elolvasom.</p>
        <p class="d-mute" style="margin:0;font-size:13px;line-height:20px;color:#8a8a8a;">Meridian Press, 14 Harbour Lane, Bristol BS1 4TT<br>
        <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Leiratkozás</a> &middot; <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Megtekintés böngészőben</a></p>
      </td></tr>

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

Ingyenes hírlevél sablon források

1. Brevo (Ajánlott)

A Brevo ingyenes csomagja 40+ reszponzív hírlevél sablont tartalmaz, amelyek beépítve találhatók a drag-and-drop szerkesztőbe. A kategóriák tartalmazzák:

  • Üdvözlő e-mailek
  • Termékbejelentések
  • Heti összefoglalók
  • Eseménymeghívók
  • Szezonális kampányok

Előnyök: ingyenes, reszponzív, könnyen testreszabható, nem kell HTML Kezdd el: Hozz létre ingyenes Brevo fiókot

2. Canva

A Canva e-mailbarát sablonokat kínál, amelyeket a design eszközével szabhatsz testre.

3. Stripo

A Stripo 1100+ ingyenes reszponzív e-mail sablont biztosít, amelyek bármilyen ESP-be exportálhatók.

4. BEEFree

A BEE ingyenes sablonszerkesztőt kínál profi designokkal.

Ingyenes sablonforrás összehasonlítás

ForrásIngyenes sablonokKód nélküli szerkesztőBármely ESP-be exportMire a legjobb
Brevo40+ reszponzívIgenNatív (beépített)Kampányok küldése elejétől a végéig
CanvaSok designIgenKézi exportVizuális orientáltságú marketingesek
Stripo1100+IgenIgenVáltozatosság és ESP rugalmasság
BEEFreeNagy könyvtárIgenIgenÖnálló sablontervezés

Ha egy helyen szeretnél tervezni, személyre szabni és küldeni, a Brevo a legközvetlenebb út. Ha csak design fájlokra van szükséged, hogy egy másik eszközbe töltsd, a Stripo és BEEFree könyvtárai a legszélesebbek.

Hírlevél sablon bevált gyakorlatok

Design

  • Használj maximum 600px szélességet az e-mail kliensek kompatibilitása miatt
  • Tartsd a betűméretet 14-16px között törzsszövegnél
  • Használj gomb CTA-kat, ne szöveges linkeket (minimum 44x44px tap célzás)
  • Korlátozd 2-3 színre a márkapalettádból
  • Használj webbiztos betűtípusokat (Arial, Georgia, Verdana) tartalék betűtípusokkal

Tartalom elrendezés

  • Fordított piramis: legfontosabb tartalom legelöl
  • F-mintázatú olvasás: kulcsinfó a bal oldalon
  • Fehér tér: ne zsúfold a tartalmat, hagyd levegőzni
  • Kép-szöveg arány: 40% kép, 60% szöveg (kézbesíthetőség miatt)

Technikai

  • Mindig adj alt szöveget a képekhez
  • Tesztelj klienseken: Gmail, Outlook, Apple Mail, Yahoo
  • Tartsd a teljes e-mail méretet 100KB alatt a gyors betöltéshez
  • Használj inline CSS-t a konzisztens megjelenítéshez

Hírlevél sablonok típus szerint

1. Üdvözlő hírlevél sablon

Cél: Nagyszerű első benyomást kelteni Kulcselemek: márkabemutatás, értékajánlat, mire számíthat, gyors nyertes CTA

2. Heti összefoglaló sablon

Cél: rendszeres tartalom-összegzés Kulcselemek: kurált szekciók, rövid összefoglalók, „olvass tovább” linkek

3. Termékbejelentés sablon

Cél: új termékek/funkciók bevezetése Kulcselemek: termékkép, kulcselőnyök, árazás, vásárlási CTA

4. Promóciós sablon

Cél: értékesítés növelése ajánlatokkal Kulcselemek: kedvezménykód, termékképek, sürgősség eleme, vásárlási CTA

5. Oktató sablon

Cél: érték biztosítása és bizalom építése Kulcselemek: tippek vagy how-to tartalom, tiszta elrendezés, finom CTA

Hírleveled létrehozása a Brevóban

  1. Regisztrálj a Brevo ingyenes csomagjára
  2. Válassz sablont a könyvtárból, vagy kezdd a nulláról
  3. Szabd testre drag-and-drop-pal: adj hozzá logót, színeket, tartalomblokkokat
  4. Tekintsd meg asztalon és mobilon
  5. Teszteld úgy, hogy elküldöd magadnak és kollégáknak
  6. Ütemezd vagy küldd azonnal

A Brevo szerkesztője menti az egyedi sablonjaidat újrahasználatra, és márkás sablonkönyvtárakat hozhatsz létre a csapatodnak.

Tippek nagyobb elköteleződéshez

  • Szabd személyre az üdvözlést és a tartalmat a szegmensek alapján
  • A/B teszteld a különböző elrendezéseket, hogy lásd, mi működik (A/B tesztelési útmutató)
  • Tartsd átfutathatóvá, az olvasók átlagosan 11 másodpercet töltenek e-mailenként
  • Egy elsődleges CTA, ne adj túl sok választást az olvasóknak
  • Konzisztens ütemterv, képezd az olvasókat, hogy várják és nyissák meg az e-mailjeidet

Sablonok összekapcsolása a vásárlói adatokkal

Egy csiszolt sablon csak annyira jó, mint a közönség, akit elér. A hírlevelekből legtöbbet kihozó csapatok az áruházadataikat az e-mail eszközükhöz kötik, hogy minden küldés célzott legyen, ne általános. A Tajo a Shopify vásárlói, termék- és rendelési adatokat a Brevóba szinkronizálja, így ugyanaz a sablon szegmensenként személyre szabható: üdvözlő elrendezés új feliratkozóknak, termékbejelentés az adott kategória korábbi vásárlóinak, vagy visszaszerző ajánlat inaktív vásárlóknak. A sablon konzisztens marad; a tartalom és a közönség automatikusan alkalmazkodik.

Következő lépések

  1. Kezdd el a Brevo ingyenes csomagjával, és fedezd fel a sablonkönyvtárukat
  2. Olvasd el a hírlevél design útmutatónkat haladó tippekért
  3. Nézz meg hírlevél példákat inspirációért
  4. Állítsd be az első e-mail kampányodat

Gyakran Ismételt Kérdések

Hol találok ingyenes hírlevél sablonokat?
A Brevo tucatnyi ingyenes, reszponzív hírlevél sablont tartalmaz a drag-and-drop e-mail szerkesztőjében, design készségek nélkül. Találhatsz ingyenes sablonokat olyan platformokon is, mint a Canva, Stripo és BEEFree.
Mi tesz jóvá egy hírlevél sablont?
Egy jó hírlevél sablon mobilbarát, világos vizuális hierarchiával rendelkezik, a márkád színeit használja, kiemelkedő CTA-t tartalmaz, gyorsan betöltődik, és minden e-mail kliensben működik (Gmail, Outlook, Apple Mail).
Kellenek HTML ismeretek hírlevél sablonok készítéséhez?
Nem. A modern e-mail platformok, mint a Brevo, drag-and-drop szerkesztőket kínálnak, amelyek gyönyörű, reszponzív sablonokat hoznak létre kódolás nélkül. Vizuálisan szabhatod testre a színeket, elrendezéseket, képeket és betűtípusokat.
Milyen gyakran küldjek hírlevelet?
Válassz olyan ütemet, amelyet konzisztensen fenn tudsz tartani. Egy kiszámítható heti vagy havi ütemterv arra képzi az olvasókat, hogy várják és nyissák meg az e-mailjeidet, ami fontosabb, mint a nyers gyakoriság.
Cikk megosztása:
Vissza az összes cikkhez

Kérj korai hozzáférést

Add meg a keresztnevedet, valamint egy e-mail-címet vagy telefonszámot. Hamarosan elküldjük a Tajo eléréséhez szükséges információkat.

automatikus felismerés
Brevo beszerzése