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 مین عنصر ان پٹ باکس کے تحت، اسی قطار کے لیے ایڈوانسڈ ٹیب کی ترتیبات پر جائیں اور درج ذیل سی ایس ایس کا ٹکڑا شامل کریں۔
دوسرے کالم کے مواد کو اب عمودی طور پر مرکز میں منتقل کر دیا گیا ہے۔
| 01 | مارجن: آٹو؛ |
نیچے سے مواد کو سیدھ میں لانا
آپ اپنے مواد کے نچلے حصے کو سیدھ میں لانے کے لیے مارجن کی قدر کو حسب ذیل تبدیل کر سکتے ہیں تاکہ تمام ماڈیولز آپ کے کالم کے نچلے حصے میں جمع ہو جائیں:
| 01 | مارجن: آٹو 0؛ |
آپ کی قطار کے کالموں کے لیے عمودی مواد کی سیدھ
آپ ہر کالم میں انفرادی طور پر "مارجن: آٹو" شامل کرنے کے بجائے اپنی قطار کی ترتیبات کے مرکزی عنصر میں درج ذیل ٹکڑا شامل کر کے اپنی قطار کے تمام کالموں کے مواد کو عمودی طور پر مرکز بنا سکتے ہیں۔
| 01 | align-items: مرکز؛ |
آپ یہ ٹکڑا بھی استعمال کر سکتے ہیں اگر آپ چاہتے ہیں کہ آپ کے کالموں میں موجود تمام معلومات کو نیچے سے ترتیب دیا جائے:
| 01 | align-items: flex-end؛ |
یاد رکھیں کہ آپ اپنے سی ایس ایس کے ٹکڑوں کے ساتھ مرکزی عنصر پر دائیں کلک کرکے اور "بنیادی عنصر کو بڑھائیں" کو منتخب کرکے Divi کی Extend Styles کی خصوصیت استعمال کرسکتے ہیں۔
پھر، صفحہ پر ہر کالم کے تمام مواد کو عمودی طور پر مرکز کرنے کے لیے، پورے صفحہ (یا سیکشن) کی تمام قطاروں پر مرکزی عنصر CSS کا اطلاق کریں۔
اب سب کچھ عمودی طور پر متوازن ہے۔
تاہم، آپ نے مشاہدہ کیا ہوگا کہ کالم میں "مارجن: آٹو" کے اضافے کی وجہ سے سفید کالم کے پس منظر کا رنگ اب پوری قطار کو نہیں ڈھانپتا ہے۔ آپ قطار کے پس منظر کے رنگ کو سفید میں تبدیل کرکے اور قطار کی پیڈنگ کو ہٹا کر اس کا علاج کر سکتے ہیں۔ اس کے بجائے، میں آپ کو سکھاؤں گا کہ مارجن کو تبدیل کیے بغیر اپنے کالم کے مواد کو کیسے مرکز میں رکھنا ہے۔
طریقہ 2: کالم فلیکس ڈائریکشن کا استعمال کرتے ہوئے مواد کو عمودی طور پر سیدھ میں کرنا
ہم نے سب سے پہلے قطار میں شامل فلیکس پراپرٹی کا استعمال کیا۔ نتیجتاً، ہمارا ہر کالم ایک "فلیکس باکس" بن گیا جسے حاشیہ کو تبدیل کرکے عمودی طور پر جوڑا جا سکتا ہے۔
تاہم، ہم "کالم کی اونچائی کو مساوی کریں" کے اثر کو قربان کیے بغیر اپنے کالم کے متن کو سیدھ میں لانے کے لیے فلیکس ڈائریکشن کا استعمال کر سکتے ہیں، جو ہمارے کالموں (اور کالم کے پس منظر) کا سائز ایک جیسا رکھتا ہے۔ اس کو پورا کرنے کے لیے، ہم اپنی قطار میں سی ایس ایس کی چند لائنیں شامل کریں گے، جس کی وجہ سے اس کے اندر موجود تمام ماڈیول عمودی طور پر اسٹیک کیے جائیں گے اور پھر مرکز میں ہوں گے۔
آئیے پچھلی amp le's row پر واپس آتے ہیں۔ کسٹم سی ایس ایس پر دائیں کلک کرکے اور "کسٹم سی ایس ایس اسٹائلز کو دوبارہ ترتیب دیں" کو منتخب کرکے، آپ قطار کی ترتیبات میں موجود کسی بھی حسب ضرورت سی ایس ایس کو ہٹا سکتے ہیں۔
پھر، کالم 2 مین عنصر میں، درج ذیل CSS کا اطلاق کریں:
| 010203 | ڈسپلے: فلیکس؛ فلیکس سمت: کالم؛ جواز پیش کریں مواد: مرکز؛ |
مواد کو نیچے سیدھ میں لانے کے لیے "جائز-مواد: مرکز" کو "جائز مواد: فلیکس اینڈ" میں تبدیل کریں۔
مجھے یہ ترتیب پسند ہے کیونکہ اگر میں اپنے مواد کو عمودی پوزیشن میں رکھتا ہوں اور قطار کو پوری چوڑائی بناتا ہوں، تو مواد مرکز میں رہتا ہے۔
متن کی مختلف مقداروں کے ساتھ عمودی طور پر منسلک بلب بنانا
اپنے کالموں کے مواد کو عمودی طور پر مرکز بنانے سے بھی دھندلا پن میں مدد مل سکتی ہے۔ جیسا کہ آپ واقف ہوں گے، ہر بلرب میں کسی خصوصیت یا خدمت کو بیان کرنے کے لیے متن کی ایک ہی مقدار نہیں ہوگی۔ ان بلب کو عمودی طور پر مرکز بنانے سے آپ کے لے آؤٹ کو خوبصورت نظر آنے میں مدد مل سکتی ہے۔
ڈیجیٹل ادائیگیوں کے ہوم پیج کے لے آؤٹ کے لیے، میں اس amp کے لیے بلب کو عمودی طور پر سیدھ میں کروں گا۔
سائٹ کی ظاہری شکل کی زیادہ حقیقت پسندانہ تصویر کشی کرنے کے لیے، میں سب سے پہلے بلربس میں جسمانی مواد کی مختلف مقدار شامل کروں گا۔
اب مجھے قطار کی ترتیبات میں "کالم کی بلندیوں کو برابر کرنے" کی ضرورت ہے۔
اب میں اپنے متن کو سیدھ میں لا سکتا ہوں اور CSS کے ٹکڑوں کا استعمال کرتے ہوئے ڈیزائن کو ایڈجسٹ کر سکتا ہوں۔
ہم اپنی قطار کی ترتیبات کے ایڈوانسڈ ٹیب کے مین ایلیمنٹ سیکشن میں درج ذیل کو شامل کر کے اپنے کالم کے مواد کو عمودی طور پر مرکز کر سکتے ہیں:
| 01 | align-items: مرکز؛ |
براہ کرم اسے نیچے سے سیدھ میں لانے کے لیے اسے درج ذیل میں تبدیل کریں۔
| 01 | align-items: flex-end؛ |
آپ اپنے حسب ضرورت CSS اسٹائلز کو دوبارہ ترتیب دے کر اور درج ذیل حسب ضرورت مارجنز کو شامل کر کے پہلے کالم کو نیچے سے سیدھ میں اور تیسرے کالم کو اوپر سے منسلک بھی کر سکتے ہیں۔
کالم 1 اہم عنصر CSS:
| 01 | مارجن: آٹو آٹو 0؛ |
کالم 3 اہم عنصر CSS:
| 01 | مارجن: 0 آٹو آٹو؛ |
صرف ایک کالم کے ساتھ لے آؤٹ کے بارے میں کیا خیال ہے؟
اپنے ایک کالم کے مواد کو عمودی طور پر مرکز کرنے کے لیے آپ کو CSS کے ٹکڑوں یا فلیکس کی ضرورت نہیں ہے۔ آپ کو بس یہ یقینی بنانا ہے کہ آپ کے متن کے اوپر اور نیچے (یا ماڈیولز) برابر فاصلہ ہے۔ زیادہ تر صارفین کو بہت سے کالموں کے ساتھ لے آؤٹ پر عمودی طور پر مرکز والے مواد کی ضرورت ہوتی ہے کیونکہ وہ چاہتے ہیں کہ ملحقہ مواد کو صحیح طریقے سے ترتیب دیا جائے۔
DIVI کی عمودی اور افقی سیدھ پر حتمی خیالات
اگرچہ یہ حل حسب ضرورت CSS کے چند معمولی ٹکڑوں پر انحصار کرتا ہے، مجھے لگتا ہے کہ یہ ان لوگوں کے لیے مددگار ثابت ہو سکتا ہے جو وقت گزارنے والے طریقہ کار کا فوری علاج تلاش کر رہے ہیں۔ براہ کرم بلا جھجھک اس نقطہ نظر پر اپنی رائے کا اشتراک کریں، ساتھ ہی اس amp اسباق بھی کہ اس نے ماضی میں آپ کا وقت اور محنت کیسے بچائی ہے۔
واضح وضاحت کے لیے شکریہ۔ تاہم، یہ بلاگ ماڈیول کے ساتھ کام نہیں کرتا ہے۔ پھر قطار میں صرف 1 کالم ہے۔ ایک دوسرے کے ساتھ بلاگز کی تعداد کا تعین ماڈیول (ڈیفالٹ 3) سے ہوتا ہے۔ کیا یہاں کے کالم بھی ایسے ہی بنائے جا سکتے ہیں؟
ہائے، نہیں مجھے افسوس ہے کہ یہ صرف کلاسیکی DIVI کالموں کے لیے ہے، DIVI بلاگ ماڈیول میں کالموں کو سیدھ میں لانے کے لیے بالکل مختلف کوڈ ہوتا ہے۔
کیا ہوگا اگر آپ چاہتے ہیں کہ ماڈیول 2/3 کے نیچے یا اوپر سے 1/3 سیدھ میں ہو - اور بالکل درمیانی اوپر یا نیچے میں نہ ہو؟
ہائے، مجھے ڈر ہے کہ اسے کچھ حسب ضرورت CSS کرنے کی ضرورت ہوگی، بطور ڈیفالٹ ایسا کوئی آپشن نہیں ہے۔
ہو سکتا ہے کہ آپ مواد کو درمیان میں سیدھ میں کرنے کی کوشش کر سکتے ہیں اور اپنے مواد میں کچھ پیڈنگ شامل کر سکتے ہیں، لیکن براہ کرم تمام آلات پر رینڈرنگ کو احتیاط سے چیک کریں۔