एलिमेंटर ग्रिड लाइन ओवरले (प्रो): संरेखित लेआउट के लिए एक डिज़ाइन ग्रिड

ग्रिड लाइन एक मास्टर एडॉन्स प्रो एक्सटेंशन है जो एलिमेंट संपादक के अंदर आपके पृष्ठ पर एक कॉलम ग्रिड खींचता है आप कॉलम की संख्या, गटर, अधिकतम चौड़ाई और पृष्ठ सेटिंग्स में ऑफसेट सेट करते हैं, फिर कॉलम के खिलाफ अनुभागों और विजेट को लाइन करते हैं, जिस तरह से डिजाइनर काम करते हैं फिग्मा ग्रिड केवल दिखाता है जब आप संपादित करते हैं, और आगंतुक इसे प्रकाशित पृष्ठ पर कभी नहीं देखते हैं।

इनेबल ऑन के साथ ग्रिड लाइन पैनल और एलिमेंटर एडिटर के बगल में एक पारभासी ग्रे ग्रिड कलर पिकर एक कॉलम ओवरले दिखा रहा है

एलिमेंटर में ग्रिड लाइन का उपयोग कैसे करें

ग्रिड लाइन प्रति पृष्ठ सेटिंग है, इसलिए आप इसे केवल वहीं स्विच करें जहां आपको इसकी आवश्यकता है इसे देखें ग्रिड लाइन एक्सटेंशन दस्तावेज़.

  1. मास्टर एडॉन्स प्रो सक्रिय होने पर, पर जाएं मास्टर ऐडऑन > एक्सटेंशन और स्विच ऑन करें ग्रिड लाइन.
  2. एलिमेंटर में एक पेज खोलें और क्लिक करें पेज सेटिंग्स शीर्ष पट्टी में आइकन।
  3. पर सेटिंग्स टैब, विस्तार करें ग्रिड लाइन और सेट सक्षम करें को ऑन।
  4. सेट कॉलम, अधिकतम चौड़ाई और गटर अपने डिज़ाइन से मेल खाने के लिए, और एक जोड़ें ऑफसेट यदि आपके लेआउट में साइड मार्जिन है।
  5. उन स्क्रीन के लिए मान सेट करने के लिए टैबलेट और मोबाइल दृश्य पर स्विच करें।
  6. कॉलम के खिलाफ अपने अनुभागों और विजेट को पंक्तिबद्ध करें प्रकाशित पृष्ठ पर ग्रिड दिखाई नहीं देता है।
एलिमेंटर पोस्ट सेटिंग्स में ग्रिड लाइन सेटिंग्स एक हल्के कॉलम ओवरले वाले पृष्ठ के बगल में कॉलम, अधिकतम चौड़ाई, ऑफसेट, गटर और जेड-इंडेक्स के साथ

कॉलम, गटर, चौड़ाई और ऑफसेट

पेज सेटिंग्स में ग्रिड लाइन अनुभाग में एक है सक्षम करें स्विच, ग्रिड रंग (डिफ़ॉल्ट रूप से हल्का पारभासी ग्रे), कॉलम 1 से 12 तक, अधिकतम चौड़ाई, ऑफसेट, गटर और जेड-इंडेक्स। कॉलम, मैक्स चौड़ाई, ऑफसेट और गटर डेस्कटॉप, टैबलेट और मोबाइल पर अलग-अलग मान ले सकते हैं।

  • डिफ़ॉल्ट: 12 कॉलम, 1140px अधिकतम चौड़ाई और डेस्कटॉप पर 15px गटर, टैबलेट पर 1025px और 10px, मोबाइल पर 768px और 8px।
  • अपनी थीम से मेल करेंः अपनी साइट की सामग्री चौड़ाई के लिए अधिकतम चौड़ाई सेट करें ताकि कॉलम वास्तविक लेआउट के साथ पंक्तिबद्ध हों।
  • दृश्यता: पारदर्शिता वाला रंग चुनें ताकि आपकी सामग्री पढ़ने योग्य रहे, और Z-Index को 999 पर रखें ताकि ग्रिड डिज़ाइन के ऊपर बैठे।

एलिमेंटर में ग्रिड के खिलाफ लेआउट की जांच करने के तरीके

एलिमेंटर के पास अपना कोई डिज़ाइन ग्रिड ओवरले नहीं है ये सामान्य विकल्प हैं।

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

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

अन्य संपादक सहायकः कौन सा तत्व (मुक्त) और पोजिशनिंग (मुक्त)।

ग्रिड लाइन के लिए अक्सर पूछे जाने वाले प्रश्न

ग्रिड लाइन के बारे में उपयोगकर्ताओं द्वारा पूछे जाने वाले सबसे अधिक पूछे जाने वाले प्रश्नों को जानें और एक ही स्थान पर उत्तर खोजें।
क्या ग्रिड प्रभावित करता है कि मेरी साइट सामने के छोर पर कैसी दिखती है?

नहीं ग्रिड केवल एलिमेंट संपादक के अंदर दिखाता है आगंतुक इसके बिना प्रकाशित पृष्ठ देखते हैं, भले ही आप छोड़ दें सक्षम करें।

गटर कॉलम के बीच का स्थान है ऑफसेट स्क्रीन के किनारे के बीच का स्थान है और जहां ग्रिड शुरू होता है मैक्स चौड़ाई के साथ मिलकर वे आपको अपनी थीम की सामग्री चौड़ाई और कॉलम रिक्ति की प्रतिलिपि बनाते हैं।

क्या मैं इसे एलिमेंट के अपने फ्लेक्सबॉक्स कंटेनर सिस्टम के साथ उपयोग कर सकता हूं?

हाँ ग्रिड पूरे पूर्वावलोकन पर खींचा जाता है, इसलिए यह फ्लेक्सबॉक्स कंटेनर, ग्रिड कंटेनर और पुराने वर्गों के साथ समान रूप से काम करता है यह कॉलम में तत्वों को स्नैप नहीं करता है, इसलिए आप उन्हें स्वयं लाइन करते हैं।

नंबर ग्रिड लाइन मास्टर एडॉन्स प्रो का हिस्सा है।

ट्रेंडिंग एलिमेंटर विजेट और एक्सटेंशन

कम समय में परिष्कृत वेबसाइट बनाएं।

एलिमेंटर के लिए मास्टर एडॉन्स ग्लासमोर्फिज्म एक्सटेंशन: ब्लर वैल्यू कंट्रोल के साथ फ्रॉस्टेड ग्लास कार्ड 20px पर सेट

ग्लासमोर्फिज्म

होम फ्री एलिमेंटर ग्लासमोर्फिज्म एक्सटेंशन: एक टॉगल में फ्रॉस्टेड ग्लास प्रभाव ग्लासमोर्फिज्म फ्रॉस्टेड है।।।
विवरण देखें
एलिमेंटर के लिए मास्टर एडॉन्स कंटेनर एक्स्ट्रा एक्सटेंशन: कंटेनर को अधिकतम चौड़ाई, अधिकतम ऊंचाई, न्यूनतम चौड़ाई और न्यूनतम ऊंचाई नियंत्रण के साथ 1400px अधिकतम चौड़ाई पर कैप किया गया है

कंटेनर अतिरिक्त

होम एलिमेंटर कंटेनर अधिकतम चौड़ाई और अधिकतम ऊंचाई नियंत्रण कंटेनर एक्स्ट्रा एक निःशुल्क मास्टर है।।।
विवरण देखें
एलिमेंटर के लिए मास्टर एडॉन्स पैटर्न एक्सटेंशन: पर्पल ग्रेडिएंट ग्रिड लेफ्ट स्टाइल के साथ हीरो, तीन और पैटर्न स्टाइल और इनेबल पैटर्न पैनल

पैटर्न

होम 70+ फ्री एलिमेंटर बैकग्राउंड पैटर्न पैटर्न एक मुफ्त मास्टर ऐडऑन एक्सटेंशन है जो जोड़ता है।।।
विवरण देखें
एलिमेंट के लिए मास्टर ऐडऑन पोस्ट/पेज डुप्लीकेटर एक्सटेंशन: वर्डप्रेस पेज सूची में एमए डुप्लीकेटर पंक्ति लिंक एक लैंडिंग पेज बना रहा है - [डुप्लिकेट #128] ड्राफ्ट

पोस्ट/पेज डुप्लीकेटर

होम डुप्लिकेट एलिमेंटर पेज और पोस्ट एक क्लिक में पोस्ट/पेज डुप्लिकेटर एक निःशुल्क मास्टर है।।।
विवरण देखें
एलिमेंट के लिए मास्टर ऐडऑन रीडिंग प्रोग्रेस बार एक्सटेंशन: गोपनीयता नीति पृष्ठ के शीर्ष पर नीली बार 42% भरी हुई है, सक्षम, स्थिति, ऊंचाई और रंग सेटिंग्स भरने के साथ

प्रगति बार पढ़ना

होम वर्डप्रेस में रीडिंग प्रोग्रेस बार जोड़ें (एलिमेंटर) रीडिंग प्रोग्रेस बार मुफ़्त है।।।
विवरण देखें