ایلیمینٹر سیکشنز اور کالمز کو سیدھ میں کیسے لایا جائے۔

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

• ہمیں صف بندی کرنے کی ضرورت کیوں ہے؟
• کالم یا حصے ریسپانسیو ڈیزائن کے لیے کیسے کام کرتے ہیں؟
• ایلیمینٹر سیکشنز اور کالمز کو سیدھ میں کیسے لائیں؟
• ذمہ دار چوڑائی کے مسائل کو حل کرنے کے لیے اوور فلو پوشیدہ استعمال کریں۔
• پوزیشننگ کا خیال رکھنا
• رشتہ دار اکائیاں
• Z-Index کا استعمال کرتے ہوئے ہر عنصر کی گہرائی کو کنٹرول کریں۔
• ڈپلیکیٹ فعالیت کے بارے میں چال
• آفسیٹس
• سنہری اصول
• نتیجہ

ہمیں صف بندی کرنے کی ضرورت کیوں ہے؟

ہر کالم یا سیکشن میں مواد مختلف زمروں کا ہو سکتا ہے۔ یہ تصاویر، متن اور درجہ بندی کی شکل میں ہو سکتا ہے۔ ایک دوسرے کے ساتھ نظر آنے کے لیے، یہ تجویز کیا جاتا ہے کہ مواد کی ظاہری شکل میں یکسانیت ہو۔ اسے صرف وہاں نہیں پھینکنا چاہیے- صرف اس کے لیے۔

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

کالم یا حصے ریسپانسیو ڈیزائن کے لیے کیسے کام کرتے ہیں؟

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

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

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

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

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

اس معاملے کے لیے، آپ کو ویجیٹ کے اندر موجود کالم سے تعلق پر توجہ دینے کی ضرورت ہے۔

ایلیمینٹر سیکشنز اور کالمز کو سیدھ میں کیسے لائیں؟

ہر سیکشن/کالم کے لیے، لے آؤٹ سیکشن پر اتریں اور اپنی ضروریات کے مطابق درج ذیل الائنمنٹ آپشنز سیٹ کریں:

• عمودی سیدھ: آپ مندرجہ ذیل سے ویجٹ کے لیے ترتیبات منتخب کر سکتے ہیں۔ لیکن ایک چیز جو آپ کو ذہن میں رکھنی چاہیے وہ یہ ہے کہ کالم میں موجود مواد کو پہلے تین کالم عمودی آپشنز یعنی اوپر، درمیانی اور نیچے کے ساتھ نہیں لگایا جا سکتا۔
• اوپر
• درمیانی
• نیچے

اس معاملے کے لیے، ^* تین نئے اختیارات ہیں جو آپ کی پسند کے مطابق مواد کو سیدھ میں لانا واقعی آسان بناتے ہیں۔

• ^*Space Between - کالم کے کنارے پر شروع اور آخر میں ویجٹ کے درمیان جگہ سیٹ کرتا ہے۔ ویجٹ مساوی جگہ والے ہیں یعنی ان کے درمیان برابر جگہ ہے۔
• ^*اسپیس اراؤنڈ - ویجٹس کے درمیان جگہ برابر ہے، اور کناروں کا سائز ویجٹس کے درمیان کی جگہ کے نصف ہے۔
• ^*یکساں طور پر جگہ - ویجٹ کے درمیان جگہ یکساں ہے- یہ ان کے درمیان، پہلے اور بعد میں برابر ہے۔

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

ذمہ دار چوڑائی کے مسائل کو حل کرنے کے لیے اوور فلو پوشیدہ استعمال کریں۔

جب موبائل پر کسی ویب سائٹ کی ظاہری شکل کی بات آتی ہے، تو اس بات کا بہت زیادہ امکان ہوتا ہے کہ آپ کو کسی مسئلے کا سامنا کرنا پڑ سکتا ہے جہاں حسب ضرورت پوزیشننگ والا ویجیٹ کالم کی چوڑائی کو اوور فلو کر دیتا ہے۔  

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

لے آؤٹ سیٹنگز > اوور فلو آپشن کو پوشیدہ

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

پوزیشننگ کا خیال رکھنا

آپ کو کالموں کی پوزیشننگ کا بھی خیال رکھنا ہوگا۔ آپ Elementor 2.5 - مطلق اور فکسڈ کے ساتھ اپنی مرضی کے مطابق پوزیشننگ سیٹ کر سکتے ہیں۔

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

مقررہ پوزیشن مطلق سے مختلف ہے کیونکہ یہ سیکشن/عنصر کو دیکھنے والے کے نقطہ نظر پر قائم رہنے دیتی ہے۔ لہذا، اگر صارف صفحہ کے ذریعے اسکرول کرتا ہے، تو عنصر وہیں رہے گا۔

رشتہ دار اکائیاں

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

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

Z-Index کا استعمال کرتے ہوئے ہر عنصر کی گہرائی کو کنٹرول کریں۔

اگر آپ وجیٹس کے لیے 'مطلق' یا 'فکسڈ' پوزیشننگ استعمال کرنے جا رہے ہیں، تو بہت ساری ایسی صورتیں ہوں گی جہاں دو یا دو سے زیادہ ویجٹ اوورلیپ ہو سکتے ہیں یعنی وہ ایک دوسرے کے "اوپر" کھڑے ہیں۔ آپ عام Z-index ترتیب استعمال کرکے اس سے بچ سکتے ہیں۔ یہ آپ کو گہرائی کو کنٹرول کرنے کے قابل بنائے گا اور آپ کو یہ منتخب کرنے کی اجازت دے گا کہ کون سے ویجٹ پیش منظر میں نظر آتے ہیں۔

ڈپلیکیٹ فعالیت کے بارے میں چال

اگر آپ حسب ضرورت پوزیشننگ کے ساتھ کسی عنصر کو نقل کرنے کے لیے دائیں کلک کا استعمال کر رہے ہیں، تو ایسا لگتا ہے کہ دائیں کلک نے کام نہیں کیا ہے۔

لیکن، رکو. یہ سچ نہیں ہے. ڈپلیکیٹ فعالیت نے بالکل ٹھیک کام کیا ہے اور عنصر کو نقل کیا ہے۔ یہ صرف اتنا ہے کہ چونکہ ہر عنصر کی بالکل وہی حسب ضرورت پوزیشننگ ہوتی ہے، اس لیے ڈپلیکیٹ عنصر بالکل دوسرے عنصر کے اوپر کھڑا ہوتا ہے (یہ تاثر دینا کہ کوئی ڈپلیکیٹ نہیں بنایا گیا ہے۔)

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

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

آفسیٹس

ایسے معاملات ہیں جہاں آپ کو اپنے ویب پیج کے مواد کے لیے آفسیٹ سیٹ کرنے کی ضرورت ہے۔ Elementor کے ساتھ، آپ آسانی سے آفسیٹ سیٹ کر سکتے ہیں۔ لہذا، اگر آپ بائیں سے 500px کا آفسیٹ سیٹ کرتے ہیں، تو آپ کے ان پٹ کی بنیاد پر مواد کے ارد گرد جگہ چھوڑ دی جائے گی۔ اسی طرح، آپ دائیں طرف آفسیٹ بھی سیٹ کر سکتے ہیں۔ بائیں اور دائیں دونوں آفسیٹ کو ایک جیسی قدر میں سیٹ کرنا ایک اچھا عمل ہے کیونکہ مواد کو اسکرین پر مناسب طریقے سے منسلک کیا جائے گا۔

ایسے معاملات ہیں جہاں آپ کو اپنے ویب پیج کے مواد کے لیے آفسیٹ سیٹ کرنے کی ضرورت ہے۔ Elementor کے ساتھ، آپ آسانی سے آفسیٹ سیٹ کر سکتے ہیں۔ لہذا، اگر آپ بائیں سے 500px کا آفسیٹ سیٹ کرتے ہیں، تو آپ کے ان پٹ کی بنیاد پر مواد کے ارد گرد جگہ چھوڑ دی جائے گی۔ اسی طرح، آپ دائیں طرف آفسیٹ بھی سیٹ کر سکتے ہیں۔ بائیں اور دائیں دونوں آفسیٹ کو ایک جیسی قدر میں سیٹ کرنا ایک اچھا عمل ہے کیونکہ مواد کو اسکرین پر مناسب طریقے سے منسلک کیا جائے گا۔

سنہری اصول

بہتر ریسپانسیو ڈیزائن کے لیے، متعلقہ یونٹس کا استعمال کریں۔ اس کی وجہ یہ ہے کہ جب کسی مختلف پلیٹ فارم سے ویب سائٹ تک رسائی حاصل کی جاتی ہے تو مطلق پوزیشننگ مشکل ہو سکتی ہے۔ متعلقہ یونٹس کا استعمال کرتے ہوئے، آپ کے حصوں کو ڈیزائن کرنے کے نتیجے میں زیادہ ذمہ دار ڈیزائن ملے گا. چوڑائی میں تبدیلی کو متعلقہ اکائیوں کی مدد سے بالکل ٹھیک کیا جا سکتا ہے۔ "رشتہ دار" سے، ہمارا مطلب ہے پکسلز جیسے یونٹس کو ٹھیک کرنے کے بجائے، فیصد یا ویو چوڑائی (VW) جیسے مختلف یونٹس۔

نتیجہ

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