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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

آفسیٹس

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

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

سنہری اصول

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

نتیجہ

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

احمد

تبصرے دیکھیں

  • آپ کو یہ اختیارات کہاں سے ملتے ہیں؟ وہ موجود نہیں ہیں۔ کیا یہ پریمیم عنصر کے لیے ہے؟ اگر ایسا ہے تو، آپ کو اپنے مضمون میں اس کا ذکر کرنا چاہیے تاکہ لوگ اسے پڑھنے میں اپنا وقت ضائع نہ کریں۔

  • ہیلو،

    Elementor Pro کے ساتھ Estoy maquetando۔
    Quiero poner dos بینرز، uno pegado a la izquierda y otro pegado a la derecha de la pantalla. Para ello he creato: - una seccion para cada banner.
    - un encabezado con un frase, a la cual he puesto de fondo una imagen.

    Una de ella deberia ir pegada a la derecha de la pantalla (margins izquierda 0 imagino)۔ Algun consejo؟ بہت شکریہ!

  • ہائے، پہلی چیز جس پر میں غور کروں گا وہ کالم کی عمودی سیدھ کی ترتیب ہوگی جو اس پوسٹ کے پہلے حصے میں بیان کی گئی ہے۔
    شاباش،

  • Buongiorno، tutto chiaro، grazie!
    Ma mi stavo domandando se è possibile inserire tre righe (con tre pulsanti uno sotto l'altro) nella stessa colonna. Cerco di spiegarmi meglio: vorrei dividere un sezione in due colonne.
    کور کے ساتھ تصویر کی صورت میں، اور مسلسل نبض (unsopra l'altro) کے ساتھ sinistra کے کالونا، sinistra کے colonnade کی مساوی اور مرکزی پوزیشن، اس کے معیار کے مطابق سمارٹ فون کے ماڈل کے ساتھ rimandano اور تصویر میں دستیابی کا احاطہ۔ Sto cercando ovunque، ma non trovo nulla che indichi che si possa fare.
    تو کوئی اپرٹا ایک ٹوٹی میں نے
    گریزی کو

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

  • لوگو سالوینٹ کے بغیر پیراگراف میں ایک مسئلہ ہے۔ El contenido se queda a lado, la imagen, titulo y texto. No logro centarlo (solo hay una columna pero es como si la mitad o más no se pudieran usar, ni poner otro cuadro de texto) No me había pasado nunca y no se que más probar. یہ پہلے ہی tamaño móvil کے ذریعہ ترمیم کر چکا ہے، لہذا یہ ایک quedado کے ساتھ ساتھ lado todo cuando cambio a escritorio ہے! Alguien sabe que puede ser؟ اس نے اپنا کام کرنے کی کوشش کی اور آرٹیکلو اور parece que nada funciona 🤗

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

  • خوشامد!
    آپ m'arrache les cheveux کار je n'arrive pas à aligner 3 colones à l'horizontale.
    تمام کامل صف بندی کے ساتھ ڈیزائن کو گھیرتے ہوئے، آپ کرین کے گیج پر موڈیفز، ریٹروفیٹڈ نقوش والے کالم اور کمر کی مختلف لکیریں (بڑے اور ہوتھرس) کو دیکھ سکتے ہیں۔ آپ کی پسند جسم کی شکل اور الائنر کی شکل ہے۔ تبصرہ فیئر؟

  • Hola، tengo instalado elementor pero cuando agrego une nueva sección no parecen las opciones de paragraphción horizontal y paragraphción vertical.
    Hay que installer un complemento adicional? گریشیز

  • ہیلو،

    میرے پاس فوٹر میں کئی ویجٹ ہیں۔ یہ ہمیشہ ایک سرخی ہے، ایک جرات مندانہ نقطہ۔ اس طرح مجھے ایک خانے (h4 اور p) میں غیر تحریری تحریریں نہیں لکھنی پڑیں گی جب تک کہ میں اسے 2 حصوں میں نہ لکھوں۔ اب میں ورڈپریس کے اگلے حصے کیسے تلاش کر سکتا ہوں؟ سرخی اور متن کے ظاہر ہونے کی گنجائش ابھی باقی ہے۔

    آپ کی مدد کے لیے آپ کا شکریہ

    • ہائے، متن کے درمیان جگہ کو معتدل کرنے کے کئی اختیارات ہیں: یہ سیکشن، کالم یا ویجیٹ مارجن یا پیڈنگ ہو سکتا ہے یا یہ فونٹ آپشن ہو سکتا ہے جیسے لائن کی اونچائی۔

حالیہ پوسٹس

ایلیمینٹر کے ساتھ ہیڈر اور فوٹر کیسے استعمال کریں۔

ویب سائٹ کے ہیڈر اور فوٹر ضروری عناصر ہیں۔ زیادہ تر معاملات میں، ہیڈر نیویگیشن فراہم کرتا ہے…

6 جنوری 2022

ورڈپریس تھیم کا موازنہ: Astra بمقابلہ OceanWP

مارکیٹ میں سب سے زیادہ مقبول ورڈپریس تھیمز میں سے دو Astra اور OceanWP ہیں۔ پیشہ ورانہ…

2 جنوری 2022

ورڈپریس نیوز تھیم کا موازنہ: اخبار بمقابلہ۔ آسٹرا

ایک بہترین نیوز ویب سائٹ بنانے کے لیے ضروری نہیں کہ آپ ویب ڈیزائنر بنیں۔ ہم…

25 اکتوبر 2021

نیوز پیپر تھیم کے ساتھ خبروں سے متعلق ویب سائٹ بنائیں

اخبار کی تھیم ایک اہم ترین ورڈپریس تھیم ہے جسے tagDiv نے ڈیزائن کیا ہے، ایک…

18 اکتوبر 2021

Avada WooCommerce بلڈر کے ساتھ ای کامرس کیسے بنایا جائے۔

جب آن لائن اسٹور قائم کرنے کی بات آتی ہے تو، WooCommerce جانے والا plugin ہے۔ یہ…

4 اکتوبر 2021

ایلیمینٹر کے ساتھ چسپاں ہیڈر اور اسکرولنگ اثرات کا استعمال کیسے کریں۔

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

21 ستمبر 2021