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

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

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

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

पैटर्न
![एलिमेंट के लिए मास्टर ऐडऑन पोस्ट/पेज डुप्लीकेटर एक्सटेंशन: वर्डप्रेस पेज सूची में एमए डुप्लीकेटर पंक्ति लिंक एक लैंडिंग पेज बना रहा है - [डुप्लिकेट #128] ड्राफ्ट](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
पोस्ट/पेज डुप्लीकेटर


