ग्रिड लाइन

डिजाइनर एक कॉलम ग्रिड के शीर्ष पर काम करते हैं यह है कि कैसे हेडलाइंस, कार्ड और बटन कुछ पिक्सेल अलग बहाव के बजाय अस्तर को समाप्त करते हैं एलिमेंटर आपको एक नहीं दिखाता है, इसलिए संरेखण आमतौर पर आंख से होता है ग्रिड लाइन में विस्तार एलिमेंट के लिए मास्टर ऐडऑन ठीक करता है कि कॉलम ग्रिड ओवरले के साथ आप संपादक के ठीक अंदर स्विच कर सकते हैं।

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

ग्रिड लाइन एक्सटेंशन क्या करता है #

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

डिफ़ॉल्ट ४० पीएक्स गटर के साथ १२८० पीएक्स अधिकतम चौड़ाई पर १२ कॉलम ग्रिड है, वही सम्मेलन अधिकांश डिजाइन सिस्टम उपयोग करते हैं प्रत्येक मूल्य प्रति डिवाइस समायोज्य है, और पूरे ओवरले एक टॉगल के साथ चालू और बंद हो जाता है।

इससे पहले कि आप शुरू करें #

• वर्डप्रेस साथ तत्व स्थापित और सक्रिय।
• एलिमेंट के लिए मास्टर ऐडऑन स्थापित और सक्रिय प्लगइन के लिए नया है का पालन करें स्थापना गाइड पहले।
• ग्रिड लाइन एक निःशुल्क एक्सटेंशन है, इसलिए किसी प्रो लाइसेंस की आवश्यकता नहीं है।

ग्रिड लाइन एक्सटेंशन को कैसे सक्षम करें #

चरण १: एक्सटेंशन टैब में इसे चालू करें #

अपने वर्डप्रेस डैशबोर्ड से, पर जाएं मास्टर ऐडऑन और खोलो एक्सटेंशन टैब। ग्रिड लाइन में रहती है विजेट प्रदर्शित करें एक लोकप्रिय बैज के साथ समूह, ग्लासमॉर्फिज्म और पैटर्न के बगल में इसके टॉगल पर क्लिक करें ताकि यह बैंगनी हो जाए।

चरण २: अपने परिवर्तन सहेजें #

शीर्ष पर स्क्रॉल करें और क्लिक करें परिवर्तन सहेजेंएक हरे रंग की “सेटिंग्स सफलतापूर्वक सहेजी गईसंक्षेप नोटिस पुष्टि करता है कि एक्सटेंशन सक्रिय है यदि एलिमेंट संपादक खुला था, तो इसे एक बार पुनः लोड करें।

एलिमेंट संपादक में ग्रिड कैसे दिखाएं #

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

क्योंकि सेटिंग पृष्ठ सेटिंग्स में रहती है, ग्रिड प्रति पृष्ठ है: आप तय करते हैं कि यह कहां दिखाता है, और यह प्रत्येक दस्तावेज़ में आपका अनुसरण नहीं करता है।

ग्रिड लाइन सेटिंग्स समझाया #

• सक्षम करेंः इस पृष्ठ के लिए ओवरले को चालू और बंद करता है।
• ग्रिड रंगः स्तंभों का रंग वैश्विक स्वैच चुनें या पिकर के साथ एक कस्टम रंग सेट करें एक कम अपारदर्शिता मूल्य आपकी सामग्री को ओवरले के तहत पठनीय रखता है।
• कॉलम: कितने कॉलम आकर्षित करने के लिए १२ मानक है, लेकिन आप जो भी ग्रिड अपने डिजाइन का उपयोग करता है मैच कर सकते हैं।
• अधिकतम चौड़ाई: ग्रिड की कुल चौड़ाई, डिफ़ॉल्ट रूप से १२८० पीएक्स इसे अपनी साइट की सामग्री चौड़ाई से मेल करें ताकि कॉलम आपके वास्तविक लेआउट के साथ पंक्तिबद्ध हो जाएं।
• ऑफसेट: जब आपके लेआउट को इसकी आवश्यकता होती है तो ग्रिड को किनारों से अंदर धकेलता है।
• गटर: स्तंभों के बीच का स्थान, डिफ़ॉल्ट रूप से 40px।
• जेड-सूचकांक: ओवरले का स्टैकिंग क्रम, डिफ़ॉल्ट रूप से 999, इसलिए ग्रिड आपकी सामग्री के ऊपर दिखाई देता रहता है।

कॉलम, मैक्स चौड़ाई, ऑफसेट और गटर उत्तरदायी नियंत्रण हैं: डेस्कटॉप, टैबलेट और मोबाइल के लिए अलग-अलग मान सेट करने के लिए प्रत्येक के बगल में डिवाइस आइकन पर क्लिक करें।

ग्रिड का रंग बदलें #

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

स्तंभों और गटर को ट्यून करें #

स्लाइडर्स और ओवरले अपडेट लाइव खींचें नीचे दिए गए उदाहरण में गटर ५८ पीएक्स तक है और ग्रिड एक कस्टम टिंट रखता है, इसलिए यह प्रकाश पृष्ठभूमि के खिलाफ स्पष्ट रूप से पढ़ता है जबकि मूल्य निर्धारण कार्ड सुपाठ्य रहते हैं।

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

जब ग्रिड लाइन आपका समय बचाती है #

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

वीडियो ट्यूटोरियल #

इसे गति में देखना पसंद करते हैं यह वीडियो ग्रिड लाइन को सक्षम करने और एलिमेंट संपादक में ओवरले को समायोजित करने के माध्यम से चलता है।

अक्सर पूछे जाने वाले प्रश्न #

लपेटकर #

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