<पी> मेरे पिछले लेख, "एक रिस्पॉन्सिव HTML ईमेल टेम्प्लेट कैसे बनाएं" में, हमने एक सरल HTML ईमेल टेम्प्लेट को डिज़ाइन करने और कोडिंग करने के मूल सिद्धांतों का पता लगाया, जो विभिन्न उपकरणों और ईमेल क्लाइंटों के लिए खूबसूरती से अनुकूलित होता है। <पी> मुझे HTML ईमेल टेम्पलेट में मीडिया जोड़ने के बारे में कुछ प्रश्न मिले। <पी> उस नींव पर निर्माण करते हुए, मैं आपके HTML ईमेल टेम्पलेट में मीडिया जोड़ने के विभिन्न तरीकों के माध्यम से आपका मार्गदर्शन करूंगा। छवियाँ, वीडियो और ऑडियो जैसे मीडिया को जोड़ने से आपके संचार की सहभागिता और प्रभावशीलता में उल्लेखनीय वृद्धि हो सकती है। आवश्यकताएँ
- एक सरल HTML ईमेल टेम्पलेट. आप इस गाइड का अनुसरण करके एक बना सकते हैं.
<पी> छवियाँ ईमेल में जोड़े जाने वाला सबसे सामान्य प्रकार का मीडिया है। उन्हें अपने HTML ईमेल टेम्प्लेट में शामिल करने का तरीका यहां बताया गया है: - एक छवि जोड़ने से पहले, सुनिश्चित करें कि यह उचित आकार का है और वेब उपयोग के लिए अनुकूलित है। स्केलिंग के बिना अधिकांश ईमेल क्लाइंट को फिट करने के लिए छवि की चौड़ाई 600 पिक्सेल से कम रखना एक सामान्य अभ्यास है। इस विशेष उदाहरण के लिए हमारे पास एक स्टॉक छवि है और इसे नीचे दिखाए अनुसार 600 x 750 पिक्सेल में बदल दिया गया है।
<पी> यह वह छवि है जिसे हम अपलोड करेंगे - अपनी छवि को किसी विश्वसनीय वेब सर्वर या सामग्री वितरण नेटवर्क (सीडीएन) पर अपलोड करें। आपको अपने ईमेल में संदर्भ के लिए एक स्थिर यूआरएल की आवश्यकता होगी।
<पी> इस उदाहरण के लिए हम imgbb वेबसाइट का उपयोग करेंगे और अपनी छवि अपलोड करेंगे। "अपलोड करना प्रारंभ करें" पर क्लिक करें और छवि चुनें. <पी> imgbb मुफ़्त इमेज होस्टिंग प्लेटफ़ॉर्म में से एक है <पी> उपयोग करने के लिए छवि चुनने के बाद, "डोंट ऑटोडिलीट" चुनें और अपलोड पर क्लिक करें। <पी> ड्रॉपडाउन से ऑटोडिलीट न करें चुनें <पी> अपलोड करने के बाद एक यूआरएल जेनरेट होगा. ड्रॉपडाउन पर क्लिक करें और "HTML पूर्ण लिंक्ड" चुनें <पी> एम्बेड कोड जनरेट हुआ - जनरेट किए गए HTML कोड को कॉपी करें और इसे अपने ईमेल टेम्पलेट में वांछित अनुभाग में डालें जैसा कि दिखाया गया है।
<a href="https://ibb.co/XpRp2N8">
<img src="https://i.ibb.co/q9Q9yX5/600x750.jpg" alt="600x750" border="0"></a>
<पी> आपकी छवि ईमेल टेम्पलेट में कैसी दिखाई देगी, इसका परीक्षण करने के लिए अन्य एम्बेड कोड विकल्पों को आज़माने में संकोच न करें। <पी> सम्मिलित छवि का परिणाम नीचे दिया गया है: <पी> छवि सफलतापूर्वक हमारे ईमेल टेम्पलेट में डाली गई <पी> ध्यान दें :हमेशा alt शामिल करें उन परिदृश्यों के लिए वैकल्पिक पाठ प्रदान करने की विशेषता जहां छवि प्रदर्शित नहीं की जा सकती। अपने ईमेल टेम्पलेट में वीडियो कैसे एम्बेड करें
<पी> अधिकांश ईमेल क्लाइंट में डायरेक्ट वीडियो प्लेबैक समर्थित नहीं है। इसके बजाय, आप एक क्लिक करने योग्य थंबनेल एम्बेड कर सकते हैं जो ऑनलाइन होस्ट किए गए वीडियो से लिंक होता है: - एक थंबनेल बनाएं :अपने वीडियो से एक फ़्रेम कैप्चर करें या एक कस्टम ग्राफ़िक बनाएं जो वीडियो सामग्री का प्रतिनिधित्व करता हो। यह प्लेसहोल्डर के रूप में कार्य करेगा. इस उदाहरण में, हम थंबनेल के समान छवि का उपयोग करेंगे।
<पी> - ड्रॉपडाउन से, HTML थंबनेल लिंक्ड चुनें। कोड को कॉपी करें और इसे अपने ईमेल टेम्पलेट पर पेस्ट करें।
<a href="https://ibb.co/XpRp2N8"><img src="https://i.ibb.co/XpRp2N8/600x750.jpg" alt="600x750" border="0"></a>
- वीडियो से लिंक करें :वीडियो यूआरएल से जुड़ी क्लिक करने योग्य छवि के रूप में थंबनेल का उपयोग करने के लिए उपरोक्त कोड को संशोधित करें।
- यूआरएल को
<a href =""> में बदलें वीडियो लिंक पर जैसा कि नीचे दिखाया गया है।
<a href="https://youtu.be/UG8rjxYBfFg?si=xU2zqCtQW5-2z7nw">
<img src="https://i.ibb.co/XpRp2N8/600x750.jpg" alt="600x750" border="0"</a>
<पी> यह HTML स्निपेट बिना बॉर्डर के एक लिंक की गई छवि बनाता है। और यह इस प्रकार हमारे ईमेल टेम्पलेट में दिखाई देगा: <पी> लिंक किया गया थंबनेल इस तरह दिखाई देगा अपने ईमेल टेम्पलेट में YouTube वीडियो कैसे एम्बेड करें
<पी> वैकल्पिक रूप से आप YouTube वीडियो को सीधे अपने ईमेल टेम्पलेट में एम्बेड कर सकते हैं। यहां बताया गया है: - YouTube पर जाएं और वह वीडियो चुनें जिसे आप एम्बेड करना चाहते हैं।
- शेयर -> एंबेड पर क्लिक करें और एक
iframe उत्पन्न किया जाएगा. नीचे एक उदाहरण है:
<iframe width="560" height="315" src="https://www.youtube.com/embed/UG8rjxYBfFg?si=nYBBM032nvBn5tNZ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
iframe को कॉपी करें और इसे <td> पर पेस्ट करें आपके HTML ईमेल टेम्प्लेट कोड का अनुभाग। और आपके पास कुछ इस तरह दिखेगा:
<पी> यह एक ईमेल टेम्पलेट के अंतर्गत यूट्यूब वीडियो का एक उदाहरण है अपने ईमेल टेम्पलेट में ऑडियो कैसे जोड़ें
<पी> ईमेल में सीधे ऑडियो फ़ाइलें जोड़ना भी अधिकांश ईमेल क्लाइंट द्वारा समर्थित नहीं है। वीडियो के समान, आप ऑडियो फ़ाइल का लिंक शामिल कर सकते हैं: - ऑडियो फ़ाइल होस्ट करें :अपनी ऑडियो फ़ाइल को उपयुक्त प्लेटफ़ॉर्म या सर्वर पर अपलोड करें। वहाँ कई ऑडियो प्लेटफ़ॉर्म हैं, जैसे Google ड्राइव, आपकी अपनी वेबसाइट, YouTube, साउंड क्लाउड, इत्यादि।
- इस उदाहरण के लिए, हम Audio.com नामक प्लेटफ़ॉर्म का उपयोग करेंगे। बस "अभी मुफ़्त में शामिल हों" पर क्लिक करके एक खाता बनाएं या यदि आपके पास पहले से ही एक खाता है तो साइन इन करें।
<पी> <पी> अपलोड पर क्लिक करें और अपनी .mp3 फ़ाइल चुनें जो आपके खाते में संग्रहीत की जाएगी। एक बार ऑडियो पूरा हो जाने पर, शेयर आइकन पर क्लिक करें। <पी> - यह आपको कुछ विकल्पों पर लाएगा जहां आप लिंक को कॉपी कर सकते हैं या बस लिंक को एम्बेड कर सकते हैं:
<पी> एंबेड पर क्लिक करें, और आपको एक पूर्वावलोकन दिखाई देगा कि आपका ऑडियो कैसा दिखाई देगा। कोड को कॉपी करें और इसे अपने ईमेल टेम्प्लेट अनुभाग में पेस्ट करें। <पी> ऑडियो.कॉम द्वारा जेनरेट किया गया कोड जिसे ईमेल टेम्पलेट में एम्बेड किया जा सकता है <पी> आप div को भी हटा सकते हैं और बस iframe का उपयोग करें . इसके अलावा बेझिझक उन हिस्सों को हटा दें जिन्हें आप ईमेल टेम्पलेट में नहीं दिखाना चाहेंगे और इसे अपनी पसंद के अनुसार अनुकूलित करें। <पी> यहाँ कोड है: <div style="height: 228px; width: 600px;">
<iframe src="https://audio.com/embed/audio/1797114509131910?theme=image"
style="display:block; border-radius: 6px; border: none; height: 204px; width: 600px;"></iframe><a href='https://audio.com/nyayic-fanny' style="text-align: center; display: block; color: #A4ABB6; font-size: 12px; font-family: sans-serif; line-height: 16px; margin-top: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">@nyayic-fanny</a>
</div>
<पी> उपरोक्त के लिए यह हमारा अंतिम परिणाम है: <पी> हमारा ऑडियो हमारे ईमेल टेम्पलेट में इस तरह दिखाई देगा audio का उपयोग करना टैग
<पी> एम्बेडिंग के अलावा, हम ऑडियो टैग का उपयोग कर सकते हैं और अपने ऑडियो स्रोत में यूआरएल जोड़ सकते हैं जैसा कि नीचे दिखाया गया है: <p>Audio added via audio tag</p> <br><br>
<audio controls="controls">
<source src="https://audio.com/nyayic-fanny/audio/past-life-jvna.mp3">
<p>? Listen: <a href="https://audio.com/nyayic-fanny/audio/past-life-jvna.mp3">Audio</a> (mp3)</p>
</audio>
<पी> बस यूआरएल को अपने audio url में बदलें . और हमारा संपूर्ण संशोधन इसी तरह दिखना चाहिए। <पी> हमारा संशोधित html ईमेल टेम्प्लेट <पी> ध्यान दें: हॉटमेल और क्लाइंट जो HTML5 का समर्थन नहीं करते, काम नहीं करेंगे! <पी> HTML ईमेल में मीडिया को एकीकृत करते समय, संगतता और उपयोगकर्ता अनुभव को अनुकूलित करने के लिए निम्नलिखित युक्तियों पर विचार करें: - यह सुनिश्चित करने के लिए कि वे सभी ईमेल क्लाइंट में सही ढंग से लोड हों, छवियों, वीडियो और ऑडियो के लिए हमेशा पूर्ण, पूर्ण URL का उपयोग करें।
- अपने ईमेल का परीक्षण करें:विभिन्न ईमेल क्लाइंट HTML सामग्री को विभिन्न तरीकों से प्रदर्शित करते हैं। यह जांचने के लिए कि आपका ईमेल विभिन्न प्लेटफार्मों पर कैसे प्रस्तुत होता है, लिटमस या ईमेल ऑन एसिड जैसे टूल का उपयोग करें।
- लोड समय को ध्यान में रखें:यह सुनिश्चित करने के लिए कि आपके ईमेल जल्दी से लोड हों, मीडिया फ़ाइल आकार को अनुकूलित करें, जो प्राप्तकर्ता का ध्यान बनाए रखने और जुड़ाव में सुधार के लिए महत्वपूर्ण है।
- पहुंच-योग्यता पर विचार करें:छवियों और कैप्शन के लिए वर्णनात्मक वैकल्पिक पाठ या ऑडियो और वीडियो सामग्री के लिए प्रतिलेख प्रदान करें।
<पी> हालाँकि ईमेल क्लाइंट किस चीज़ का समर्थन कर सकते हैं इसकी सीमाएँ हैं, वीडियो और ऑडियो फ़ाइलों के लिए लिंक की गई छवियों का उपयोग एक उपयोगकर्ता-अनुकूल समाधान प्रदान करता है जो अधिकांश प्लेटफार्मों पर काम करता है। <पी> हमेशा सुनिश्चित करें कि आप अपने ईमेल का पूरी तरह से परीक्षण करें और एक सहज और आकर्षक उपयोगकर्ता अनुभव सुनिश्चित करने के लिए सर्वोत्तम प्रथाओं का पालन करें। <पी> हैप्पी कोडिंग! <पी> मुफ़्त में कोड करना सीखें. फ्रीकोडकैंप के ओपन सोर्स पाठ्यक्रम ने 40,000 से अधिक लोगों को डेवलपर्स के रूप में नौकरी पाने में मदद की है। आरंभ करें
