اگر تا اینجای آموزش المنتور همراه بودی، وقتشه وارد یکی از مهم‌ترین بخش‌های طراحی سایت با المنتور بشیم: کانتینر یا همون سیستم فلکس باکس. این قابلیت واقعاً دستت رو باز میکنه تا هر چیزی که توی ذهنت داری رو به صورت منظم و واکنش‌گرا بچینی.
کانتینر تو المنتور یعنی چی؟
قبلاً توی المنتور از ردیف و ستون استفاده میشد، ولی الان با آپدیت‌های جدید، سیستم کانتینر جایگزین اون‌ها شده. کانتینر مثل یک جعبه عمل میکنه که میتونی المان‌های مختلف مثل متن، عکس، دکمه یا حتی چندتا کانتینر دیگه رو داخلش قرار بدی. قدرت اصلیش اینجاست که با فلکس باکس کار میکنه، یعنی خیلی راحت میتونی المان‌ها رو کنار هم، زیر هم یا حتی وسط‌چین و چپ‌چین کنی.
مثلاً فرض کن می‌خوای یک بخش طراحی کنی که سمت چپ متن باشه و سمت راست عکس. با کانتینر کافیه ساختار دو ستونه رو انتخاب کنی و المان‌ها رو بندازی داخلش. به همین راحتی!
چرا فلکس باکس مهمه؟
فلکس باکس کمک میکنه سایتت همیشه واکنش‌گرا (Responsive) باشه. یعنی توی موبایل، تبلت یا دسکتاپ، همه چی درست و مرتب نمایش داده بشه.
یه مثال ساده:
روی دسکتاپ، متن و عکس کنار هم باشن.
روی موبایل، همون متن بره بالای عکس تا کاربر راحت‌تر بخونه.
همه‌ی اینا با چندتا کلیک توی تنظیمات کانتینر قابل انجامه. توی بخش «چیدمان» میتونی جهت، فاصله و ترتیب المان‌ها رو مشخص کنی.
چطور با کانتینر کار کنیم؟
- روی دکمه “+” کلیک کن.
- ساختار مورد نظرت رو انتخاب کن (مثلاً یک کانتینر با دو ستون).
- حالا متن، عکس یا دکمه رو بکش و بنداز توی کانتینر.
- برای استایل دهی، از تب استایل استفاده کن و رنگ، پس‌زمینه یا سایه اضافه کن.
چند نکته حرفه‌ای در آموزش کار با کانتینر المنتور
- همیشه فاصله‌های داخلی (padding) و خارجی (margin) رو تنظیم کن تا طراحیت تمیز باشه.
- هر کانتینری ایجاد میکنی بخش چیدمان رو بررسی کن از اونجا میتونی تراز بندی ویجت هارو درست کنی
- یادت باشه برای هر دستگاه (موبایل، تبلت، دسکتاپ) جداگانه تنظیمات بزنی تا سایتت واقعاً کاربرپسند بشه.
در کل، آموزش کار با کانتینر المنتور یکی از بخش‌هایی هست که باید کامل یاد بگیری، چون پایه همه طراحی‌های بعدی روی همین فلکس باکس ساخته می‌شه. وقتی دستت راه بیفته، هر نوع چیدمانی که بخوای رو میتونی راحت بسازی.
