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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ऑफसेट

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

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

सुनहरा नियम

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

निष्कर्ष

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

अहमद

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

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

  • नमस्ते,

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

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

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

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

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

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

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

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

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

  • होला, आपको एक नया तत्व स्थापित करना होगा जिसमें एक नया अनुभाग हो, क्षैतिज और लंबवत पैराग्राफ के विकल्प का कोई उदाहरण न हो।
    आपने कॉम्प्लिमेंटो एडिशियोनल कैसे स्थापित किया? ग्रेसियस

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

  • नमस्ते,

    मेरे पास पाद लेख में कई विजेट हैं। वह हमेशा एक शीर्षक, एक अधिक साहसी बिंदु होता है। इस तरह मुझे अलिखित पाठ को एक बॉक्स (h4 और p) में लिखने की ज़रूरत नहीं है, जब तक कि मैं उसे 2 खंडों में नहीं लिखता। अब मैं अगले वर्डप्रेस सेक्शन कैसे ढूंढ सकता हूं? शीर्षक और पाठ के प्रकट होने की अभी भी गुंजाइश है।

    आपकी मदद के लिए आपको धन्यवाद

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

हाल के पोस्ट

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

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

6 जनवरी 2022

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

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

2 जनवरी 2022

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

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

25 अक्टूबर 2021

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

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

18 अक्टूबर 2021

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

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

4 अक्टूबर 2021

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

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

21 सितंबर 2021