زمرہ جات: ورڈپریس plugin جائزے

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

آپ کو کالموں کی پوزیشننگ کا بھی خیال رکھنا ہوگا۔ آپ 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 una frase, a la cual he puesto de fondo una imagen.

    Una de ella deberia ir pegada a la derecha de la pantalla (margen 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 una sezione in due colonne. ان quella di sinistra metterei la foto di una cover, e nella colonna di sinistra vorrei mettere tre pulsanti (uno sopra l'altro), equidistanti e centrati rispetto alla colonna di sinistra, che rimandano ai trequali di sinistra vorei mettere tre pulsanti (uno sopra l'altro) تصویر میں احاطہ.
    Sto cercando ovunque، ma non trovo nulla che indichi che si possa fare.
    Sono aperta a tutti i suggerimenti
    Grazie

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

  • Yo tengo un problema con la alineación que no logro solventar. El contenido se queda a un lado, la imagen, titulo y texto. No logro centrarlo (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. Ha sido al editar para tamaño móvil, se ha quedado así a un lado todo cuando cambio a escritorio! Alguien sabe que puede ser؟ He probado todo lo que pone en el artículo y parece que nada funciona 🤗

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

  • اچھا!
    je m'arrache les cheveux car je n'arrive pas à aligner 3 colones à l'horizontale. Sur le brouillon elles paraissent toutes parfaitement alignées, mais lorsque je prévisualise les modifs, les colonnes se retrouvent toutes imbriquées et de différentes tailles (largeurs et hauteur) sur le côté gauche de.
    je voudrais qu'elles fassent toutes la même taille et qu'elles soient parfaitement aligner. تبصرہ فیئر؟

  • Hola، tengo instalado elementor pro pero cuando agrego una nueva sección no aparecen las opciones de alineación horizontal y alineación عمودی۔ Hay que instalar un complemento adicional?
    گریشیز

  • ہیلو،

    ich habe im footer verschiedene widgets. das oberste ist immer eine headline، darunter stichpunkte. da ich nicht zwei unterschiedliche textarten in einen kasten schreiben kann (h4 und p) mus ich das 2 حصوں میں machen۔ wo kann ich nun den abstand der ورڈپریس سیکشنز zueinander verringern؟ es ist zwischen der headline und dem text einfach zu viel platz.

    danke für eure hilfe

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

حالیہ پوسٹس

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

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

6 جنوری 2022

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

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

2 جنوری 2022

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

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

25 اکتوبر 2021

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

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

18 اکتوبر 2021

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

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

4 اکتوبر 2021

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

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

21 ستمبر 2021