جائزہ
بلڈر میں تقریباً ہر سیکشن میں تین دوبارہ استعمال ہونے والے لے آؤٹ اجزاء ظاہر ہوتے ہیں: Group، Text، اور Divider۔ انہیں سمجھنا آپ کو CSS لکھے بغیر کوئی بھی لے آؤٹ بنانے دیتا ہے۔
Group
Group ایک لچکدار لے آؤٹ کنٹینر ہے۔ اس میں چائلڈ بلاکس شامل کریں (متن، بٹن، تصاویر، newsletter inputs، اور حتی کہ nested groups) اور کنٹرول کریں کہ وہ کیسے ترتیب دیے جائیں۔
سمت
- Vertical: بچے اوپر سے نیچے ایک کے اوپر ایک (زیادہ تر سیکشنز کے لیے ڈیفالٹ)۔
- Horizontal: بچے ایک قطار میں جنب بجنب بیٹھتے ہیں۔
چھوٹی اسکرینوں پر افقی گروپ کو عمودی اسٹیک میں خودبخود سوئچ کرنے کے لیے Stack on Mobile فعال کریں۔
ترتیب اور پوزیشن
یہ دو ترتیبات یہ طے کرتی ہیں کہ بچے مرکزی اور کراس محوروں پر کیسے تقسیم ہوتے ہیں۔ ان کا مطلب گروپ کی سمت کے مطابق بدلتا ہے:
- عمودی سمت: Position عمودی تقسیم کنٹرول کرتا ہے (اوپر، درمیان، نیچے، یا بیچ میں)۔ Alignment افقی جگہ کنٹرول کرتا ہے (بائیں، درمیان، دائیں، یا بیچ میں)۔
- افقی سمت: Alignment افقی تقسیم کنٹرول کرتا ہے (بائیں، درمیان، دائیں، یا بیچ میں)۔ Position عمودی جگہ کنٹرول کرتا ہے (اوپر، درمیان، نیچے، یا بیچ میں)۔
Between بچوں کو ان کے درمیان برابر جگہ کے ساتھ یکساں طور پر پھیلاتا ہے، جو پوری چوڑائی والی قطار میں اشیاء پھیلانے کے لیے مفید ہے۔
Gap
چائلڈ عناصر کے درمیان پکسلز میں spacing (0 سے 100 px، ڈیفالٹ 20 px)۔
Width
- Fill: parent میں تمام دستیاب جگہ لینے کے لیے پھیلتا ہے۔ ان گروپس کے لیے استعمال کریں جو افقی parent کے اندر برابر جگہ شیئر کریں۔
- Fit: اپنے مواد کے قدرتی سائز تک سکڑتا ہے۔ ان گروپس کے لیے استعمال کریں جو صرف اتنے چوڑے ہوں جتنا ان کے اندر ہو۔
- Custom: ایک مخصوص فیصد (0 سے 100%) مقرر کریں۔ گروپ بڑھے یا سکڑے بغیر وہ سائز رکھے گا۔
رنگ سکیم اور وراثت
ڈیفالٹ کے طور پر گروپ اپنے parent سیکشن کی رنگ سکیم ورثے میں لیتا ہے۔ Inherit scheme بند کریں تاکہ اپنی عالمی رنگ ترتیبات سے واضح رنگ سکیم (1 سے 9) تفویض کر سکیں۔ اس سے آپ نیا سیکشن شامل کیے بغیر ایک سیکشن کے اندر الگ پس منظر یا متن کے رنگ کے علاقے بنا سکتے ہیں۔
Border
گروپ کے گرد حاشیہ شامل کریں۔ اختیارات: None یا Solid۔ solid منتخب ہونے پر حاشیے کی موٹائی (1 سے 20 px) مقرر کریں، رنگ فعال سکیم کے حاشیے کے رنگ سے آتا ہے۔
Radius
پکسلز میں کونے کا گول پن (0 سے 100)۔ کارڈ جیسے گروپ کنٹینر بنانے کے لیے استعمال کریں۔
Opacity
گروپ کی مجموعی شفافیت (0 سے 100%، ڈیفالٹ 100%)۔
Overlay
گروپ کے اندر رنگین تہہ شامل کرتا ہے۔ فعال ہونے پر Overlay Color (رنگ منتخب کنندہ کے opacity سلائیڈر سے شفافیت سمیت)، Style (ٹھوس flat بھرنا یا شفاف تک fade ہوتا گریڈئینٹ)، اور gradient کے لیے Direction (اوپر یا نیچے) مقرر کریں۔ یہ عام طور پر hero سیکشن میں میڈیا پس منظر پر نیم شفاف رنگ دار تہہ بنانے کے لیے استعمال ہوتا ہے۔
Padding
ہر طرف پکسلز میں spacing (اوپر، بائیں، دائیں اور نیچے)، ہر ایک 0 سے 100 px۔ Padding گروپ کے حاشیے کے اندر لگائی جاتی ہے، حاشیے اور گروپ کے بچوں کے درمیان سانس لینے کی جگہ بناتی ہے۔
Text
متن بلاک کسی سیکشن یا گروپ کے اندر rich text مواد (سرخیاں، پیراگراف اور فارمیٹ شدہ متن) پیش کرتا ہے۔ ایڈیٹر bold، italic، underline، strikethrough، اور رنگین متن سپورٹ کرتا ہے۔
Preset
typography preset فونٹ سائز، فونٹ وزن اور متن کا semantic کردار طے کرتا ہے۔ دستیاب presets:
- Default: سیکشن کا بنیادی متن styling ورثے میں لیتا ہے۔
- Paragraph: body متن طرز۔
- Heading 1 سے Heading 6 تک: بڑے سے چھوٹے سائز، آپ کی typography ترتیبات میں طے شدہ heading فونٹ استعمال کرتے ہوئے۔
Size
پکسلز میں حسب ضرورت فونٹ سائز (10 سے 30 px) جو preset کا سائز اوورائڈ کرتا ہے۔ preset کو سائز طے کرنے دینے کے لیے ڈیفالٹ پر چھوڑ دیں۔
Width
- Fit: متن بلاک صرف اتنا چوڑا ہے جتنا اس کا مواد۔
- Fill: متن بلاک دستیاب کنٹینر کی چوڑائی کے 100% تک پھیلتا ہے۔
Alignment
افقی متن ترتیب: Left، Center، یا Right۔
Line height
عمودی تال کنٹرول کرتا ہے: Tight (محدود سطریں)، Normal (ڈیفالٹ)، یا Loose (وسیع سطریں)۔
Letter spacing
حرف کا spacing کنٹرول کرتا ہے: Tight (حروف قریب)، Normal (ڈیفالٹ)، یا Loose (حروف دور)۔
رنگ سکیم اور وراثت
ڈیفالٹ کے طور پر متن بلاک اپنا رنگ parent سیکشن سے ورثے میں لیتا ہے۔ مخصوص رنگ سکیم استعمال کرنے کے لیے Inherit scheme بند کریں۔ Heading presets سکیم کا heading رنگ استعمال کرتے ہیں، paragraph اور default presets سکیم کا body متن کا رنگ استعمال کرتے ہیں۔
Padding
ہر طرف پکسلز میں اندرونی spacing (اوپر، بائیں، دائیں اور نیچے)، ہر ایک 0 سے 100 px۔
Divider
ایک بصری علیحدگی لائن۔ عمودی لے آؤٹ میں یہ افقی لائن کے طور پر ظاہر ہوتا ہے۔ افقی گروپ کے اندر یہ عمودی لائن کے طور پر ظاہر ہوتا ہے۔ divider اپنے parent کنٹینر کی سمت کے مطابق خودبخود ڈھل جاتا ہے۔
Thickness
پکسلز میں لائن کی موٹائی (1 سے 10 px، ڈیفالٹ 1 px)۔
Length
اس کنٹینر کے فیصد کے طور پر لائن کا پھیلاؤ (5 سے 100%، ڈیفالٹ 100%)۔ اسے 100% سے کم مقرر کریں اور ترتیب کے ساتھ ملا کر درمیان میں یا اندرونی سجاوٹی لائن بنائیں۔
سرے کی شکل
- Sharp: مستطیل سرے۔
- Rounded: گولی کی شکل کے سرے۔
Alignment
جب لمبائی 100% سے کم ہو تو لائن کی پوزیشن: Start، Center (ڈیفالٹ)، یا End۔
Width
- Fit: divider کنٹینر صرف لائن کی چوڑائی کا ہے۔
- Fill: divider کنٹینر اپنے parent میں دستیاب جگہ بھرنے کے لیے پھیلتا ہے۔
رنگ سکیم
اختیاری طور پر رنگ سکیم (1 سے 9) مقرر کریں۔ divider منتخب سکیم سے حاشیے کا رنگ استعمال کرتا ہے۔ اگر کوئی سکیم مقرر نہ ہو تو parent سیکشن یا گروپ سے رنگ ورثے میں لیتا ہے۔
Padding
ہر طرف پکسلز میں spacing۔ جب divider اعلی سطح کے سیکشن کے طور پر استعمال ہو تو padding کی اقدار 200 px تک جاتی ہیں تاکہ زیادہ عمودی سانس لینے کی جگہ ملے۔
عام مسائل
- افقی parent کے اندر دو fill گروپس: ہر ایک دستیاب جگہ کا 50% لے گا، جو عام طور پر مطلوب ہے۔ اگر آپ کو ایک طرف دوسرے سے چوڑا چاہیے تو ان میں سے ایک پر Custom width استعمال کریں۔
- عمودی divider نظر نہ آئے: divider صرف اسی وقت عمودی بنتا ہے جب یہ Horizontal سمت والے گروپ کا براہ راست بچہ ہو۔ یقینی بنائیں کہ parent گروپ کی سمت horizontal مقرر ہو۔
- متن غیر متوقع رنگ دکھائے: اگر متن بلاک غلط رنگ میں نظر آئے تو ممکن ہے یہ مختلف رنگ سکیم والے parent گروپ سے ورثے میں لے رہا ہو۔ متن بلاک پر Inherit scheme بند کریں اور درست سکیم واضح طور پر تفویض کریں۔