Framer का परिचय: इंटरैक्टिव वेबसाइट्स और प्रोटोटाइप्स बनाने के लिए एक शक्तिशाली टूल

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

Framer क्रैश कोर्स

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

Framer के साथ शुरुआत करने के लिए, आपको Framer वेबसाइट पर एक अकाउंट बनाना होगा। एक बार जब आप लॉग इन कर लें, तो "नया प्रोजेक्ट" बनाने के लिए क्लिक करें और एक खाली कैनवास के साथ शुरू करें।

Framer के लिए साइन अप करना

Framer इंटरफ़ेस से परिचित हों، जिसमें कैनवас, इंस्पेक्टर पैनल और कोड एडिटर शामिल हैं।

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

स्टेप वन: लेआउट डिज़ाइनिंग। कैनवास में एक फ्रेम जोड़ने के लिए ऊपरी बाएं कोने में "+" बटन पर क्लिक करें और "फ्रेम" चुनें। यह फ्रेम आपकी साइट में एक खंड या पेज के रूप में सोचा जा सकता है।

फ्रेम जोड़ना

इंस्पेक्टर पैनल का उपयोग करके फ्रेम को अनुकूलित करें, जिसमें इसका आकार, पृष्ठभूमि रंग और सीमा बदलना शामिल है। फ्रेम में टेक्स्ट और छवियाँ जोड़ने के लिए "+" बटन का उपयोग करें।

कोड के साथ इंटरएक्टिविटी जोड़ना

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

इंटरएक्टिविटी जोड़ना

फ्रेम में एक बटन जोड़ने के लिए घटक पैनल से बटन खींचें। कोड एडिटर खोलने के लिए बटन पर क्लिक करें और "कोड जोड़ें" चुनें।

कोड लिखना

कोड लिखना जो बटन को फ्रेम का पृष्ठभूमि रंग बदलने के लिए कहता है। कोड एडिटर में, आप इसे हासिल करने के लिए निम्नलिखित कोड जोड़ सकते हैं।

कोड लिखना

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

साइट का पूर्वावलोकन करने के लिए ऊपरी दाएं कोने में पूर्वावलोकन बटन पर क्लिक करें। बटन पर क्लिक करें और पृष्ठभूमि रंग बदलने को देखें।

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

निष्कर्ष

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

अतिरिक्त संसाधन

अधिक जानने के लिए, आप Framer प्रलेख और समुदाय संसाधनों की जाँच कर सकते हैं, जिनमें टेम्पलेट और ट्यूटोरियल शामिल हैं। इन संसाधनों के साथ, आप Framer में और गहराई से जा सकते हैं और अधिक जटिल और इंटरैक्टिव साइटें बना सकते हैं। हैप्पी कोडिंग!