<पी> इस शुरुआती-अनुकूल मार्गदर्शिका में, आप सीखेंगे कि एक प्रतिक्रियाशील ईमेल टेम्पलेट कैसे बनाया जाता है। किसी भी डिवाइस पर अच्छा दिखने वाला ईमेल टेम्पलेट डिज़ाइन करने के लिए आप कोड स्निपेट के साथ चरण-दर-चरण निर्देशों का पालन करेंगे। <पी> यह प्रोजेक्ट ईमेल डिज़ाइन की बुनियादी बातों में महारत हासिल करने के इच्छुक नए लोगों के लिए एकदम सही है! चरण 1:मूल संरचना स्थापित करें
<पी> एक ईमेल टेम्प्लेट बनाने के लिए, आप एक बुनियादी HTML संरचना से शुरुआत कर सकते हैं। इसमें एक DOCTYPE शामिल है ईमेल के लिए घोषणा, head को परिभाषित करना और body अनुभाग, और head में मेटा टैग का उपयोग करना उचित मोबाइल रेंडरिंग और ज़ूमिंग सुनिश्चित करने के लिए अनुभाग। <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Email Template</title>
</head>
<body>
<!-- Email content goes here -->
</body>
</html>
चरण 2:ईमेल संरचना बनाएं
<पी> अपने ईमेल की मूल संरचना बनाने के लिए तालिकाओं का उपयोग करें। यह विभिन्न ईमेल क्लाइंटों के बीच अनुकूलता सुनिश्चित करेगा। <table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center">
<table width="600" cellpadding="0" cellspacing="0" border="0">
<!-- Email content goes here -->
</table>
</td>
</tr>
</table>
चरण 3:सामग्री और इनलाइन शैलियाँ जोड़ें
<पी> ईमेल क्लाइंट सीएसएस को प्रस्तुत करने के तरीके में भिन्न होते हैं, इसलिए इनलाइन शैलियों का उपयोग करना अधिक सुरक्षित है। यहां एक साधारण ईमेल बॉडी का उदाहरण दिया गया है: <body style="font-family: 'Poppins', Arial, sans-serif">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="padding: 20px;">
<table class="content" width="600" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; border: 1px solid #cccccc;">
<!-- Header -->
<tr>
<td class="header" style="background-color: #345C72; padding: 40px; text-align: center; color: white; font-size: 24px;">
Responsive Email Template
</td>
</tr>
<!-- Body -->
<tr>
<td class="body" style="padding: 40px; text-align: left; font-size: 16px; line-height: 1.6;">
Hello, All! <br>
Lorem odio soluta quae dolores sapiente voluptatibus recusandae aliquam fugit ipsam.
<br><br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam corporis sint eum nemo animi velit exercitationem impedit. Incidunt, officia facilis atque? Ipsam voluptas fugiat distinctio blanditiis veritatis.
</td>
</tr>
<!-- Call to action Button -->
<tr>
<td style="padding: 0px 40px 0px 40px; text-align: center;">
<!-- CTA Button -->
<table cellspacing="0" cellpadding="0" style="margin: auto;">
<tr>
<td align="center" style="background-color: #345C72; padding: 10px 20px; border-radius: 5px;">
<a href="https://www.yourwebsite.com" target="_blank" style="color: #ffffff; text-decoration: none; font-weight: bold;">Book a Free Consulatation</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="body" style="padding: 40px; text-align: left; font-size: 16px; line-height: 1.6;">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam corporis sint eum nemo animi velit exercitationem impedit.
</td>
</tr>
<!-- Footer -->
<tr>
<td class="footer" style="background-color: #333333; padding: 40px; text-align: center; color: white; font-size: 14px;">
Copyright © 2024 | Your brand name
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
<पी> यहां मुख्य तत्वों और उनके कार्यों का विवरण दिया गया है: बॉडी टैग और फॉन्ट सेटअप
<body style="font-family: 'Poppins', Arial, sans-serif">
<पी> यह ईमेल के लिए डिफ़ॉल्ट फ़ॉन्ट को 'पॉपिन्स' पर सेट करता है, यदि 'पॉपिन्स' उपलब्ध नहीं है तो एरियल और सैन्स-सेरिफ़ पर फ़ॉलबैक होता है। टेबल संरचना
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<पी> यह सबसे बाहरी तालिका है जो ईमेल की 100% चौड़ाई लेती है। border , cellspacing , और cellpadding डिफ़ॉल्ट स्टाइलिंग और रिक्ति को हटाने के लिए 0 पर सेट किया गया है। <पी> इस तालिका के अंदर एक और <table class="content"> निहित है 600px की एक निश्चित चौड़ाई के साथ, td align="center" के साथ इसके मूल द्वारा केन्द्रित . <पी> इस आंतरिक तालिका में एक बॉर्डर और विशिष्ट स्टाइल शामिल है, जो इसे मुख्य सामग्री क्षेत्र के रूप में परिभाषित करता है। <पी> हेडर को इनलाइन सीएसएस (#345सी72), सफेद टेक्स्ट रंग और बड़े टेक्स्ट आकार (24पीएक्स) का उपयोग करके गहरे नीले रंग की पृष्ठभूमि के साथ स्टाइल किया गया है। इसे ईमेल की शुरुआत में ही ध्यान खींचने के लिए डिज़ाइन किया गया है। <पी> ध्यान दें : आप इसके बजाय इस अनुभाग को अपने ब्रांड नाम या लोगो के साथ अनुकूलित कर सकते हैं। मुख्य सामग्री
<पी> मुख्य भाग में ईमेल का मुख्य संदेश होता है, जिसे बेहतर पठनीयता के लिए 16px के फ़ॉन्ट आकार और 1.6 की लाइन ऊंचाई में सेट किया जाता है। सामग्री को बाईं ओर संरेखित किया गया है, और <br> का उपयोग किया गया है टैग लाइनों को दूर रखने में मदद करते हैं। कॉल टू एक्शन (सीटीए) बटन
<!-- Call to action Button -->
<tr>
<td style="padding: 0px 40px 0px 40px; text-align: center;">
<!-- CTA Button -->
<table cellspacing="0" cellpadding="0" style="margin: auto;">
<tr>
<td align="center" style="background-color: #345C72; padding: 10px 20px; border-radius: 5px;">
<a href="https://www.yourwebsite.com" target="_blank" style="color: #ffffff; text-decoration: none; font-weight: bold;">Book a Free Consulatation</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<पी> यहां सीटीए बटन को हेडर से मेल खाने वाले पृष्ठभूमि रंग, गोल कोनों (border-radius: 5px) के साथ अलग दिखने के लिए डिज़ाइन किया गया है ), और बोल्ड, सफ़ेद टेक्स्ट। <पी> <a> बटन के भीतर टैग को डिफ़ॉल्ट अंडरलाइन (text-decoration: none) को हटाने के लिए स्टाइल किया गया है ) और एक वेबपेज से जुड़ा हुआ है जहां प्राप्तकर्ता "निःशुल्क परामर्श बुक कर सकते हैं।" <पी> पाद लेख हेडर के स्टाइलिंग दृष्टिकोण को दोहराता है लेकिन गहरे रंग की पृष्ठभूमि (#333333) और छोटे फ़ॉन्ट आकार (14px) का उपयोग करता है। इसमें कॉपीराइट जानकारी और लिंक या अन्य संपर्क विवरण शामिल हो सकते हैं। चित्रण
<पी> टेम्पलेट के विभिन्न भागों का चित्रण:हेडर, सीटीए बटन और फ़ुटर चरण 4:इसे उत्तरदायी बनाएं
<पी> यह सुनिश्चित करने के लिए कि ईमेल मोबाइल उपकरणों पर अच्छा दिखे, आप सीएसएस मीडिया क्वेरीज़ का उपयोग कर सकते हैं। जबकि अधिकांश स्टाइल इनलाइन हैं, प्रतिक्रियाशील व्यवहार के लिए, आपको <style> जोड़ना होगा head में ब्लॉक करें . <पी> मीडिया क्वेरीज़ डिवाइस की चौड़ाई के आधार पर शैलियों को समायोजित करती हैं। <style>
@media screen and (max-width: 600px) {
.content {
width: 100% !important;
display: block !important;
padding: 10px !important;
}
.header, .body, .footer {
padding: 20px !important;
}
}
</style>
<पी> यहां इस विशिष्ट सीएसएस स्निपेट का विवरण दिया गया है: @media screen and (max-width: 600px) { ... }
<पी> यह मीडिया क्वेरी अधिकतम 600 पिक्सेल चौड़ाई वाली स्क्रीन को लक्षित करती है। यह निम्नलिखित शैलियों को तभी लागू करता है जब ईमेल को 600px या उससे कम स्क्रीन चौड़ाई वाले उपकरणों पर देखा जाता है, जिसमें आमतौर पर स्मार्टफोन और कुछ छोटे टैबलेट शामिल होते हैं। <पी> मीडिया क्वेरी वर्गों के भीतर शैलियाँ: .सामग्री
width_: 100% !important;_ :यह शैली .content की चौड़ाई बदल देती है HTML में निर्दिष्ट 600px के बजाय स्क्रीन की पूरी चौड़ाई का उपयोग करने के लिए तालिका। !important नियम का उपयोग किसी भी अन्य परस्पर विरोधी शैलियों को ओवरराइड करने के लिए किया जाता है।display: block !important; :यद्यपि <table> तत्व स्वाभाविक रूप से ब्लॉक-स्तरीय तत्व हैं, सेटिंग display: block यह स्पष्ट रूप से कुछ ईमेल क्लाइंटों को यह सुनिश्चित करने में मदद कर सकता है कि तत्व अपेक्षित व्यवहार करता है।padding: 10px !important; :.content के भीतर सामग्री के चारों ओर पैडिंग जोड़ता है तालिका, छोटे उपकरणों पर कम स्क्रीन स्थान का बेहतर उपयोग करने के लिए HTML में इसे मूल 40px से कम कर रही है।
.हेडर, .बॉडी, .फ़ुटर
padding: 20px !important; :यह शैली हेडर, बॉडी और फ़ुटर की पैडिंग को समान रूप से सेट करती है अनुभाग 20px तक सभी तरफ, छोटी स्क्रीन के लिए रिक्ति को अनुकूलित करना। यह HTML में परिभाषित विभिन्न पैडिंग सेटिंग्स को ओवरराइड करता है, जिसमें कुछ मामलों में बड़े मान शामिल होते हैं।
<पी> ईमेल डिज़ाइन के संदर्भ में, !महत्वपूर्ण का उपयोग यह सुनिश्चित करना काफी आम है कि शैलियों को इच्छित तरीके से लागू किया जाता है, दोनों डिफ़ॉल्ट शैलियों और अन्य संभावित विरोधाभासी शैलियों को ओवरराइड किया जाता है जिन्हें ईमेल क्लाइंट द्वारा ही लागू किया जा सकता है। चरण 5:सभी ईमेल ग्राहकों का परीक्षण करें
<पी> अनुकूलता और प्रतिक्रिया सुनिश्चित करने के लिए विभिन्न ईमेल क्लाइंट (जैसे जीमेल, आउटलुक और ऐप्पल मेल) और उपकरणों पर अपने ईमेल टेम्पलेट का परीक्षण करना महत्वपूर्ण है। लिटमस या ईमेल ऑन एसिड जैसे उपकरण इसमें मदद कर सकते हैं। चरण 6:Google फ़ॉन्ट जोड़ना
<पी> Google फ़ॉन्ट्स को HTML ईमेल टेम्पलेट में शामिल करने से इसकी दृश्य अपील में काफी सुधार हो सकता है। <पी> हालाँकि, यह ध्यान रखना महत्वपूर्ण है कि सभी ईमेल क्लाइंट वेब फ़ॉन्ट का समर्थन नहीं करते हैं। ऐप्पल मेल जैसे कुछ, Google फ़ॉन्ट्स का समर्थन करते हैं, लेकिन जीमेल जैसे अन्य नहीं करते हैं। यह सुनिश्चित करने के लिए कि आपका ईमेल सभी प्राप्तकर्ताओं को अच्छा लगे, हमेशा एक फ़ॉलबैक फ़ॉन्ट प्रदान करें। <पी> यहां बताया गया है कि आप अपने ईमेल टेम्प्लेट में Google फ़ॉन्ट कैसे जोड़ सकते हैं, साथ ही उन ग्राहकों के लिए फ़ॉलबैक विकल्प भी जोड़ सकते हैं जो इसका समर्थन नहीं करते हैं: अपना Google फ़ॉन्ट चुनें
<पी> सबसे पहले, Google फ़ॉन्ट्स वेबसाइट पर जाएँ और एक फ़ॉन्ट चुनें। इस उदाहरण के लिए, आइए "पॉपिन्स" का उपयोग करें फ़ॉन्ट लिंक को अपने ईमेल हेड में जोड़ें
<पी> <head> में Google फ़ॉन्ट का लिंक शामिल करें आपके HTML दस्तावेज़ का. चूंकि यह सभी ईमेल क्लाइंट में समर्थित नहीं हो सकता है, इसलिए सुनिश्चित करें कि आपकी शैलियों में एक उपयुक्त फ़ॉलबैक फ़ॉन्ट है। <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
फ़ॉन्ट को अपनी शैलियों में लागू करें
<पी> अपने HTML तत्वों पर Google फ़ॉन्ट लागू करने के लिए इनलाइन CSS का उपयोग करें, और हमेशा एक सामान्य फ़ॉलबैक फ़ॉन्ट शामिल करें। ईमेल टेम्प्लेट में, <style> के लिए अलग-अलग समर्थन के कारण शैलियों को इनलाइन लागू करना अधिक सुरक्षित है ईमेल क्लाइंट्स पर टैग। <पी> यहां body पर फ़ॉन्ट लागू करने का तरीका बताया गया है आपके ईमेल का और एक फ़ॉलबैक शामिल करें: <body style="font-family: 'Poppins', Arial, sans-serif;">
<table width="100%" cellspacing="0" cellpadding="0">
<!-- Email content -->
</table>
</body>
हमने क्या बनाया
<पी> नीचे हमारे द्वारा डिज़ाइन किए गए ईमेल टेम्पलेट का स्क्रीनशॉट है। इसमें लोगो प्लेसहोल्डर वाले हेडर के साथ एक पेशेवर लेआउट, आपके संदेश के लिए एक मुख्य भाग अनुभाग और संपर्क और सदस्यता प्रबंधन लिंक के साथ एक डार्क फ़ुटर शामिल है। <पी> ईमेल टेम्पलेट का स्क्रीनशॉट अतिरिक्त सुझाव:
- जितना संभव हो सके अपने CSS को इनलाइन रखें, क्योंकि कई ईमेल क्लाइंट
<style> का समर्थन नहीं करते हैं टैग.
- यह सुनिश्चित करने के लिए कि आपका टेक्स्ट सभी ईमेल क्लाइंट में सही ढंग से दिखाई दे, वेब-सुरक्षित फ़ॉन्ट का उपयोग करें।
- उन ग्राहकों के लिए हमेशा अपने ईमेल का सादा पाठ संस्करण प्रदान करें जो HTML का समर्थन नहीं करते हैं, या HTML अक्षम है।
<पी> मुझे आशा है कि यह मार्गदर्शिका आपको एक प्रतिक्रियाशील ईमेल टेम्पलेट बनाने के लिए एक बुनियादी रूपरेखा प्रदान करेगी। जैसे-जैसे आप ईमेल डिज़ाइन के साथ अधिक सहज हो जाते हैं, आप अधिक जटिल लेआउट और शैलियों के साथ प्रयोग कर सकते हैं। <पी> हैप्पी कोडिंग! <पी> मुफ़्त में कोड करना सीखें. फ्रीकोडकैंप के ओपन सोर्स पाठ्यक्रम ने 40,000 से अधिक लोगों को डेवलपर्स के रूप में नौकरी पाने में मदद की है। आरंभ करें
