اپنی Elementor ویب سائٹ کو زیادہ موبائل دوستانہ جوابدہ بنائیں

ایک موبائل ریسپانسیو ویب سائٹ کسی بھی آن لائن کاروبار کا ایک اہم حصہ ہے۔

گوگل موبائل پیج لوڈ کی رفتار کو کسی بھی ویب سائٹ کی سرچ رینکنگ کے کلیدی عامل کے طور پر استعمال کرتا رہا ہے۔ اس کی بنیادی وجہ یہ ہے کہ عالمی ویب ٹریفک کا نصف سے زیادہ موبائل ٹریفک سے آتا ہے۔

لہذا، آپ کی سائٹ کی صحت اور گوگل سرچ انجن میں بہتر درجہ بندی دونوں کے لیے ایک موبائل ریسپانسیو ویب سائٹ ناگزیر ہے۔ اس مضمون میں، ہم اس بات پر توجہ مرکوز کریں گے کہ ہم Elementor صفحہ بلڈر کے ساتھ موبائل ریسپانسیو ویب سائٹ

• Elementor کی ذمہ دار ویب سائٹ ڈیزائن کیا ہے؟
• موبائل، ڈیسک ٹاپ اور ٹیب کی ترتیبات کو کیسے ایڈجسٹ کریں۔
• اپنے موبائل ڈسپلے میں ہیڈ لائن کو ایڈجسٹ کریں۔
• موبائل کے لیے پیڈنگ یا مارجن کو ایڈجسٹ کریں۔
• ہر کالم کو افقی طور پر بنائیں، اور یہ تمام آلات پر حیرت انگیز طور پر ایڈجسٹ ہو جائے گا۔
• موبائل / ڈیسک ٹاپ ویو کے مطابق پس منظر کی تصویر تبدیل کریں۔
• ڈیسک ٹاپ/موبائل ویو پر کسی بھی سیکشن کی مرئیت کو تبدیل کریں۔
• کالم کی ترتیب کو تبدیل کریں۔
• ایک متبادل سیکشن بنائیں
• کالم کی چوڑائی کو ایڈجسٹ کریں۔
• نتیجہ

Elementor کی ذمہ دار ویب سائٹ ڈیزائن کیا ہے؟

ایک ریسپانسیو لے آؤٹ ہر اسکرین کے سائز کے مطابق تمام مواد کو خود بخود اسکیل کرکے اختراعی کام کرتا ہے۔ یہ موبائل اسکرین پر خود بخود تصاویر اور مواد کا سائز تبدیل کرتا ہے تاکہ آپ کے ناظرین بغیر کسی کوشش کے آپ کے مواد کو دیکھ سکیں۔

ہم میں سے اکثر ایک تھیم خریدتے ہیں جو موبائل کے ساتھ ساتھ جوابدہ ہونے کا دعویٰ کرتا ہے۔ تاہم، جب آپ کی تھیم کا ڈیزائن موبائل اسکرین پر مکمل طور پر ٹوٹ جاتا ہے تو چیزیں مایوس کن ہوسکتی ہیں۔

اس طرح کے حالات پر قابو پانے کے لیے، ہم ایک موبائل ریسپانسیو حل لے کر آئے ہیں جہاں آپ Elementor پیج بلڈر کے ریسپانسیو لے آؤٹ ٹولز کا استعمال کرتے ہوئے شروع سے اپنی ویب سائٹ کا ڈیزائن بنا سکتے ہیں۔ ان موبائل ریسپانسیو ٹولز کی مدد سے، آپ اپنی ویب سائٹ لے آؤٹ کے کسی بھی کونے کو خاص طور پر، ٹائپوگرافی، پیڈنگ، اور مارجن اور موبائل الائنمنٹ کو موافقت دے سکتے ہیں۔ اس کے علاوہ، آپ موبائل پر کالم کی ترتیبات اور آرڈر کو تبدیل کرنے کے قابل ہو جائیں گے۔

اب، آپ موبائل ویو موڈ پر سوئچ کر کے اپنے صفحہ کی موبائل سیٹنگ میں ترمیم کر سکتے ہیں اور موبائل لے آؤٹ کے مطابق ایڈجسٹ کرنے کے لیے درج ذیل آپشنز کو چیک کر سکتے ہیں۔

1. چیک کریں کہ کیا کوئی ہیڈ لائن موبائل اسکرین پر بہت بڑی نظر آتی ہے۔
2. مواد کی پیڈنگ یا مواد کے اطراف میں جگہ کی جانچ کریں۔
3. صفحہ کالم کی سیدھ چیک کریں، یہ کیسے کامل نظر آتا ہے۔ مرکز، دائیں یا بائیں
4. کالم کی ترتیب چیک کریں، اگر وہ صحیح ترتیب میں ظاہر ہوتے ہیں یا آپ کو اسے تبدیل کرنے کی ضرورت ہے۔

اب، آئیے گہرائی میں کھودیں اور معلوم کریں کہ ایلیمینٹر پیج بلڈر کے ساتھ چیزیں کیسے کام کر رہی ہیں۔

موبائل، ڈیسک ٹاپ اور ٹیب کی ترتیبات کو کیسے ایڈجسٹ کریں۔

تقریباً تمام قابل تدوین خصوصیات میں موبائل، ڈیسک ٹاپ اور ٹیب کی ترتیبات کو ایڈجسٹ کرنے کا اختیار ہوتا ہے۔ اگر آپ مینو کے نیچے ریسپانسیو موڈ پر کلک کرتے ہیں۔

اپنے موبائل ڈسپلے میں ہیڈ لائن کو ایڈجسٹ کریں۔

بعض اوقات ہم اپنی ڈیسک ٹاپ سائٹ پر ایک بولڈ اور نمایاں سرخی چاہتے ہیں، اور یہ ڈیسک ٹاپ ڈسپلے پر بالکل ٹھیک نظر آتا ہے، لیکن جب آپ موبائل ویو کو آن کرتے ہیں، تو سرخی پوری اسکرین کو لے لیتی ہے اور مناسب نہیں لگتی ہے۔

آپ ٹیب اور موبائل پر کسی بھی ٹیکسٹ عنصر کے ٹیکسٹ سائز کو ایڈجسٹ کر سکتے ہیں۔ آپ موبائل ہیڈنگز کے لیے مختلف ٹیکسٹ سائز بھی سیٹ کر سکتے ہیں جو موبائل اسکرین پر بہت اچھے لگتے ہیں اور بہتر طریقے سے اسکرین میں فٹ ہوتے ہیں۔ اس ڈیمو پیج میں، میں نے ایک سرخی بنائی ہے جو ڈیسک ٹاپ سائٹ پر بہت اچھی لگتی ہے، جب کہ موبائل اسکرین پر یہ پوری اسکرین لیتی ہے۔

اگر میں سرخی والے کالم کے ایڈٹ آپشن پر کلک کرتا ہوں تو میں ٹائپوگرافی سیکشن میں جا سکتا ہوں جہاں میں ہیڈنگ کا سائز ایڈجسٹ کر سکتا ہوں جو ڈیسک ٹاپ اور موبائل اسکرین پر بھی ٹھیک نظر آتا ہے۔ میں دونوں کو الگ الگ کنٹرول کر سکتا ہوں۔ میرے ڈیسک ٹاپ سائٹ کے منظر کے لیے، سرخی کا سائز 49px ہے، لیکن موبائل ویو پر، یہ فٹ نہیں ہوتا

ایڈجسٹ کرنے کے لیے، میں موبائل ریسپانسیو موڈ> اسٹائل> ٹائپوگرافی> px سائز کو 30 پر کلک کروں گا جو موبائل اسکرین میں آسانی سے فٹ ہوجاتا ہے۔

موبائل کے لیے پیڈنگ یا مارجن کو ایڈجسٹ کریں۔

پیڈنگز کو ایڈجسٹ کرتے وقت، یہ تجویز کیا جاتا ہے کہ EM یا فیصد میں سیٹ ویلیوز کے بجائے Pixels میں قدریں استعمال نہ کریں کیونکہ یہ سائز کو اسکرین کے مجموعی سائز کے نسبت برقرار رکھے گا۔

آپ دیکھ سکتے ہیں کہ ہم نے پیڈنگ کو 70px دائیں اور بائیں کے طور پر استعمال کیا ہے، جو ڈیسک ٹاپ سائٹ پر اچھی لگتی ہے۔ تاہم اس ترتیب کے لیے موبائل ویو ایک مکمل گڑبڑ ہے۔

ہم ہر طرف پیڈنگ کو 17 px پر ایڈجسٹ کر سکتے ہیں پھر یہ بالکل ٹھیک نکلا۔

متبادل طور پر، آپ پورے کالم کی ترتیب کو 750 px پر سیٹ کر سکتے ہیں جہاں آپ کا مواد ڈیسک ٹاپ یا موبائل دونوں منظروں پر اسکرین کو ایڈجسٹ کرنے کی ضرورت کے بغیر ایک باکس میں دکھایا جائے گا۔ یہ باکس کے اندر موجود مواد کو خود بخود ایڈجسٹ کر دے گا۔

ہر کالم کو افقی طور پر بنائیں، اور یہ تمام آلات پر حیرت انگیز طور پر ایڈجسٹ ہو جائے گا۔

ایک بار جب آپ افقی طور پر کالم بناتے ہیں، جسے ڈیزائنرز سب سے زیادہ پسند کرتے ہیں، تو آپ سیکشنز کو ڈپلیکیٹ کر سکتے ہیں اور وقت بچا سکتے ہیں۔ ایک وقت میں ایک سیکشن بنائیں اور پھر اسے دوبارہ استعمال کریں اگر یہ وقت بچانے کے لیے اچھا ہے۔

موبائل / ڈیسک ٹاپ ویو کے مطابق پس منظر کی تصویر تبدیل کریں۔

کچھ پس منظر کی تصاویر ڈیسک ٹاپ ویو پر اچھی لگتی ہیں، لیکن امکان یہ ہے کہ تصویر اتنی بڑی نہیں ہوگی جتنی موبائل اسکرین پر۔ لہذا، تخلیقی طور پر سوچیں اور موبائل اسکرین پر ایک مختلف تصویر کا انتخاب کریں۔ مختلف موبائل ویو کو منتخب کرنے کے لیے سیکشن> اسٹائل ٹیب پر کلک کریں> ڈیوائس آئیکن پر کلک کریں اور موبائل ویو کو منتخب کریں۔ اب، آپ جو بھی تصویر منتخب کریں گے، وہ صرف موبائل ویو پر نظر آئے گی۔

ڈیسک ٹاپ/موبائل ویو پر کسی بھی سیکشن کی مرئیت کو تبدیل کریں۔

آپ ڈیوائس کے مطابق کسی بھی سیکشن یا کالم کی مرئیت کو بھی کنٹرول کر سکتے ہیں۔

بعض اوقات، ہم اپنے مواد یا تصاویر کو دو یا تین حصوں یا مختلف کالموں میں ڈسپلے کرتے ہیں، لیکن ہم اسے موبائل پر ڈسپلے کرنا پسند نہیں کرتے۔ اسی لیے Elementor اس حصے کو چھپا سکتا ہے جسے آپ موبائل ویو پر ظاہر کرنا پسند نہیں کرتے۔

> سیکشن سیٹنگز > ایڈوانسڈ > ریسپانسیو پر جائیں وہاں آپ کو مختلف امکانات یا بصری ترجیحات نظر آئیں گی۔ آپ اپنی ترجیح کے لحاظ سے ڈیسک ٹاپ پر سیکشن کو چھپا سکتے ہیں، ٹیب پر چھپا سکتے ہیں یا موبائل پر چھپا سکتے ہیں۔

کالم کی ترتیب کو تبدیل کریں۔

آپ سیٹنگز سیکشن سے کالم آرڈر بھی تبدیل کر سکتے ہیں۔ پر جائیں؛ سیکشن سیٹنگز> ایڈوانسڈ> ریسپانسیو> ریورس کالم اور ہاں پر کلک کریں۔

ایک متبادل سیکشن بنائیں

موبائل اور ڈیسک ٹاپ ویو پر متبادل حصے بنائیں۔ کبھی کبھی، سلائیڈر سیکشن موبائل پر اتنا کارآمد نہیں لگتا جتنا ڈیسک ٹاپ پر اس لیے آپ سلائیڈر سیکشن استعمال کرنے کے بجائے کوئی دوسرا سیکشن استعمال کر سکتے ہیں۔ آپ ایسا کر سکتے ہیں ایڈوانسڈ ٹیب پر جائیں> اس سیکشن کی مرئیت کو آن/آف کریں جسے آپ ڈسپلے نہیں کرنا چاہتے اور اس پر ایک متبادل تصویر شامل کریں۔

کالم کی چوڑائی کو ایڈجسٹ کریں۔

جب آپ انہیں موبائل ویو پر دیکھتے ہیں تو کالم کے تمام حصوں کو 100% چوڑائی ملتی ہے۔ تاہم، موبائل پر کالم کی چوڑائی کے مطابق چوڑائی کو تبدیل کیا جا سکتا ہے۔ اگر آپ کے پاس دو کالم ہیں، تو آپ ہر سیکشن کی زیادہ سے زیادہ چوڑائی 50% پر سیٹ کر سکتے ہیں۔

نتیجہ

Elementor تمام طاقتور خصوصیات کے ساتھ آتا ہے تاکہ اسکرین کے تمام سائز کے جوابی کالم لے آؤٹ کو کنٹرول کیا جا سکے۔ یہ آپ کو ویو موڈ سلیکشن کے مطابق ہر سیکشن کو دوبارہ ایڈجسٹ کرنے کی اجازت دیتا ہے۔ موبائل دوستانہ ویب سائٹ رکھنا ناگزیر ہے کیونکہ گوگل الگورتھم موبائل دوستانہ ویب سائٹس کی درجہ بندی کو سب سے زیادہ سمجھتا ہے۔ ریسپانسیو ویب سائٹس نہ صرف بہتر SEO حاصل کرنے کے لیے ضروری ہیں، بلکہ آپ کو زیادہ ٹریفک حاصل کرنے کی بھی ضرورت ہے، کیونکہ 80% سے زیادہ ٹریفک موبائل ویوز سے آتی ہے۔

اب Elementor صفحہ بلڈر خصوصی خصوصیات کے ساتھ آتا ہے جو اس کے صارفین کو بغیر کسی کوشش کے موبائل کے موافق سائٹ بنانے کی اجازت دیتا ہے۔ امید ہے کہ، آپ کو میرا مضمون کارآمد معلوم ہوگا اور آپ کو Elementor کا استعمال کرتے ہوئے ایک ریسپانسیو ویب سائٹ بنانے کے طریقے کے بارے میں آپ کے تمام جوابات مل گئے ہیں۔