श्रेणी के अनुसार ब्राउज़ करें


GrapesJS Blocks

GrapesJS ब्लॉक लाइब्रेरी आपके संपादक के लिए तैयार, ड्रैग-एंड-ड्रॉप HTML अनुभाग प्रदान करती हैं। स्क्रैच से हेडर, कार्ड, hero सेक्शन और फुटर बनाने के बजाय, एक ब्लॉक पैक स्थापित करें और कैनवास पर पूर्व-निर्मित, पूरी तरह से अनुकूलन योग्य अनुभाग रखना शुरू करें। समुदाय-योगदान किए गए संग्रह और प्रीमियम लाइब्रेरी ब्राउज़ करें — प्रत्येक लिस्टिंग में एक लाइव पूर्वावलोकन शामिल होता है ताकि आप इंस्टॉल करने से पहले देख सकें कि आप अपने प्रोजेक्ट में क्या जोड़ रहे हैं।

Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...Loading...

लगभग GrapesJS Blocks

GrapesJS ब्लॉक मौलिक ड्रैग-एंड-ड्रॉप इकाइयाँ हैं जिन्हें उपयोगकर्ता पृष्ठ बनाने के लिए कैनवास पर रखते हैं। एक ब्लॉक एकल छवि तत्व से लेकर एक जटिल, बहु-स्तंभ अनुभाग तक कुछ भी हो सकता है, जिसमें नेस्टेड घटकों, शैलियों और इंटरैक्शन को पूर्व-कॉन्फ़िगर किया गया है। GJS.Market पर ब्लॉक लाइब्रेरी प्लगइन्स न्यूनतम पैक से लेकर हेडर और टेक्स्ट के लिए कुछ साफ, उपयोगिता ब्लॉक - हीरो बैनर, फीचर ग्रिड, प्रशंसापत्र हिंडोला, मूल्य निर्धारण तालिका, अक्सर पूछे जाने वाले प्रश्न अकॉर्डियन और संपर्क फ़ॉर्म को कवर करने वाले 50+ अनुभाग प्रकारों के साथ व्यापक डिज़ाइन सिस्टम तक होते हैं। प्रीमियम ब्लॉक लाइब्रेरी में अक्सर GrapesJS ब्लॉक पैनल के अंदर डार्क मोड वेरिएंट, रिस्पॉन्सिव ब्रेकपॉइंट प्रीव्यू और श्रेणी संगठन शामिल होते हैं। सामुदायिक ब्लॉक पैक एक विशिष्ट डिज़ाइन भाषा या ढांचे जैसे Tailwind, Bootstrap, या बुलमा पर ध्यान केंद्रित करते हैं, और स्वतंत्र रूप से उपलब्ध होते हैं। ब्लॉक लाइब्रेरी का मूल्यांकन करते समय, GrapesJS संस्करण और फ्रेमवर्क फ़िल्टर की जांच करें — Bootstrap 4 के लिए बनाए गए ब्लॉक कैनवास पूर्वावलोकन में लोड किए गए संबंधित CSS के बिना सही ढंग से प्रस्तुत नहीं होंगे। GJS.Market पर सभी प्रीमियम ब्लॉक लाइब्रेरी में पैकेज के प्रत्येक ब्लॉक का लाइव पूर्वावलोकन शामिल है।

GrapesJS Blocks — FAQ

GrapesJS ब्लॉक क्या है?
एक ब्लॉक संपादक के ब्लॉक पैनल में एक प्रविष्टि है जो कैनवास पर खींचे जाने पर सामग्री का एक टुकड़ा सम्मिलित करती है। इसे एक लेबल, एक पूर्वावलोकन थंबनेल और सामग्री द्वारा परिभाषित किया जाता है - HTML, या एक घटक परिभाषा। Blocks यह है कि अंतिम उपयोगकर्ता किसी पृष्ठ पर अनुभाग कैसे जोड़ते हैं; वे एक ब्लॉक लाइब्रेरी का दृश्यमान आधा भाग हैं।
मैं GrapesJS में कस्टम ब्लॉक कैसे जोड़ूं?
एक आईडी, एक लेबल, एक श्रेणी और उसकी सामग्री के साथ एक ब्लॉक जोड़ने के लिए BlockManager API का उपयोग करें। सामग्री एक HTML स्ट्रिंग या एक घटक ऑब्जेक्ट हो सकती है, और बाद वाले को प्राथमिकता दी जाती है क्योंकि यह बेहतर संपादन से बचती है। एक प्लगइन में ऐड कॉल का एक सेट लपेटने से वे एक पुनः प्रयोज्य ब्लॉक पैक में बदल जाते हैं जिसे आप सभी परियोजनाओं में स्थापित कर सकते हैं।
क्या GrapesJS ब्लॉकों को Tailwind या Bootstrap की आवश्यकता है?
केवल तभी जब पैक एक के लिए बनाया गया हो। Blocks वर्ग नामों के साथ मार्कअप ले जाता है, इसलिए एक Tailwind पैक अनस्टाइल HTML के रूप में प्रस्तुत होता है, जब तक कि Tailwind CSS कैनवास iframe के अंदर लोड नहीं होता है - कैनवास आपके ऐप की स्टाइलशीट स्वचालित रूप से विरासत में नहीं लेता है। संपादक के कैनवास शैलियों विकल्प के माध्यम से फ्रेमवर्क जोड़ें, और इंस्टॉल करने से पहले इस पृष्ठ पर फ्रेमवर्क फ़िल्टर की जांच करें।
क्या मैं ब्लॉकों को श्रेणियों में व्यवस्थित कर सकता हूं?
हाँ। प्रत्येक ब्लॉक एक श्रेणी घोषित करता है, और GrapesJS पैनल को बंधनेवाला हेडर के साथ समूहित करता है। अच्छी लाइब्रेरी समझदार श्रेणियों को बॉक्स से बाहर भेजती हैं - hero, सुविधाएँ, मूल्य निर्धारण, पाद लेख - जो कुछ दर्जन ब्लॉक पार करने के बाद मायने रखती है। आप किसी तृतीय-पक्ष पैक को अपने स्वयं के समूह में मर्ज करने के लिए पंजीकरण समय पर श्रेणी को ओवरराइड कर सकते हैं।
क्या निःशुल्क GrapesJS ब्लॉक लाइब्रेरी हैं?
हाँ। grapesjs-blocks-basic आधिकारिक और मुफ़्त है, और कई सामुदायिक पैक बिना किसी लागत के Tailwind, Bootstrap या बुलमा जैसी विशिष्ट डिज़ाइन भाषा को लक्षित करते हैं। केवल निःशुल्क लिस्टिंग दिखाने के लिए मूल्य फ़िल्टर का उपयोग करें। Premium पुस्तकालय आम तौर पर कहीं अधिक अनुभाग प्रकार, डार्क मोड वेरिएंट, उत्तरदायी पूर्वावलोकन और प्रत्येक ब्लॉक का लाइव पूर्वावलोकन जोड़ते हैं।