एलिमेंटरी सेक्शन और कॉलम को कैसे संरेखित करें

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

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

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

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

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

एक उत्तरदायी डिजाइन के लिए कॉलम या अनुभाग कैसे काम करते हैं?

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

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

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

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

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

उस बात के लिए, आपको विजेट के उस स्तंभ के संबंध पर ध्यान देने की आवश्यकता है जो उसके अंदर है।

एलिमेंटरी सेक्शन और कॉलम को कैसे संरेखित करें?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ऑफसेट

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

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

सुनहरा नियम

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

निष्कर्ष

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