DIVI بلڈر میں عمودی اور افقی طور پر حصوں ، قطاریں ، کالم ، اور ماڈیول سیدھ کرنے کا طریقہ

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

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

• Flex اور Divi کے درمیان فرق کو سمجھنا
• کیا اس کی ضرورت ہے؟
• پہلے سے تشکیل شدہ لے آؤٹ کو اپنے صفحہ میں شامل کریں۔
• طریقہ 1: فلیکس اور آٹو مارجن کے ساتھ مواد کو عمودی طور پر سیدھ کرنا
• مواد کو نیچے سے سیدھ میں لانا
• آپ کی قطار کے کالموں کے لیے عمودی مواد کی سیدھ
• طریقہ 2: کالم فلیکس ڈائریکشن کا استعمال کرتے ہوئے مواد کو عمودی طور پر سیدھ میں کرنا
• صرف ایک کالم کے ساتھ لے آؤٹ کے بارے میں کیا خیال ہے؟
• DIVI کی عمودی اور افقی سیدھ پر حتمی خیالات

Flex اور Divi کے درمیان فرق کو سمجھنا

Flex (یا Flexbox) CSS انتساب اشیاء کو افقی اور عمودی ڈھیروں میں ترتیب دینے کا صرف ایک ذریعہ ہے (ایک قسم کی میز کی طرح)۔ تاہم، عام جدولوں کے برعکس، فلیکس فیچر آپ کو ایسے باکسز بنانے کی اجازت دیتا ہے جو ان میں موجود مواد کے سائز کے مطابق "فلیکس" کرتے ہیں۔

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

آپ شامل تو: ایک قطار میں کسی بھی کالم "مارجن آٹو"، سابق کے لئے amp لی، اس کالم کے مواد (اس کی ایک یا کئی ماڈیولز چاہے) عمودی طور پر مرکوز کی جائے گی.

آپ کے تمام کالم (اور ان کا مواد) عمودی طور پر مرکز میں ہوں گے اگر آپ "الائن آئٹمز: مرکز؛" شامل کرتے ہیں۔ آپ کی صف میں

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

کیا اس کی ضرورت ہے؟

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

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

آئیے اس پارٹی کو شروع کریں!

پہلے سے تشکیل شدہ لے آؤٹ کو اپنے صفحہ میں شامل کریں۔

میں داخلہ ڈیزائن کمپنی پورٹ فولیو پیج لے آؤٹ کے ساتھ شروع کرنے جا رہا ہوں۔ اس ترتیب کو اپنے صفحہ پر رکھنے کے لیے ایک نیا صفحہ بنائیں۔ اس کے بعد، اپنے صفحہ کو ایک نام دیں۔ ڈراپ ڈاؤن مینو سے "Use Divi Builder" اور پھر "Use Visual Builder" کو منتخب کریں۔ پھر ڈراپ ڈاؤن مینو سے "پریمیڈ لے آؤٹ کا انتخاب کریں" کا انتخاب کریں۔ اس کے بعد، لوڈ فرام لائبریری ونڈو سے داخلہ ڈیزائن کمپنی لے آؤٹ پیک کو منتخب کریں۔ آخر میں، لے آؤٹ کو منتخب کرنے سے، پورٹ فولیو کا صفحہ منتخب کریں اور "اس لے آؤٹ کو استعمال کریں" پر کلک کریں۔

آپ کے صفحہ پر لے آؤٹ لوڈ ہونے کے بعد آپ شروع کرنے کے لیے تیار ہیں۔

طریقہ 1: فلیکس اور آٹو مارجن کے ساتھ مواد کو عمودی طور پر سیدھ کرنا

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

کالم 2 مین عنصر ان پٹ باکس کے تحت، اسی قطار کے لیے ایڈوانسڈ ٹیب کی ترتیبات پر جائیں اور درج ذیل سی ایس ایس کا ٹکڑا شامل کریں۔

دوسرے کالم کے مواد کو اب عمودی طور پر مرکز میں منتقل کر دیا گیا ہے۔

مواد کو نیچے سے سیدھ میں لانا

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

آپ کی قطار کے کالموں کے لیے عمودی مواد کی سیدھ

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

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

یاد رکھیں کہ آپ اپنے سی ایس ایس کے ٹکڑوں کے ساتھ مرکزی عنصر پر دائیں کلک کرکے اور "بنیادی عنصر کو بڑھائیں" کو منتخب کرکے Divi کی Extend Styles کی خصوصیت استعمال کرسکتے ہیں۔

پھر، صفحہ پر ہر کالم کے تمام مواد کو عمودی طور پر مرکز کرنے کے لیے، مرکزی عنصر CSS کو پورے صفحہ (یا سیکشن) کی تمام قطاروں پر لاگو کریں۔

اب سب کچھ عمودی طور پر متوازن ہے۔

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

طریقہ 2: کالم فلیکس ڈائریکشن کا استعمال کرتے ہوئے مواد کو عمودی طور پر سیدھ میں کرنا

ہم نے سب سے پہلے قطار میں شامل فلیکس پراپرٹی کا استعمال کیا۔ نتیجتاً، ہمارا ہر کالم ایک "فلیکس باکس" بن گیا جسے حاشیہ میں ردوبدل کرکے عمودی طور پر جوڑا جا سکتا ہے۔

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

آئیے پچھلی amp le’s row پر واپس آتے ہیں۔ کسٹم سی ایس ایس پر دائیں کلک کرکے اور "کسٹم سی ایس ایس اسٹائلز کو دوبارہ ترتیب دیں" کو منتخب کرکے، آپ قطار کی ترتیبات میں موجود کسی بھی حسب ضرورت سی ایس ایس کو ہٹا سکتے ہیں۔

پھر، کالم 2 مین عنصر میں، درج ذیل CSS کا اطلاق کریں:

مواد کو نیچے سیدھ میں لانے کے لیے "جائز مواد: مرکز" کو "جائز مواد: فلیکس اینڈ" میں تبدیل کریں۔

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

متن کی مختلف مقداروں کے ساتھ عمودی طور پر منسلک بلب بنانا

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

ڈیجیٹل ادائیگیاں ہوم پیج لے آؤٹ کے لئے، میں عمودی طور پر اس سابق کے لئے blurbs کی سیدھ کریں گے amp لی.

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

اب مجھے قطار کی ترتیبات میں "کالم کی بلندیوں کو برابر کرنا" کی ضرورت ہے۔

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

ہم اپنی قطار کی ترتیبات کے ایڈوانسڈ ٹیب کے مین ایلیمنٹ سیکشن میں درج ذیل کو شامل کر کے اپنے کالم کے مواد کو عمودی طور پر مرکز کر سکتے ہیں:

براہ کرم اسے نیچے سے سیدھ میں لانے کے لیے اسے درج ذیل میں تبدیل کریں۔

آپ اپنے حسب ضرورت CSS اسٹائلز کو دوبارہ ترتیب دے کر اور درج ذیل حسب ضرورت مارجنز کو شامل کر کے پہلے کالم کو نیچے سے سیدھ میں اور تیسرے کالم کو اوپر سے منسلک بھی کر سکتے ہیں۔

 کالم 1 اہم عنصر CSS:

 کالم 3 اہم عنصر CSS:

صرف ایک کالم کے ساتھ لے آؤٹ کے بارے میں کیا خیال ہے؟

اپنے ایک کالم کے مواد کو عمودی طور پر مرکوز کرنے کے لیے آپ کو سی ایس ایس کے ٹکڑوں یا فلیکس کی ضرورت نہیں ہے۔ آپ کو بس یہ یقینی بنانا ہے کہ آپ کے متن کے اوپر اور نیچے (یا ماڈیولز) برابر وقفہ کاری ہو۔ زیادہ تر صارفین کو بہت سے کالموں کے ساتھ لے آؤٹ پر عمودی طور پر مرکز والے مواد کی ضرورت ہوتی ہے کیونکہ وہ چاہتے ہیں کہ ملحقہ مواد کو صحیح طریقے سے ترتیب دیا جائے۔

DIVI کی عمودی اور افقی سیدھ پر حتمی خیالات

اگرچہ یہ حل حسب ضرورت CSS کے چند معمولی ٹکڑوں پر انحصار کرتا ہے، مجھے لگتا ہے کہ یہ ان لوگوں کے لیے مددگار ثابت ہو سکتا ہے جو وقت گزارنے والے طریقہ کار کے لیے فوری علاج کی تلاش میں ہیں۔ براہ مہربانی اس نقطہ نظر پر آپ کی رائے اشتراک کرنے کے لئے آزاد محسوس کرتے ہیں، کے ساتھ ساتھ سابق amp لیس یہ ماضی میں آپ کو وقت اور کوشش کو محفوظ کر لیا ہے کہ کس طرح کا.