--- title: "E-mail hírlevél dizájn kézikönyv: elrendezések, sablonok, mobilos tesztelés és példák (2026)" description: "Tervezz e-mail hírleveleket gyakorlatias útmutatással az elrendezéshez, a hierarchiához, a sablonokhoz, a mobilos megjelenítéshez, az akadálymentességhez, a sötét módhoz, a teszteléshez és az e-kereskedelmi személyre szabáshoz." url: https://tajo.io/hu/blog/email-newsletter-design-guide/ markdown: https://tajo.io/hu/blog/email-newsletter-design-guide.md lang: hu-HU robots: noindex --- [E-mail](https://tajo.io/hu/blog/?category=email) # E-mail hírlevél dizájn kézikönyv: elrendezések, sablonok, mobilos tesztelés és példák (2026) Tervezz e-mail hírleveleket gyakorlatias útmutatással az elrendezéshez, a hierarchiához, a sablonokhoz, a mobilos megjelenítéshez, az akadálymentességhez, a sötét módhoz, a teszteléshez és az e-kereskedelmi személyre szabáshoz. email newsletter Hogyan tervezzünk könnyen olvasható hírlevelet? Az erős hírlevéldizájn ismételhető gyártási rendszer: világos hierarchia, mobilelsődleges elrendezés, akadálymentes tipográfia és kontraszt, optimalizált képek, egyetlen fő CTA, tesztelt megjelenítés, jogszabályoknak megfelelő lábléc és biztonságos személyre szabás megbízható vásárlói adatokból. [Tudjon meg többet](https://tajo.io/hu/blog/email-newsletter-design-guide/#mi%C3%A9rt-sz%C3%A1m%C3%ADt-az-e-mail-h%C3%ADrlev%C3%A9l-diz%C3%A1jnja) Az e-mail hírlevelek azért működnek még mindig, mert közvetlen utat adnak a márkáknak, kiadóknak, alkotóknak és e-kereskedelmi csapatoknak azokhoz a feliratkozókhoz, akiket engedéllyel kereshetnek meg. A dizájn dönti el, hogy ez az üzenet olvasható, hiteles, cselekvésre bíró és minden e-mail kliensben használható lesz-e. A mostani frissítés eltávolítja az alátámasztatlan benchmark-állításokat, és gyakorlatias 2026-os hírlevéldizájn-kézikönyvvé alakítja az oldalt. ## Miért számít az e-mail hírlevél dizájnja Mielőtt a technikákba merülnénk, értsük meg, miért játszik ilyen kritikus szerepet a dizájn a hírlevél sikerében. ### Az első képernyő próbája A feliratkozók alapból nem olvassák végig a hírlevelet fentről lefelé. Átfutják a feladót, a tárgysort, az előnézeti szöveget, a fejlécet, az első címsort, a képeket és az első CTA-t, mielőtt eldöntenék, megér-e az üzenet több figyelmet. Egy jó első képernyő gyorsan válaszol négy kérdésre: - Ki küldte ezt? - Miért kapom? - Mi a fő érték? - Mi a következő lépés? ### Mit befolyásol valójában a dizájn Kerüld az olyan alátámasztatlan állításokat, mint hogy „ez a dizájnváltozás kétszámjegyű kattintásnövekedést hoz”, hacsak nincs saját kontrollált tesztelésed. A hírlevéldizájn gyakorlati mechanizmusokon keresztül hat a teljesítményre: | Dizájntényező | Mit javít | Mit ellenőrizz | | --- | --- | --- | | Világos hierarchia | Gyorsabb átfutás és megértés | Egy pillantással felismeri az olvasó a fő üzenetet? | | Mobilos elrendezés | Használhatóság kis képernyőn | Tisztán egymás alá rendeződik az elrendezés vízszintes görgetés nélkül? | | Képstratégia | Kontextus és vizuális érdekesség | Van értelme az e-mailnek akkor is, ha a képek le vannak tiltva? | | Akadálymentes kontraszt | Olvashatóság több feliratkozónak | Megfelel a szöveg és a gombok kontrasztja a követelményeknek? | | CTA világossága | Magabiztos cselekvés | Van egyetlen fő cselekvés és leíró gombszöveg? | | Márkakövetkezetesség | Felismerhetőség és bizalom | Illik a dizájn a webhelyhez, a termékhez és a többi csatornához? | | Megjelenítési tesztelés | Megbízhatóság a kliensek között | Tesztelted az üzenetet indítás előtt? | A hírleveled dizájnja hat a megnyitástól kattintásig tartó viselkedésre, a konverzió minőségére, a leiratkozásokra, a panaszokra és a feliratkozói bizalomra. A pontos növekmény a listádon, az üzeneteden, az ajánlatodon és a tesztelési fegyelmeden múlik. 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** ``` The Letter Az az idézet, amit a jegyzetalkalmazásában őriz, többet dolgozik, mint a tartalomnaptára. ͏ ͏ ͏ ͏ ͏ ``` ## Az e-mail hírlevél dizájn alapelvei ### 1. Vizuális hierarchia A vizuális hierarchia abban a sorrendben vezeti végig az olvasót a tartalmon, ahogy te szeretnéd. Nélküle a feliratkozók összevissza olvasnak, és lemaradnak a kulcsüzenetekről. #### Hatékony vizuális hierarchia kialakítása **Méret**: a nagyobb elemek vonzzák először a figyelmet. A címsorod legyen jelentősen nagyobb a törzsszövegnél, a CTA-k pedig egyértelműen emelkedjenek ki. **Szín**: az erős vagy kontrasztos színek fókuszpontot teremtenek. A márkád kiemelő színét használd a fő CTA-khoz és a fontos elemekhez. **Térköz**: az üres tér (vagy negatív tér) elválasztja az elemeket, és pihenőhelyet ad a szemnek. A sűrű dizájn nyomasztó, a levegős pedig prémium hatású. **Pozíció**: a szemmozgás-vizsgálatok szerint az olvasók természetesen F vagy Z alakban futják át a tartalmat. A legfontosabb tartalmat ezekre az útvonalakra helyezd. #### Példa vizuális hierarchiára ``` [LOGÓ] [MEGTEKINTÉS BÖNGÉSZŐBEN] NAGY FŐCÍM (ELSŐ FIGYELEM) Támogató alcím több részlettel [HERO KÉP] Törzsszöveg, amely kontextust és értéket ad az olvasónak. Tartsd a bekezdéseket rövidnek és átfuthatónak. [ELSŐDLEGES CTA GOMB] [MÁSODLAGOS TARTALOM] [MÁSODLAGOS TARTALOM] [LÁBLÉC] ``` ### 2. Márkakövetkezetesség A hírleveledről azonnal fel kell ismerni, hogy a te márkádtól jött. A következetesség bizalmat épít, és minden küldéssel erősíti a márkaidentitást. #### Megőrzendő márkaelemek - **Logóelhelyezés**, ugyanaz a pozíció minden e-mailben (jellemzően bal felül vagy középen) - **Színpaletta**, használj következetesen 2-3 márkaszínt - **Tipográfia**, maradj 1-2 betűcsaládnál - **Képi stílus**, következetes fotós vagy illusztrációs megközelítés - **Hang és stílus**, illeszkedjen a webhelyedhez és a többi kommunikációdhoz #### Márkakövetkezetességi ellenőrzőlista | Elem | Irányelv | | --- | --- | | Elsődleges szín | CTA-khoz és kiemelésekhez | | Másodlagos szín | Szekciókhoz és elválasztókhoz | | Logó | Fejlécben mindig, láblécben opcionálisan | | Betűtípusok | Legfeljebb 2 család (címsor és törzs) | | Képi stílus | Következetes szűrők, vágás, kompozíció | ### 3. A fordított piramis modell A hírleveled tartalmát fordított piramisként építsd fel: a legfontosabb információ felül, a támogató részletek alatta. ``` A LEGFONTOSABB (Főcím, kulcsüzenet, hero) TÁMOGATÓ INFORMÁCIÓ (Kontextus, előnyök, részletek) CSELEKVÉSRE FELHÍVÁS (Egyértelmű következő lépés) ``` Ez a szerkezet biztosítja, hogy azok a feliratkozók is megkapják a lényeget, akik nem görgetnek tovább. ### 4. A harmadolás szabálya A fotózásból és a grafikai tervezésből átvett harmadolási szabály kiegyensúlyozott, vizuálisan vonzó elrendezéseket hoz létre. Oszd fel az e-mailt egy három szer hármas rácsra, és helyezd a kulcselemeket a rácsvonalakra vagy a metszéspontokra. Ez természetes egyensúlyt teremt, és stratégiai helyekre irányítja a figyelmet. ### 5. Az üres tér a barátod Az üres tér, vagyis az elemek közötti kihagyott hely, az egyik legerősebb dizájneszköz. Ez a szerepe: - **Javítja az olvashatóságot** azzal, hogy megakadályozza a szöveg zsúfolódását - **Fókuszt teremt** a fontos elemek elkülönítésével - **Minőséget közvetít** (a prémium márkák bőkezűen bánnak vele) - **Csökkenti a kognitív terhelést** az olvasón **Ajánlás:** használj legalább 20 képpont térközt a nagyobb szekciók között, és 10-15 képpontot a szekción belüli elemek között. ## E-mail hírlevél elrendezéstípusok A különböző hírlevélcélokhoz különböző elrendezések illenek. Íme a leghatékonyabb szerkezetek. ### 1. Egyhasábos elrendezés **Kinek való:** mobilelsődleges közönségnek, történetvezérelt tartalomhoz, minimalista márkáknak ``` [FEJLÉC] [HERO KÉP] [FŐCÍM] [TÖRZSSZÖVEG] [CTA] [MÁSODLAGOS TARTALOM] [LÁBLÉC] ``` **Előnyök:** - Tökéletes mobilos reszponzivitás - Könnyen átfutható és olvasható - Egyszerű megtervezni és lekódolni - Természetes tartalomfolyam **Legjobb gyakorlatok:** - Maximális szélesség: 600 képpont - Sorhossz: 50-75 karakter - Szekciónként egy fő CTA ### 2. Kéthasábos elrendezés **Kinek való:** e-kereskedelmi bemutatókhoz, tartalomválogatásokhoz, egymás melletti összehasonlításokhoz ``` [FEJLÉC] [HERO SZEKCIÓ] [TERMÉK 1] [TERMÉK 2] [KÉP] [KÉP] [SZÖVEG] [SZÖVEG] [CTA] [CTA] [LÁBLÉC] ``` **Előnyök:** - Hatékonyan mutat be több elemet - Vizuális érdekességet teremt - Jó összehasonlító tartalomhoz **Legjobb gyakorlatok:** - Mobilon egy hasábba rendeződjön - Egyenlő hasábszélességek az egyensúlyért - Minimális hasábszélesség: 280 képpont ### 3. Hibrid vagy moduláris elrendezés **Kinek való:** tartalomgazdag hírlevelekhez, hírösszefoglalókhoz, több témát átfogó kommunikációhoz ``` [FEJLÉC] [KIEMELT CIKK] [2. CIKK] [3. CIKK] [TELJES SZÉLESSÉGŰ CTA] [1. ELEM] [2. ELEM] [3. ELEM] [LÁBLÉC] ``` **Előnyök:** - Nagyon rugalmas - Sokféle tartalomtípust befogad - Vizuális ritmust teremt **Legjobb gyakorlatok:** - Tartsd világosan elkülönítve a szekciókat - Vizuális jelzésekkel mutasd a tartalomhierarchiát - Gondosan teszteld a mobilos megjelenítést ### 4. Z mintázatú elrendezés **Kinek való:** promóciós e-mailekhez, bejelentő hírlevelekhez A Z mintázat a természetes szemmozgást követi az oldalon: balról jobbra, aztán átlósan lefelé, majd újra balról jobbra. ``` [LOGÓ] [MENÜ] Első vízszintes pásztázás Átlós mozgás [TARTALOM] [CTA] Második vízszintes pásztázás ``` **Legjobb gyakorlatok:** - A logót és a navigációt tedd az első vízszintes vonalra - A kulcsképeket helyezd a középső átlós útvonalra - A CTA-kat a vízszintes átfutási vonalak végére tedd ### 5. F mintázatú elrendezés **Kinek való:** szöveggazdag hírlevelekhez, oktató tartalomhoz Az olvasók F mintázatban futják át a szöveggazdag tartalmat: két vízszintes söprés, majd egy függőleges pásztázás a bal oldalon lefelé. ``` Első vízszintes söprés Második vízszintes söprés Függőleges pásztázás ``` **Legjobb gyakorlatok:** - A fontos információt tedd az első két sorba - A bekezdéseket fontos szavakkal kezdd - Használj balra igazított szöveget a könnyű átfutásért ## Mobilelsődleges e-mail dizájn A mobil aránya közönségtől, iparágtól és kampánytípustól függően változik, de a legtöbb hírlevélnek működnie kell kis képernyőn. Feltételezések helyett nézd meg a saját riportjaidat, aztán úgy tervezd a sablont, hogy a fő üzenet, a CTA és a lábléc mobilon is használható maradjon. ### Mobilos dizájnkövetelmények #### Érintésbarát felületek - **Minimális gombméret:** 44x44 képpont - **Érintési felületek térköze:** legalább 10 képpont a kattintható elemek között - **CTA elhelyezése:** középen, hüvelykujjal könnyen elérhetően #### Tipográfia mobilra | Elem | Asztali méret | Mobil méret | | --- | --- | --- | | Címsorok | 28-36 képpont | 22-28 képpont | | Alcímek | 20-24 képpont | 18-22 képpont | | Törzsszöveg | 16-18 képpont | Legalább 16 képpont | | CTA-k | 16-18 képpont | 16-18 képpont | #### Az egyhasábos elrendezés elsőbbsége A kéthasábos elrendezéseknek szépen egymás alá kell rendeződniük mobilon: ``` Asztali: Mobil: HASÁB 1 HASÁB 2 HASÁB 1 HASÁB 2 ``` ### Mobiloptimalizálási ellenőrzőlista - Egyhasábos vagy reszponzív többhasábos elrendezés - Nagyítás nélkül olvasható betűméretek (legalább 16 képpontos törzsszöveg) - Elég nagy gombok az érintéshez (legalább 44 képpont) - A képek megfelelően skálázódnak - Nincs szükség vízszintes görgetésre - A fontos tartalom görgetés nélkül látszik - Mobilos postafiókokra optimalizált előnézeti szöveg - A képek és a teljes fájlméret elég karcsú a mobilkapcsolatokhoz ### Reszponzív dizájntechnikák Használj CSS media query-ket a dizájn igazítására: ```css /* Desktop styles */ .content-wrapper { width: 600px; } /* Mobile styles */ @media only screen and (max-width: 480px) { .content-wrapper { width: 100% !important; } .column { display: block !important; width: 100% !important; } .mobile-center { text-align: center !important; } } ``` **Megjegyzés:** sok e-mail kliens korlátozottan támogatja a CSS-t. Elsődlegesen inline stílusokat használj, a media query-ket pedig kiegészítésként. ## Tipográfiai legjobb gyakorlatok A tipográfia meghatározza a hírleveled olvashatóságát és a márkád megítélését. ### Betűtípus-választás #### Webbiztos betűtípusok Ezek egységesen jelennek meg az e-mail kliensekben: - **Talpatlan:** Arial, Helvetica, Verdana, Trebuchet MS - **Talpas:** Georgia, Times New Roman, Palatino #### Webes betűtípusok e-mailben A modern e-mail kliensek támogatják a webes betűtípusokat @font-face vagy Google Fonts segítségével. Mindig adj meg tartalékot: ```css font-family: 'Open Sans', Arial, sans-serif; ``` **Tipp:** teszteld a webes betűtípusokat több kliensben. A Gmail, az Apple Mail és az iOS Mail támogatja őket, az Outlook nem. ### Tipográfiai irányelvek #### Sorhossz - **Optimális:** 50-75 karakter soronként - **Maximum:** 80 karakter - **600 képpontos szélességnél:** 16-18 képpontos betűméret adja az ideális sorhosszt #### Sormagasság - **Törzsszöveg:** a betűméret 1,5-1,7-szerese - **Címsorok:** a betűméret 1,2-1,3-szorosa #### Betűtípus-párosítás Használj kontrasztot a hierarchia megteremtéséhez: | Használati eset | Példa párosítás | | --- | --- | | Klasszikus | Georgia (címsorok) és Arial (törzs) | | Modern | Montserrat (címsorok) és Open Sans (törzs) | | Professzionális | Roboto Slab (címsorok) és Roboto (törzs) | | Elegáns | Playfair Display (címsorok) és Lato (törzs) | ### Szövegformázási tippek - **Félkövért használj** a kiemeléshez, ne aláhúzást (az linket sugall) - **Korlátozd a CSUPA NAGYBETŰT** rövid címsorokra vagy CTA-kra - **Igazítsd balra a törzsszöveget** a könnyebb olvasásért - **Középre igazítsd a címsorokat** a vizuális egyensúlyért - **Kerüld a sorkizárt szöveget**, mert egyenetlen szóközöket hoz létre ## Képoptimalizálás e-mailhez A képek javítják a hírleveleket, de gondos optimalizálást igényelnek a teljesítmény és az akadálymentesség érdekében. ### Képtípusok és felhasználásuk | Képtípus | Mire jó | Formátum | | --- | --- | --- | | Fő kép vagy banner | Fő vizuális fókusz | JPEG vagy WebP | | Termékfotók | E-kereskedelmi bemutatók | JPEG | | Ikonok és grafikák | CTA-k, felsorolásjelek | PNG vagy SVG | | Logók | Márkaazonosítás | PNG (átlátszó) | | Animált | Figyelemfelkeltés | GIF | ### Képméretezési irányelvek - **Maximális szélesség:** 600 képpont (megegyezik az e-mail szélességével) - **Fő képek:** 600 x 300-400 képpont - **Termékképek:** 280-300 képpont szélesség - **Miniatűrök:** 100-150 képpont szélesség ### A képek fájlméretének optimalizálása A nagy képek lassítják a betöltést, és növelik a spam mappába kerülés esélyét. **Célfájlméretek:** - Fő képek: 200 KB alatt - Termékképek: 100 KB alatt - Ikonok: 10 KB alatt - Teljes e-mail méret: 1 MB alatt **Optimalizálási technikák:** - Fényképekhez használj JPEG-et (80-85%-os minőség) - Átlátszóságot igénylő grafikákhoz PNG-t - Tömörítsd a képeket olyan eszközökkel, mint a TinyPNG vagy az ImageOptim - Fontold meg a WebP formátumot a támogató klienseknél ### Alt szöveg legjobb gyakorlatok Az alt szöveg kulcsfontosságú az akadálymentességhez és akkor, ha a képek nem töltődnek be: **Jó alt szöveg:** ```html Woman wearing our new Spring Collection blue linen dress, standing in a garden ``` **Rossz alt szöveg:** ```html image hero-image-spring-2025-v2-final.jpg ``` **Alt szöveg irányelvek:** - Írd le, mit mutat a kép - Természetesen illessz bele releváns kulcsszavakat - Maradj 125 karakter alatt - Legyen értelmes, ne csak „kép erről és erről” ### Retina kijelzők optimalizálása Az éles megjelenítéshez a nagy felbontású képernyőkön használj a megjelenítési méret kétszeresében képet: - Megjelenítési méret: 300 képpont szélesség - Képfájl: 600 képpont szélesség - Add meg explicit módon a szélességet a HTML-ben ```html Product description ``` ## Színpszichológia és színhasználat A szín érzelmeket befolyásol, figyelmet irányít, és erősíti a márkaidentitást. ### Színpszichológia az e-mailben | Szín | Társítások | Mire jó | | --- | --- | --- | | Kék | Bizalom, stabilitás, nyugalom | Pénzügy, tech, egészségügy | | Piros | Sürgősség, izgalom, szenvedély | Akciók, CTA-k, sürgősség | | Zöld | Növekedés, egészség, természet | Fenntarthatóság, egészség, siker | | Narancs | Energia, kreativitás, melegség | CTA-k, fiatalos márkák | | Lila | Luxus, kreativitás, bölcsesség | Prémium márkák, szépségápolás | | Sárga | Optimizmus, tisztaság, melegség | Kiemelések, figyelemfelkeltés | | Fekete | Kifinomultság, luxus | Prémium, divat | | Fehér | Tiszta, minimál, letisztult | Térközök, hátterek | ### Színarány-irányelvek Kövesd a 60-30-10 szabályt: - **60%:** elsődleges vagy háttérszín - **30%:** másodlagos szín - **10%:** kiemelő szín (CTA-k, kiemelések) ### Színkontraszt az akadálymentességhez Gondoskodj elegendő kontrasztról a szöveg és a háttér között: - **Normál szöveg:** legalább 4,5:1 kontrasztarány - **Nagy szöveg (18 képpont felett):** legalább 3:1 kontrasztarány - **Használj eszközöket:** WebAIM Contrast Checker **Magas kontrasztú példák:** - Fekete (#000000) fehéren (#FFFFFF), 21:1 - Sötétkék (#003366) fehéren, 12,6:1 - Fehér sötétlilán (#4A154B), 10,8:1 ### CTA-gombok színe A cselekvésre hívó gombjaidnak azonnal ki kell tűnniük: - Használd a legnagyobb kontrasztú kiemelő színedet - Tartsd következetesen minden e-mailben - A/B teszteld a különböző színeket az optimalizáláshoz - Ügyelj rá, hogy a szín különbözzön a törzsszöveg linkjeitől ## E-mail akadálymentesség Az akadálymentes e-mail dizájn biztosítja, hogy minden feliratkozó tudjon a tartalmaddal foglalkozni, azok is, akik segítő technológiákat használnak. ### WCAG-irányelvek e-mailhez A Web Content Accessibility Guidelines (WCAG) az e-mailre is vonatkozik: #### 1. Érzékelhető - Adj szöveges alternatívát a képekhez (alt szöveg) - Ne kizárólag színnel közvetíts információt - Gondoskodj megfelelő színkontrasztról - A szöveg átméretezhető legyen az elrendezés széttörése nélkül #### 2. Működtethető - Minden funkció legyen elérhető billentyűzetről - Adj elég időt a tartalom elolvasására - Ne használj villogó tartalmat, amely rohamot válthat ki #### 3. Érthető - Használj világos, egyszerű nyelvet - Tartsd következetesen a navigációt - Adj világos hibaüzeneteket #### 4. Robusztus - Használj érvényes HTML-t - Tesztelj több e-mail kliensben - Biztosítsd a kompatibilitást a segítő technológiákkal ### Akadálymentességi ellenőrzőlista - Minden képnek van leíró alt szövege - A színkontraszt megfelel a WCAG AA szintnek (4,5:1) - A linkek leírók („Olvasd el az útmutatónkat”, nem „Kattints ide”) - A betűméret legalább 14 képpont (16 az ajánlott) - Az e-mailnek logikus olvasási sorrendje van - A táblázatok csak elrendezésre szolgálnak, nem adatra (vagy megfelelő fejlécük van) - A nyelv deklarálva van a HTML-ben - A fókuszjelzés látható az interaktív elemeknél ### Képernyőolvasós szempontok Az e-mailedet a képernyőolvasót használóknak is strukturáld: - Ahol lehet, használj szemantikus HTML-t (h1, h2, p és így tovább) - Adj egyszerű szöveges verziót - Tegyél bele „Megnyitás böngészőben” linket - Kerüld a csak képből álló e-maileket - Tesztelj VoiceOverrel, NVDA-val vagy JAWS-szal ## Hatékony CTA-dizájn A cselekvésre hívásnál találkozik a dizájn a konverzióval. Ezt jól kell csinálni. ### CTA-gombok legjobb gyakorlatai #### Méret és forma - **Minimális méret:** 44 képpont magasság, 120 képpont szélesség - **Belső térköz:** legalább 12-16 képpont függőlegesen, 24-32 képpont vízszintesen - **Forma:** olyan gombformát használj, amely illik a márkához és könnyen felismerhető marad #### Szín és kontraszt - Használj olyan márkakiemelő színt, amely elüt a környező szekciótól - Gondoskodj magas kontrasztról a háttérrel szemben - A gomb szövege legyen kiválóan olvasható #### Szövegezési irányelvek - Használj cselekvő igéket: „Vásárolj most”, „Kezdd el”, „Töltsd le” - Teremts sürgősséget, ahol indokolt: „Igényeld a kedvezményedet” - Legyen rövid: 2-5 szó - Kerüld az általános szöveget: „Kattints ide”, „Küldés”, „Tudj meg többet” ### A CTA elhelyezése - **Fő CTA:** a hajtás felett (görgetés nélkül látható) - **Másodlagos CTA:** a támogató tartalom után - **E-mailenként egy fő CTA** (kerüld a döntésbénulást) ### CTA-szöveg példák | Iparág | Hatékony CTA | | --- | --- | | E-kereskedelem | „Vásárolj az akcióból” | | SaaS | „Indítsd az ingyenes próbát” | | Tartalom | „Olvasd el a teljes útmutatót” | | Rendezvények | „Lefoglalom a helyemet” | | Hírlevél | „Kérem a heti tippeket” | ### Gomb vagy szöveges link A fő cselekvésekhez gombot használj, a másodlagosakhoz szöveges linket: ``` [VÁSÁROLJ MOST] Elsődleges gomb (nagy vizuális súly) vagy nézd meg az újdonságokat Másodlagos szöveges link ``` ## E-mail hírlevél példák iparágak szerint Nézzük meg a hatékony hírlevéldizájnokat különböző iparágakban. ### E-kereskedelmi hírlevél dizájn **Kulcselemek:** - Kiváló minőségű termékfotózás - Világos árfeltüntetés - Több termék bemutatása - Erős promóciós üzenet - Könnyen érinthető „Vásárolj” gombok **Ajánlott elrendezés:** moduláris rács termékkártyákkal ``` AKCIÓS BANNER [HERO TERMÉK] 30% KEDVEZMÉNY [VÁSÁROLJ MOST] [TERMÉK 1] [TERMÉK 2] $49.99 $79.99 INGYENES SZÁLLÍTÁS $75 FELETT ``` ### SaaS és tech hírlevél dizájn **Kulcselemek:** - Letisztult, minimalista esztétika - Funkciókiemelések ikonokkal - Oktató tartalomfókusz - Világos értékajánlatok - Professzionális képanyag **Ajánlott elrendezés:** egyhasábos, funkcióblokkokkal ``` ÚJ FUNKCIÓ BEJELENTÉSE [FUNKCIÓ KÉPERNYŐKÉP] Első előny Második előny Harmadik előny [PRÓBÁLD KI MOST] ``` ### Média és kiadói hírlevél dizájn **Kulcselemek:** - Erős tipográfiai hierarchia - Cikkelőnézetek képekkel - Kategóriákba rendezés - Szerzői nevek - Olvasási idő jelzése **Ajánlott elrendezés:** kártyaalapú tartalomrács ``` VEZETŐ CIKK [NAGY KÉP] Ide jön a főcím Rövid kivonat... [2. CIKK] [3. CIKK] Főcím Főcím TOVÁBBI CIKKEK ``` ### B2B és szakmai szolgáltatói hírlevél dizájn **Kulcselemek:** - Visszafogott, professzionális dizájn - Szakmai vezető szerepet mutató tartalom - Esettanulmányok és adatok - Rendezvénypromóciók - Letölthető anyagok **Ajánlott elrendezés:** professzionális egyhasábos ``` [CÉG LOGÓJA] A HÓNAP ELEMZÉSEI Iparági jelentés A legfrissebb piacelemzésünk legfontosabb megállapításai... [OLVASS TOVÁBB] Közelgő webinárium március 15., 14:00 EST [REGISZTRÁLOK] ``` ## E-mail dizájn eszközök és források ### Dizájnplatformok **Drag and drop szerkesztők:** - Brevo (korábban Sendinblue), a Tajóval integrálva - Mailchimp - Klaviyo - Campaign Monitor **Professzionális tervezőeszközök:** - Figma (tervezés és prototípus) - Adobe XD - Sketch ### Sablonforrások **Ingyenes sablonok:** - Brevo sablonkönyvtár - Litmus Community sablonok - Email on Acid sablonok **Prémium sablonok:** - ThemeForest e-mail sablonok - Envato Elements - Creative Market ### Tesztelőeszközök - **Litmus**, e-mail előnézet több mint 90 kliensben - **Email on Acid**, kliensek közötti tesztelés - **Mail Tester**, spampontszám ellenőrzése - **Accessible Email**, akadálymentességi validálás ## Gyakori e-mail dizájnhibák, amelyeket kerülj el ### 1. Képnehéz e-mailek **Probléma:** egyes e-mail kliensek alapból blokkolják a képeket. A csak képből álló e-mailek üresnek látszanak. **Megoldás:** mindig tegyél bele élő szöveget. A képek egészítsék ki a tartalmat, ne helyettesítsék. ### 2. Túl sok CTA **Probléma:** a versengő CTA-k döntésbénulást okoznak. **Megoldás:** e-mailenként egy fő CTA. A másodlagos cselekvésekhez használj szöveges linket. ### 3. A mobil figyelmen kívül hagyása **Probléma:** az asztali nézetben remekül mutató dizájn mobilon megbukik. **Megoldás:** tervezz mobilelsődlegesen. Küldés előtt tesztelj több eszközön. ### 4. Gyenge kontraszt **Probléma:** az alacsony kontrasztú szöveg nehezen olvasható, és nem felel meg az akadálymentességi elvárásoknak. **Megoldás:** használj kontrasztellenőrző eszközöket. Tartsd a legalább 4,5:1 arányt. ### 5. Túlzsúfolt elrendezések **Probléma:** a sűrű dizájn nyomasztja az olvasót és csökkenti az elköteleződést. **Megoldás:** használj bőven üres teret. Kevesebb, de jobb minőségű tartalomra fókuszálj. ### 6. Következetlen márkamegjelenés **Probléma:** a webhelyedhez nem illő e-mailek összezavarják a feliratkozókat. **Megoldás:** készíts e-mailes márkaútmutatót. Használj sablonokat a következetességért. ### 7. Lassan betöltő e-mailek **Probléma:** a nagy fájlok betöltése sokáig tart, különösen mobilon. **Megoldás:** tömörítsd a képeket. Tartsd a teljes e-mail méretét 1 MB alatt. ## Hírlevéldizájn készítése a Brevóval és a Tajóval A Brevo adja a hírlevélgyártási réteget: sablonok, drag and drop szerkesztő, kampánybeállítás, kapcsolati mezők, személyre szabás, automatizálás, SMS, WhatsApp és riportolás, a csomagtól és a beállítástól függően. Szinkronizálja a vásárlói, rendelési, termék-, hozzájárulási, hűségprogram- és elköteleződési kontextust, így a hírlevelek jobb szegmenseket és biztonságosabb dinamikus tartalmat használhatnak. ### Gyakorlati munkafolyamat 1. Építsd fel az újrafelhasználható hírlevélsablont a Brevóban. 2. Határozd meg a személyre szabáshoz és a szegmentáláshoz szükséges adatmezőket. 3. A Tajóval tartsd elérhetővé a Shopify vásárlói, rendelési, termék- és hozzájárulási adatait a Brevo munkafolyamataihoz. 4. Hozz létre szegmenseket, például első vásárlók, VIP vásárlók, kategóriavásárlók, inaktív vásárlók és nemrég vásárlók, akiket ki kell zárni a kedvezményes küldésekből. 5. Dinamikus blokkokat csak akkor adj hozzá, ha meg van határozva a tartalék tartalom. 6. Indítás előtt teszteld a mobilos megjelenítést, a sötét mód viselkedését, a linkeket, a személyre szabást, a leiratkozást és a termékadatokat. ### Dinamikus tartalom szabályai A személyre szabás csak akkor javít egy hírlevélen, ha az adat pontos, és a tartalék tartalom biztonságos. Használj dinamikus tartalmat: - Termékajánlásokhoz a legutóbbi vásárlások vagy kategóriák alapján. - Hűségprogram-emlékeztetőkhöz ellenőrzött programadatok alapján. - Hely vagy nyelv szerinti változatokhoz, ha a feliratkozói adat megbízható. - Vásárlói életciklus-blokkokhoz, például első vásárlás, ismételt vásárlás vagy inaktív vásárló. Kerüld a dinamikus tartalmat: - Ha a forrásmező hiányos. - Ha a termék elérhetősége elavulhat. - Ha a tartalék tartalom hibásan nézne ki. - Ha a hozzájárulási vagy preferenciaadat nem egyértelmű. ## Következtetés Az e-mail hírlevél tervezése művészet és tudomány egyszerre. Az útmutatóban tárgyalt elvek, a vizuális hierarchia, a mobiloptimalizálás, az akadálymentesség, a tipográfia és a stratégiai CTA-elhelyezés alkotják azoknak a hírleveleknek az alapját, amelyek bevonnak és konvertálnak. Jegyezd meg ezeket a kulcstanulságokat: 1. **Tervezz mobilelsődlegesen**, a saját riportjaid eltérhetnek, de a kis képernyős használhatóságnak biztonságosnak kell lennie 2. **A világosság az első**, minden elemnek célt kell szolgálnia 3. **Tartsd a márkakövetkezetességet**, minden küldéssel építs felismerhetőséget 4. **Tesztelj folyamatosan**, a kis fejlesztések idővel összeadódnak 5. **Fókuszálj az akadálymentességre**, minden feliratkozónak tervezz, ne csak a többségnek A kiváló hírlevéldizájn nem arról szól, hogy minden trendet követsz, hanem arról, hogy világos, bevonó, márkahű kommunikációt hozol létre, amely tiszteli a feliratkozóid idejét és figyelmét. Készen állsz javítani a Shopify hírleveleiden a Brevóban? [Kérj korai hozzáférést](https://tajo.io/hu/#early-access), és szinkronizáld a vásárlói, rendelési, termék-, hozzájárulási, hűségprogram- és elköteleződési adatokat a Brevo munkafolyamataiba, hogy a dizájnjaid jobb szegmenseket és biztonságosabb személyre szabást használhassanak. ## Hol kap szerepet a Tajo A Tajo az agentic integrációépítő. Tartsd meg a szolgáltatóidat. Ágensek kötik be az összes többit, és te hagysz jóvá minden szinkronizálást. A Tajo korai hozzáférésben érhető el. [Kérj korai hozzáférést](https://tajo.io/hu/#early-access) ## Gyakran Ismételt Kérdések **Hogyan indíts e-mail hírlevelet?** Válassz platformot, fogalmazd meg a hírlevél ígéretét, építs hozzájáruláson alapuló feliratkozási űrlapokat, készíts egyszerű, mobilelsődleges sablont, küldj tesztkampányokat, és nézd át az elköteleződést, mielőtt összetett elrendezéseket vagy személyre szabást adnál hozzá. **Milyen gyakran küldj hírlevelet?** Nincs univerzálisan legjobb gyakoriság. Kezdj olyan ritmussal, amelyet fenn tudsz tartani, például hetivel, kéthetivel vagy havival, aztán igazíts az elköteleződés, a leiratkozások, a panaszok, a tartalom minősége és a feliratkozói elvárások alapján. **Mit tegyél a hírleveledbe?** Tegyél bele egyetlen világos fő üzenetet, hasznos tartalmat, átfutható szerkezetet, élő szöveget, alt szöveggel ellátott akadálymentes képeket, világos CTA-t, leiratkozási lehetőséget és küldői adatokat, dinamikus termék- vagy vásárlói tartalmat pedig csak akkor, ha az adat megbízható. **Mi az ideális szélesség egy e-mail hírlevélhez?** Az e-mail hírlevelek szabványos és ajánlott szélessége \*\*600 képpont\*\*. Ez a szélesség jól működik a legtöbb e-mail kliensen és eszközön, és elég helyet ad a tartalomnak. Mobilon az e-mailnek reszponzívnak kell lennie és a képernyő szélességéhez kell igazodnia, jellemzően úgy, hogy a többhasábos elrendezés egy hasábba rendeződik. **Hány képet tegyél a hírleveledbe?** Nincs kötött képszám. Használj annyi képet, amennyi támogatja az üzenetet, de az e-mail maradjon érthető akkor is, ha a képek le vannak tiltva. A legtöbb hírlevélnél a lényegi szöveg legyen élő szöveg, az érdemi képek kapjanak leíró alt szöveget, a fájlok legyenek tömörítve, és legyen egyszerű szöveges alternatíva. Kerüld a csak képből álló hírleveleket. **Milyen betűtípusok működnek a legjobban e-mail hírlevelekben?** A webbiztos betűtípusok, mint az \*\*Arial, a Helvetica, a Georgia és a Verdana\*\*, egységesen jelennek meg minden e-mail kliensben. Használhatsz webes betűtípusokat is (Google Fonts, Adobe Fonts) megfelelő tartalékokkal, de számíts rá, hogy egyes kliensek, például az Outlook, a tartalék betűtípust jelenítik meg. Maradj legfeljebb 1-2 betűcsaládnál a letisztult, professzionális megjelenésért. **Hogyan tedd akadálymentessé az e-mailjeidet?** A legfontosabb akadálymentességi gyakorlatok: \*\*alt szöveg\*\* minden képen, \*\*4,5:1 színkontraszt\*\* a szövegnél, \*\*leíró linkszöveg\*\* („kattints ide” helyett), \*\*legalább 14-16 képpontos betűméret\*\*, \*\*egyszerű szöveges verzió\*\* és \*\*megfelelő címsorhierarchia\*\*. Ahol lehet, tesztelj képernyőolvasóval. **Tervezz sötét módra is a hírleveleknél?** Igen, érdemes számolni a sötét móddal, mert a nagy e-mail kliensek különböző módon változtathatják meg a színeket. Néhány tipp: ne támaszkodj kizárólag a háttérszínre, adj logóváltozatokat, ahol szükséges, óvatosan használj átlátszó PNG-t, ellenőrizd a kontrasztot mindkét módban, és teszteld a fontos sablonokat azokban a kliensekben, amelyeket a közönséged ténylegesen használ. **Melyik a legjobb képformátum e-mailhez?** A \*\*JPEG\*\* a legjobb fényképekhez és összetett, sok színt tartalmazó képekhez. A \*\*PNG\*\* ideális átlátszóságot igénylő grafikákhoz, logókhoz és szöveges képekhez. A \*\*GIF\*\* egyszerű animációkhoz jó. A \*\*WebP\*\* jobb tömörítést kínál, de az e-mail kliensek támogatása korlátozott, ezért mindig adj tartalékot. A fő képeknél maradj 200 KB alatt, a teljes e-mail mérete pedig lehetőleg legyen 1 MB alatt. **Hogyan javítsd a hírleveled kattintási arányát?** A kattintási arány javításához: tedd könnyen megtalálhatóvá a fő CTA-t, használj leíró gombszöveget, tartsd elég nagyra az érintési felületet mobilon, csökkentsd a versengő cselekvéseket, írj olyan üzenetet, amely illik a feliratkozó szándékához, és egyszerre egy érdemi dizájn- vagy szövegváltozót tesztelj. A megnyitásokat és a kattintásokat diagnosztikai jelzésként kezeld, a fontos hírleveleket pedig ahol lehet, kösd konverziós vagy bevételi eredményhez. **Milyen gyakran frissítsd a hírleveled dizájnját?** Tartsd fenn a \*\*következetes márkamegjelenést\*\* a felismerhetőségért, miközben \*\*folyamatosan végzel kis optimalizálásokat\*\* a teljesítményadatok alapján. Fontolj meg \*\*nagyobb dizájnfrissítést\*\* 12-18 havonta, hogy naprakész maradj. A jelentős változtatásokat mindig A/B teszteld, mielőtt a teljes listára kiengeded. A szezonális változatok és a különkiadások változatosságot adnak anélkül, hogy elvesznének a márka következetességéből. ## Kapcsolódó cikkek ### [Hírlevélplatform útmutató: alkotói publikálás, üzleti e-mail, monetizáció, árazási modellek és illeszkedés (2026)](https://tajo.io/hu/blog/best-newsletter-platforms/) 2026\. márc. 22. · 12 perc olvasás 7 szakasz ### [E-mail hírlevél szoftverek összehasonlítása: árazási modellek, alkotói eszközök és e-kereskedelmi illeszkedés (2026)](https://tajo.io/hu/blog/email-newsletter-software/) 2026\. márc. 8. · 16 perc olvasás 10 szakasz ### [Hírlevél-szerkesztő útmutató: platformok, sablonok, árazási modellek és automatizálás (2026)](https://tajo.io/hu/blog/newsletter-builder-guide/) 2026\. márc. 8. · 11 perc olvasás 10 szakasz