दस्तावेज़संपादन और प्रकाशनअनुकूलन मार्गदर्शिका

कस्टमाइज़ेशन गाइड

बिना कोड छुए अपनी ड्राफ्टली साइट को एडिट, स्टाइल और एक्सटेंड करना सीखें।

कस्टमाइज़ेशन कैसे काम करता है

ड्राफ्टली आपको जनरेशन के बाद अपनी साइट को कस्टमाइज़ करने के तीन तरीके प्रदान करता है:

1. क्लिक-टू-एडिट (इनलाइन एडिटिंग) — प्रीव्यू टूलबार में एडिट टॉगल करें, फिर किसी भी टेक्स्ट या एलिमेंट पर क्लिक करें। इंस्पेक्टर टाइपोग्राफी, स्पेसिंग, रंग और एनिमेशन नियंत्रण दिखाता है। परिवर्तन लाइव लागू होते हैं।

2. चैट-टू-मॉडिफाई — प्रति संदेश एक केंद्रित निर्देश टाइप करें (जैसे "हीरो बैकग्राउंड को डार्क नेवी में बदलें", "एक प्राइसिंग सेक्शन जोड़ें")। ड्राफ्टली केवल प्रासंगिक भागों को पैच करता है — आमतौर पर प्रति एडिट 0.5 क्रेडिट।

3. वेबसाइट UI रीजेनरेट करें↺ वेबसाइट रीजेनरेट करें पर क्लिक करके एक नया AI डिज़ाइन पास चलाएँ, जबकि अपने वीडियो, छवियों और स्क्रॉल फ़्रेम को बनाए रखें

वैकल्पिक: तेज़ लेआउट स्वैप के लिए टेम्पलेट पिकर से प्रीसेट टेम्पलेट पर स्विच करें।

अनुशंसित कस्टमाइज़ेशन वर्कफ़्लो

सबसे सहज अनुभव के लिए, इस क्रम का पालन करें:

1.नए टैब में प्रीव्यू करें — बिल्डर क्रोम के बिना स्क्रॉल मोशन और लेआउट को सत्यापित करें
2.इनलाइन एडिट करें — तत्वों पर क्लिक करके सटीक कॉपी, बटन लेबल और रंगों को ठीक करें
3.चैट करें — सेक्शन, थीम शिफ्ट या रीराइट के लिए प्रति संदेश एक बदलाव
4.इंटीग्रेशन (शिप टैब) — GA4, संपर्क फ़ॉर्म, कस्टम हेड स्क्रिप्ट
5.एडिट के बाद पुनः प्रकाशित करें ताकि लाइव URL प्रीव्यू से मेल खाए

बचें: "इसे बेहतर बनाएँ" जैसे अस्पष्ट अनुरोधों से — निर्दिष्ट करें कि क्या बदलना है। गाइड (हेडर) का उपयोग करें या चैट में पूछें: "मैं टेक्स्ट को कैसे कस्टमाइज़ करूँ?"

टेक्स्ट और रंग एडिट करना

किसी भी एलिमेंट को इनलाइन एडिट करने के लिए:

1.सुनिश्चित करें कि आप बिल्डर में प्रीव्यू टैब पर हैं।
2.प्रीव्यू में किसी भी टेक्स्ट, हेडिंग या रंगीन ब्लॉक पर क्लिक करें।
3.इनलाइन एडिट ओवरले दाईं ओर खुलता है जिसमें शामिल हैं:
- टेक्स्ट — सामग्री को सीधे एडिट करें
- रंग — हेक्स इनपुट या कलर पिकर
- फ़ॉन्ट फ़ैमिली — 26 टाइपफेस के साथ ड्रॉपडाउन
- फ़ॉन्ट साइज़ — रेंज स्लाइडर
- फ़ॉन्ट वेट — थिन से ब्लैक तक 8 विकल्प
4.लागू करने के लिए सेव करें पर क्लिक करें, या वापस लाने के लिए कैंसिल करें पर क्लिक करें।

आप चयनित टेक्स्ट को बेहतर टोन में फिर से लिखने के लिए AI रीराइट पर भी क्लिक कर सकते हैं, या बैकग्राउंड या प्रोडक्ट इमेज को बदलने के लिए इमेज बदलें पर क्लिक कर सकते हैं।

डिज़ाइन प्रीसेट का उपयोग करना

डिज़ाइन प्रीसेट आपको एक क्लिक में अपनी साइट की पूरी विज़ुअल स्टाइल बदलने देते हैं।

1.बिल्डर टूलबार में स्टाइल बटन पर क्लिक करें।
2.प्रीसेट पैनल तीन टैब के साथ खुलता है:
- वर्टिकल — 25 उद्योग प्रीसेट (रेस्तरां, SaaS, रियल एस्टेट, फैशन, आदि) — प्रत्येक एक क्यूरेटेड रंग पैलेट, फ़ॉन्ट पेयरिंग और लेआउट स्टाइल लागू करता है।
- रंग — प्राथमिक एक्सेंट रंग बदलने के लिए 12 एक्सेंट स्वैच + कस्टम हेक्स इनपुट।
- स्टाइल — 5 नेविगेशन स्टाइल, 5 हीरो लेआउट और 5 एनिमेशन प्रीसेट।
3.किसी भी प्रीसेट का प्रीव्यू करने के लिए उस पर क्लिक करें, फिर नई स्टाइल के साथ अपनी साइट को रीजेनरेट करने के लिए लागू करें पर क्लिक करें।

प्रीसेट आपकी सामग्री के साथ जुड़ते हैं — आपका टेक्स्ट, सेक्शन और ब्रांड नाम वही रहते हैं; केवल विज़ुअल सिस्टम बदलता है।

चैट-टू-मॉडिफाई

चैट-टू-मॉडिफाई पूर्ण पुनर्जनन के बिना संरचनात्मक परिवर्तन करने का सबसे तेज़ तरीका है।

यह कैसे काम करता है: जब आपकी साइट लोड हो, तो चैट बार में कोई भी निर्देश टाइप करें। उदाहरण: - *"हीरो हेडलाइन को कुछ और रोमांचक में बदलें"* - *"मूल्य निर्धारण और संपर्क के बीच एक FAQ अनुभाग जोड़ें"* - *"रंग योजना को गहरा और अधिक पेशेवर बनाएं"* - *"'हमारे बारे में' अनुभाग को अधिक व्यक्तिगत बनाने के लिए फिर से लिखें"* - *"हीरो CTA बटन टेक्स्ट को 'मुफ्त कोट प्राप्त करें' से बदलें"*

ड्राफ्टली आपकी साइट के HTML का केवल प्रासंगिक अनुभाग AI को भेजता है — पूरा पेज नहीं — इसलिए संपादन तेज़ होते हैं और पूर्ण पुनर्जनन लागत के बजाय 0.5 क्रेडिट खर्च होते हैं।

सुझाव: - विशिष्ट रहें: "नेविगेशन पृष्ठभूमि को काला करें" "इसे गहरा करें" से बेहतर काम करता है। - अनुभागों को नाम से संदर्भित करें: "सेवाएं अनुभाग", "फ़ुटर" - आप संपादन को श्रृंखला में कर सकते हैं — प्रत्येक चैट संदेश एक नया लक्षित पैच है।

एनालिटिक्स और ट्रैकिंग जोड़ना

Google Analytics, Google Tag Manager, Facebook Pixel, या किसी भी कस्टम ट्रैकिंग स्क्रिप्ट को अपनी साइट से कनेक्ट करें — किसी कोड की आवश्यकता नहीं है।

1.बिल्डर टूलबार में इंटीग्रेशन बटन (प्लग आइकन) पर क्लिक करें।
2.इंटीग्रेशन पैनल इन फ़ील्ड्स के साथ खुलता है:
- Google Analytics 4 — अपनी मेज़रमेंट ID पेस्ट करें (प्रारूप: G-XXXXXXXXXX)। इसे GA4 → एडमिन → डेटा स्ट्रीम में खोजें।
- Google Tag Manager — अपनी कंटेनर ID पेस्ट करें (प्रारूप: GTM-XXXXXXX)। इसे GTM → एडमिन → कंटेनर ID में खोजें।
- Facebook Pixel — अपनी 15-अंकीय पिक्सेल ID पेस्ट करें। इसे मेटा इवेंट्स मैनेजर में खोजें।
- कस्टम हेड स्क्रिप्ट<head> में इंजेक्ट करने के लिए कोई भी <script> ब्लॉक पेस्ट करें (केवल HTTPS स्रोत)।
3.इंटीग्रेशन सहेजें पर क्लिक करें।
4.अगली बार जब आप अपनी साइट जनरेट या री-जनरेट करेंगे, तो ट्रैकिंग स्क्रिप्ट स्वचालित रूप से इंजेक्ट हो जाएंगी।

सभी स्क्रिप्ट आपकी प्रकाशित साइट HTML के <head> में इंजेक्ट की जाती हैं। GTM को <body> के बाद आवश्यक <noscript> iframe भी इंजेक्ट किया जाता है।

संपर्क फ़ॉर्म जोड़ना

हर ड्राफ्टली साइट में एक कार्यशील संपर्क फ़ॉर्म शामिल हो सकता है जो सबमिशन सीधे आपके ड्राफ्टली इनबॉक्स में भेजता है और आपको एक सूचना ईमेल करता है।

1.बिल्डर टूलबार में इंटीग्रेशन बटन पर क्लिक करें।
2.संपर्क फ़ॉर्म सक्षम करें को चालू करें (नई साइटों के लिए डिफ़ॉल्ट रूप से सक्षम)।
3.इंटीग्रेशन सहेजें पर क्लिक करें।
4.अपनी साइट जनरेट या री-जनरेट करें — एक संपर्क फ़ॉर्म स्वचालित रूप से साइट में जुड़ जाएगा।

यह कैसे काम करता है: - यदि आपकी जनरेट की गई साइट में पहले से ही एक <form> तत्व है (संपर्क अनुभाग वाली साइटों में सामान्य), तो ड्राफ्टली इसे ड्राफ्टली बैकएंड पर सबमिट करने के लिए पैच करता है। - यदि कोई फ़ॉर्म मौजूद नहीं है, तो ड्राफ्टली फ़ुटर से पहले एक स्टाइल वाला फ़ॉर्म अनुभाग इंजेक्ट करता है। - सबमिशन आपकी ड्राफ्टली अकाउंट में साइट के सबमिशन टैब के तहत संग्रहीत किए जाते हैं। - आपको प्रत्येक नए सबमिशन के लिए विज़िटर के नाम, ईमेल और संदेश के साथ एक ईमेल सूचना प्राप्त होती है।

सभी डेटा ड्राफ्टली के भीतर रहता है — किसी तीसरे पक्ष की फ़ॉर्म सेवाओं की आवश्यकता नहीं है।