विषय-सूची
एलिमेंटर का मुफ्त संस्करण आपको अधिकांश ट्यूटोरियल स्वीकार करने की तुलना में अधिक ब्रेकप्वाइंट देता है: कुल में सात डिवाइस दृश्य, प्रत्येक एक संपादन योग्य पिक्सेल चौड़ाई के साथ, सभी साइट सेटिंग्स से स्विच किए गए कोई प्रो लाइसेंस की आवश्यकता नहीं है जहां मूल सिस्टम बंद हो जाता है उन सात निश्चित स्लॉट्स पर यदि आपके डिज़ाइन को आठवें दृश्य की आवश्यकता है, या एक डिवाइस चौड़ाई नामित स्लॉट्स को मैप नहीं करते हैं, तो वह अंतर क्या है मुफ्त कस्टम ब्रेकप्वाइंट एक्सटेंशन मास्टर एडॉन्स हैंडल से यह उत्तरदायी काम के स्टाइलिंग आधे को कवर करता है, जबकि एक विस्तार की तरह प्रदर्शन की शर्तें यह तय करता है कि कौन से अनुभाग किस डिवाइस पर दिखाई देंगे।
नीचे: एलिमेंटर फ्री में वास्तव में क्या शामिल है (तीन से अधिक दृश्य, जो भी पुराने पोस्ट का दावा है), अतिरिक्त मूल ब्रेकप्वाइंट को कैसे सक्रिय किया जाए, और शीर्ष पर वास्तव में कस्टम ब्रेकप्वाइंट कैसे जोड़ा जाए। वह अंतिम भाग 3 ब्रेकप्वाइंट तक निःशुल्क है, मास्टर एडॉन्स प्रो के साथ असीमित है।
एलिमेंटर वास्तव में आपको क्या ब्रेकप्वाइंट देता है
सबसे पहले, मिथक जो मर नहीं जाएगा: एलिमेंटर में अतिरिक्त ब्रेकप्वाइंट एलिमेंटर प्रो के पीछे बंद नहीं हैं बहुत सारे लेख अभी भी कहते हैं कि वे हैं चूंकि एलिमेंटर 3.4 अतिरिक्त कस्टम ब्रेकप्वाइंट सुविधा को भेज दिया गया, मुफ्त संस्करण सात डिवाइस दृश्यों का समर्थन करता हैः
- मोबाइल पोर्ट्रेट: डिफ़ॉल्ट रूप से 767px तक (हमेशा सक्रिय)
- मोबाइल लैंडस्केप: 880px तक
- टैबलेट पोर्ट्रेट: 1024px तक (हमेशा सक्रिय)
- टैबलेट लैंडस्केप: 1200px तक
- लैपटॉप: 1366px तक
- डेस्कटॉप: आधार दृश्य बाकी सभी शाखाओं से
- वाइडस्क्रीन: 2400px और ऊपर (सेट में एक मिनट-चौड़ाई वाला ब्रेकप्वाइंट)
उन पिक्सेल मानों में से हर एक संपादन योग्य है साइट सेटिंग्स खोलें, टैबलेट पोर्ट्रेट कटऑफ को १०२४ पीएक्स से ९०० पीएक्स में बदलें, सहेजें, किया गया एलिमेंटर्स डेवलपर दस्तावेज़ीकरण यदि आप यांत्रिकी चाहते हैं तो नीचे अधिकतम-चौड़ाई तर्क की व्याख्या करता है।
तो मुफ्त संस्करण क्या नहीं कर सकता दो चीजें आप आठवें ब्रेकपॉइंट को नहीं जोड़ सकते हैं, और आप नामित स्लॉट के बाहर कदम नहीं रख सकते हैं: छह अतिरिक्त दृश्यों में निश्चित भूमिकाएं हैं, और एक बार जब वे सभी उपयोग में होते हैं, तो मूल प्रणाली पूर्ण होती है वह छत कारण है कि एक समर्पित ब्रेकपॉइंट प्लगइन बिल्कुल मौजूद है।
एलिमेंट के अतिरिक्त ब्रेकप्वाइंट को कैसे सक्रिय करें (मुफ़्त, कोई प्लगइन नहीं)
कुछ भी स्थापित करने से पहले, उस पर स्विच करें जो एलिमेंटर आपको पहले से ही देता है लगभग एक मिनट लगता हैः
- एलिमेंटर के साथ कोई भी पेज खोलें और पैनल के ऊपरी-बाएँ कोने में हैमबर्गर मेनू पर क्लिक करें, फिर चुनें साइट सेटिंग्स.
- को जा लेआउट → ब्रेकप्वाइंट.
- में क्लिक करें सक्रिय ब्रेकप्वाइंट फ़ील्ड करें और अपने इच्छित दृश्य जोड़ें: मोबाइल लैंडस्केप, टैबलेट लैंडस्केप, लैपटॉप, वाइडस्क्रीन।
- यदि डिफ़ॉल्ट आपके डिज़ाइन से मेल नहीं खाता है तो प्रत्येक ब्रेकपॉइंट के अंतर्गत पिक्सेल मान समायोजित करें।
- हिट परिवर्तन सहेजें। एलिमेंटर अपने सीएसएस को पुनर्जीवित करता है और नए दृश्य रिस्पॉन्सिव मोड में दिखाई देते हैं।
यदि सात दृश्य आपके प्रोजेक्ट को कवर करते हैं, तो यहां रुकें आपने कुछ भी खर्च नहीं किया है और कुछ भी स्थापित नहीं किया है यदि आपको इससे अधिक विचारों की आवश्यकता है, या एक ब्रेकपॉइंट नामित स्लॉट व्यक्त नहीं कर सकते हैं तो पढ़ते रहें।
एलिमेंट के सात से परे कस्टम ब्रेकप्वाइंट कैसे जोड़ें
एलिमेंटर की छत से होकर जाने वाला निःशुल्क मार्ग है एलिमेंट के लिए कस्टम ब्रेकप्वाइंटे, मास्टर एडॉन्स टीम द्वारा निर्मित एक प्लगइन यह एलिमेंटर के बगल में अपने दम पर चलता है, किसी अन्य प्लगइन की आवश्यकता नहीं है यह भी साथ जोड़े मास्टर ऐडऑन यदि आप पहले से ही इसे चलाते हैं, तो आप अपने विजेट के समान डैशबोर्ड से ब्रेकप्वाइंट प्रबंधित करते हैं मुफ्त संस्करण प्रत्येक डिवाइस की चौड़ाई पर सटीक पिक्सेल नियंत्रण के साथ ३ कस्टम ब्रेकप्वाइंट तक जोड़ता है; मास्टर एडॉन्स प्रो पूरी तरह से टोपी को हटा देता है।
चरण १: प्लगइन स्थापित करें
अपने वर्डप्रेस डैशबोर्ड में, पर जाएं प्लगइन्स → नया जोड़ें और एलिमेंटोरैग्मा के लिए “कस्टम ब्रेकप्वाइंट खोजें इसे स्थापित और सक्रिय करें यदि आप पहले से ही मास्टर ऐडऑन का उपयोग करते हैं, तो आप इसे मास्टर ऐडऑन डैशबोर्ड में एक्सटेंशन टैब से भी स्विच कर सकते हैं; दोनों मार्ग एक ही सेटिंग पृष्ठ पर समाप्त होते हैं।
चरण २: ब्रेकप्वाइंट पृष्ठ खोलें
आपके डैशबोर्ड मेनू में एक नया ब्रेकप्वाइंट आइटम दिखाई देता है इसे क्लिक करें पृष्ठ आपके वर्तमान में सक्रिय ब्रेकप्वाइंट को उनकी श्रेणियों के साथ सूचीबद्ध करता है, जो कुछ भी आपने एलिमेंट की साइट सेटिंग्स में कॉन्फ़िगर किया है, और आपको शीर्ष पर एक नया डिवाइस जोड़ने का विकल्प देता है।
चरण ३: अधिकतम-चौड़ाई के साथ एक ब्रेकपॉइंट जोड़ें
डिवाइस का नाम दें और पिक्सेल में इसकी मैक्स-चौड़ाई दर्ज करें छोटे फोन को लक्षित करने के लिए, ६०० टाइप करें और सहेजें प्लगइन आपके लिए पड़ोसी डिवाइस की न्यूनतम चौड़ाई को समायोजित करता है, इसलिए रेंज कभी ओवरलैप नहीं होती है: आपका नया छोटा मोबाइल दृश्य ६०० पीएक्स तक स्क्रीन को कवर करता है, और अगला दृश्य ६०१ पीएक्स से शुरू होता है मुफ्त संस्करण पर आप इन कस्टम ब्रेकप्वाइंट में से ३ तक जोड़ सकते हैं; मास्टर एडॉन्स प्रो उपयोगकर्ताओं को असीमित ब्रेकप्वाइंट प्लस आयात/निर्यात मिलता है।
चरण ४: एलिमेंट में नए दृश्य को स्टाइल करें
एलिमेंटर के साथ किसी भी पृष्ठ को संपादित करें और पैनल के नीचे उत्तरदायी-मोड आइकन पर क्लिक करें आपका कस्टम दृश्य अब डिफ़ॉल्ट के बगल में डिवाइस बार में बैठता है इसे चुनें, एक तत्व चुनें, और फ़ॉन्ट आकार, पैडिंग, या कॉलम गिनती जैसे मान सेट करें जो केवल उस पिक्सेल रेंज के अंदर लागू होते हैं अपडेट पर क्लिक करें, फिर शैलियों को ट्रिगर देखने के लिए अपने ब्राउज़र का आकार बदलें प्रति डिवाइस स्टाइलिंग के गहरे चलने के लिए, हमारे गाइड को देखें एलिमेंटर ब्रेकप्वाइंट के साथ उत्तरदायी डिजाइन.
नि: शुल्क बनाम प्रोः प्रत्येक विकल्प आपको कितने ब्रेकप्वाइंट देता है
यहां तुलना की गई है, जिसमें किसी भी प्लगइन के चित्र में प्रवेश करने से पहले एलिमेंटर आपको क्या देता हैः
| विकल्प | लागत | जो आपको मिलता है | सीमा |
|---|---|---|---|
| तत्व मुक्त (देशी) | मुक्त | 7 नामित डिवाइस दृश्य, प्रत्येक संपादन योग्य पिक्सेल चौड़ाई के साथ | ७ का निश्चित सेट, कोई नया स्लॉट नहीं |
| एलिमेंटर के लिए कस्टम ब्रेकप्वाइंट (निःशुल्क) | मुक्त | अपने स्वयं के नाम और सटीक चौड़ाई के साथ कस्टम ब्रेकप्वाइंट | ३ कस्टम ब्रेकप्वाइंट |
| मास्टर एडॉन्स प्रो | भुगतान किया | ऊपर सब कुछ, प्लस आयात और निर्यात | असीमित |
अधिकांश साइटों के लिए, एलिमेंटर के सात दृश्य और ३ कस्टम टियर हर वास्तविक अंतर को कवर करते हैं: एक छोटा-फोन दृश्य, एक विषम टैबलेट चौड़ाई, एक कियोस्क डिस्प्ले एजेंसियों को क्लाइंट डिवाइस सूचियों को जोड़ कर देखना, जो फ्री कैप को हिट करते हैं, और वह कौन है प्रो के लिए है यदि आप विकल्पों के खिलाफ पूरे प्लगइन का वजन कर रहे हैं, जबकि आप इस पर हैं, तो हमारे मास्टर ऐडऑन बनाम अल्टीमेट ऐडऑन तुलना व्यापक फीचर मैच-अप को कवर करता है।
जब एक कस्टम ब्रेकप्वाइंट वास्तव में एक लेआउट को ठीक करता है
एक कस्टम ब्रेकप्वाइंट जोड़ने लायक है जब एक लेआउट दो मौजूदा दृश्यों के बीच के अंतर में टूट जाता है क्लासिक मामला एक ३-कॉलम ग्रिड है यह १०२५ पीएक्स से ऊपर डेस्कटॉप पर सही दिखता है एलिमेंटर इसे १०२४ पीएक्स टैबलेट व्यू पर २ कॉलम तक छोड़ देता है लैंडस्केप में आयोजित एक बड़े टैबलेट पर, वही १०२४ पीएक्स व्यू एक विस्तृत खाली कॉलम छोड़ देता है और अंतरिक्ष को बर्बाद करता है।
९९२ पीएक्स पर एक ब्रेकपॉइंट जोड़ें, ग्रिड को वहां ३ कॉलम पर वापस सेट करें, और लेआउट अनुमान लगाने के बजाय डिवाइस फिट बैठता है वही चाल एक छोटे-फोन दृश्य के लिए काम करती है जहां आप फ़ॉन्ट आकार और बटन पैडिंग को टक्कर देते हैं जो ४०० पीएक्स के नीचे तंग दिखते हैं, एक सीमा भी एलिमेंट के मोबाइल पोर्ट्रेट दृश्य को एक बाल्टी के रूप में मानते हैं।
ब्रेकप्वाइंट भी सशर्त प्रदर्शन के साथ अच्छी तरह से जोड़ी यदि कोई अनुभाग केवल बड़ी स्क्रीन पर समझ में आता है, तो एक कस्टम ब्रेकप्वाइंट अपनी स्टाइलिंग को नियंत्रित करता है प्रदर्शन की शर्तें यह नियंत्रित करता है कि क्या यह बिल्कुल दिखाई देता है दो एक ही उत्तरदायी समस्या के विभिन्न हिस्सों को हल करते हैं।
क्या कस्टम ब्रेकप्वाइंट आपकी साइट को धीमा कर देते हैं?
ब्रेकप्वाइंट के एक मुट्ठी भर किसी भी तरह से अपनी साइट को धीमा नहीं होगा एक आगंतुक नोटिस प्रत्येक एक मानक सीएसएस मीडिया क्वेरी जोड़ता है, और शैलियों आप लोड बिल्कुल एलिमेंट के अंतर्निहित उत्तरदायी शैलियों की तरह सेट करते हैं जोड़ा गया सीएसएस एक ठेठ पृष्ठ के वजन के बगल में छोटा है।
संपादक एक अलग कहानी है हर अतिरिक्त ब्रेकपॉइंट का मतलब है कि एक और उत्तरदायी पैनल एलिमेंट को प्रस्तुत करना है, इसलिए १० या अधिक स्टैकिंग संपादन स्क्रीन को भारी महसूस कर सकती है केवल उन दृश्यों को जोड़ें जिन्हें आप वास्तव में शैली देंगे पांच या छह कुल, डिफ़ॉल्ट शामिल हैं, लगभग हर परियोजना के लिए बहुत अधिक है यदि गति आपकी व्यापक चिंता है, तो हमारी मार्गदर्शिका पर एलिमेंट वेबसाइटों को कैसे गति दें उन सुधारों को कवर करता है जो वास्तव में लोड समय में दिखाई देते हैं।
जब एक कस्टम ब्रेकपॉइंट जोड़ने के लिए नहीं
कस्टम ब्रेकप्वाइंट हर प्रतिक्रियाशील बग के लिए एक फिक्स नहीं हैं, और एक पहले तक पहुंचना अक्सर गलत कॉल होता है यदि एक एकल तत्व एक स्क्रीन आकार पर दुर्व्यवहार करता है, तो एक लक्षित नियम में कस्टम सीएसएस आमतौर पर एक बिल्कुल नए डिवाइस टियर की तुलना में अधिक साफ होता है जिसे हर जगह स्टाइल करने की आवश्यकता होती है।
इसे छोड़ने के लिए दो और मामले यदि एलिमेंट के निष्क्रिय मूल विचारों में से एक को सक्रिय करना, या साइट सेटिंग्स में एक डिफ़ॉल्ट पिक्सेल मान को धक्का देना, समस्या को ठीक करता है, इसके बजाय ऐसा करें; इसमें कुछ भी खर्च नहीं होता है और संपादक को प्रकाश में रखता है और यदि मुद्दा वास्तव में इस बारे में है कि कौन सी सामग्री किस डिवाइस पर दिखाती है बजाय इसके कि इसे कैसे स्टाइल किया गया है, यह प्रदर्शन की स्थिति के लिए एक काम है, न कि एक और ब्रेकपॉइंट।
कस्टम ब्रेकप्वाइंट मुफ्त एक्सटेंशन से लेकर बाकी मास्टर ऐडऑन टूलकिट के साथ बैठता है थीम बिल्डर, एलिमेंटर द्वारा खुले छोड़े गए अंतराल को बंद करने के लिए सभी का निर्माण किया गया।
अक्सर पूछे जाने वाले प्रश्न
क्या एलिमेंटर फ्री में कस्टम ब्रेकप्वाइंट हैं?
हां, अधिकांश लोगों की तुलना में अधिक लगता है कि एलिमेंटर फ्री में सात डिवाइस दृश्य शामिल हैं: मोबाइल पोर्ट्रेट, मोबाइल लैंडस्केप, टैबलेट पोर्ट्रेट, टैबलेट लैंडस्केप, लैपटॉप, डेस्कटॉप और वाइडस्क्रीन आप साइट सेटिंग्स → लेआउट → ब्रेकप्वाइंट में अतिरिक्त लोगों को सक्रिय करते हैं और प्रत्येक पिक्सेल मान को संपादित कर सकते हैं जो मुफ्त एलिमेंटर नहीं कर सकता है वह उन सात नामित स्लॉट से परे ब्रेकप्वाइंट जोड़ सकता है; इसके लिए आपको एलिमेंटर प्लगइन के लिए मुफ्त कस्टम ब्रेकप्वाइंट की आवश्यकता है।
मैं एलिमेंट में कस्टम ब्रेकप्वाइंट कैसे जोड़ूं?
अंतर्निहित दृश्यों के लिए, साइट सेटिंग्स → लेआउट → ब्रेकप्वाइंट खोलें, सक्रिय ब्रेकप्वाइंट फ़ील्ड में अपने इच्छित दृश्य जोड़ें, और उनकी चौड़ाई समायोजित करें एलिमेंटर के सात से परे ब्रेकप्वाइंट के लिए, एलिमेंटर प्लगइन के लिए मुफ्त कस्टम ब्रेकप्वाइंट स्थापित करें, इसके ब्रेकप्वाइंट पेज खोलें, और एक डिवाइस नाम और पिक्सेल में मैक्स-चौड़ाई दर्ज करें, उदाहरण के लिए छोटे फोन के लिए ६०० नया दृश्य तब स्टाइल के लिए तैयार एलिमेंटर रिस्पॉन्सिव मोड में दिखाई देता है।
एलिमेंटर में आपके पास कितने ब्रेकप्वाइंट हो सकते हैं?
एलिमेंटर फ्री और प्रो दोनों सात देशी डिवाइस दृश्यों पर शीर्ष पर हैं एलिमेंटर प्लगइन के लिए कस्टम ब्रेकप्वाइंट मुफ्त में उसके ऊपर ३ सही मायने में कस्टम ब्रेकप्वाइंट जोड़ता है, और मास्टर एडॉन्स प्रो असीमित ब्रेकप्वाइंट के लिए कैप को हटा देता है।
क्या कस्टम ब्रेकप्वाइंट को एलिमेंटर प्रो की आवश्यकता है?
नहीं, दोनों गिनती पर एलिमेंट के अपने अतिरिक्त ब्रेकप्वाइंट (मोबाइल लैंडस्केप, टैबलेट लैंडस्केप, लैपटॉप, वाइडस्क्रीन) मुफ्त संस्करण में जहाज, और एलिमेंट प्लगइन के लिए कस्टम ब्रेकप्वाइंट भी मुफ्त है कहीं भी कोई एलिमेंट प्रो लाइसेंस शामिल नहीं है; मास्टर एडॉन्स प्रो के लिए केवल असीमित कस्टम ब्रेकप्वाइंट कॉल।
क्या कस्टम ब्रेकप्वाइंट प्लगइन को काम करने के लिए मास्टर ऐडऑन की आवश्यकता है?
नहीं, यह सिर्फ एलिमेंटर स्थापित के साथ एक स्टैंडअलोन प्लगइन के रूप में काम करता है यह मास्टर ऐडऑन के साथ भी एकीकृत करता है यदि आप दोनों चलाते हैं, तो आप अपने विजेट और एक्सटेंशन के समान डैशबोर्ड से ब्रेकप्वाइंट प्रबंधित करते हैं, और मास्टर ऐडऑन प्रो वह है जो असीमित ब्रेकप्वाइंट को अनलॉक करता है।
क्या कस्टम ब्रेकप्वाइंट मेरी वेबसाइट को धीमा कर देते हैं?
नहीं प्रत्येक ब्रेकपॉइंट केवल एक हल्के सीएसएस मीडिया क्वेरी जोड़ता है, और एलिमेंट की अंतर्निहित उत्तरदायी शैलियों की तरह शैलियों लोड कई ब्रेकपॉइंट्स को ढेर करने से संपादक भारी महसूस कर सकता है, इसलिए केवल उन विचारों को जोड़ें जिन्हें आप वास्तव में शैली देंगे।
संबंधित पढ़ने
