फ्री न्यूज़लेटर टेम्प्लेट्स
ई-कॉमर्स, SaaS, एजेंसियों और अधिक के लिए 15 फ्री न्यूज़लेटर टेम्प्लेट्स खोजें। प्रोफेशनल डिज़ाइन जिन्हें आप कस्टमाइज़ कर सकते हैं और किसी भी ईमेल प्लेटफ़ॉर्म के साथ आज ही उपयोग शुरू कर सकते हैं।
खाली कैनवास से न्यूज़लेटर शुरू करना डरावना लगता है। आप खाले एडिटर को देखते रहते हैं और सोचते हैं, अपना कंटेंट कैसे व्यवस्थित करें, कौन सा लेआउट इस्तेमाल करें, और डिज़ाइन पर घंटों खर्च किए बिना इसे प्रोफेशनल कैसे दिखाएं।
न्यूज़लेटर टेम्प्लेट्स इस समस्या को हल करते हैं। वे एक प्रमाणित संरचना और पेशेवर डिज़ाइन देते हैं, जिसे आप अपने कंटेंट, ब्रांडिंग और इमेजेस के साथ कस्टमाइज़ कर सकते हैं। सबसे अच्छे टेम्प्लेट मोबाइल-रिस्पॉन्सिव होते हैं, सभी email क्लाइंट्स पर काम करते हैं, और कन्वर्जन को ध्यान में रखकर डिज़ाइन किए जाते हैं।
यह गाइड इंडस्ट्री और उपयोग के हिसाब से व्यवस्थित 15 फ्री न्यूज़लेटर टेम्प्लेट डिज़ाइन कवर करती है। हर टेम्प्लेट टाइप के लिए हम डिज़ाइन सिद्धांत, अनुशंसित कंटेंट संरचना, और कस्टमाइज़ेशन टिप्स समझाते हैं।
न्यूज़लेटर टेम्प्लेट को प्रभावशाली क्या बनाता है
विशिष्ट टेम्प्लेट्स में जाने से पहले, यह समझना ज़रूरी है कि एक अच्छे टेम्प्लेट को एक बेहतरीन टेम्प्लेट से क्या अलग करता है।
तकनीकी आवश्यकताएं
| आवश्यकता | क्यों ज़रूरी है |
|---|---|
| Mobile-responsive | 60%+ emails मोबाइल डिवाइसेस पर खोली जाती हैं |
| Cross-client compatibility | Gmail, Outlook, Apple Mail आदि में सही दिखे |
| तेज़ लोडिंग | कुल इमेजेस 1MB से कम; टेम्प्लेट 100KB से कम |
| Dark mode सपोर्ट | email क्लाइंट्स में बढ़ती अपनाहट |
| Accessibility | स्क्रीन रीडर कम्पेटिबल, पर्याप्त कंट्रास्ट |
| Web-safe fonts | सभी प्लेटफ़ॉर्म पर एक जैसी रेंडरिंग |
डिज़ाइन सिद्धांत
विज़ुअल हायरार्की। सबसे ज़रूरी कंटेंट सबसे प्रमुख होना चाहिए। पाठक की नज़र को ऊपर से नीचे गाइड करने के लिए साइज़, रंग, और पोज़ीशनिंग का इस्तेमाल करें।
स्कैन करने योग्य लेआउट। अधिकतर email प्राप्तकर्ता पढ़ते नहीं बल्कि स्कैन करते हैं। कंटेंट को सुपाच्य बनाने के लिए हेडर, बुलेट पॉइंट, छोटे पैराग्राफ और स्पष्ट सेक्शन ब्रेक्स का उपयोग करें।
लगातार ब्रांडिंग। आपका न्यूज़लेटर तुरंत पहचानने योग्य होना चाहिए। हर अंक में अपने ब्रांड रंग, लोगो और टाइपोग्राफी का एक समान उपयोग करें।
मोबाइल पर सिंगल-कॉलम। मल्टी-कॉलम लेआउट मोबाइल डिवाइसेस पर टूट सकते हैं। सिंगल-कॉलम लेआउट इस्तेमाल करें या सुनिश्चित करें कि मल्टी-कॉलम सेक्शन छोटी स्क्रीन पर साफ़ तरीके से स्टैक हों।
चार लेआउट, चलते हुए
नीचे का हर पैनल टेम्पलेट का असली ईमेल HTML है, असली चौड़ाई वाले फ़्रेम में। चौड़ाई को 375 px तक खींचिए और देखिए कि कॉलम कैसे एक के नीचे एक लगते हैं।
आपकी थीम के अनुसार चलता है — दूसरी देखने के लिए ऊपर से बदलिए।
The Letter का HTML पढ़िए
<!DOCTYPE html>
<html lang="hi" 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;">जो उद्धरण आप अपने नोट्स ऐप में सहेजते हैं, वह आपके कंटेंट कैलेंडर से ज़्यादा मेहनत करता है।</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 का शीर्ष चित्र: संकेंद्री नीली चापें, एक तिरछी पट्टी से कटी हुईं" style="width:100%;height:auto;max-width:600px;">
</td></tr>
<tr><td class="gutter" style="padding:36px 88px 0 88px;font-family:'Nirmala UI',Mangal,sans-serif;">
<p class="d-mute" style="margin:0 0 6px 0;font-size:13px;line-height:18px;color:#6b6b6b;">Meridian Press · अंक 47</p>
</td></tr>
<tr><td class="gutter" style="padding:0 88px;font-family:'Nirmala UI',Mangal,serif;">
<h1 class="h1 d-ink" style="margin:0 0 20px 0;font-size:34px;line-height:42px;font-weight:400;color:#141414;">संग्रह ही उत्पाद है</h1>
<p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">तीन हफ़्ते पहले मैंने 2019 में लिखा एक पाठ खोजा और नहीं मिला। न साइट पर, न निर्यात में, न प्लेटफ़ॉर्म की अपनी खोज में। बारह सौ अंक, और काम करने वाली इकलौती अनुक्रमणिका मेरी स्मृति थी।</p>
<p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">छह साल न्यूज़लेटर चलाने के बारे में यही हिस्सा कोई नहीं बताता। भेजना आसान है। सहेजना नहीं।</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:'Nirmala UI',Mangal,serif;">
<p class="d-ink" style="margin:0;font-size:19px;line-height:30px;font-style:italic;color:#141414;">आप जो भी प्रकाशित करते हैं वह एक जमा है। निकासी लगभग कोई नहीं बनाता।</p>
</td></tr>
</table>
</td></tr>
<tr><td class="gutter" style="padding:0 88px;font-family:'Nirmala UI',Mangal,serif;">
<p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">तो इस हफ़्ते मैंने पुराने अंकों को सचमुच का संग्रह बनाकर फिर से खड़ा किया: टैग, पूर्ण-पाठ खोज और स्थायी पतों के साथ। नौ दिन लगे। ग्राहकों की संख्या नहीं हिली। साइट पर बिताया समय तीन गुना हो गया।</p>
<p class="d-ink" style="margin:0 0 28px 0;font-size:18px;line-height:30px;color:#242424;">पूरा ब्योरा नीचे है, उन हिस्सों समेत जो काम नहीं आए।</p>
</td></tr>
<tr><td class="gutter" style="padding:0 88px 36px 88px;font-family:'Nirmala UI',Mangal,sans-serif;">
<a href="https://example.com" style="font-size:17px;line-height:24px;font-weight:600;color:#0084d1;text-decoration:underline;">पूरा अंक पढ़िए →</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:'Nirmala UI',Mangal,sans-serif;">
<p class="d-mute" style="margin:0 0 10px 0;font-size:14px;line-height:22px;color:#6b6b6b;">हर गुरुवार हाथ से लिखा जाता है। उत्तर दीजिए, मैं पढ़ता हूँ।</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;">सदस्यता छोड़ें</a> · <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">ब्राउज़र में देखें</a></p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html> आपकी थीम के अनुसार चलता है — दूसरी देखने के लिए ऊपर से बदलिए।
The Digest का HTML पढ़िए
<!DOCTYPE html>
<html lang="hi" 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;">छह चीज़ें जो आपके मंगलवार के लायक हैं। दो कीमत तय करने के बारे में हैं।</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:'Nirmala UI',Mangal,sans-serif;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="middle" style="font-family:'Nirmala UI',Mangal,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 अगस्त 2026 · 6 विषय · 9 मिनट</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:'Nirmala UI',Mangal,sans-serif;font-size:12px;font-weight:700;padding:6px 12px;">अंक 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="अमूर्त फ़िरोज़ी चापें, एक तिरछी पट्टी से कटी हुईं" style="width:112px;height:112px;border-radius:4px;">
</td>
<td valign="top" style="font-family:'Nirmala UI',Mangal,sans-serif;">
<p class="d-mute" style="margin:0 0 6px 0;font-size:12px;line-height:16px;color:#007d6a;">01 · मूल्य निर्धारण</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;">तीन कंपनियाँ उपयोग-आधारित मूल्य पर गईं और दो वापस लौट आईं</a>
</p>
<p class="d-mute" style="margin:0;font-size:16px;line-height:26px;color:#555555;">लौटने वाली दोनों एक ही बात कहती हैं: सहायता का बोझ राजस्व से पहले बढ़ गया।</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="अमूर्त फ़िरोज़ी छल्ले, खिसके हुए केंद्र बिंदु के साथ" style="width:112px;height:112px;border-radius:4px;">
</td>
<td valign="top" style="font-family:'Nirmala UI',Mangal,sans-serif;">
<p class="d-mute" style="margin:0 0 6px 0;font-size:12px;line-height:16px;color:#007d6a;">02 · वितरण-क्षमता</p>
<p style="margin:0 0 6px 0;font-size:18px;line-height:26px;font-weight:700;">
<a href="https://example.com" class="d-ink" style="color:#141414;text-decoration:none;">बड़े प्रेषकों के लिए Gmail के नियम एक साल पुराने हो गए। असल में यह बदला है</a>
</p>
<p class="d-mute" style="margin:0;font-size:16px;line-height:26px;color:#555555;">शिकायत दर वही इकलौती सीमा है जिसके पास कोई पहुँचा। बाकी सब पहले से ही अनिवार्य था।</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="हल्के सफ़ेद पर अमूर्त संकेंद्री फ़िरोज़ी चापें" style="width:112px;height:112px;border-radius:4px;">
</td>
<td valign="top" style="font-family:'Nirmala UI',Mangal,sans-serif;">
<p class="d-mute" style="margin:0 0 6px 0;font-size:12px;line-height:16px;color:#007d6a;">03 · कारीगरी</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;">न्यूज़लेटर का संग्रह एक खोज उत्पाद है, लिंक की सूची नहीं</a>
</p>
<p class="d-mute" style="margin:0;font-size:16px;line-height:26px;color:#555555;">नौ दिन का काम, ग्राहकों में शून्य वृद्धि, साइट पर तीन गुना समय। दिलचस्प तो यही अदला-बदली है।</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:'Nirmala UI',Mangal,sans-serif;">
<p class="d-mute" style="margin:0 0 14px 0;font-size:15px;line-height:24px;color:#555555;">नीचे तीन और हैं, उनमें वह भी जो बिलिंग पर है और जिसका जवाब सब देते हैं।</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:'Nirmala UI',Mangal,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">छहों पढ़िए</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:'Nirmala UI',Mangal,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;">सदस्यता छोड़ें</a> · <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">पसंद प्रबंधित करें</a> · <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">ब्राउज़र में देखें</a></p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html> आपकी थीम के अनुसार चलता है — दूसरी देखने के लिए ऊपर से बदलिए।
The Storefront का HTML पढ़िए
<!DOCTYPE html>
<html lang="hi" 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;">चार नए प्रिंट। बंदरगाह वाला 40 प्रतियों में है और हफ़्ता नहीं निकालेगा।</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:'Nirmala UI',Mangal,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;color:#141414;">Northlight</td>
<td align="right" class="d-mute hide-sm" style="font-family:'Nirmala UI',Mangal,sans-serif;font-size:13px;line-height:20px;color:#6b6b6b;">शरद पेशकश · 04</td>
</tr></table>
</td></tr>
<tr><td style="padding:0;">
<img src="/_astro/shop-hero.r4mykM_E.png" width="600" height="360" alt="चार नए Northlight प्रिंट: गर्म हल्के सफ़ेद पर एक-दूसरे पर चढ़ती जंग-लाल चापें" style="width:100%;height:auto;max-width:600px;">
</td></tr>
<tr><td class="gutter" style="padding:30px 40px 0 40px;font-family:'Nirmala UI',Mangal,sans-serif;">
<h1 class="h1 d-ink" style="margin:0 0 12px 0;font-size:30px;line-height:38px;font-weight:800;color:#141414;">चार प्रिंट। हर एक की चालीस प्रतियाँ।</h1>
<p class="d-mute" style="margin:0 0 22px 0;font-size:16px;line-height:26px;color:#555555;">इस पेशकश का हर प्रिंट हाथ से खींचा गया, क्रमांकित है, और ख़त्म होते ही ख़त्म। यहाँ कुछ दोबारा नहीं छपता।</p>
</td></tr>
<tr><td class="gutter" style="padding:0 40px 26px 40px;font-family:'Nirmala UI',Mangal,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:'Nirmala UI',Mangal,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">पेशकश देखिए</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, जंग-लाल रंग का अमूर्त प्रिंट" 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:'Nirmala UI',Mangal,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 · सूती काग़ज़ पर जिक्ले</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:'Nirmala UI',Mangal,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">टोकरी में डालें</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, अंबर रंग का अमूर्त प्रिंट" 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:'Nirmala UI',Mangal,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 · सूती काग़ज़ पर जिक्ले</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:'Nirmala UI',Mangal,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">टोकरी में डालें</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, बैंगनी रंग का अमूर्त प्रिंट" 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:'Nirmala UI',Mangal,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 · सूती काग़ज़ पर जिक्ले</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:'Nirmala UI',Mangal,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">टोकरी में डालें</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, गहरे हरे रंग का अमूर्त प्रिंट" 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:'Nirmala UI',Mangal,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 · सूती काग़ज़ पर जिक्ले</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:'Nirmala UI',Mangal,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">टोकरी में डालें</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:'Nirmala UI',Mangal,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:'Nirmala UI',Mangal,sans-serif;">
<p class="d-ink" style="margin:0;font-size:15px;line-height:24px;color:#242424;"><strong>यूनाइटेड किंगडम में 75 £ से ऊपर मुफ़्त शिपिंग।</strong> फ़्रेम के विकल्प भुगतान के समय। बिना फ़्रेम वालों की वापसी 30 दिन के भीतर।</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:'Nirmala UI',Mangal,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;">सदस्यता छोड़ें</a> · <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">ब्राउज़र में देखें</a></p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html> आपकी थीम के अनुसार चलता है — दूसरी देखने के लिए ऊपर से बदलिए।
The Brief का HTML पढ़िए
<!DOCTYPE html>
<html lang="hi" 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;">उत्तर दर 4 अंक बढ़ी है और हमें अब भी कारण नहीं पता। सबसे अच्छा अनुमान भीतर है।</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 का शीर्ष: लगभग काले पर बैंगनी चापें" 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:'Nirmala UI',Mangal,sans-serif;">
<p style="margin:0 0 4px 0;font-size:12px;line-height:16px;color:#8f83ff;">Ledger Weekly · सप्ताह 35</p>
<h1 class="h1 d-ink" style="margin:0;font-size:26px;line-height:34px;font-weight:800;color:#141414;">उत्तर दर हिली और किसी ने कुछ जारी नहीं किया</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:'Nirmala UI',Mangal,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;">खुलने की दर</p>
<p style="margin:0;font-size:13px;line-height:18px;font-weight:700;color:#007d6a;">▲ 1.2 अंक</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:'Nirmala UI',Mangal,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;">क्लिक दर</p>
<p style="margin:0;font-size:13px;line-height:18px;font-weight:700;color:#b8442d;">▼ 0.4 अंक</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:'Nirmala UI',Mangal,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;">उत्तर दर</p>
<p style="margin:0;font-size:13px;line-height:18px;font-weight:700;color:#007d6a;">▲ 4.0 अंक</p>
</td></tr>
</table>
</td>
</tr></table>
</td></tr>
<tr><td class="gutter" style="padding:20px 32px 0 32px;font-family:'Nirmala UI',Mangal,sans-serif;">
<p class="d-ink" style="margin:0 0 18px 0;font-size:16px;line-height:26px;color:#242424;">भेजने में कुछ नहीं बदला। वही सूची, वही गुरुवार, वही टेम्पलेट। इकलौता चर जो हमें मिला: विषय पंक्ति ने ग्यारह अंकों में पहली बार सवाल पूछा।</p>
<p class="d-mute" style="margin:0 0 10px 0;font-size:12px;line-height:16px;color:#6b6b6b;">खंड के अनुसार उत्तर</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:'Nirmala UI',Mangal,sans-serif;font-size:15px;line-height:20px;color:#242424;">सशुल्क ग्राहक</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:'Nirmala UI',Mangal,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:'Nirmala UI',Mangal,sans-serif;font-size:15px;line-height:20px;color:#242424;">निःशुल्क, 90 दिन सक्रिय</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:'Nirmala UI',Mangal,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:'Nirmala UI',Mangal,sans-serif;font-size:15px;line-height:20px;color:#242424;">निःशुल्क, निष्क्रिय</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:'Nirmala UI',Mangal,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:'Nirmala UI',Mangal,sans-serif;font-size:15px;line-height:20px;color:#242424;">परीक्षण</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:'Nirmala UI',Mangal,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:'Nirmala UI',Mangal,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:'Nirmala UI',Mangal,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">पूरा विश्लेषण पढ़िए</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:'Nirmala UI',Mangal,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;">सदस्यता छोड़ें</a> · <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">ब्राउज़र में देखें</a></p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html> 15 फ्री न्यूज़लेटर टेम्प्लेट डिज़ाइन
1. क्लासिक कंपनी अपडेट
सबसे अच्छा: B2B कंपनियों, एजेंसियों, प्रोफेशनल सेवाओं के लिए
यह टेम्प्लेट एक सीधी संरचना का पालन करता है:
- कंपनी लोगो और हेडर
- संक्षिप्त संपादकीय परिचय (2-3 वाक्य)
- हेडलाइन, छोटे विवरण और CTA के साथ 3-4 कंटेंट ब्लॉक्स
- सोशल लिंक्स और अनसब्सक्राइब के साथ फूटर
डिज़ाइन नोट्स: पर्याप्त व्हाइट स्पेस के साथ साफ, प्रोफेशनल लेआउट। हेडिंग और CTA बटन के लिए अपने ब्रांड का प्राथमिक रंग इस्तेमाल करें। इमेजेस को एक हीरो इमेज और कंटेंट ब्लॉक्स के लिए छोटे थंबनेल तक सीमित रखें।
कंटेंट संरचना:
- टीम के किसी सदस्य का व्यक्तिगत अभिवादन
- फीचर्ड आर्टिकल या घोषणा
- 2-3 द्वितीयक कंटेंट आइटम
- त्वरित लिंक्स या संसाधन सेक्शन
- संपर्क जानकारी के साथ फूटर
2. ई-कॉमर्स प्रोडक्ट शोकेस
सबसे अच्छा: ऑनलाइन स्टोर, रिटेल ब्रांड, DTC कंपनियों के लिए
बिक्री बढ़ाने के लिए डिज़ाइन किया गया प्रोडक्ट-केंद्रित लेआउट:
- फीचर्ड प्रोडक्ट या प्रमोशन के साथ हीरो बैनर
- इमेजेस, नाम, कीमतें और शॉप बटन के साथ प्रोडक्ट ग्रिड (2x2 या 3x1)
- ग्राहक समीक्षा या प्रशंसापत्र सेक्शन
- द्वितीयक प्रमोशन या नए उत्पाद
डिज़ाइन नोट्स: बड़ी, उच्च-गुणवत्ता वाली प्रोडक्ट इमेजेस ज़रूरी हैं। ग्रिड लेआउट इस्तेमाल करें जो मोबाइल पर सिंगल कॉलम में स्टैक हो। कीमत और CTA बटन तुरंत दिखने चाहिए।
Tajo के साथ Brevo इस्तेमाल करने वाले ई-कॉमर्स ब्रांड्स के लिए, ये टेम्प्लेट हर सब्सक्राइबर के ब्राउज़िंग और खरीद इतिहास के आधार पर व्यक्तिगत प्रोडक्ट रिकमेंडेशन से डायनेमिकली पॉपुलेट किए जा सकते हैं। पर्सनलाइज़ेशन रणनीतियों के लिए हमारी ई-कॉमर्स email मार्केटिंग गाइड देखें।
3. कंटेंट डाइजेस्ट
सबसे अच्छा: मीडिया कंपनियों, कंटेंट क्रिएटर्स, प्रकाशनों के लिए
कई लेख दिखाने के लिए डिज़ाइन किया गया कंटेंट-भारी टेम्प्लेट:
- बड़ी इमेज और एक्सर्प्ट के साथ फीचर्ड आर्टिकल
- शीर्षकों और एक-पंक्ति सारांश के साथ 5-8 अतिरिक्त लेखों की सूची
- हर लेख के लिए कैटेगरी लेबल
- “सबसे लोकप्रिय” या “एडिटर की पसंद” कॉलआउट
डिज़ाइन नोट्स: साफ टाइपोग्राफी और उदार लाइन स्पेसिंग के साथ पठनीयता को प्राथमिकता दें। हर लेख एंट्री के लिए एक जैसी फॉर्मेटिंग इस्तेमाल करें ताकि पाठक डाइजेस्ट को तेज़ी से स्कैन कर सकें।
4. व्यक्तिगत न्यूज़लेटर
सबसे अच्छा: सोलोप्रेन्योर्स, विचार नेताओं, सलाहकारों के लिए
एक न्यूनतम, टेक्स्ट-केंद्रित टेम्प्लेट जो व्यक्तिगत पत्र जैसा लगता है:
- लेखक की फोटो और नाम
- लंबा लिखित कंटेंट (500-800 शब्द)
- न्यूनतम इमेजेस और डिज़ाइन तत्व
- स्टाइल्ड बटन की बजाय सरल टेक्स्ट लिंक
- व्यक्तिगत साइन-ऑफ
डिज़ाइन नोट्स: यह टेम्प्लेट सरलता से सफल होता है। सिंगल-कॉलम लेआउट, स्टैंडर्ड फॉन्ट और न्यूनतम स्टाइलिंग इस्तेमाल करें। लक्ष्य यह है कि यह मार्केटिंग कम्युनिकेशन की बजाय व्यक्तिगत email जैसा लगे।
5. SaaS प्रोडक्ट अपडेट
सबसे अच्छा: सॉफ्टवेयर कंपनियों, टेक स्टार्टअप्स, डेवलपर टूल्स के लिए
प्रोडक्ट अपडेट संप्रेषित करने के लिए फीचर-केंद्रित लेआउट:
- वर्शन नंबर या अपडेट टाइटल हेडर
- स्क्रीनशॉट या GIF के साथ फीचर हाइलाइट
- सुधारों और फिक्स की बुलेट सूची
- “आगे क्या आ रहा है” टीज़र
- नए फीचर आज़माने का CTA
डिज़ाइन नोट्स: बताने की बजाय दिखाने के लिए प्रोडक्ट स्क्रीनशॉट या इंटरफेस इमेजेस शामिल करें। एक साफ, आधुनिक डिज़ाइन इस्तेमाल करें जो आपके सॉफ्टवेयर की सौंदर्यशैली को दर्शाए।
6. इवेंट आमंत्रण
सबसे अच्छा: इवेंट आयोजकों, कॉन्फ्रेंसेस, वेबिनार होस्ट के लिए
रजिस्ट्रेशन बढ़ाने पर केंद्रित एकल-उद्देश्य टेम्प्लेट:
- इवेंट नाम और विज़ुअल ब्रांडिंग
- तारीख, समय और स्थान (या वर्चुअल प्लेटफ़ॉर्म)
- फोटो और बायो के साथ स्पीकर हाइलाइट्स
- एजेंडा अवलोकन
- प्रमुख रजिस्ट्रेशन CTA
- अर्ली बर्ड प्राइसिंग या सीमित सीटों की तात्कालिकता
डिज़ाइन नोट्स: CTA बटन कम से कम दो बार दिखना चाहिए — एक बार फोल्ड के ऊपर और एक बार विवरण के बाद। जब उचित हो तब काउंटडाउन तत्व या तात्कालिकता की भाषा इस्तेमाल करें।
7. वीकली राउंडअप
सबसे अच्छा: इंडस्ट्री न्यूज़लेटर, क्यूरेटेड कंटेंट पब्लिशर्स के लिए
वेब से कंटेंट क्यूरेट करने के लिए एक संरचित टेम्प्लेट:
- एडिटर का नोट (2-3 वाक्य)
- स्रोत श्रेय, शीर्षक और संक्षिप्त टिप्पणी के साथ 5-10 क्यूरेटेड लिंक्स
- क्रमांकित या वर्गीकृत सेक्शन
- मोनेटाइज़ होने पर “स्पॉन्सर” या “फीचर्ड” सेक्शन
- पाठक पोल या फीडबैक प्रॉम्प्ट
डिज़ाइन नोट्स: हर क्यूरेटेड आइटम के लिए स्पष्ट नंबरिंग और एक जैसी फॉर्मेटिंग पाठकों को नेविगेट करने में मदद करती है। सेक्शन अलग करने के लिए सूक्ष्म बॉर्डर या बैकग्राउंड रंग इस्तेमाल करें।
8. गैर-लाभकारी इम्पैक्ट रिपोर्ट
सबसे अच्छा: चैरिटी, NGO, सामाजिक उद्यमों के लिए
प्रभाव की कहानियां साझा करने और दान बढ़ाने के लिए डिज़ाइन किया गया टेम्प्लेट:
- इम्पैक्ट स्टैटिस्टिक हेडलाइन (“इस महीने हमने 1,000 परिवारों की मदद की”)
- फोटो के साथ कहानी (एक लाभार्थी या प्रोजेक्ट)
- अभियान लक्ष्य की ओर प्रोग्रेस बार
- स्वयंसेवी या इवेंट के अवसर
- डोनेशन CTA बटन
डिज़ाइन नोट्स: फोटोग्राफी और असली कहानियों के ज़रिए भावनात्मक प्रभाव से शुरू करें। ठोस परिणाम दिखाने के लिए डेटा विज़ुअलाइज़ेशन (प्रोग्रेस बार, आंकड़े) इस्तेमाल करें।
9. मौसमी प्रमोशन
सबसे अच्छा: रिटेल, हॉस्पिटैलिटी, मौसमी व्यवसायों के लिए
छुट्टियों और मौसमी अभियानों के लिए डिज़ाइन किया गया दृश्यात्मक रूप से समृद्ध टेम्प्लेट:
- फुल-विड्थ मौसमी हीरो इमेज
- स्पष्ट शर्तों के साथ प्रमोशनल ऑफर
- क्यूरेटेड प्रोडक्ट सेलेक्शन या गिफ्ट गाइड
- डेडलाइन या काउंटडाउन तत्व
- पूरे टेम्प्लेट में कई CTA
डिज़ाइन नोट्स: बोल्ड रंग और मौसमी इमेजरी तात्कालिकता पैदा करती है। सुनिश्चित करें कि प्रमोशनल ऑफर स्क्रॉल किए बिना तुरंत स्पष्ट हो। टेम्प्लेट को अच्छी तरह टेस्ट करें, क्योंकि इमेज-भारी emails में क्लाइंट्स पर रेंडरिंग समस्याएं हो सकती हैं।
10. शैक्षिक श्रृंखला
सबसे अच्छा: ऑनलाइन कोर्स, कोचिंग व्यवसाय, शैक्षिक संस्थानों के लिए
शैक्षिक कंटेंट देने के लिए एक संरचित टेम्प्लेट:
- लेसन नंबर और सीरीज़ टाइटल
- मुख्य निष्कर्ष या सीखने का उद्देश्य
- स्पष्ट सेक्शन के साथ मुख्य कंटेंट
- अभ्यास कार्य या एक्शन आइटम
- प्रोग्रेस इंडिकेटर (लेसन 3 of 8)
- अगले लेसन या संबंधित संसाधन का CTA
डिज़ाइन नोट्स: सीरीज़ के सभी लेसन में एक जैसी संरचना इस्तेमाल करें ताकि सब्सक्राइबर को पता हो कि क्या उम्मीद करें। पूर्णता को प्रेरित करने के लिए प्रोग्रेस इंडिकेटर शामिल करें।
11. रियल एस्टेट लिस्टिंग
सबसे अच्छा: रियल एस्टेट एजेंट, प्रॉपर्टी मैनेजमेंट कंपनियों के लिए
समृद्ध विज़ुअल तत्वों के साथ प्रॉपर्टी-केंद्रित टेम्प्लेट:
- बड़ी फोटो गैलरी के साथ फीचर्ड लिस्टिंग
- प्रॉपर्टी विवरण (कीमत, बेडरूम, बाथरूम, स्क्वायर फुटेज)
- ग्रिड फॉर्मेट में 3-4 अतिरिक्त लिस्टिंग
- मार्केट अपडेट या पड़ोस की विशेषता
- फोटो के साथ एजेंट की संपर्क जानकारी
डिज़ाइन नोट्स: उच्च-गुणवत्ता वाली प्रॉपर्टी फोटोग्राफी ज़रूरी है। मुख्य विवरण (कीमत, साइज़, स्थान) बिना क्लिक किए तुरंत दिखने चाहिए।
12. रेस्टोरेंट या फूड बिज़नेस
सबसे अच्छा: रेस्टोरेंट, फूड डिलीवरी, कैटरिंग कंपनियों के लिए
दृश्यात्मक रूप से भूख बढ़ाने वाला टेम्प्लेट:
- फीचर्ड डिश या मेनू आइटम की हीरो इमेज
- वीकली स्पेशल या नए मेनू आइटम
- रिजर्वेशन या ऑर्डर CTA
- ग्राहक समीक्षा हाइलाइट
- स्थान और समय की जानकारी
डिज़ाइन नोट्स: फूड फोटोग्राफी पेशेवर और भूख बढ़ाने वाली होनी चाहिए। गर्म रंग और उदार स्पेसिंग इस्तेमाल करें। प्राथमिक CTA (ऑर्डर, रिजर्व, विज़िट) अनदेखा न होने वाला होना चाहिए।
13. फिटनेस और वेलनेस
सबसे अच्छा: जिम, पर्सनल ट्रेनर, वेलनेस ब्रांड्स के लिए
प्रेरणा और एक्शन पर केंद्रित एक ऊर्जावान टेम्प्लेट:
- प्रेरणादायक हीरो इमेज
- वीक का वर्कआउट या वेलनेस टिप
- क्लास शेड्यूल या आगामी इवेंट
- मेंबर स्पॉटलाइट या ट्रांसफॉर्मेशन स्टोरी
- बुकिंग या मेंबरशिप CTA
डिज़ाइन नोट्स: एक्शन-ओरिएंटेड फोटोग्राफी और बोल्ड टाइपोग्राफी इस्तेमाल करें। टोन को बिना दबाव डाले प्रेरक रखें।
14. एजेंसी पोर्टफोलियो शोकेस
सबसे अच्छा: क्रिएटिव एजेंसियां, फ्रीलांसर, डिज़ाइन स्टूडियो के लिए
हाल के काम को दिखाने के लिए पोर्टफोलियो-शैली टेम्प्लेट:
- बड़े विज़ुअल और संक्षिप्त केस स्टडी के साथ फीचर्ड प्रोजेक्ट
- ग्रिड में 2-3 अतिरिक्त हालिया प्रोजेक्ट
- क्लाइंट प्रशंसापत्र
- टीम या हायरिंग अपडेट
- संभावित क्लाइंट के लिए संपर्क CTA
डिज़ाइन नोट्स: बड़े, उच्च-गुणवत्ता वाले विज़ुअल के ज़रिए काम खुद बोले। प्रक्रिया विवरण की बजाय परिणामों और नतीजों पर केंद्रित न्यूनतम टेक्स्ट रखें।
15. कम्युनिटी न्यूज़लेटर
सबसे अच्छा: मेंबरशिप संगठन, ऑनलाइन कम्युनिटी, स्थानीय व्यवसायों के लिए
जुड़ाव को बढ़ावा देने वाला कम्युनिटी-केंद्रित टेम्प्लेट:
- कम्युनिटी समाचार और घोषणाएं
- मेंबर स्पॉटलाइट या साक्षात्कार
- आगामी इवेंट कैलेंडर
- चर्चा प्रॉम्प्ट या पोल
- यूज़र-जनरेटेड कंटेंट सेक्शन
- जॉइन/एंगेज CTA
डिज़ाइन नोट्स: कम्युनिटी कनेक्शन बनाने के लिए मेंबर की फोटो और नाम (अनुमति के साथ) शामिल करें। गर्म, समावेशी टोन इस्तेमाल करें और जवाब और भागीदारी को प्रोत्साहित करें।
फ्री न्यूज़लेटर टेम्प्लेट कहां मिलते हैं
Email मार्केटिंग प्लेटफ़ॉर्म
अधिकतर email मार्केटिंग प्लेटफ़ॉर्म अपने प्लान में फ्री टेम्प्लेट शामिल करते हैं:
| प्लेटफ़ॉर्म | फ्री टेम्प्लेट | कस्टमाइज़ेशन स्तर | फ्री प्लान उपलब्ध |
|---|---|---|---|
| Brevo | 60+ | ड्रैग-एंड-ड्रॉप एडिटर | हां |
| Mailchimp | 100+ | ड्रैग-एंड-ड्रॉप एडिटर | हां (सीमित) |
| HubSpot | 45+ | ड्रैग-एंड-ड्रॉप एडिटर | हां |
| MailerLite | 80+ | ड्रैग-एंड-ड्रॉप एडिटर | हां |
| Constant Contact | 200+ | ड्रैग-एंड-ड्रॉप एडिटर | नहीं |
Brevo की टेम्प्लेट लाइब्रेरी ई-कॉमर्स व्यवसायों के लिए विशेष रूप से उपयुक्त है, जिसमें प्रोडक्ट घोषणाओं, ऑर्डर कन्फर्मेशन और प्रमोशनल अभियानों के लिए टेम्प्लेट हैं जो Tajo के ज़रिए आपके स्टोर डेटा के साथ इंटीग्रेट होते हैं।
थर्ड-पार्टी टेम्प्लेट स्रोत
- Litmus Community: क्रॉस-क्लाइंट कम्पेटिबिलिटी डेटा के साथ फ्री, टेस्टेड टेम्प्लेट
- Really Good Emails: प्रेरणा के लिए असली न्यूज़लेटर उदाहरणों की क्यूरेटेड गैलरी
- Stripo: 1,500+ डिज़ाइन के साथ फ्री email टेम्प्लेट बिल्डर
- BeeFree: 200+ फ्री रिस्पॉन्सिव टेम्प्लेट के साथ ड्रैग-एंड-ड्रॉप एडिटर
- MJML: कोड के साथ रिस्पॉन्सिव email टेम्प्लेट बनाने के लिए ओपन-सोर्स फ्रेमवर्क
अपने ब्रांड के लिए टेम्प्लेट कस्टमाइज़ करना
ज़रूरी कस्टमाइज़ेशन
उपयोग से पहले हर टेम्प्लेट में ये बदलाव ज़रूरी हैं:
- लोगो और ब्रांड रंग: डिफॉल्ट ब्रांडिंग को अपनी से बदलें
- टाइपोग्राफी: अपने ब्रांड फॉन्ट (web-safe फॉलबैक के साथ) इस्तेमाल करें
- फूटर जानकारी: अपने व्यवसाय विवरण और कानूनी आवश्यकताओं से अपडेट करें
- सोशल मीडिया लिंक: अपने असली प्रोफाइल जोड़ें
- अनसब्सक्राइब लिंक: हर मार्केटिंग email में कानून द्वारा अनिवार्य
उन्नत कस्टमाइज़ेशन
एक बार टेम्प्लेट के साथ सहज हो जाने पर, ये सुधार विचार करें:
- डायनेमिक कंटेंट ब्लॉक: अलग-अलग सब्सक्राइबर सेगमेंट को अलग-अलग कंटेंट दिखाएं
- पर्सनलाइज़ेशन टोकन: सब्सक्राइबर के नाम, स्थान या प्राथमिकताएं डालें
- कंडीशनल सेक्शन: सब्सक्राइबर विशेषताओं के आधार पर सेक्शन दिखाएं या छिपाएं
- इंटरएक्टिव तत्व: पोल, सर्वे या AMP-संचालित इंटरएक्टिविटी जोड़ें
न्यूज़लेटर टेम्प्लेट सर्वोत्तम अभ्यास
भेजने से पहले टेस्ट करें। कम से कम Gmail, Outlook, Apple Mail और Yahoo पर टेस्ट emails भेजें। व्यापक क्रॉस-क्लाइंट टेस्टिंग के लिए Litmus या Email on Acid जैसा टूल इस्तेमाल करें।
इमेजेस ऑप्टिमाइज़ करें। लोड टाइम कम करने के लिए सभी इमेजेस कम्प्रेस करें। हर इमेज में alt टेक्स्ट शामिल करें ताकि email क्लाइंट द्वारा इमेजेस ब्लॉक होने पर भी काम आए।
फ़ाइल साइज़ कम रखें। HTML का कुल email साइज़ 100KB से कम और कुल कंटेंट 1MB से कम रहना चाहिए। बड़ी emails Gmail द्वारा क्लिप होने या स्पैम फिल्टर द्वारा ब्लॉक होने का जोखिम रखती हैं।
लगातार बने रहें। हर न्यूज़लेटर अंक के लिए एक ही टेम्प्लेट संरचना इस्तेमाल करें। सब्सक्राइबर परिचित लेआउट के आसपास पढ़ने की आदतें बनाते हैं, और लगातारता भरोसा बनाती है।
प्लेन टेक्स्ट शामिल करें। HTML रेंडर न करने वाले email क्लाइंट्स के लिए हमेशा प्लेन-टेक्स्ट विकल्प प्रदान करें। अधिकतर email प्लेटफ़ॉर्म यह स्वचालित रूप से जनरेट करते हैं, लेकिन पठनीयता सुनिश्चित करने के लिए इसे रिव्यू करें।
अपनी email डिलिवरेबिलिटी नियमित रूप से टेस्ट करें। एक सुंदर टेम्प्लेट बेकार है अगर यह स्पैम में जाए। अपने डिज़ाइन प्रयासों के साथ-साथ सेंडर रेपुटेशन और ऑथेंटिकेशन (SPF, DKIM, DMARC) मॉनिटर करें।
शुरुआत कैसे करें
एक टेम्प्लेट चुनें जो आपकी इंडस्ट्री और कंटेंट शैली से मेल खाए। न्यूनतम कस्टमाइज़ेशन से शुरू करें — ब्रांड रंग, लोगो और फूटर — और अपना पहला अंक भेजें। जैसे-जैसे आप ओपन रेट और क्लिक डेटा के ज़रिए सीखते हैं कि आपके दर्शकों को क्या पसंद है, डिज़ाइन और कंटेंट संरचना पर पुनरावृत्ति करें।
सबसे अच्छा न्यूज़लेटर टेम्प्लेट वह नहीं है जो सबसे ज़्यादा दृश्यात्मक रूप से प्रभावशाली हो। यह वह है जिसे आपके दर्शक लगातार पढ़ते हैं, नियमित रूप से क्लिक करते हैं, और पाने का इंतज़ार करते हैं।