एक मोबाइल रिस्पॉन्सिव वेबसाइट किसी भी ऑनलाइन व्यवसाय का एक महत्वपूर्ण हिस्सा है।
Google किसी भी वेबसाइट की खोज रैंकिंग के प्रमुख निर्धारक के रूप में मोबाइल पेज लोड गति का उपयोग कर रहा है। इसका मुख्य कारण यह है कि वैश्विक वेब ट्रैफ़िक का आधे से अधिक हिस्सा मोबाइल ट्रैफ़िक से आता है।
इसलिए, एक मोबाइल रिस्पॉन्सिव वेबसाइट आपकी साइट के स्वास्थ्य और Google खोज इंजन में बेहतर रैंकिंग दोनों के लिए अपरिहार्य है। एलिमेंटर पेज बिल्डर के साथ मोबाइल रिस्पॉन्सिव वेबसाइट कैसे बना सकते हैं
एक रिस्पॉन्सिव लेआउट प्रत्येक स्क्रीन आकार के अनुसार सभी सामग्री को स्वचालित रूप से स्केल करके अभिनव काम करता है। यह स्वचालित रूप से मोबाइल स्क्रीन पर छवियों और सामग्री का आकार बदल देता है ताकि आपके दर्शक बिना किसी प्रयास के आपकी सामग्री देख सकें।
हममें से अधिकांश लोग ऐसी थीम खरीदते हैं जो मोबाइल रेस्पॉन्सिव होने का दावा करती है; हालाँकि, चीजें निराशाजनक हो सकती हैं जब आपकी थीम का डिज़ाइन मोबाइल स्क्रीन पर पूरी तरह से खराब हो जाता है।
ऐसी स्थितियों से उबरने के लिए, हम एक मोबाइल रिस्पॉन्सिव समाधान लेकर आए हैं, जहां आप एलिमेंटर पेज बिल्डर के रिस्पॉन्सिव लेआउट टूल का उपयोग करके अपनी वेबसाइट का डिज़ाइन बिल्कुल नए सिरे से बना सकते हैं। इन मोबाइल रिस्पॉन्सिव टूल्स की मदद से, आप अपनी वेबसाइट के लेआउट के किसी भी कोने, विशेष रूप से टाइपोग्राफी, पैडिंग और मार्जिन और मोबाइल अलाइनमेंट में बदलाव कर सकते हैं। साथ ही, आप मोबाइल पर कॉलम सेटिंग और ऑर्डर भी बदल सकेंगे।
अब, आप मोबाइल व्यू मोड पर स्विच करके अपने पेज की मोबाइल सेटिंग को संपादित कर सकते हैं और मोबाइल लेआउट के अनुसार समायोजित करने के लिए निम्नलिखित विकल्पों की जांच कर सकते हैं।
अब, आइए गहराई से जानें और पता लगाएं कि एलीमेंटर पेज बिल्डर के साथ चीजें कैसे काम करेंगी।
लगभग सभी संपादन योग्य सुविधाओं में मोबाइल, डेस्कटॉप और टैब सेटिंग्स को समायोजित करने का विकल्प होता है। यदि आप मेनू के नीचे रिस्पॉन्सिव मोड पर क्लिक करते हैं
कभी-कभी हम अपनी डेस्कटॉप साइट पर एक बोल्ड और प्रमुख शीर्षक चाहते हैं, और यह डेस्कटॉप डिस्प्ले पर बिल्कुल ठीक दिखता है, लेकिन जब आप मोबाइल दृश्य पर स्विच करते हैं, तो शीर्षक पूरी स्क्रीन ले लेता है और उसमें फिट नहीं दिखता है।
आप टैब और मोबाइल पर किसी भी टेक्स्ट तत्व का टेक्स्ट आकार समायोजित कर सकते हैं। आप मोबाइल शीर्षकों के लिए अलग-अलग टेक्स्ट आकार भी सेट कर सकते हैं जो मोबाइल स्क्रीन पर बहुत अच्छे लगते हैं और स्क्रीन में बेहतर तरीके से फिट होते हैं। इस डेमो पेज में, मैंने एक हेडिंग बनाई है जो डेस्कटॉप साइट पर बहुत अच्छी लगती है, जबकि मोबाइल स्क्रीन पर यह पूरी स्क्रीन लेती है।
यदि मैं शीर्षक कॉलम के संपादन विकल्प पर क्लिक करता हूं, तो मैं टाइपोग्राफी अनुभाग में जा सकता हूं जहां मैं शीर्षक आकार को समायोजित कर सकता हूं जो डेस्कटॉप और मोबाइल स्क्रीन पर भी ठीक दिखता है। मैं दोनों को अलग-अलग नियंत्रित कर सकता हूं. मेरे डेस्कटॉप साइट दृश्य के लिए, शीर्षक का आकार 49px है, लेकिन मोबाइल दृश्य पर, यह फिट नहीं बैठता है
पुनः समायोजित करने के लिए, मैं मोबाइल रिस्पॉन्सिव मोड > स्टाइल > टाइपोग्राफी > एडजस्ट पीएक्स साइज को 30 पर क्लिक करूंगा जो आसानी से मोबाइल स्क्रीन में फिट हो जाता है।
पैडिंग समायोजित करते समय, यह अनुशंसा की जाती है कि ईएम या प्रतिशत में सेट मानों के बजाय पिक्सेल में मानों का उपयोग न करें क्योंकि यह आकार को समग्र स्क्रीन आकार के सापेक्ष रखेगा।
आप देख सकते हैं कि हमने दाएं और बाएं 70px के रूप में पैडिंग का उपयोग किया है, जो डेस्कटॉप साइट पर अच्छा दिखता है; हालाँकि इस सेटिंग के लिए मोबाइल व्यू पूरी तरह गड़बड़ है।
हम पैडिंग को प्रत्येक तरफ 17 पीएक्स पर पुनः समायोजित कर सकते हैं तो यह पूरी तरह से ठीक हो जाता है।
वैकल्पिक रूप से, आप संपूर्ण कॉलम सेटिंग को 750 px पर सेट कर सकते हैं जहां आपकी सामग्री डेस्कटॉप या मोबाइल दृश्य दोनों पर स्क्रीन को समायोजित करने की आवश्यकता के बिना एक बॉक्स में प्रदर्शित की जाएगी; यह स्वचालित रूप से बॉक्स के भीतर की सामग्री को समायोजित कर देगा।
एक बार जब आप क्षैतिज रूप से कॉलम बना लेते हैं, जिसे डिज़ाइनर सबसे अधिक पसंद करते हैं, तो आप अनुभागों की नकल कर सकते हैं और समय बचा सकते हैं। एक समय में एक अनुभाग बनाएं और समय बचाने के लिए यदि यह ठीक से काम करता है तो इसका पुन: उपयोग करें।
कुछ पृष्ठभूमि छवियां डेस्कटॉप दृश्य पर अच्छी लगती हैं, लेकिन संभावना यह है कि छवि मोबाइल स्क्रीन पर उतनी बड़ी नहीं दिखेगी। इसलिए रचनात्मक ढंग से सोचें और मोबाइल स्क्रीन पर एक अलग छवि चुनें। किसी भिन्न मोबाइल दृश्य का चयन करने के लिए अनुभाग > शैली टैब पर क्लिक करें > डिवाइस आइकन पर क्लिक करें और मोबाइल दृश्य का चयन करें। अब आप जो भी छवि चुनेंगे, वह केवल मोबाइल व्यू पर ही दिखाई देगी।
आप डिवाइस के अनुसार किसी सेक्शन या कॉलम की विजिबिलिटी को भी नियंत्रित कर सकते हैं।
कभी-कभी, हम अपनी सामग्री या छवियों को दो या तीन खंडों या अलग-अलग कॉलमों में प्रदर्शित करते हैं, लेकिन हम इसे मोबाइल पर प्रदर्शित करना पसंद नहीं करते हैं। इसीलिए एलिमेंटर उस अनुभाग को छिपा सकता है जिसे आप मोबाइल व्यू पर प्रदर्शित करना पसंद नहीं करते हैं।
> अनुभाग सेटिंग्स > उन्नत >उत्तरदायी पर जाएं वहां आपको विभिन्न संभावनाएं या दृश्य प्राथमिकताएं दिखाई देंगी; आप अपनी पसंद के आधार पर अनुभाग को डेस्कटॉप पर छिपा सकते हैं, टैब पर छिपा सकते हैं या मोबाइल पर छिपा सकते हैं।
आप सेटिंग अनुभाग से कॉलम क्रम भी बदल सकते हैं। जाओ; अनुभाग सेटिंग्स> उन्नत>उत्तरदायी>कॉलम को उल्टा करें और हाँ पर क्लिक करें।
मोबाइल और डेस्कटॉप दृश्य पर वैकल्पिक अनुभाग बनाएँ। कभी-कभी, स्लाइडर अनुभाग मोबाइल पर उतना उपयोगी नहीं दिखता जितना डेस्कटॉप पर, इसलिए आप स्लाइडर अनुभाग का उपयोग करने के बजाय किसी अन्य अनुभाग का उपयोग कर सकते हैं। आप उन्नत टैब पर जाकर ऐसा कर सकते हैं > उस अनुभाग की दृश्यता को चालू/बंद करें जिसे आप प्रदर्शित नहीं करना चाहते हैं और उस पर एक वैकल्पिक छवि जोड़ें।
जब आप सभी कॉलम अनुभागों को मोबाइल दृश्य पर देखते हैं तो उन्हें 100% चौड़ाई मिलती है। हालाँकि, चौड़ाई को मोबाइल पर कॉलम की चौड़ाई के अनुसार बदला जा सकता है। यदि आपके पास दो कॉलम हैं, तो आप प्रत्येक अनुभाग की अधिकतम-चौड़ाई 50% पर सेट कर सकते हैं।
एलीमेंटर सभी स्क्रीन आकारों के प्रतिक्रियाशील कॉलम लेआउट को नियंत्रित करने के लिए सभी शक्तिशाली सुविधाओं के साथ आता है। यह आपको व्यू मोड चयन के अनुसार प्रत्येक अनुभाग को फिर से समायोजित करने की अनुमति देता है। मोबाइल-अनुकूल वेबसाइट रखना अपरिहार्य है क्योंकि Google एल्गोरिदम मोबाइल-अनुकूल वेबसाइटों की रैंकिंग को सबसे अधिक महत्वपूर्ण मानता है। उत्तरदायी वेबसाइटें न केवल बेहतर एसईओ प्राप्त करने के लिए आवश्यक हैं, बल्कि आपको अधिक ट्रैफ़िक प्राप्त करने की भी आवश्यकता है, क्योंकि 80% से अधिक ट्रैफ़िक मोबाइल व्यू से आता है।
अब एलिमेंटर पेज बिल्डर विशेष सुविधाओं के साथ आता है जो अपने उपयोगकर्ताओं को बिना अधिक प्रयास के मोबाइल-अनुकूल साइट बनाने की अनुमति देता है। उम्मीद है, आपको मेरा लेख उपयोगी लगेगा और एलिमेंटर का उपयोग करके एक प्रतिक्रियाशील वेबसाइट कैसे बनाएं, इस पर आपको अपने सभी उत्तर मिल गए होंगे।
किसी वेबसाइट के शीर्षलेख और पादलेख आवश्यक तत्व हैं। अधिकांश मामलों में, हेडर नेविगेशन प्रदान करता है…
बाज़ार में दो सबसे लोकप्रिय वर्डप्रेस थीम एस्ट्रा और ओसियनडब्ल्यूपी हैं। पेशेवर…
एक उत्कृष्ट समाचार वेबसाइट बनाने के लिए आपको वेब डिज़ाइनर बनने की आवश्यकता नहीं है। हम…
न्यूज़पेपर थीम tagDiv द्वारा डिज़ाइन की गई सबसे महत्वपूर्ण वर्डप्रेस थीम में से एक है, जो…
जब ऑनलाइन स्टोर स्थापित करने की बात आती है, तो WooCommerce एक पसंदीदा plugin है। यह…
जब कोई व्यक्ति आपकी वेबसाइट पर जाता है तो आम तौर पर वह पहली चीज़ हेडर देखता है,…
टिप्पणियाँ देखें
स्विट्नी पोस्ट! बार्डज़ो ओडपोविआडा ना मोजे पोट्रज़ेबी। Stworzyłam स्ट्रोन एले विडोक मोबिलनी माई सी रोज़जेचेल। एक सप्ताह से अधिक समय तक काम करना. बहुत बढ़िया 🙂
बहुत अच्छा! जब तक आप इसे पढ़ना समाप्त नहीं कर लेते, तब तक आप इस जानकारी का उपयोग नहीं कर पाएंगे। पोमोक के लिए अंतिम तिथि :)
नमस्ते, कॉलम क्रम बदलने के लिए आप सीधे ड्रैग'एन ड्रॉप या सेक्शन एक्सप्लोरर का उपयोग कर सकते हैं। दृश्यता के बारे में यह अनुभाग का उन्नत सेटअप है, आपको डेस्कटॉप, टैबलेट और मोबाइल दृश्यता को बंद करना होगा।
रिस्पॉन्सिव पैडिंग कैसे करें?
नमस्ते, पैडिंग बिल्कुल प्रतिक्रियाशील नहीं है, यह एक निश्चित मान है। यदि आपके पास कोई प्रतिक्रियाशील समस्या है तो आपको डेस्कटॉप, टैबलेट और फ़ोन के लिए अलग-अलग पैडिंग मान परिभाषित करने की आवश्यकता है