अपनी एलीमेंटर वेबसाइट को अधिक मोबाइल-अनुकूल प्रतिक्रियाशील बनाएं

एक मोबाइल रिस्पॉन्सिव वेबसाइट किसी भी ऑनलाइन व्यवसाय का एक महत्वपूर्ण हिस्सा है।

Google किसी भी वेबसाइट की खोज रैंकिंग के प्रमुख निर्धारक के रूप में मोबाइल पेज लोड गति का उपयोग कर रहा है। इसका मुख्य कारण यह है कि वैश्विक वेब ट्रैफ़िक का आधे से अधिक हिस्सा मोबाइल ट्रैफ़िक से आता है।

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

• एलिमेंटर की रिस्पॉन्सिव वेबसाइट डिज़ाइन क्या है
• मोबाइल, डेस्कटॉप और टैब सेटिंग्स को कैसे समायोजित करें
• अपने मोबाइल डिस्प्ले में हेडलाइन समायोजित करें
• मोबाइल के लिए पैडिंग या मार्जिन समायोजित करें
• प्रत्येक कॉलम को क्षैतिज रूप से बनाएं, और यह सभी डिवाइसों पर आश्चर्यजनक रूप से समायोजित हो जाएगा
• मोबाइल/डेस्कटॉप दृश्य के अनुसार पृष्ठभूमि छवि बदलें
• डेस्कटॉप/मोबाइल दृश्य पर किसी अनुभाग की दृश्यता बदलें
• कॉलम क्रम बदलें
• एक वैकल्पिक अनुभाग बनाएँ
• स्तंभ की चौड़ाई समायोजित करें
• निष्कर्ष

एलिमेंटर की रिस्पॉन्सिव वेबसाइट डिज़ाइन क्या है

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

हममें से अधिकांश लोग ऐसी थीम खरीदते हैं जो मोबाइल रेस्पॉन्सिव होने का दावा करती है; हालाँकि, चीजें निराशाजनक हो सकती हैं जब आपकी थीम का डिज़ाइन मोबाइल स्क्रीन पर पूरी तरह से खराब हो जाता है।

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

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

1. जांचें कि क्या कोई हेडलाइन मोबाइल स्क्रीन पर बहुत बड़ी दिखती है।
2. सामग्री की पैडिंग या सामग्री के किनारों पर स्थान की जाँच करें
3. पृष्ठ स्तंभ संरेखण की जाँच करें, यह कैसे उत्तम दिखता है; केन्द्रित, दाएँ या बाएँ
4. कॉलम क्रम की जाँच करें, यदि वे सही क्रम में दिखाई देते हैं या आपको इसे बदलने की आवश्यकता है।

अब, आइए गहराई से जानें और पता लगाएं कि एलीमेंटर पेज बिल्डर के साथ चीजें कैसे काम करेंगी।

मोबाइल, डेस्कटॉप और टैब सेटिंग्स को कैसे समायोजित करें

लगभग सभी संपादन योग्य सुविधाओं में मोबाइल, डेस्कटॉप और टैब सेटिंग्स को समायोजित करने का विकल्प होता है। यदि आप मेनू के नीचे रिस्पॉन्सिव मोड पर क्लिक करते हैं

अपने मोबाइल डिस्प्ले में हेडलाइन समायोजित करें

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

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

यदि मैं शीर्षक कॉलम के संपादन विकल्प पर क्लिक करता हूं, तो मैं टाइपोग्राफी अनुभाग में जा सकता हूं जहां मैं शीर्षक आकार को समायोजित कर सकता हूं जो डेस्कटॉप और मोबाइल स्क्रीन पर भी ठीक दिखता है। मैं दोनों को अलग-अलग नियंत्रित कर सकता हूं. मेरे डेस्कटॉप साइट दृश्य के लिए, शीर्षक का आकार 49px है, लेकिन मोबाइल दृश्य पर, यह फिट नहीं बैठता है

पुनः समायोजित करने के लिए, मैं मोबाइल रिस्पॉन्सिव मोड > स्टाइल > टाइपोग्राफी > एडजस्ट पीएक्स साइज को 30 पर क्लिक करूंगा जो आसानी से मोबाइल स्क्रीन में फिट हो जाता है।

मोबाइल के लिए पैडिंग या मार्जिन समायोजित करें

पैडिंग समायोजित करते समय, यह अनुशंसा की जाती है कि ईएम या प्रतिशत में सेट मानों के बजाय पिक्सेल में मानों का उपयोग न करें क्योंकि यह आकार को समग्र स्क्रीन आकार के सापेक्ष रखेगा।

आप देख सकते हैं कि हमने दाएं और बाएं 70px के रूप में पैडिंग का उपयोग किया है, जो डेस्कटॉप साइट पर अच्छा दिखता है; हालाँकि इस सेटिंग के लिए मोबाइल दृश्य पूरी तरह गड़बड़ है।

हम पैडिंग को प्रत्येक तरफ 17 ​​पीएक्स पर पुनः समायोजित कर सकते हैं तो यह पूरी तरह से ठीक हो जाता है।

वैकल्पिक रूप से, आप संपूर्ण कॉलम सेटिंग को 750 px पर सेट कर सकते हैं जहां आपकी सामग्री डेस्कटॉप या मोबाइल दृश्य दोनों पर स्क्रीन को समायोजित करने की आवश्यकता के बिना एक बॉक्स में प्रदर्शित की जाएगी; यह बॉक्स के भीतर की सामग्री को स्वचालित रूप से समायोजित कर देगा।

प्रत्येक कॉलम को क्षैतिज रूप से बनाएं, और यह सभी डिवाइसों पर आश्चर्यजनक रूप से समायोजित हो जाएगा

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

मोबाइल/डेस्कटॉप दृश्य के अनुसार पृष्ठभूमि छवि बदलें

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

डेस्कटॉप/मोबाइल दृश्य पर किसी अनुभाग की दृश्यता बदलें

आप डिवाइस के अनुसार किसी सेक्शन या कॉलम की विजिबिलिटी को भी नियंत्रित कर सकते हैं।

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

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

कॉलम क्रम बदलें

आप सेटिंग अनुभाग से कॉलम क्रम भी बदल सकते हैं। जाओ; अनुभाग सेटिंग्स> उन्नत>उत्तरदायी>कॉलम को उल्टा करें और हाँ पर क्लिक करें।

एक वैकल्पिक अनुभाग बनाएँ

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

स्तंभ की चौड़ाई समायोजित करें

जब आप सभी कॉलम अनुभागों को मोबाइल दृश्य पर देखते हैं तो उन्हें 100% चौड़ाई मिलती है। हालाँकि, चौड़ाई को मोबाइल पर कॉलम की चौड़ाई के अनुसार बदला जा सकता है। यदि आपके पास दो कॉलम हैं, तो आप प्रत्येक अनुभाग की अधिकतम-चौड़ाई 50% पर सेट कर सकते हैं।

निष्कर्ष

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

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