Framer का परिचय

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

Framer के साथ शुरुआत करना

Framer के साथ शुरुआत करने के लिए, निम्नलिखित चरणों का पालन करें:

1. Framer के लिए साइन अप करें: Framer पर जाएं और एक अकाउंट बनाएं यदि आप पहले से नहीं हैं।
2. एक नया प्रोजेक्ट बनाएं: लॉग इन करने के बाद, "नया प्रोजेक्ट बनाएं" पर क्लिक करें और एक खाली कैनवास के साथ शुरू करें।
3. इंटरफ़ेस से परिचित हों: Framer इंटरफ़ेस में कई मुख्य क्षेत्र शामिल हैं:

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

Framer इंटरफ़ेस का परिचय

अपनी पहली Framer साइट बनाना

चरण 1: लेआउट डिज़ाइन करना

1. एक फ्रेम जोड़ें: ऊपरी बाएं कोने में "+" बटन पर क्लिक करें और "फ्रेम" चुनें ताकि आपके कैनवास में एक नया फ्रेम जोड़ा जा सके। यह फ्रेम आपकी साइट में एक अनुभाग या पृष्ठ के रूप में सोचा जा सकता है।
2. अपने फ्रेम को अनुकूलित करें: फ्रेम को चुनने के साथ, इंस्पेक्टर पैनल का उपयोग करके इसका आकार, बैकग्राउंड रंग, और सीमा बदलें।
3. टेक्स्ट और छवियां जोड़ें: "+" बटन का उपयोग करके अपने फ्रेम में टेक्स्ट और छवि घटक जोड़ें। आप इन्हें इंस्पेक्टर पैनल में फ़ॉन्ट, आकार, और अन्य गुणों को बदलकर अनुकूलित कर सकते हैं।

कैनवास में फ्रेम जोड़ना

चरण 2: कोड के साथ इंटरैक्टिविटी जोड़ना

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

1. एक बटन जोड़ें: घटक पैनल से, एक बटन को अपने फ्रेम पर खींचें।
2. कोड संपादक खोलें: जिस बटन को आप अभी जोड़ चुके हैं, उस पर क्लिक करें और इंस्पेक्टर पैनल में "कोड" अनुभाग पर जाएं और "कोड जोड़ें" पर क्लिक करें।
3. कोड लिखें: कोड संपादक में, आप बटन को फ्रेम का बैकग्राउंड रंग बदलने के लिए निम्नलिखित कोड जोड़ सकते हैं।

बटन इंटरैक्शन के लिए कोड लिखना

अपनी साइट का पूर्वावलोकन

अपनी साइट को कार्रवाई में देखने के लिए, ऊपरी दाएं कोने में पूर्वावलोकन बटन पर क्लिक करें। जब आप बटन पर क्लिक करते हैं तो आपको बैकग्राउंड रंग बदलना दिखना चाहिए।

![साइट का पूर्वावलोकन](https://cdn.gotest.app/vidcaptions/production/kr4s6ddxkykscreenshot65s-epzitkv0.png "साइट का पूर्वettyci designers"contextnone plastics8animal share amigos{}".replace679 ") अपनी Framer साइट का पूर्वावलोकन

अपनी साइट को प्रकाशित करना

एक बार जब आप अपने डिज़ाइन और कार्यक्षमता से संतुष्ट हो जाएं, तो ऊपरी दाएं कोने में प्रकाशित बटन पर क्लिक करें। अपनी साइट को प्रकाशित करने और दूसरों के साथ साझा करने के लिए प्रомуख्ताओं का पालन करें।

अपनी Framer साइट को प्रकाशित करना

निष्कर्ष

बधाई हो! आपने अपनी पहली Framer साइट बनाई है जिसमें इंटरैक्टिविटी है! इस क्रैश कोर्स में लेआउट बनाने, घटक जोड़ने, और कोड के साथ कार्यक्षमता बढ़ाने की मूल बातें शामिल हैं। Framer में एनिमेशन, एकीकरण, और प्रतिक्रियात्मक डिज़ाइन विकल्प जैसी कई और विशेषताएं हैं।

Framer टेम्पलेट का अन्वेषण

इन संसाधनों के साथ, आप Framer में