एलीमेंटर अनुभागों और स्तंभों को कैसे संरेखित करें

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

• हमें संरेखित करने की आवश्यकता क्यों है?
• रिस्पॉन्सिव डिज़ाइन के लिए कॉलम या सेक्शन कैसे काम करते हैं?
• एलीमेंटर अनुभागों और स्तंभों को कैसे संरेखित करें?
• प्रतिक्रियाशील चौड़ाई की समस्याओं को ठीक करने के लिए ओवरफ़्लो हिडन का उपयोग करें
• पोजिशनिंग का ख्याल रखना
• सापेक्ष इकाइयाँ
• Z-इंडेक्स का उपयोग करके प्रत्येक तत्व की गहराई को नियंत्रित करें
• डुप्लिकेट कार्यक्षमता के बारे में युक्ति
• ऑफसेट
• सुनहरा नियम
• निष्कर्ष

हमें संरेखित करने की आवश्यकता क्यों है?

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

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

रिस्पॉन्सिव डिज़ाइन के लिए कॉलम या सेक्शन कैसे काम करते हैं?

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

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

लेकिन ऐसा करने से केवल डेस्कटॉप विज़िटर्स को फ़ायदा होगा क्योंकि यह उन्हें ठीक लगेगा। हालाँकि, यदि वेबसाइट को मोबाइल से एक्सेस किया जाता है तो यह एक समस्या पैदा करेगा क्योंकि एलिमेंटर मोबाइल पर कॉलम को लंबवत रूप से स्टैक करता है।

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

हालाँकि, आप छिपी हुई सेटिंग के साथ मोबाइल व्यू को स्मार्ट तरीके से बदल सकते हैं, लेकिन इसकी कोई गारंटी नहीं है कि अधिकांश लोग इसे ढूंढ पाएंगे। तो, उपयोगकर्ताओं को निराश क्यों करें? डिज़ाइन को उत्तरदायी और अनुकूलनीय बनाना सही समाधान है। ताकि ये कहीं क्रैश न हो जाए.

उस मामले के लिए, आपको विजेट के अंदर मौजूद कॉलम से उसके संबंध पर ध्यान देना होगा।

एलीमेंटर अनुभागों और स्तंभों को कैसे संरेखित करें?

प्रत्येक अनुभाग/कॉलम के लिए, लेआउट अनुभाग पर जाएं और अपनी आवश्यकताओं के अनुसार निम्नलिखित संरेखण विकल्प सेट करें:

• लंबवत संरेखण: आप निम्नलिखित में से विजेट के लिए सेटिंग्स चुन सकते हैं। लेकिन एक बात जो आपको ध्यान में रखनी चाहिए वह यह है कि किसी कॉलम की सामग्री को पहले तीन कॉलम वर्टिकल विकल्पों यानी ऊपर, मध्य और नीचे के साथ संरेखित नहीं किया जा सकता है।
• शीर्ष
• मध्य
• तल

उस मामले के लिए, ^* तीन नए विकल्प हैं जो आपकी पसंद के अनुसार सामग्री को संरेखित करना वास्तव में सुविधाजनक बनाते हैं।

• ^*स्पेस बिटवीन - कॉलम के किनारे पर प्रारंभ और अंत में विजेट के बीच का स्थान सेट करता है। विजेट समान-दूरी वाले हैं अर्थात उनके बीच समान स्थान है।
• ^*चारों ओर जगह - विजेट के बीच का स्थान बराबर है, और किनारे विजेट के बीच के स्थान के आधे आकार के हैं।
• ^*स्थान समान रूप से - विजेट्स के बीच का स्थान एक समान है - यह उनके बीच, पहले और बाद में बराबर है।

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

प्रतिक्रियाशील चौड़ाई की समस्याओं को ठीक करने के लिए ओवरफ़्लो हिडन का उपयोग करें

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

यह मोबाइल आगंतुकों के लिए वास्तव में निराशाजनक स्थिति का कारण बनता है, जहां वे क्षैतिज रूप से स्क्रॉल कर सकते हैं। और यह वह चीज़ नहीं है जो आप अपनी वेबसाइट के लिए चाहते थे। इसे इसके द्वारा ठीक किया जा सकता है:

लेआउट सेटिंग्स > ओवरफ्लो विकल्प को हिडन

ऐसा करने से अतिरिक्त क्षेत्र कट जाएगा और क्षैतिज रूप से स्क्रॉल करने की आवश्यकता नहीं होगी

पोजिशनिंग का ख्याल रखना

आपको कॉलम की स्थिति का भी ध्यान रखना होगा। आप एलीमेंटर 2.5 के साथ कस्टम पोजिशनिंग सेट कर सकते हैं - पूर्ण और निश्चित।

पूर्ण स्थिति उस अनुभाग या स्तंभ के सापेक्ष तत्व की स्थिति है जिसके अंदर आप हैं। इसलिए, यदि आप किसी तत्व या अनुभाग के लिए पूर्ण स्थिति का उपयोग करते हैं तो वह अनुभाग विज़िटर की विंडो के साथ नहीं चलेगा।

निश्चित स्थिति निरपेक्ष स्थिति से भिन्न होती है क्योंकि यह अनुभाग/तत्व को आगंतुक के दृष्टिकोण पर स्थिर रहने देती है। इसलिए, यदि उपयोगकर्ता पृष्ठ पर स्क्रॉल करता है, तो तत्व वहीं रहेगा।

सापेक्ष इकाइयाँ

जैसे ही आप अपना वेबपेज डिज़ाइन करते हैं, आप पाएंगे कि आप तत्वों को कई तरीकों से व्यवस्थित कर सकते हैं। पूर्ण स्थिति के लिए, सापेक्ष इकाइयों का उपयोग करना एक अच्छा विचार है क्योंकि यह अलग-अलग स्क्रीन आकार की बात आने पर प्रतिक्रियाशील डिज़ाइन को अधिक कार्यात्मक बना देगा।

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

Z-इंडेक्स का उपयोग करके प्रत्येक तत्व की गहराई को नियंत्रित करें

यदि आप विजेट्स के लिए 'पूर्ण' या 'निश्चित' स्थिति का उपयोग करने जा रहे हैं, तो ऐसी कई स्थितियां होंगी जहां दो या दो से अधिक विजेट ओवरलैप हो सकते हैं यानी वे एक दूसरे के "शीर्ष पर" रखे गए हैं। आप सामान्य Z-इंडेक्स सेटिंग का उपयोग करके इससे बच सकते हैं। यह आपको गहराई को नियंत्रित करने में सक्षम करेगा और आपको यह चुनने की अनुमति देगा कि अग्रभूमि में कौन से विजेट दिखाई देंगे।

डुप्लिकेट कार्यक्षमता के बारे में युक्ति

यदि आप कस्टम पोजिशनिंग के साथ किसी तत्व को डुप्लिकेट करने के लिए राइट-क्लिक का उपयोग कर रहे हैं, तो ऐसा लग सकता है कि राइट-क्लिक ने काम नहीं किया है।

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

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

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

ऑफसेट

ऐसे मामले हैं जहां आपको अपने वेबपेज सामग्री में ऑफसेट सेट करने की आवश्यकता होती है। एलिमेंटर के साथ, आप आसानी से ऑफसेट सेट कर सकते हैं। इसलिए, यदि आप बाईं ओर से 500px का ऑफसेट सेट करते हैं, तो आपके इनपुट के आधार पर सामग्री के चारों ओर जगह छोड़ दी जाएगी। इसी तरह, आप ऑफसेट को दाईं ओर भी सेट कर सकते हैं। बाएँ और दाएँ दोनों ऑफ़सेट को समान मान में सेट करना एक अच्छा अभ्यास है क्योंकि सामग्री स्क्रीन पर ठीक से संरेखित होगी।

ऐसे मामले हैं जहां आपको अपने वेबपेज सामग्री में ऑफसेट सेट करने की आवश्यकता होती है। एलिमेंटर के साथ, आप आसानी से ऑफसेट सेट कर सकते हैं। इसलिए, यदि आप बाईं ओर से 500px का ऑफसेट सेट करते हैं, तो आपके इनपुट के आधार पर सामग्री के चारों ओर जगह छोड़ दी जाएगी। इसी तरह, आप ऑफसेट को दाईं ओर भी सेट कर सकते हैं। बाएँ और दाएँ दोनों ऑफ़सेट को समान मान में सेट करना एक अच्छा अभ्यास है क्योंकि सामग्री स्क्रीन पर ठीक से संरेखित होगी।

सुनहरा नियम

बेहतर प्रतिक्रियाशील डिज़ाइन के लिए, सापेक्ष इकाइयों का उपयोग करें। ऐसा इसलिए है क्योंकि जब वेबसाइट को किसी भिन्न प्लेटफ़ॉर्म से एक्सेस किया जाता है तो पूर्ण स्थिति बनाना मुश्किल हो सकता है। अपने अनुभागों को डिज़ाइन करने के लिए सापेक्ष इकाइयों का उपयोग करने से अधिक प्रतिक्रियाशील डिज़ाइन प्राप्त होगा। सापेक्ष इकाइयों की सहायता से चौड़ाई में परिवर्तन को पूरी तरह से नियंत्रित किया जा सकता है। "सापेक्ष" से हमारा तात्पर्य पिक्सेल जैसी इकाइयों को ठीक करने के बजाय प्रतिशत या दृश्य चौड़ाई (VW) जैसी अलग-अलग इकाइयों से है।

निष्कर्ष

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