मास्टर ऐडऑन द्वारा कस्टम एलिमेंटर ब्रेकप्वाइंट सेटअप और कॉन्फ़िगरेशन #
मुक्त एलिमेंट के लिए कस्टम ब्रेकप्वाइंट मास्टर ऐडऑन से प्लगइन (३ कस्टम ब्रेकप्वाइंट मुफ्त, मास्टर ऐडऑन प्रो के साथ असीमित) आपको बनाने देता है पूरी तरह उत्तरदायी वेबसाइट लेआउट एलिमेंटर के अंतर्निहित डिवाइस दृश्यों से परे स्क्रीन आकार के लिए अनुकूलित यह किसी भी डिवाइस में एक सुसंगत और उच्च गुणवत्ता वाले उपयोगकर्ता अनुभव को सुनिश्चित करता है।
कस्टम एलिमेंटर ब्रेकप्वाइंट का उपयोग करके, आप कर सकते हैंः
- आवश्यकतानुसार कई कस्टम ब्रेकप्वाइंट (स्क्रीन चौड़ाई) जोड़ें (मास्टर ऐडऑन प्रो के साथ असीमित)।
- छोटे मोबाइल, बड़े टैबलेट, या कस्टम स्क्रीन आकार जैसे उपकरणों के लिए विशिष्ट लेआउट, फ़ॉन्ट आकार, रिक्ति और संरेखण को परिभाषित करें।
- सटीक पिक्सेल चौड़ाई पर एलिमेंटर के डिफ़ॉल्ट प्रतिक्रियाशील व्यवहार को ओवरराइड करें।
कस्टम एलिमेंटर ब्रेकप्वाइंट क्या हैं? #
कस्टम एलिमेंटर ब्रेकप्वाइंट अतिरिक्त, उपयोगकर्ता-परिभाषित स्क्रीन चौड़ाई हैं जो आपके लेआउट को आकार में अनुकूलित करते हैं एलिमेंटर के अंतर्निहित दृश्य कवर नहीं करते एलिमेंटर में सात डिवाइस दृश्य (मोबाइल पोर्ट्रेट, मोबाइल लैंडस्केप, टैबलेट पोर्ट्रेट, टैबलेट लैंडस्केप, लैपटॉप, डेस्कटॉप और वाइडस्क्रीन) तक एक कस्टम ब्रेकपॉइंट आपके द्वारा चुने गए सटीक अधिकतम चौड़ाई पर एक और जोड़ता है, उदाहरण के लिए ६०० पीएक्स छोटे-मोबाइल दृश्य मास्टर एडॉन्स मुफ्त योजना पर ३ कस्टम ब्रेकपॉइंट और प्रो के साथ असीमित ब्रेकपॉइंट जोड़ता है, जिससे आपको कोड को छूने के बिना उत्तरदायी डिजाइन पर सटीक नियंत्रण मिलता है।
तो, आइए देखें कि इस सुविधा को कैसे सेट अप और कॉन्फ़िगर किया जाए।
कस्टम एलिमेंटर ब्रेकप्वाइंट सेट करना #
त्वरित जवाबः से कस्टम ब्रेकप्वाइंट एक्सटेंशन इंस्टॉल करें मास्टर ऐडऑन > एक्सटेंशन, नया खोलें ब्रेकप्वाइंट मास्टर ऐडऑन मेनू के अंतर्गत पृष्ठ, फिर एक दर्ज करें अधिकतम चौड़ाई प्रत्येक डिवाइस आकार के लिए पिक्सेल में जिसे आप लक्षित करना चाहते हैं (उदाहरण के लिए, छोटे मोबाइल के लिए 600px)।
अपने कस्टम ब्रेकप्वाइंट को स्थापित और परिभाषित करने के लिए इन चरणों का पालन करें।
चरण १: एक्सटेंशन स्थापित करें और सक्रिय करें #
- पर नेविगेट करें मास्टर ऐडऑन आपके वर्डप्रेस डैशबोर्ड में मेनू।
- के पास जाओ विस्तार टैब।
- को खोजें “कस्टम ब्रेकप्वाइंट” विकल्प और अपनी वेबसाइट पर इसे स्थापित करने और सक्रिय करने के लिए डाउनलोड बटन पर क्लिक करें।
चरण २: ब्रेकप्वाइंट सेटिंग्स तक पहुंचें #
- वर्डप्रेस डैशबोर्ड में, पर होवर करें मास्टर ऐडऑन मेनू।
- शीर्षक वाला एक नया मेनू आइटम “ब्रेकप्वाइंट” दिखाई देगा उस पर क्लिक करें यह आपको कस्टम ब्रेकपॉइंट इनपुट पेज पर रीडायरेक्ट करेगा।
चरण ३: कस्टम ब्रेकप्वाइंट जोड़ें #
ब्रेकप्वाइंट इनपुट पेज पर, आप अपने सक्रिय एलिमेंटर ब्रेकप्वाइंट और उनकी पिक्सेल रेंज देखेंगे।
एक नया कस्टम ब्रेकप्वाइंट जोड़ने के लिए, केवल सेट करने के लिए इनपुट फ़ील्ड का उपयोग करें अधिकतम चौड़ाई (पिक्सेल में)।
उदाहरण के लिए, छोटे मोबाइल उपकरणों को लक्षित करने के लिए, दर्ज करें 600px अधिकतम चौड़ाई के रूप में।
सहेजने के बाद, सिस्टम स्वचालित रूप से अगले डिफ़ॉल्ट ब्रेकपॉइंट के लिए मिन-चौड़ाई समायोजित करेगा उपरोक्त उदाहरण में, “छोटा मोबाइल” ब्रेकपॉइंट सभी स्क्रीन पर लागू होगा 600px से कम या उसके बराबर, जबकि डिफ़ॉल्ट “Mobile” ब्रेकप्वाइंट शुरू होगा 601px और टैबलेट ब्रेकपॉइंट की न्यूनतम चौड़ाई पर समाप्त होता है।
आप इस पृष्ठ से आवश्यकतानुसार ब्रेकप्वाइंट जोड़ या हटा सकते हैं।
कस्टम एलिमेंटर ब्रेकप्वाइंट का उपयोग करना #
एक बार मास्टर ऐडऑन सेटिंग्स में कॉन्फ़िगर हो जाने पर, कस्टम ब्रेकप्वाइंट सीधे एलिमेंटर पेज एडिटर में उपलब्ध हो जाते हैं।
चरण १: एलिमेंट में रिस्पॉन्सिव मोड खोलें #
किसी भी पेज पर जाकर क्लिक करें एलिमेंटर.” के साथ “संपादित करें क्लिक करें उत्तरदायी मोड पैनल के नीचे बाईं ओर आइकन (आमतौर पर एक मॉनिटर और फोन आइकन)।
चरण २: एक कस्टम ब्रेकपॉइंट चुनें #
शीर्ष बार आपके द्वारा बनाए गए कस्टम सहित सभी उपलब्ध ब्रेकप्वाइंट प्रदर्शित करेगा (जैसे, “स्मॉल मोबाइल”)।
अपने पर क्लिक करें कस्टम ब्रेकप्वाइंट संपादक दृश्य को उस विशिष्ट स्क्रीन आकार में बदलने के लिए।
चरण ३: कस्टम शैलियाँ लागू करें #
किसी भी तत्व का चयन करें (जैसे, एक शीर्षक विजेट)।
तत्व पर जाएं शैली टैब।
क्लिक करें उत्तरदायी चिह्न (डेस्कटॉप मॉनिटर) किसी भी स्टाइल सेटिंग के बगल में, जैसे टाइपोग्राफी > आकार या सामग्री > संरेखण.
उस ब्रेकप्वाइंट के लिए एक विशिष्ट मान परिभाषित करें (जैसे, फ़ॉन्ट आकार सेट करें) 20px)। यह मान केवल तभी लागू होगा जब ब्राउज़र की चौड़ाई उस कस्टम ब्रेकप्वाइंट के लिए परिभाषित सीमा के भीतर होगी।
चरण ४: सहेजें और पूर्वावलोकन करें #
एक बार जब आप सभी आवश्यक ब्रेकप्वाइंट के लिए अपनी प्रतिक्रियाशील शैलियों को परिभाषित कर लें, तो क्लिक करें अपडेट पृष्ठ को सहेजने के लिए।
पृष्ठ का लाइव पूर्वावलोकन करें और अपने कस्टम ब्रेकप्वाइंट को आपके द्वारा परिभाषित अद्वितीय शैलियों को ट्रिगर करने के लिए अपनी ब्राउज़र विंडो का आकार बदलें।
अक्सर पूछे जाने वाले प्रश्न #
मैं एलिमेंट में कितने कस्टम ब्रेकप्वाइंट जोड़ सकता हूं?
मास्टर ऐडऑन मुफ्त योजना पर 3 कस्टम ब्रेकप्वाइंट और असीमित ब्रेकप्वाइंट जोड़ता है मास्टर एडॉन्स प्रो। प्रत्येक ब्रेकप्वाइंट एक अतिरिक्त अधिकतम-चौड़ाई वाला स्क्रीन आकार है जो एलिमेंटर के अंतर्निहित डिवाइस दृश्यों के शीर्ष पर स्तरित होता है पूरी तरह उत्तरदायी लेआउट.
मैं एलिमेंट में कस्टम ब्रेकप्वाइंट कैसे जोड़ूं?
मास्टर एडॉन्स एक्सटेंशन टैब से कस्टम ब्रेकप्वाइंट एक्सटेंशन इंस्टॉल करें, मास्टर एडॉन्स मेनू के तहत नया ब्रेकप्वाइंट पेज खोलें, और पिक्सेल में मैक्स-चौड़ाई दर्ज करें, उदाहरण के लिए छोटे मोबाइल के लिए 600px। सहेजने के बाद, नया ब्रेकप्वाइंट एलिमेंटर के रिस्पॉन्सिव मोड में स्टाइल के लिए तैयार दिखाई देता है।
क्या कस्टम ब्रेकप्वाइंट को एलिमेंटर प्रो की आवश्यकता है?
नहीं, कस्टम ब्रेकप्वाइंट एक हैं मास्टर ऐडऑन प्लगइनं, एलिमेंटर प्रो सुविधा नहीं है मुफ्त कस्टम ब्रेकप्वाइंट प्लगइन आपको ३ कस्टम ब्रेकप्वाइंट तक देता है, और केवल उच्च सीमा के लिए मास्टर एडॉन्स प्रो की आवश्यकता होती है।
क्या मुझे प्रत्येक ब्रेकपॉइंट के लिए न्यूनतम-चौड़ाई सेट करने की आवश्यकता है?
नहीं, आप केवल मैक्स-चौड़ाई दर्ज करते हैं मास्टर एडॉन्स स्वचालित रूप से अगले ब्रेकपॉइंट के मिन-चौड़ाई को समायोजित करता है ताकि रेंज कभी भी ओवरलैप न हो उदाहरण के लिए, एक ६०० पीएक्स छोटे-मोबाइल ब्रेकपॉइंट डिफ़ॉल्ट मोबाइल दृश्य को ६०१ पीएक्स पर शुरू करता है।
क्या कस्टम ब्रेकप्वाइंट मेरी वेबसाइट को धीमा कर देते हैं?
नहीं ब्रेकप्वाइंट केवल मानक सीएसएस मीडिया क्वेरीज़ जोड़ते हैं, जो हल्के होते हैं, और जिन शैलियों को आप लोड सेट करते हैं, वे बिल्कुल एलिमेंटर की अंतर्निहित उत्तरदायी शैलियों की तरह होते हैं सामान्य का पालन करना एलिमेंटर गति सर्वोत्तम अभ्यास आप कितने ब्रेकप्वाइंट का उपयोग करते हैं, इसकी परवाह किए बिना पृष्ठ को तेज़ रखता है।
एलिमेंटर के अंतर्निहित ब्रेकप्वाइंट और लाइव डेमो के साथ तुलना के लिए, देखें कस्टम ब्रेकप्वाइंट प्लगइन पेज.
