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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ऑफसेट

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

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

सुनहरा नियम

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

निष्कर्ष

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

अहमद

टिप्पणियाँ देखें

  • आपको ये विकल्प कहां मिलते हैं? उनका अस्तित्व नहीं है. क्या यह प्रीमियम एलीमेंटर के लिए है? यदि हां, तो आपको अपने लेख में इसका उल्लेख करना चाहिए ताकि लोग इसे पढ़ने में अपना समय बर्बाद न करें।

  • होला,

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

    ऊना डे एला डेबेरिया इर पेगडा ए ला डेरेचा डे ला पेंटाला (मार्गेन इज़क्विएर्डा 0 इमेजिनो)। अलगुन कॉन्सेजो? बहुत बहुत धन्यवाद!

  • नमस्ते, पहली चीज़ जिस पर मैं गौर करूँगा वह इस पोस्ट के पहले भाग में वर्णित कॉलम वर्टिकल एलाइन सेटिंग होगी।
    प्रोत्साहित करना,

  • बुओंगियोर्नो, टुट्टो चियारो, ग्राज़ी! मेरा काम बाकी है और यह संभव है कि आप एक दिन में एक बार फिर से पल्स करें।
    सेर्को डि स्पीगर्मी मेग्लियो: वोरेई डिवाइडर यूना सेज़ियोन इन ड्यू कॉलोन। एक कवर में एक सिनिस्ट्रा मेटेरेई की फोटो में, एक सिनिस्ट्रा वोरेइ मेटेरे तीन पल्सेंटी (यूनो सोप्रा एल'अल्ट्रो), इक्विडिस्टेंटी और सेंट्राटी रिस्पेटो अल्ला कोलोना डि सिनिस्ट्रा, चे रिमंडानो एआई ट्रे मॉडलली डि स्मार्टफोन पर क्वाली ई डिस्पोनिबिल ला फ़ोटो में कवर करें.
    स्टो सेरकान्डो ओवुंके, मा नॉन ट्रोवो नल्ला चे इंडिची चे सी पोसा किराया।

    ग्राज़ी के बारे में सारी जानकारी

  • स्कुसेट, हो अप्पेना कैपिटो कम फ़ेयर (एल'हो कैपिटो प्रति एरररे)। स्कुसेट इल डिस्टर्बो और ग्राज़ी लो स्टेसो

    • नमस्ते, ठीक है बढ़िया, निश्चित रूप से यह संभव है, आप प्रत्येक कॉलम में सामग्री को लंबवत रूप से केन्द्रित भी कर सकते हैं

  • मैं एक समस्या को हल करने के लिए तैयार हूं जो कोई समस्या नहीं है। एक लाडो, छवि, शीर्षक और पाठ से संबंधित सामग्री। कोई लॉगरो सेंटर नहीं (सोलो हे यूना कॉलमा पेरो एस कोमो सी ला मिताद ओ मास नो से पुडीयरन यूसर, नी पोनेर ओट्रो क्यूआड्रो डी टेक्स्टो) नो मी हाबिया पासाडो नंका वाई नो से क्यू मेस प्रोबार। यदि आप अभी भी मोबाइल पर संपादन करना चाहते हैं, तो आपको बस इतना करना होगा कि आप एक एस्क्रिटोरियो का उपयोग कर सकें! अलगिएन सबे कुए पुएडे सेर? उन्होंने एक लेख में यह जानने की कोशिश की कि क्या काम करना है 🤗

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

  • नमस्ते!
    मैं एक क्षैतिज रेखा पर 3 कॉलम संरेखित करके आया हूं। सुर ले ब्रॉइलन ने पार्फिटमेंट एलाइन्स को पैराइसेंट टाउट्स दिया, मैस लॉर्स्के ने मॉडिफ़्स को प्रीविज़ुअलाइज़ किया, लेस कॉलोन्स ने रेट्रोउवेंट टाउट्स इम्ब्रिक्स एट डी डिफरेंटेस टेलल्स (लार्जर्स एट हाउतेर) सुर ले कोटे गौचे डे ले'क्रेन।
    मुझे अभी भी एक ही समय में सभी पैराफिटमेंट एलाइनर की आवश्यकता है। निष्पक्ष टिप्पणी करें?

  • होला, क्षैतिज और ऊर्ध्वाधर रेखांकन के विकल्पों की कोई अतिरिक्त स्थापना नहीं है। क्या आप एक अतिरिक्त पूरक स्थापित करना चाहते हैं?
    ग्रेसियस

  • होला, क्या आपको एलिमेंट के बारे में संस्करण का पता है और क्या कोई विकल्प नहीं है कि आप क्या संकेत दे रहे हैं, क्या आप चाहते हैं?

  • नमस्ते,

    मुझे फ़ुटर वर्सीडीन विगेट्स चाहिए। यह केवल एक शीर्षक है, डारंटर स्टिचपंकटे। दा इच निच्ट ज़वेई अन्टर्शीडलिचे टेक्स्टारटेन इन एइनेन कास्टेन श्रेइबेन कन्न (एच4 यूएनडी पी) मुस्स इच दास इन 2 सेक्शन मशीन। क्या आप वर्डप्रेस अनुभागों से इनकार नहीं कर सकते? यह हेडलाइन और टेक्स्ट से जुड़ी एक छोटी सी बात है।

    डंके फर यूरे हिल्फे

    • नमस्ते, टेक्स्ट के बीच की जगह को मॉडरेट करने के लिए कई विकल्प हैं: यह सेक्शन, कॉलम या विजेट मार्जिन या पैडिंग हो सकता है या यह लाइन ऊंचाई जैसा फ़ॉन्ट विकल्प हो सकता है।

हाल के पोस्ट

एलीमेंटर के साथ हेडर और फ़ूटर का उपयोग कैसे करें

किसी वेबसाइट के शीर्षलेख और पादलेख आवश्यक तत्व हैं। अधिकांश मामलों में, हेडर नेविगेशन प्रदान करता है…

6 जनवरी 2022

वर्डप्रेस थीम तुलना: एस्ट्रा बनाम ओशनडब्ल्यूपी

बाज़ार में दो सबसे लोकप्रिय वर्डप्रेस थीम एस्ट्रा और ओसियनडब्ल्यूपी हैं। पेशेवर…

2 जनवरी 2022

वर्डप्रेस समाचार थीम तुलना: समाचार पत्र बनाम एस्ट्रा

एक उत्कृष्ट समाचार वेबसाइट बनाने के लिए आपको वेब डिज़ाइनर बनने की आवश्यकता नहीं है। हम…

25 अक्टूबर 2021

समाचार पत्र थीम के साथ समाचार-संबंधित वेबसाइट बनाएं

न्यूज़पेपर थीम tagDiv द्वारा डिज़ाइन की गई सबसे महत्वपूर्ण वर्डप्रेस थीम में से एक है, जो…

18 अक्टूबर 2021

Avada WooCommerce बिल्डर के साथ ईकॉमर्स कैसे बनाएं

जब ऑनलाइन स्टोर स्थापित करने की बात आती है, तो WooCommerce एक पसंदीदा plugin है। यह…

4 अक्टूबर 2021

एलीमेंटर के साथ स्टिकी हेडर और स्क्रॉलिंग प्रभावों का उपयोग कैसे करें

जब कोई व्यक्ति आपकी वेबसाइट पर जाता है तो आम तौर पर वह पहली चीज़ हेडर देखता है,…

21 सितंबर 2021