इसके माध्यम से साझा किया गया

ईमेल, पेज और प्रपत्रों में डिज़ाइनर सुविधाओं को सक्षम करने के लिए कस्टम विशेषताओं का उपयोग करें

  • आलेख

सामग्री डिजाइनर एक ग्राफिकल एडिटर और एक HTML कोड एडिटर दोनों प्रदान करते हैं। उनके द्वारा जेनरेट किया गया HTML किसी भी HTML रेंडरर के साथ संगत है, लेकिन वे कुछ कस्टम विशेषताओं का भी समर्थन करते हैं जो ग्राफ़िकल संपादक द्वारा प्रदान किए गए ड्रैग-एंड-ड्रॉप डिज़ाइन तत्वों और सामान्य शैली सेटिंग्स का समर्थन करते हैं। प्रदान किए गए Dynamics 365 Customer Insights - Journeys डिफ़ॉल्ट संदेश टेम्पलेट्स और पृष्ठ टेम्पलेट्स इन कस्टम विशेषताओं का उपयोग करते हैं ताकि आपके लिए उन्हें विशिष्ट तरीकों से अनुकूलित करना आसान हो सके. आप अपने स्वयं के टेम्पलेट डिज़ाइन करते समय भी इन कस्टम विशेषताओं का उपयोग कर सकते हैं।

टिप

Microsoft ईमेल में कस्टम HTML के लिए समर्थन प्रदान नहीं करता है।

टैग और विशेषता सारांश

निम्न तालिका इस विषय में वर्णित कस्टम विशेषताओं और मेटा टैग का त्वरित संदर्भ प्रदान करती है.

कस्टम एट्रिब्यूट विवरण
<meta type="xrm/designer/setting" name="type" value="marketing-designer-content-editor-document"> जब यह टैग आपके दस्तावेज़ में <head> मौजूद होता है, तो डिज़ाइनर टैब ड्रैग-एंड-ड्रॉप सुविधाएँ प्रदान करेगा। यदि यह टैग मौजूद नहीं है, तो डिज़ाइनर टैब सरलीकृत, पूर्ण-पृष्ठ संपादक प्रदान करता है. अधिक जानकारी: टूलबॉक्स दिखाएँ और ड्रैग-एंड-ड्रॉप संपादन सक्षम करें
<meta type="xrm/designer/setting" name="additional-fonts" datatype="font" value="<font-list>"> जब यह टैग आपके दस्तावेज़ में <head> मौजूद होता है, तो फ़ॉन्ट-सूची < (अर्धविराम-अलग) में> सूचीबद्ध फ़ॉन्ट पाठ तत्वों के लिए स्वरूपण टूलबार में फ़ॉन्ट मेनू में जोड़े जाएंगे। अधिक जानकारी: पाठ-तत्व उपकरण पट्टी में नए फ़ॉन्ट जोड़ें
<div data-container="true"> … </div> कंटेनर के प्रारंभ और अंत को चिह्नित करता है जहाँ उपयोगकर्ता डिज़ाइन तत्वों को खींच और छोड़ सकते हैं. अधिक जानकारी: एक कंटेनर बनाएँ जहाँ उपयोगकर्ता डिज़ाइन तत्व जोड़ सकें
<div data-editorblocktype="<element-type>"> … </div> एक डिजाइन तत्व की शुरुआत और अंत को चिह्नित करता है। विशेषता का मान पहचानता है कि यह किस प्रकार का तत्व है (पाठ, छवि, बटन, और इसी तरह)। कुछ डिज़ाइन तत्व यहां अतिरिक्त विशेषताओं का समर्थन करते हैं। अधिक जानकारी: डिज़ाइनर दृश्य में डिज़ाइन तत्वों और अवरोधित तत्वों को पहचानें
<meta type="xrm/designer/setting" name="<name>" value="<initial-value>" datatype="<data-type>" label="<label>"> यह टैग एक दस्तावेज़-व्यापी शैली सेटिंग निर्धारित करता है जिसे उपयोगकर्ता डिज़ाइनर शैलियाँ टैब का उपयोग करके>संपादित कर सकते हैं . अधिक जानकारी: शैलियाँ टैब में सेटिंग्स जोड़ना
/* @<tag-name> */ … /* @<tag-name> */ शैली सेटिंग द्वारा नियंत्रित किए जाने वाले मान को घेरने CSS के लिए इस तरह की टिप्पणियों का उपयोग करें CSS , जहां <टैग-नाम> सेटिंग स्थापित करने वाले मेटा टैग के लिए नाम विशेषता का मान है। अधिक जानकारी: शीर्ष में शैली सेटिंग्स कार्यान्वित करने के लिए टिप्पणियाँ जोड़ें CSS
property-reference= "<attr>:@< tag-name >;<attr>:@< tag-name >; …" इस विशेषता को किसी भी HTML टैग में किसी शैली सेटिंग द्वारा नियंत्रित मान वाली विशेषता रखने के लिए रखें, जहां <attr> बनाई जाने वाली विशेषता का नाम है और <टैग-नाम> सेटिंग स्थापित करने वाले मेटा टैग के लिए विशेषता का name मान है. अधिक जानकारी: मुख्य भाग में शैली सेटिंग्स लागू करने के लिए गुण-संदर्भ विशेषताएँ जोड़ें

इस विषय के शेष अनुभाग तालिका में सारांशित प्रत्येक सुविधा का उपयोग करने के तरीके के बारे में अधिक जानकारी प्रदान करते हैं.

टूलबॉक्स दिखाएं और ड्रैग-एंड-ड्रॉप संपादन सक्षम करें

आप किसी भी तृतीय-पक्ष टूल में विकसित HTML को सीधे डिज़ाइनर के HTML टैब में पेस्ट कर सकते हैं ताकि डिज़ाइन को बहुत तेज़ी से बनाना शुरू किया जा सके। हालाँकि, जब आप ऐसा करते हैं, तो डिज़ाइनर टैब एकल रिच-टेक्स्ट संपादक के रूप में प्रदर्शित होगा जो एक पाठ-स्वरूपण उपकरण पट्टी प्रदान करता है और आपके HTML में शामिल सभी छवियाँ, लिंक्स और शैलियाँ दिखाता है, लेकिन अन्यथा उपकरण बॉक्स , गुण याशैलियाँ टैब्स या कोई ड्रैग-एंड-ड्रॉप कार्यक्षमता प्रदान नहीं करता है (इस सरलीकृत डिज़ाइनर दृश्य को कभी-कभी पूर्ण-पृष्ठ संपादक कहा जाता है). हालाँकि, आप अपने दस्तावेज़ के अनुभाग में निम्न मेटा टैग <head> जोड़कर किसी भी चिपकाए गए डिज़ाइन के लिए ड्रैग-एंड-ड्रॉप कार्यक्षमता सक्षम कर सकते हैं:

<meta type="xrm/designer/setting" name="type" value="marketing-designer-content-editor-document">

निम्न छवि पूर्ण-पृष्ठ-संपादन मोड (बाएं) और ड्रैग-एंड-ड्रॉप मोड (दाएं) में समान डिज़ाइन दिखाती है। अंतर केवल इतना है कि दाईं ओर के डिज़ाइन में मेटा टैग शामिल है, इसलिए ड्रैग-एंड-ड्रॉप सक्षम है, और साइड पैनल दिखाया गया है।

पूर्ण-पृष्ठ संपादक बनाम ड्रैग-एंड-ड्रॉप संपादक।

नोट

पूर्ण-पृष्ठ संपादक का उपयोग करते समय, आप अभी भी पाठ-स्वरूपण टूलबार (दिखाया गया) का उपयोग करके पाठ का चयन, संपादन और शैलीकरण कर सकते हैं, और पॉप-अप संवाद का उपयोग करके छवियों, लिंक और अन्य तत्वों पर डबल-क्लिक करके उनके गुण भी सेट कर सकते हैं। टूलबार में गतिशील सामग्री जोड़ने के लिए सहायता संपादन बटन निजीकरण बटन. भी शामिल है, जैसे कि प्रत्येक प्राप्तकर्ता के संपर्क रिकॉर्ड से निकाले गए फ़ील्ड मान।

एक कंटेनर बनाएं जहां उपयोगकर्ता डिज़ाइन तत्व जोड़ सकें

डिज़ाइनर टैब पर, उपयोगकर्ता केवल डिज़ाइन तत्व में निहित सामग्री को संपादित कर सकते हैं, और नए डिज़ाइन तत्वों को केवल दस्तावेज़ के उन भागों में खींच सकते हैं जिन्हें डेटा कंटेनर के रूप में सेट किया गया है। इसलिए, आप ऐसे टेम्पलेट बना सकते हैं, जहां कुछ क्षेत्र (कंटेनरों के बाहर) डिज़ाइन टैब पर संपादन के लिए लॉक किए गए हैं, जबकि अन्य क्षेत्र (अनलॉक किए गए कंटेनरों के अंदर) संपादन और खींची गई सामग्री को स्वीकार करेंगे।

डेटा कंटेनर बनाने के लिए <div> ऐसे टैग का उपयोग करें जिनमें विशेषता data-container="true" शामिल हो, जैसे:

<table aria-role="presentation">
    <tbody><tr>
        <td>
            LOCKED
        </td>
        <td>
            <div data-container="true">
                <!-- DRAG HERE -->
            </div>
        </td>
    </tr>
</tbody></table>

कोई भी पाठ या HTML टैग जो data-container div-tag युग्म के भीतर स्थित हैं, और डिज़ाइन तत्व का हिस्सा नहीं हैं, वे दो खींचने योग्य क्षेत्रों के बीच एक गैर-खींचने योग्य, गैर-संपादन योग्य क्षेत्र बनाएंगे। उदाहरण के लिए:

<div data-container="true">
    <!-- DRAG HERE --> <p> LOCKED </p> <!-- DRAG HERE -->
</div>

नोट

जब पूर्ण-पृष्ठ संपादक सक्षम होता है, तो सभी ड्रैग-एंड-ड्रॉप सुविधाएं अक्षम हो जाती हैं, और आप डिज़ाइनर टैब पर सभी सामग्री को संपादित कर सकते हैं, जिसमें data-container div टैग के बाहर की सामग्री भी शामिल है (जिसका पूर्ण-पृष्ठ संपादक में कोई प्रभाव नहीं होता है)।

डिज़ाइनर दृश्य में कंटेनर लॉक करें

आप कंटेनर को लॉक कर सकते हैं ताकि इसकी सारी सामग्री डिज़ाइनर टैब पर केवल पढ़ने के लिए उपलब्ध हो। यदि किसी लॉक किए गए कंटेनर में डिज़ाइन तत्व हैं, तो उन तत्वों के लिए सभी सामग्री और सेटिंग लॉक रहेंगी, और गुण टैब उनके लिए कभी नहीं दिखाया जाएगा, भले ही आप उन्हें चुनें।

आप किसी कंटेनर में डिज़ाइन घटकों को जोड़ने और कॉन्फ़िगर करने के बाद उसे लॉक करने के लिए कंटेनर-लॉकिंग सुविधा का उपयोग कर सकते हैं।

किसी कंटेनर को लॉक करने के लिए, कंटेनर टैग में data-locked="hard" विशेषता जोड़ें, इस तरह:

<div data-container="true" data-locked="hard">
    <!-- All elements and content here are locked, with no properties shown -->
</div>

नोट

आप डिज़ाइन-तत्व स्तर पर भी सामग्री को लॉक कर सकते हैं। यदि सामग्री कंटेनर स्तर पर लॉक है, तो वह सेटिंग उस कंटेनर के अंदर सभी डिज़ाइन तत्वों की लॉक/अनलॉक स्थिति को रद्द कर देती है। अधिक जानकारी: डिज़ाइनर दृश्य में तत्वों को लॉक करें

कंटेनर लॉकिंग को और अधिक लागू करने के लिए, आप HTML टैब तक पहुंच को सीमित कर सकते हैं, जो चयनित उपयोगकर्ताओं को कोड तक पहुंचने से रोक देगा (जहां वे अन्यथा इस सेटिंग को हरा सकते हैं)। अधिक जानकारी: डिज़ाइनर सुविधाओं तक पहुँच नियंत्रित करें

डिज़ाइन तत्वों की पहचान करें

जब भी आप डिज़ाइनर टैब का उपयोग करके कोई डिज़ाइन तत्व जोड़ते हैं, तो संपादक तत्व के प्रारंभ और अंत को चिह्नित करने के लिए <div> टैग की एक जोड़ी सम्मिलित करता है, और गुण टैब पर इसकी सेटिंग्स में निर्दिष्ट तत्व को प्रदर्शित करने के लिए जो भी HTML आवश्यक है, उसे बनाता है।

डिज़ाइन तत्वों को <div> टैग के साथ चिह्नित किया जाता है जिसमें data-editorblocktype="<element-type>" रूप की विशेषता शामिल होती है, जहां इस विशेषता का मान यह बताता है कि यह किस प्रकार का तत्व है। उदाहरण के लिए, निम्न <div> टैग एक टेक्स्ट तत्व बनाता है:

<div data-editorblocktype="Text">
    ...
    <!-- Don't edit the element content here -->
    ...
</div>

निम्न तालिका data-editorblocktype विशेषता के लिए उपलब्ध मानों को सूचीबद्ध करती है।

डिज़ाइन तत्व का नाम तत्व प्रकार data-editorblocktype मान बताइए
पाठ तत्व सामान्य डिज़ाइन तत्व टेक्स्ट
छवि तत्व सामान्य डिज़ाइन तत्व Image
विभाजक तत्व सामान्य डिज़ाइन तत्व भाजक
बटन तत्व सामान्य डिज़ाइन तत्व Button
सामग्री ब्लॉक तत्व सामान्य डिज़ाइन तत्व सामग्री
(इस प्रकार के डिज़ाइन तत्व में एक data-block-datatype="<block-type>" विशेषता भी शामिल होती है, जो यह पहचानती है कि यह किस प्रकार का सामग्री ब्लॉक है, जहाँ <ब्लॉक-प्रकार > का मान या तो text या image होता है।)
मार्केटिंग-पेज तत्व ईमेल करें मार्केटिंग पृष्ठ
घटना तत्व ईमेल करें ईवेंट
सर्वेक्षण तत्व ईमेल करें सर्वे
प्रपत्र तत्व प्रपत्र फॉर्मब्लॉक
क्षेत्र तत्व फॉर्म सामग्री फ़ील्ड-<फ़ील्ड-नाम>, उदाहरण के लिए: फ़ील्ड-ईमेल
सदस्यता-सूची तत्व फॉर्म सामग्री सदस्यतासूचीब्लॉक
मित्र को अग्रेषित करने वाला तत्व सामग्री से फॉरवर्डटूफ्रेंडब्लॉक
ईमेल न करें तत्व और मुझे याद रखें तत्व फॉर्म सामग्री फ़ील्ड-चेकबॉक्स
(ये सभी तत्व चेक बॉक्स बनाते हैं तथा अपनी आंतरिक सेटिंग्स के आधार पर अलग-अलग होते हैं।)
सबमिट-बटन तत्व फॉर्म सामग्री सबमिटबटनब्लॉक
रीसेट-बटन तत्व फॉर्म सामग्री रीसेटबटनब्लॉक
कैप्चा तत्व फॉर्म सामग्री कैप्चाब्लॉक

इनमें से प्रत्येक डिज़ाइन तत्व के बारे में अधिक जानकारी के लिए, डिज़ाइन तत्व संदर्भ देखें।

महत्त्वपूर्ण

जब आप HTML टैब पर काम कर रहे हों, तो आपको अपने डिज़ाइन तत्वों के टैग के बीच की किसी भी सामग्री को संपादित करने से बचना चाहिए, क्योंकि ऐसा करने के परिणाम अप्रत्याशित हो सकते हैं, और आपके संपादन को डिज़ाइनर द्वारा अधिलेखित कर दिए जाने की संभावना है। <div> इसके बजाय, अपने डिज़ाइन-तत्व सामग्री और गुणों को प्रबंधित करने के लिए डिज़ाइनर टैब का उपयोग करें।

डिज़ाइनर दृश्य में तत्वों को लॉक करें

आप किसी भी डिज़ाइन तत्व की सामग्री और गुणों को उसके ओपनिंग <div> टैग में निम्नलिखित विशेषता जोड़कर लॉक कर सकते हैं:

data-protected="true"

उदाहरण के लिए:

<div data-editorblocktype="Divider" data-protected="true">
    …
        <!-- Don't edit the element content here -->
    …
</div>

जब किसी डिज़ाइन तत्व को संरक्षित के रूप में चिह्नित किया जाता है, तो किसी पृष्ठ या ईमेल के लिए डिज़ाइनर टैब में काम करने वाले उपयोगकर्ता तत्व के गुणों या सामग्री को संपादित नहीं कर पाएंगे। यह विशेषता हमेशा content-block तत्व के लिए शामिल की जाती है, लेकिन आप इसे किसी भी प्रकार के डिज़ाइन तत्व की सुरक्षा के लिए उसमें जोड़ सकते हैं। कोई भी डिज़ाइन तत्व जिसमें यह विशेषता शामिल है, उसे HTML टैब पर छायांकित रूप में दिखाया जाता है, यह इंगित करने के लिए कि यह संरक्षित है, लेकिन यदि आप चाहें तो इसे अभी भी संपादित कर सकते हैं। किसी डिज़ाइन तत्व से सुरक्षा हटाने के लिए इस विशेषता को "गलत" पर सेट करें (या इसे हटा दें)।

नोट

आप कन्टेनर स्तर पर भी सामग्री को लॉक कर सकते हैं, जिससे उस कन्टेनर के अंदर सभी डिज़ाइन तत्वों की लॉक/अनलॉक स्थिति निरस्त हो जाएगी। अधिक जानकारी: डिज़ाइनर दृश्य में कंटेनर लॉक करें

सामग्री लॉकिंग को और अधिक लागू करने के लिए, आप HTML टैब तक पहुंच को सीमित कर सकते हैं, जो चयनित उपयोगकर्ताओं को कोड तक पहुंचने से रोक देगा (जहां वे अन्यथा इस सेटिंग को हरा सकते हैं)। अधिक जानकारी: डिज़ाइनर सुविधाओं तक पहुँच नियंत्रित करें

बाहरी रूप से निर्मित HTML को डिज़ाइनर में आयात करें

आप किसी पृष्ठ या फॉर्म के लिए प्रारंभिक HTML लेआउट और सामग्री बनाने के लिए किसी भी उपकरण का उपयोग कर सकते हैं। जब आपका HTML तैयार हो जाए, तो बस इसे संबंधित डिज़ाइनर में पेस्ट करें और फिर अपनी ज़रूरत के अनुसार कोई भी Dynamics 365 Customer Insights - Journeys फीचर जोड़ें, जैसा कि निम्नलिखित उपखंडों में बताया गया है।

अपना HTML कोड आयात करें

बाहरी रूप से निर्मित HTML को डिज़ाइनर में लाने के लिए, निम्नलिखित कार्य करके शुरुआत करें:

  1. Dynamics 365 Customer Insights - Journeysमें एक नया मार्केटिंग ईमेल, पृष्ठ या फ़ॉर्म बनाएँ.
  2. डिज़ाइनर के डिज़ाइन>HTML टैब पर जाएँ।
  3. HTML टैब से सारी सामग्री साफ़ करें और आपके द्वारा बाहरी रूप से बनाया गया HTML पेस्ट करें।
  4. डिज़ाइनर के डिज़ाइन>डिज़ाइनर टैब पर जाएँ और अपने डिज़ाइन का निरीक्षण करें।
  5. यदि आप मार्केटिंग ईमेल के साथ काम कर रहे हैं, तो सभी आवश्यक सामग्री और लिंक (सदस्यता-केंद्र लिंक और आपके भौतिक प्रेषक पते सहित) रखने के लिए संपादन सहायता का उपयोग करना सुनिश्चित करें।...

टिप

क्योंकि आपने केवल बाह्य HTML चिपकाया है, इसलिए संभवतः आपके डिज़ाइन में कोई ऐसा कोड शामिल नहीं है जो विशिष्ट हो, इसलिए डिज़ाइनर पूर्ण-पृष्ठ संपादक दिखाता है, जो मूल पाठ स्वरूपण, छवि स्वरूपण, और (ईमेल के लिए) गतिशील सामग्री जोड़ने के लिए संपादन सहायता प्रदान करता है। Dynamics 365 Customer Insights - Journeys ... पूर्ण-पृष्ठ संपादक के साथ काम करने के तरीके के बारे में अधिक जानकारी के लिए, देखें टूलबॉक्स दिखाएं और ड्रैग-एंड-ड्रॉप संपादन सक्षम करें. यदि पूर्ण-पृष्ठ संपादक आपको आवश्यक सभी कार्यक्षमताएं प्रदान करता है, तो अपने डिजाइन को बेहतर बनाने के लिए इसका उपयोग करें और फिर हमेशा की तरह इसका उपयोग करना शुरू करें। यदि आप अपने डिज़ाइन को बेहतर बनाने के लिए ड्रैग-एंड-ड्रॉप संपादक का उपयोग करना पसंद करते हैं, तो इसे सक्षम करने के तरीके के बारे में जानकारी के लिए अगला अनुभाग देखें।

आयात के बाद ड्रैग और ड्रॉप संपादक सक्षम करें

यदि आप पूर्ण-विशेषताओं वाले ड्रैग-एंड-ड्रॉप संपादक को सक्षम करना चाहते हैं और/या डिज़ाइनर दृश्य में काम करते समय उन्नत डिज़ाइन तत्व जोड़ना चाहते हैं, तो आप अपने आयातित HTML कोड को निम्नानुसार संपादित करके आसानी से ऐसा कर सकते हैं:

  1. डिज़ाइनर के डिज़ाइन>HTML टैब पर वापस जाएँ।

  2. अपने दस्तावेज़ के <शीर्ष> अनुभाग में आवश्यक मेटा टैग जोड़कर ड्रैग-एंड-ड्रॉप संपादक को सक्षम करें जैसा कि टूलबॉक्स दिखाएं और ड्रैग-एंड-ड्रॉप संपादन सक्षम करें में वर्णित है।

  3. डिज़ाइन>HTML टैब पर काम करते समय आवश्यकतानुसार निम्नलिखित कार्य करें:

    • अपने डिज़ाइन के प्रत्येक भाग पर, जहाँ आप एक या अधिक डिज़ाइन तत्व खींचना चाहते हैं, डेटा कंटेनर बनाने के लिए कोड जोड़ें जैसा कि एक कंटेनर बनाएँ जहाँ उपयोगकर्ता डिज़ाइन तत्व जोड़ सकें में वर्णित है।
    • यदि आप ड्रैग-एंड-ड्रॉप का उपयोग किए बिना सीधे अपने कोड में डिज़ाइन तत्वों को रखना पसंद करते हैं, तो आप आवश्यक कोड को सीधे डिज़ाइन>HTML टैब में दर्ज कर सकते हैं। इस तरह से आपके द्वारा जोड़े गए तत्व ड्रैग-एंड-ड्रॉप का समर्थन नहीं करेंगे, लेकिन वे डिज़ाइन डिज़ाइनर टैब के >गुण पैनल में सेटिंग प्रदान करेंगे। आप इस तकनीक का उपयोग करके केवल टेक्स्ट, छवि, विभाजक और बटन तत्व रख सकते हैं (कंटेनर बनाएँ और अन्य प्रकार के डिज़ाइन तत्वों के लिए ड्रैग-एंड-ड्रॉप का उपयोग करें)। इनमें से प्रत्येक तत्व को बनाने के लिए आवश्यक HTML संरचनाओं के लिए इस प्रक्रिया के बाद तालिका देखें; आवश्यकतानुसार इस कोड को सीधे तालिका से कॉपी/पेस्ट करें।

  4. अब आप डिज़ाइन>डिज़ाइनर टैब पर जा सकते हैं और डिज़ाइन तत्वों को आपके द्वारा सेट किए गए प्रत्येक कंटेनर में खींच सकते हैं और फिर गुण पैनल का उपयोग करके प्रत्येक डिज़ाइन तत्व को कॉन्फ़िगर कर सकते हैं जिसे आपने सीधे अपने कोड में खींचा या चिपकाया है।

डिजाइन तत्व प्रकार यह कोड पेस्ट करें नोट्स                                                     
टेक्स्ट <div data-editorblocktype="Text"><p> Enter your text here</p></div> आप सीधे यहां <p> टैग के बीच HTML सामग्री दर्ज कर सकते हैं, या ऐसा करने के लिए डिज़ाइनर पर जाकर रिच-टेक्स्ट एडिटर का उपयोग कर सकते हैं।
Image <div data-editorblocktype="Image"><div align="Center" class="imageWrapper"><a href="example.com" title="example.com"><img alt="Some alt text" height="50" src="about:blank" width="50"></a></div></div> अपनी छवि स्रोत और/या छवि लिंक को बदलने का सबसे आसान तरीका है डिज़ाइनर पर जाना और गुण पैनल का उपयोग करना। लेकिन आप HTML में सीधे निम्नलिखित विशेषताओं को भी संपादित कर सकते हैं:
  • <a> तत्व के href और/या शीर्षक विशेषताओं को संपादित करके छवि लिंक और/या शीर्षक सेट करें।
  • छवि से लिंक हटाने के लिए, href तत्व की और title विशेषताओं की सामग्री साफ़ करें (लेकिन <a> जैसे href=""विशेषताओं और उद्धरण चिह्नों को रखें)।
  • <img> तत्व की src विशेषता को संपादित करके छवि स्रोत सेट करें।
किसी भी अन्य कोड को संपादित न करें.
भाजक <div data-editorblocktype="Divider"><div align="center" class="dividerWrapper"><table aria-role="presentation" style="padding: 0px; margin: 0px; width: 100%"><tbody><tr style="padding: 0px;"> <td style="margin:0px; padding-left: 0px; padding-right: 0px; padding-top: 5px; padding-bottom: 5px; vertical-align:top;"> <p style="margin: 0px; padding: 0px; border-bottom-width: 3px; border-bottom-style: solid; border-bottom-color: rgb(0, 0, 0); line-height: 0px; width: 100%;"><span>&nbsp;</span></p></td></tr></tbody></table></div></div> इस कोड को सीधे HTML संपादक में संपादित न करें। इसके बजाय, डिज़ाइनर पर जाएँ और गुण पैनल का उपयोग करें।
Button <div data-editorblocktype="Button"><!--[if mso]><div align="center"><v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" इस कोड को सीधे HTML संपादक में संपादित न करें। इसके बजाय, डिज़ाइनर पर जाएँ और गुण पैनल का उपयोग करें।

कोड में डिज़ाइन तत्व कैसे दिखाई देते हैं, इस बारे में अधिक जानकारी के लिए, देखें डिज़ाइन तत्वों की पहचान करें.

टेक्स्ट-एलिमेंट टूलबार में नए फ़ॉन्ट जोड़ें

टेक्स्ट-एलिमेंट डिज़ाइनर में एक पॉप-अप फ़ॉर्मेटिंग टूलबार प्रदान करते हैं, जिसमें चयनित टेक्स्ट पर फ़ॉन्ट लागू करने के लिए एक मेनू शामिल होता है।

पाठ तत्वों के लिए फ़ॉन्ट चयनकर्ता.

इस फ़ॉन्ट चयनकर्ता में नए फ़ॉन्ट जोड़ने के लिए, दस्तावेज़ के <meta> अध्याय में एक टैग जोड़ें जो निम्न फ़ॉर्म का उपयोग करता है: <head>

<meta type="xrm/designer/setting" name="additional-fonts" datatype="font" value="<font-list>">

जहाँ <फ़ॉन्ट-सूची > फ़ॉन्ट नामों की अर्धविराम से अलग की गई सूची है।

शैलियाँ टैब में सेटिंग जोड़ें

आउट-ऑफ-बॉक्स टेम्पलेट्स की एक उपयोगी विशेषता यह है कि वे शैलियाँ टैब पर वैश्विक शैली सेटिंग्स प्रदान करते हैं, जो उपयोगकर्ताओं को फ़ॉन्ट परिवार, रंग पैलेट और टेम्पलेट के लिए सक्षम अन्य व्यापक सेटिंग को जल्दी से समायोजित करने की सुविधा देता है। प्रत्येक टेम्पलेट में केवल वे शैली सेटिंग्स शामिल होती हैं जो उस विशिष्ट डिज़ाइन के लिए उपयुक्त होती हैं, और आप ऐसे टेम्पलेट भी डिज़ाइन कर सकते हैं जो आपके और आपके उपयोगकर्ताओं के लिए बिल्कुल सही शैली सेटिंग्स प्रदान करते हैं।

डिज़ाइनर > शैलियाँ टैब.

शैलियाँ टैब में सेटिंग जोड़ने के लिए, आपको निम्न कार्य करना होगा:

  • सेटिंग बनाने के लिए अपने दस्तावेज़ में एक टैग जोड़ें। <meta><head>
  • मेटा टैग द्वारा बनाई गई सेटिंग्स को लागू करने वाली शैलियाँ और/या HTML टैग सेट करें।

निम्नलिखित उपधाराएं बताती हैं कि इनमें से प्रत्येक चीज को कैसे किया जाए।

सेटिंग बनाने के लिए मेटा टैग जोड़ें

आवश्यक <meta> टैग निम्नलिखित रूप लेता है:

<meta type="xrm/designer/setting" name="<name>" value="<initial-value>" datatype="<data-type>" label="<label>">

जहाँ:

  • <नाम> मेटा टैग की पहचान करता है, जिसका आपको उन शैलियों और HTML टैग्स में भी संदर्भ देना होगा जहां सेटिंग लागू की जाएगी।
  • <प्रारंभिक-मान> शैली के लिए उपयुक्त डिफ़ॉल्ट मान है।
  • <data-type> उपयोगकर्ताओं द्वारा प्रदान किए जाने वाले मान के प्रकार की पहचान करता है। यह सेटिंग शैलियाँ टैब पर प्रस्तुत किए जाने वाले नियंत्रण के प्रकार को प्रभावित करती है। आपको निम्न तालिका में सूचीबद्ध मानों में से एक का उपयोग करना होगा।
  • <लेबल> सेटिंग के लिए शैलियाँ टैब में दिखाए जाने वाले पाठ को निर्दिष्ट करता है।
डेटाटाइप मान विवरण
रंग #000 या #1a32bf जैसे हैश-टैग मानों का उपयोग करके रंग सेट करता है। शैलियाँ टैब पर रंग-चयनकर्ता नियंत्रण बनाता है.
फ़ॉन्ट फ़ॉन्ट-फ़ैमिली नाम सेट करता है. आप वरीयता क्रम में फ़ॉन्ट नामों की अल्पविराम से अलग की गई सूची का उपयोग करके फ़ॉन्ट स्टैक भी सेट कर सकते हैं. शैलियाँ टैब पर एक साधारण इनपुट फ़ील्ड बनाता है .
संख्या बिना किसी इकाई के एक संख्यात्मक मान सेट करता है (मान के साथ निर्दिष्ट करने के लिए px या em जैसी इकाइयों को अनुमति देने के लिए पाठ का उपयोग करें)। ऊपर/नीचे बटन के साथ एक इनपुट फ़ील्ड बनाता है जिसका उपयोग शैलियाँ टैब पर वर्तमान मान को बढ़ाने/घटाने के लिए भी किया जा सकता है ।
तस्वीर एक छवि स्रोत (URL के रूप में) सेट करता है। शैलियाँ टैब पर एक साधारण इनपुट फ़ील्ड बनाता है .
पाठ एक मान सेट करता है जिसमें पाठ और संख्याएँ दोनों शामिल हो सकते हैं. इस डेटा प्रकार का उपयोग संख्यात्मक मानों के लिए भी करें जिसमें एक इकाई (जैसे px या em) शामिल हो सकती है। शैलियाँ टैब पर एक साधारण इनपुट फ़ील्ड बनाता है .

नोट

शैलियाँ टैब पर दिखाया गया लेबल वर्ग कोष्ठक में प्रकट हो सकता है, जैसे "[मेरी शैली]". वर्ग कोष्ठक इंगित करते हैं कि दिखाए जा रहे पाठ में अनुवाद उपलब्ध नहीं है। यदि आप किसी भी आउट-ऑफ़-बॉक्स टेम्पलेट (जैसे "रंग 1") द्वारा समर्थित मान चुनते हैं, तो अनुवाद उपलब्ध होगा, इसलिए वर्ग कोष्ठक दिखाई नहीं देंगे।

नोट

टैग का उपयोग करके <meta> स्थापित शैली सेटिंग, जैसा कि यहाँ वर्णित है, केवल शैलियाँ टैब पर दिखाई जाती है, जब उस सेटिंग को कम से कम एक वास्तविक शैली या HTML टैग में भी संदर्भित किया जाता है, जैसा कि अगले अनुभागों में वर्णित है.

सिर में शैली सेटिंग्स को लागू करने के लिए टिप्पणियां जोड़ें CSS

शैलियाँ टैब पर की गई सेटिंग्स को आपके HTML दस्तावेज़ में CSS स्थापित शैलियों पर <head> लागू किया जा सकता है, जिसमें मेल CSS खाने CSS वाले मेटा टैग के लिए विशेषता का name मान शामिल दो टिप्पणियों के साथ एक मान को घेरता xrm/designer/setting है। CSS टिप्पणी जोड़ी निम्नलिखित रूप लेती है:

/* @<tag-name> */ <value> /* @<tag-name> */

जहाँ:

  • <tag-name> xrm/designer/setting मेटा टैग के लिए नाम विशेषता है जो प्रासंगिक शैलियाँ टैब सेटिंग स्थापित करता है ।
  • <मान> एक मान है जिसे उपयोगकर्ता द्वारा प्रासंगिक शैलियाँ टैब सेटिंग संपादित करने पर बदल दिया जाएगा।

महत्त्वपूर्ण

आप टिप्पणियों के CSS इन युग्मों का उपयोग केवल अनुभाग में टैग में परिभाषित शैलियों और वर्गों में <style> कर <head> सकते हैं. इसके अलावा टैग का <style> केवल एक सेट मौजूद होना चाहिए, जिसमें सभी CSS शैलियों को स्थापित किया गया है।

यहां एक उदाहरण दिया गया है जहां आप एक xrm/designer/setting मेटा टैग देख सकते हैं जो शैलियाँ टैब पर "रंग 1" नामक रंग-पिकर नियंत्रण बनाता है । एक CSS शैली तब तत्वों के लिए पाठ रंग स्थापित करने के लिए <h1> इस सेटिंग को लागू करती है।

<head>
    <meta type="xrm/designer/setting" name="color1" value="#ff0000" datatype="color" label="Color 1">
    <style>
        h1 {color: /* @color1 */ #ff0000 /* @color1 */;}
    </style>
</head>

शरीर में शैली सेटिंग्स को लागू करने के लिए संपत्ति-संदर्भ विशेषताओं को जोड़ें

शैलियाँ टैब पर की गई सेटिंग्स को प्रत्येक प्रासंगिक टैग में निम्न प्रपत्र की एक विशेषता जोड़कर आपके दस्तावेज़ के किसी भी HTML टैग के लिए विशेषता मानों के रूप में <body> लागू किया जा सकता है:

property-reference= "<attr>:@< tag-name >;<attr>:@< tag-name >; …"

जहाँ:

  • <ATTR> बनाए जाने वाले एट्रिब्यूट का नाम है।
  • <tag-name> उस मेटा टैग की विशेषता का name मान है, जिसने सेटिंग सेट की थी.
  • एकाधिक विशेषताओं, यदि आवश्यक हो, को एकल संपत्ति-संदर्भ विशेषता के भीतर अर्धविराम के साथ अलग किया जाना चाहिए।

यहां एक उदाहरण दिया गया है जहां आप मेटा टैग देख xrm/designer/setting सकते हैं जो दस्तावेज़ में हीरो इमेज (बैनर) को नियंत्रित करने के लिए दो सेटिंग्स बनाते हैं, जिसमें स्टाइल्स टैब पर "हीरो इमेज" और "हीरो इमेज हाइट" नामक नियंत्रण होते हैं । फिर उन सेटिंग्स को लागू करने के लिए प्रॉपर्टी का property-reference उपयोग टैग में <img> किया जाता है.

<head>
    <meta type="xrm/designer/setting" name="hero-image" value="picture.jpg" datatype="picture" label="Hero image">
    <meta type="xrm/designer/setting" name="hero-image-height" value="100px" datatype="text" label="Hero image height">
</head>
<body>
    <img property-reference="src:@hero-image;height:@hero-image-height;">
</body>

तो, इस उदाहरण में, <img> टैग कुछ इस तरह हल होगा:

<img src="picture.jpg" height="100px">