जब आप एलीमेंटर , तो आप देखेंगे कि अपने अनुभागों और स्तंभों को कस्टम स्थिति में लाना थोड़ा मुश्किल है। प्रतिक्रियाशील "खिंचाव-से-भरने" लेआउट प्राप्त करने के लिए आपको स्तंभों और अनुभागों को लंबवत और क्षैतिज रूप से संरेखित करने की आवश्यकता है। इस संरेखण के बिना, अलग-अलग ऊंचाई वाले स्तंभों के तत्व ऑन-स्क्रीन समायोजित करने में विफल होंगे।
प्रत्येक स्तंभ या अनुभाग में, सामग्री विभिन्न श्रेणियों की हो सकती है। यह चित्र, पाठ और रेटिंग के रूप में हो सकता है। एक साथ एक नज़र के लिए, यह अनुशंसा की जाती है कि सामग्री उपस्थिति में एकरूपता हो। इसे सिर्फ वहां नहीं फेंका जाना चाहिए- डंप किया जाना चाहिए - सिर्फ इसके लिए।
अच्छे संरेखण के साथ, आप वेबसाइट को अधिक साफ-सुथरा और उत्तम दर्जे का बना सकते हैं- ताकि यह अव्यवस्थित न दिखे। संरेखण विकल्प के साथ, आप एक ही कॉलम में एक-दूसरे के बगल में अलग-अलग आकारों के कई विगेट्स समायोजित कर सकते हैं।
एलिमेंट 2.5 आपको अपने डिजाइन और सामग्री को कस्टम स्थिति में लाने में सक्षम बनाता है। नई कस्टम पोजीशनिंग सुविधा के साथ, आप विजेट्स को किसी भी स्थान पर ले जा सकते हैं। लेकिन, आप वास्तव में इसे एक निश्चित खंड से आगे नहीं कर सकते। ये विजेट उनके अंदर मौजूद कॉलम के सापेक्ष हैं। यह डिज़ाइन की जवाबदेही में समस्या पैदा कर सकता है।
मान लीजिए कि आपके पास तीन-कॉलम लेआउट है। कस्टम पोजिशनिंग की मदद से, आप दाहिने कॉलम से एक विजेट को सेंटर कॉलम में ड्रैग-एंड-ड्रॉप कर सकते हैं, या फिर आप इसे पसंद कर सकते हैं।
लेकिन ऐसा करने से केवल डेस्कटॉप आगंतुकों को लाभ होगा क्योंकि यह उन्हें ठीक लगेगा। हालाँकि, यह एक समस्या का कारण होगा यदि वेबसाइट मोबाइल से एक्सेस की जाती है क्योंकि एलिमेंटर मोबाइल पर कॉलम को लंबवत रूप से स्टैक करता है।
इसलिए तीन स्तंभों को साथ-साथ रखने के बजाय, आप तीनों स्तंभों का एक दूसरे पर ढेर होने का अनुभव कर सकते हैं। तत्व अब मध्य स्तंभ में दिखाई नहीं देगा जैसा कि यह डेस्कटॉप पर होता है।
हालाँकि, आप छिपी सेटिंग के साथ स्मार्ट रूप से मोबाइल दृश्य को ट्विक कर सकते हैं, लेकिन इस बात की कोई गारंटी नहीं है कि अधिकांश लोग इसे पा सकते हैं। तो, उपयोगकर्ताओं को निराश क्यों करें? डिजाइन को उत्तरदायी और अनुकूल बनाना सही समाधान है। ताकि यह कहीं दुर्घटनाग्रस्त न हो जाए।
उस बात के लिए, आपको विजेट के उस स्तंभ के संबंध पर ध्यान देने की आवश्यकता है जो उसके अंदर है।
प्रत्येक अनुभाग / कॉलम के लिए, लेआउट अनुभाग पर उतरें और अपनी आवश्यकताओं के अनुसार निम्नलिखित संरेखण विकल्प सेट करें:
उस बात के लिए, * तीन नए विकल्प हैं जो आपकी पसंद के अनुसार सामग्री को संरेखित करने के लिए वास्तव में सुविधाजनक बनाते हैं।
जब मोबाइल पर किसी वेबसाइट की उपस्थिति की बात आती है, तो उच्च संभावना है कि आप एक समस्या में भाग सकते हैं जहां कस्टम पोजीशन वाला एक विजेट एक कॉलम की चौड़ाई को ओवरफ्लो करता है।
यह मोबाइल आगंतुकों के लिए वास्तव में निराशाजनक स्थिति का कारण बनता है, जहां वे क्षैतिज रूप से स्क्रॉल कर सकते हैं। और यह कुछ ऐसा नहीं है जो आप अपनी वेबसाइट के लिए चाहते थे। इसके द्वारा तय किया जा सकता है:
लेआउट सेटिंग्स> ओवरफ्लो विकल्प को हिडन
ऐसा करने से, अधिक से अधिक क्षेत्र कट जाएगा, और क्षैतिज रूप से स्क्रॉल करने की कोई आवश्यकता नहीं होगी
आपको स्तंभों की स्थिति का भी ध्यान रखना होगा। आप एलिमेंट 2.5 के साथ कस्टम पोजिशनिंग सेट कर सकते हैं - पूर्ण और निश्चित।
निरपेक्ष प्रस्तुत करना उस अनुभाग या स्तंभ के सापेक्ष तत्व की स्थिति है जो आप अंदर हैं। इसलिए, यदि आप किसी तत्व या अनुभाग में पूर्ण स्थिति का उपयोग करते हैं तो वह खंड आगंतुक की विंडो के साथ नहीं चलेगा।
निश्चित स्थिति निरपेक्ष से भिन्न होती है क्योंकि इससे आगंतुक के दृष्टिकोण में अनुभाग / तत्व स्थिर रहता है। इसलिए, यदि उपयोगकर्ता पृष्ठ के माध्यम से स्क्रॉल करता है, तो तत्व वहां रहेगा।
जैसे ही आप अपना वेबपेज डिजाइन करते हैं, आप पाएंगे कि ऐसे कई तरीके हैं जिनसे आप तत्वों को स्थान दे सकते हैं। पूर्ण स्थिति के लिए, रिश्तेदार इकाइयों का उपयोग करना एक अच्छा विचार है क्योंकि यह अलग स्क्रीन आकार में आने पर उत्तरदायी डिजाइन को अधिक कार्यात्मक बना देगा।
रिश्तेदार इकाई स्क्रीन की सापेक्ष चौड़ाई और ऊंचाई के आधार पर खुद को समायोजित करती है, इसलिए तत्वों या वर्गों को खुद को और एक बेहतर उत्तरदायी डिजाइन का आकार देने की अनुमति देती है। यदि आप पिक्सेल का उपयोग करने का विकल्प चुनते हैं, तो आपको विभिन्न स्क्रीन आकारों के लिए कई उत्तरदायी अनुभाग बनाने होंगे।
यदि आप विगेट्स के लिए 'निरपेक्ष' या 'निश्चित' पोजिशनिंग का उपयोग करने जा रहे हैं, तो बहुत सारी स्थितियाँ होंगी जहाँ दो या दो से अधिक विजेट ओवरलैप हो सकते हैं अर्थात वे एक दूसरे के "शीर्ष पर" ढेर हो जाते हैं। आप सामान्य जेड-इंडेक्स सेटिंग का उपयोग करके इससे बच सकते हैं। यह आपको गहराई को नियंत्रित करने में सक्षम करेगा और आपको अग्रभूमि में दिखाई देने वाले विगेट्स को चुनने की अनुमति देगा।
यदि आप कस्टम पोजिशनिंग वाले किसी तत्व को डुप्लिकेट करने के लिए राइट-क्लिक का उपयोग कर रहे हैं, तो ऐसा लग सकता है कि राइट-क्लिक ने काम नहीं किया है।
लेकिन, निहारना। यह सच नहीं है। डुप्लिकेट कार्यक्षमता ने पूरी तरह से ठीक काम किया है और तत्व को डुप्लिकेट किया है। यह सिर्फ इतना है कि चूंकि प्रत्येक तत्व में एक ही कस्टम पोजिशनिंग है, इसलिए डुप्लिकेटेड तत्व दूसरे तत्व के शीर्ष पर स्टैक्ड है (यह धारणा देता है कि कोई डुप्लिकेट नहीं बनाया गया है।)।
सरल शब्दों में, यदि आप सफलतापूर्वक एक कॉलम बनाते हैं, तो आप जब भी आवश्यकता हो, कॉलम को डुप्लिकेट कर सकते हैं। यह भी सुनिश्चित करें कि आपके द्वारा बनाए गए कॉलम कस्टम स्थिति का उपयोग नहीं करते हैं। यदि ऐसा होता है, तो दोहराव राइट-क्लिक विकल्प के साथ काम नहीं करेगा। हालाँकि, आप सीमा को पार करने और कॉलम को कॉपी करने के लिए डुप्लिकेट फ़ंक्शन का उपयोग कर सकते हैं।
शीर्ष तत्व को थोड़ा खींचें और यह दूसरे को प्रकट करेगा। दोनों तत्व बहुत हैं। इसके अलावा, जब आप एक कॉलम को डुप्लिकेट करते हैं, तो यह पुराने पर ढेर हो जाएगा। आप भ्रमित हो सकते हैं। लेकिन चिंता न करें, आप बस इसे खींच सकते हैं और फिर इसे अपने वेब पेज डिजाइन में उपयोग कर सकते हैं।
ऐसे मामले हैं जहां आपको अपने वेबपृष्ठ सामग्री पर ऑफ़सेट सेट करने की आवश्यकता होती है। एलिमेंट के साथ, आप आसानी से ऑफसेट सेट कर सकते हैं। इसलिए, यदि आप बाईं ओर से 500px का ऑफसेट सेट करते हैं, तो आपके इनपुट के आधार पर सामग्री के चारों ओर स्थान छोड़ा जाएगा। इसी तरह, आप दाईं ओर भी ऑफसेट सेट कर सकते हैं। एक समान मूल्य में बाएं और दाएं दोनों ऑफसेट को सेट करना एक अच्छा अभ्यास है क्योंकि सामग्री स्क्रीन पर ठीक से संरेखित होगी।
ऐसे मामले हैं जहां आपको अपने वेबपृष्ठ सामग्री पर ऑफ़सेट सेट करने की आवश्यकता होती है। एलिमेंट के साथ, आप आसानी से ऑफसेट सेट कर सकते हैं। इसलिए, यदि आप बाईं ओर से 500px का ऑफसेट सेट करते हैं, तो आपके इनपुट के आधार पर सामग्री के चारों ओर स्थान छोड़ा जाएगा। इसी तरह, आप दाईं ओर भी ऑफसेट सेट कर सकते हैं। एक समान मूल्य में बाएं और दाएं दोनों ऑफसेट को सेट करना एक अच्छा अभ्यास है क्योंकि सामग्री स्क्रीन पर ठीक से संरेखित होगी।
बेहतर उत्तरदायी डिजाइन के लिए, सापेक्ष इकाइयों का उपयोग करें। ऐसा इसलिए है क्योंकि जब वेबसाइट किसी दूसरे प्लेटफॉर्म से एक्सेस की जाती है, तो पोजिशनिंग पूरी तरह से मुश्किल हो सकती है। रिश्तेदार इकाइयों का उपयोग करना, अपने अनुभागों को डिजाइन करने के परिणामस्वरूप अधिक उत्तरदायी डिजाइन होगा। चौड़ाई में परिवर्तन को सापेक्ष इकाइयों की सहायता से पूरी तरह से नियंत्रित किया जा सकता है। "सापेक्ष" से हमारा मतलब है कि पिक्सेल जैसी इकाइयों को ठीक करने के बजाय प्रतिशत या दृश्य चौड़ाई (VW) जैसी अलग-अलग इकाइयाँ।
एलिमेंट एक सुपर यूजर-फ्रेंडली वेबसाइट बिल्डर है। कई बार, यह वेबसाइट डिस्प्ले में चुनौतियों का सामना कर सकता है यदि वेबसाइट मोबाइल या टैबलेट से एक्सेस की जाती है। अनुभाग और स्तंभ संरेखण की सहायता से, आप अपनी वेबसाइट को वास्तविक आसानी से परिपूर्ण बना सकते हैं।
एक वेबसाइट के शीर्षलेख और पादलेख आवश्यक तत्व हैं। ज्यादातर मामलों में, हैडर नेविगेशन प्रदान करता है…
बाजार में सबसे लोकप्रिय वर्डप्रेस थीम में से दो एस्ट्रा और ओशनडब्ल्यूपी हैं। पेशेवर…
एक उत्कृष्ट समाचार वेबसाइट बनाने के लिए आपको वेब डिज़ाइनर बनने की आवश्यकता नहीं है। हम…
अख़बार थीम टैगडिव द्वारा डिज़ाइन की गई सबसे महत्वपूर्ण वर्डप्रेस थीम में से एक है, एक…
जब ऑनलाइन स्टोर स्थापित करने की बात आती है, तो WooCommerce गो-टू plugin । यह…
एक हेडर आम तौर पर पहली चीज है जिसे कोई व्यक्ति आपकी वेबसाइट पर जाने पर देखता है,…
टिप्पणियाँ देखें
आप इन विकल्पों को कहां पाते हैं? वे मौजूद नहीं हैं। क्या यह प्रीमियम एलिमेंट के लिए है? यदि हां, तो आपको अपने लेख में इसका उल्लेख करना चाहिए ताकि लोग इसके माध्यम से अपना समय बर्बाद न करें।
होला,
Estoy maquetando con एलिमेंटर प्रो।
क्विएरो पोनेर डॉस बैनर, अनो पेगेडो ए ला इज़्किएरेडा वाई ओट्रो पेगाडो एक ला डेरचा डी ला पंतला। पैरा एलो वह क्रैडो: - ऊना सीक्रेसी पैरा कैडा बैनर।
- संयुक्त राष्ट्र encabezado con una frase, a la cual he puesto de fondo una Imagen।
Una de ella deberia ir pegada a la derecha de la pantalla (margen izquierda 0 कल्पना)। अलगुन कोन्सेजो? मुच्चा ग्रेसिया!
नमस्ते, पहली बात जो मैं देखूंगा वह इस पोस्ट के पहले भाग में वर्णित कॉलम वर्टिकल एलाइनिंग सेटिंग होगी।
चीयर्स,
बुओंगियोर्नो, टुट्टो चियारो, ग्राज़ी!
मा मि स्टावो डोमंडांडो से ई पॉसिबल इंसेरेयर ट्रे रिघे (कॉन ट्रे पलसेंटी उनो सोटो ल'ऑल्ट्रो) नेला स्टेसा कोलोना। Cerco di spiegarmi meglio: vorrei डिवाइडर उना सेज़ियोन इन ड्यू कॉलोन।
इन क्वेला डि सिनिस्ट्रा मेटेरेई ला फोटो डि उना कवर, ई नेला कोलोना डि सिनिस्ट्रा वोरेई मेटेरे ट्रे पल्सांति (यूनो सोपरा एल'एल्ट्रो), इक्विडिस्टेंटि ई सेंट्राटी रिस्पेटो अल्ला कॉलोना डि सिनिस्ट्रा, चे रिमांडानो ऐ ट्रे मॉडेली डि स्मार्टफोन प्रति आई क्वाली फोटो में कवर। Sto Cercando ovunque, ma non trovo nula che indichi che si possa किराया।
सोनो एपर्टा ए टूटी और सुगरिमेंटी
ग्राज़ी
Scusate, ho appena capito किराया (l'ho capito प्रति इरोर)। स्कूसेट इल डिस्टर्बो ई ग्रैजी लो स्टेसो
हाय, ठीक है महान, सुनिश्चित करें कि यह संभव है, आप प्रत्येक स्तंभ में सामग्री को लंबवत रूप से केंद्र कर सकते हैं
यो टेंगो अन प्रॉब्लम एक कोन ला अलाइनैसिओन क्यू नो लॉगो सॉल्वेंटर। एल कॉन्टेनिडो से क्वेडा ए अन लाडो, ला इमेजन, टिटुलो वाई टेक्स्टो। नो लॉगो सेंट्रारलो (सोलो हाय उना कोल्म्ना पेरो एस कोमो सी ला मितद ओ मास नो से पुडिएरन यूसर, नी पोनर ओट्रो कुआड्रो डे टेक्स्टो) नो मी हबिया पासाडो नुंका वाई नो से क्यू मास प्रोबार। हा सिदो अल एडिटार पैरा तमनो मोविल, से हा क्वेडाडो एएसआई ए अन लाडो टूडो कुआंडो कैम्बियो ए एस्क्रिटोरियो! अलगुएन सबे क्यू पुएदे सेर? वह प्रोबाडो टूडू लो क्यू पोन एन एल आर्टिकुलो वाई पारेस क्यू नाडा फंकियोना
हैलो, मुझे लगता है कि आपको अपने सभी संरेखण को अनुभागों में फिर कॉलम और फिर सामग्री ब्लॉक की जांच करके शुरू करना होगा। यह भी संभव है कि आपकी थीम का CSS इस संरेखण में भूमिका निभाने आए।
आनंद!
जेई मैराचे लेस चेवेउक्स कार जे एन'आराइव पास à एलाइनर 3 कॉलोन ल'होरिजोनटेल।
सुर ले ब्रोइलन एल्स पैरिसेंट टाउट्स पैराफिटमेंट एलाइनिज, माईस लॉर्स्क जे प्रिविज़ुअलाइज़ लेस मॉडिफ्स, लेस कॉलोननेस से रिट्रोवेन्ट टाउट्स इम्ब्रीक्यूज़ एट डे डिफरेन्ट्स टेल्स (लार्जर्स एट हाउतेर) सुर ले कोटे गौचे डे ल'एक्रान। जे वाउड्राइस क्वेलेस फासेंट टाउट्स ला मेमे टेल एट क्वेलेस सोयंट पैराफेटमेंट एलाइनर। कमेंट फेयर?
नमस्ते,
क्या कॉलम के ऊपर संरेखण की समस्या आ रही है?
होला, टेंगो इंस्टालाडो एलिमेंट या प्रो पेरो कुआंडो एग्रीगो उना नुएवा सेकियोन नो अपारेसेन लास ओप्सिओन्स डे एलिनैसिओन हॉरिजॉन्टल य एलाइनैसिओन वर्टिकल।
हे क्यू इंस्टालर अन कॉम्प्लिमेंटो एडिकनल? ग्रेसियस
नमस्ते, क्या आपके पास एलिमेंट फ्री या प्रो संस्करण है? शायद यही समस्या है।
होला, टेंगो ला वर्जन प्रो डे एलिमेंट या नो फिगुरा निंगुना डे लास ओप्सियोन्स क्यू इंडिकास, क्यू पुएडे सेर?
नमस्ते, एलिमेंट प्रो से कौन से विकल्प प्रदर्शित नहीं होते हैं?
हेलो,
ich habe im footer verschiedene विगेट्स। दास ओबेर्स्ट इस्ट इमर ईइन हेडलाइन, डरंटर स्टिचपंकटे। दा ich nicht zwei unterschiedliche textarten in einen kasten schreiben kann (h4 und p) muss ich das in 2 section machen। वू कन्न इच नन डेन एबस्टैंड डेर वर्डप्रेस सेक्शन ज़ुइनेंडर वेरिंगर्न? es ist zwischen der Headline und dem text einfach zu viel platz.
डंके फर यूरे हिल्फे
नमस्ते, टेक्स्ट के बीच की जगह को मॉडरेट करने के लिए कई विकल्प हैं: यह सेक्शन, कॉलम या विजेट मार्जिन या पैडिंग हो सकता है या यह लाइन ऊंचाई की तरह फ़ॉन्ट विकल्प हो सकता है।