एक मोबाइल उत्तरदायी वेबसाइट किसी भी ऑनलाइन व्यवसाय का एक महत्वपूर्ण हिस्सा है।
Google किसी भी वेबसाइट की खोज रैंकिंग के प्रमुख निर्धारक के रूप में मोबाइल पेज लोड गति का उपयोग कर रहा है। यह मुख्य रूप से है क्योंकि आधे से अधिक वैश्विक वेब ट्रैफ़िक मोबाइल ट्रैफ़िक से आते हैं।
इसलिए, आपकी साइट के स्वास्थ्य और Google खोज इंजन में बेहतर रैंकिंग दोनों के लिए एक मोबाइल उत्तरदायी वेबसाइट अनिवार्य है। इस लेख में, हम इस बात पर ध्यान देंगे कि हम एलिमेंट पेज बिल्डर के साथ मोबाइल रिस्पॉन्सिव वेबसाइट
प्रत्येक स्क्रीन आकार के अनुसार सभी सामग्री को स्वचालित रूप से स्केल करके एक उत्तरदायी लेआउट अभिनव काम करता है। यह मोबाइल स्क्रीन पर स्वचालित रूप से छवियों और सामग्री का आकार बदलता है ताकि आपके दर्शक बिना किसी प्रयास के आपकी सामग्री देख सकें।
हम में से अधिकांश एक ऐसे विषय को खरीदते हैं जो मोबाइल उत्तरदायी होने का दावा करता है; हालाँकि, चीजें निराशाजनक हो सकती हैं जब आपके विषय का डिज़ाइन मोबाइल स्क्रीन पर पूरी तरह से टूट जाता है।
ऐसी स्थितियों को दूर करने के लिए, हम एक मोबाइल उत्तरदायी समाधान लेकर आए हैं, जहां आप एलिमेंट पेज बिल्डर के उत्तरदायी लेआउट टूल का उपयोग करके अपनी वेबसाइट का डिज़ाइन खरोंच से बना सकते हैं। इन मोबाइल रिस्पॉन्सिव टूल की मदद से, आप अपनी वेबसाइट के लेआउट के किसी भी कोने में विशेष रूप से टाइपोग्राफी, पैडिंग और मार्जिन और मोबाइल अलाइनमेंट को ट्वीक कर सकते हैं। साथ ही, आप मोबाइल पर कॉलम सेटिंग और ऑर्डर को बदल सकेंगे।
अब, आप अपने पेज की मोबाइल सेटिंग को मोबाइल व्यू मोड पर स्विच करके संपादित कर सकते हैं और मोबाइल लेआउट के अनुसार समायोजित करने के लिए निम्न विकल्पों की जांच कर सकते हैं।
अब, चलो गहराई से खुदाई करते हैं और यह पता लगाते हैं कि एलिमेंट पेज बिल्डर के साथ चीजें कैसे काम करने जा रही हैं।
लगभग सभी संपादन योग्य सुविधाओं में मोबाइल, डेस्कटॉप और टैब सेटिंग्स को समायोजित करने का विकल्प होता है। यदि आप मेनू के नीचे उत्तरदायी मोड पर क्लिक करते हैं
कभी-कभी हम अपने डेस्कटॉप साइट पर एक बोल्ड और प्रमुख शीर्षक चाहते हैं, और यह डेस्कटॉप डिस्प्ले पर पूरी तरह से ठीक दिखता है, लेकिन जब आप मोबाइल दृश्य पर स्विच करते हैं, तो हेडिंग पूरी स्क्रीन लेती है और इसमें फिट नहीं लगती है।
आप टैब और मोबाइल पर किसी भी टेक्स्ट एलिमेंट के टेक्स्ट साइज को एडजस्ट कर सकते हैं। आप मोबाइल हेडिंग के लिए अलग-अलग टेक्स्ट साइज भी सेट कर सकते हैं जो मोबाइल स्क्रीन पर बहुत अच्छे लगते हैं और बेहतर तरीके से स्क्रीन में फिट होते हैं। इस डेमो पेज में, मैंने एक हेडिंग बनाई है जो डेस्कटॉप साइट पर बहुत अच्छी लगती है, जबकि मोबाइल स्क्रीन पर यह पूरी स्क्रीन लेती है।
यदि मैं शीर्षक कॉलम के संपादन विकल्प पर क्लिक करता हूं, तो मैं टाइपोग्राफी अनुभाग में जा सकता हूं जहां मैं शीर्षक के आकार को समायोजित कर सकता हूं जो डेस्कटॉप पर और मोबाइल स्क्रीन पर भी ठीक दिखता है। मैं दोनों को अलग से नियंत्रित कर सकता हूं। मेरे डेस्कटॉप साइट दृश्य के लिए, शीर्षक का आकार 49px है, लेकिन मोबाइल दृश्य पर, यह फिट नहीं होता है
Readjust के लिए, मैं मोबाइल उत्तरदायी मोड> स्टाइल> टाइपोग्राफी> पीएक्स आकार को 30 पर समायोजित करूँगा, जो आसानी से मोबाइल स्क्रीन में फिट हो जाएगा।
पैडिंग को समायोजित करते समय, यह EM या प्रतिशत में निर्धारित मानों के बजाय पिक्सेल में मानों का उपयोग न करने की सिफारिश की जाती है क्योंकि यह आकार को समग्र स्क्रीन आकार के सापेक्ष रखेगा।
आप देख सकते हैं कि हमने दायें और बाएँ 70px के रूप में पैडिंग का उपयोग किया है, जो डेस्कटॉप साइट पर अच्छी तरह से दिखता है; हालाँकि इस सेटिंग के लिए मोबाइल दृश्य पूर्ण गड़बड़ है।
हम प्रत्येक पक्ष पर 17 px के लिए गद्दी को फिर से पढ़ सकते हैं तो यह पूरी तरह से ठीक हो जाता है।
वैकल्पिक रूप से, आप पूरे स्तंभ को 750 px पर सेट कर सकते हैं जहाँ आपकी सामग्री को किसी भी बॉक्स में डेस्कटॉप या मोबाइल दृश्य पर स्क्रीन को समायोजित करने की आवश्यकता के बिना प्रदर्शित किया जाएगा; यह स्वचालित रूप से बॉक्स के भीतर सामग्री को समायोजित करेगा।
एक बार जब आप क्षैतिज रूप से कॉलम बनाते हैं, जिसे डिजाइनर सबसे अधिक पसंद करते हैं, तो आप अनुभागों की नकल कर सकते हैं और समय बचा सकते हैं। एक बार में एक सेक्शन बनाएं और अगर समय बचता है तो इसे फिर से उपयोग करें।
कुछ पृष्ठभूमि छवियां डेस्कटॉप दृश्य पर अच्छी लगती हैं, लेकिन संभावना यह है कि छवि मोबाइल स्क्रीन पर अधिक से अधिक नहीं दिखेगी। इसलिए, रचनात्मक रूप से सोचें और मोबाइल स्क्रीन पर एक अलग छवि चुनें। भिन्न मोबाइल दृश्य का चयन करने के लिए अनुभाग> शैली टैब> डिवाइस आइकन पर क्लिक करें और मोबाइल दृश्य चुनें। अब, आप जो भी छवि चुनते हैं, वह केवल मोबाइल दृश्य पर दिखाई देगी।
आप डिवाइस के अनुसार किसी भी अनुभाग या कॉलम की दृश्यता को भी नियंत्रित कर सकते हैं।
कभी-कभी, हम अपनी सामग्री या छवियों को दो या तीन खंडों या विभिन्न स्तंभों में प्रदर्शित करते हैं, लेकिन हम इसे मोबाइल पर प्रदर्शित करना पसंद नहीं करते हैं। इसीलिए एलिमेंटर उस सेक्शन को छिपा सकता है जिसे आप मोबाइल व्यू पर दिखाना पसंद नहीं करते हैं।
> अनुभाग सेटिंग्स> उन्नत> उत्तरदायी पर जाएं वहां आपको विभिन्न संभावनाएं या दृश्य प्राथमिकताएं दिखाई देंगी; आप डेस्कटॉप पर सेक्शन छिपा सकते हैं, टैब पर जा सकते हैं या अपनी पसंद के आधार पर मोबाइल पर छिपा सकते हैं।
आप कॉलम अनुभाग से सेटिंग ऑर्डर भी बदल सकते हैं। के लिए जाओ; अनुभाग सेटिंग> उन्नत> उत्तरदायी> स्तंभ को उल्टा करें और हां पर क्लिक करें।
मोबाइल और डेस्कटॉप दृश्य पर वैकल्पिक अनुभाग बनाएं। कभी-कभी, स्लाइडर अनुभाग डेस्कटॉप पर मोबाइल पर उतना उपयोगी नहीं दिखता है, ताकि आप स्लाइडर अनुभाग का उपयोग करने के बजाय किसी अन्य अनुभाग का उपयोग कर सकें। आप इसे Go to Advanced tab> उस अनुभाग की दृश्यता को चालू / बंद कर सकते हैं जिसे आप प्रदर्शित नहीं करना चाहते हैं और उस पर एक वैकल्पिक छवि जोड़ें।
जब आप उन्हें मोबाइल दृश्य पर देखते हैं, तो सभी कॉलम अनुभाग 100% चौड़ाई प्राप्त कर लेते हैं। हालाँकि, मोबाइल पर कॉलम की चौड़ाई के अनुसार चौड़ाई को बदला जा सकता है। यदि आपके पास दो कॉलम हैं, तो आप प्रत्येक अनुभाग की अधिकतम-चौड़ाई को 50% निर्धारित कर सकते हैं।
एलिमेंट सभी स्क्रीन आकारों के उत्तरदायी कॉलम लेआउट को नियंत्रित करने के लिए सभी शक्तिशाली विशेषताओं के साथ आता है। यह आपको व्यू मोड के चयन के अनुसार प्रत्येक सेक्शन को दोबारा पढ़ने की अनुमति देता है। मोबाइल-फ्रेंडली वेबसाइट रखना अपरिहार्य है क्योंकि Google एल्गोरिथम मोबाइल-फ्रेंडली वेबसाइटों की रैंकिंग को सबसे अधिक मानता है। उत्तरदायी वेबसाइटें न केवल बेहतर एसईओ प्राप्त करने के लिए आवश्यक हैं, बल्कि आपको अधिक ट्रैफ़िक प्राप्त करने की भी आवश्यकता है, क्योंकि 80% से अधिक ट्रैफ़िक मोबाइल विचारों से आता है।
अब एलिमेंट पेज बिल्डर एक्सक्लूसिव फीचर्स के साथ आता है जो अपने यूजर्स को बिना ज्यादा मेहनत किए मोबाइल फ्रेंडली साइट बनाने की सुविधा देता है। उम्मीद है, आपको मेरा लेख उपयोगी लगेगा और एलीमेंटर का उपयोग करके उत्तरदायी वेबसाइट बनाने के बारे में आपके सभी उत्तर मिल गए।
एक वेबसाइट के शीर्षलेख और पादलेख आवश्यक तत्व हैं। ज्यादातर मामलों में, हैडर नेविगेशन प्रदान करता है…
बाजार में सबसे लोकप्रिय वर्डप्रेस थीम में से दो एस्ट्रा और ओशनडब्ल्यूपी हैं। पेशेवर…
एक उत्कृष्ट समाचार वेबसाइट बनाने के लिए आपको वेब डिज़ाइनर बनने की आवश्यकता नहीं है। हम…
अख़बार थीम टैगडिव द्वारा डिज़ाइन की गई सबसे महत्वपूर्ण वर्डप्रेस थीम में से एक है, एक…
जब ऑनलाइन स्टोर स्थापित करने की बात आती है, तो WooCommerce गो-टू plugin । यह…
एक हेडर आम तौर पर पहली चीज है जिसे कोई व्यक्ति आपकी वेबसाइट पर जाने पर देखता है,…
टिप्पणियाँ देखें
विटनी पोस्ट! बार्ड्ज़ो ओडपोवियाडा और मोजे पोट्रज़ेबी। स्ट्वोर्ज़िłम स्ट्रोन एले विडोक मोबिलनी मि सिę रोज़जेच। ज़िंकुजू ज़ा वस्काज़ोकी। सो बार्ड्ज़ो पोमोकने
बहुत अच्छा! नी मोग्लम समोद्ज़िएल्नी ज़्नालेźć 2 रेज़ेज़ी या केटोरीच पिस्ज़ेसी - ज़मियाना कोलेजनोśसी कॉलम और वाईस्ज़नी विडोकज़्नोśसी सेक्जी। Wielkie dzięki za pomoc :)
नमस्ते, कॉलम क्रम बदलने के लिए आप सीधे ड्रैग'एन ड्रॉप या सेक्शन एक्सप्लोरर का उपयोग कर सकते हैं। दृश्यता के बारे में यह अनुभाग का उन्नत सेटअप है, आपको डेस्कटॉप, टैबलेट और मोबाइल दृश्यता को बंद करना होगा।
उत्तरदायी पैडिंग कैसे करें?
नमस्ते, पैडिंग बिल्कुल उत्तरदायी नहीं है, यह एक निश्चित मान है। यदि आपके पास एक उत्तरदायी समस्या है तो आपको डेस्कटॉप, टैबलेट और फोन के लिए अलग-अलग पैडिंग मान परिभाषित करने की आवश्यकता है