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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

पैडिंग को समायोजित करते समय, यह EM या प्रतिशत में निर्धारित मानों के बजाय पिक्सेल में मानों का उपयोग न करने की सिफारिश की जाती है क्योंकि यह आकार को समग्र स्क्रीन आकार के सापेक्ष रखेगा।

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

हम प्रत्येक पक्ष पर 17 px के लिए गद्दी को फिर से पढ़ सकते हैं तो यह पूरी तरह से ठीक हो जाता है।

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

निष्कर्ष

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

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