کانتینر در المنتور: ویژگی جدید و کاربردی
ویجت کانتینر در المنتور یک ویژگی جدید است که اخیراً به المنتور اضافه شده و کار طراحی وبسایت را بسیار راحتتر کرده است. این ویژگی قبلاً وجود نداشت.
تفاوت با سیستم ردیف و ستون قبلی
پیش از اضافه شدن ویجت کانتینر، ما با ویجتهایی تحت عنوان ردیف و ستون کار میکردیم. این سیستم کار طراحی، طراحیهای پیچیده، را سخت میکرد. اما اکنون با اضافه شدن کانتینر در المنتور، فرآیند طراحی برای ما سادهتر شده است.
افزودن کانتینر به صفحه
برای شروع استفاده از کانتینر، اولین کاری که باید انجام دهید این است که روی گزینه پلاس (+) کلیک کنید. المنتور از شما میپرسد که از کدام چیدمان میخواهید استفاده کنید.
- انتخاب چیدمان فلکس باکس (Flexbox) شما باید انتخاب کنید که میخواهید از فلکس باکس استفاده کنید.
- مشخص کردن ساختار اولیه (استراکچر) پس از انتخاب فلکس باکس، باید ساختار یا استراکچر المان خود را مشخص کنید. برای مثال، اگر نیاز به یک محتوای دو یا سه ستونه دارید، میتوانید از استراکچرهای مربوطه استفاده کنید. همچنین میتوانید یک محتوای چهار ستونه اضافه کنید. با کلیک بر روی گزینه مورد نظر، المنتور برای شما محتوایی را اضافه میکند که قبلاً به آن ردیف و به بخشهای داخلی آن ستون میگفتیم. اما اکنون تمام اینها به عنوان کانتینر شناخته میشوند.
تنظیمات اصلی کانتینر در المنتور
تمام کانتینرها خودشان قابل ویرایش هستند. شما میتوانید روی کانتینر اصلی یا کانتینرهای داخلی کلیک کرده و تنظیمات آنها را تغییر دهید.
- تب “طرح” (Layout):
- نوع چیدمان: در این بخش میتوانید نوع چیدمان کانتینر خود را مشخص کنید. ما روی فلکس باکس کار میکنیم.
- عرض محتوا: میتوانید عرض محتوا را مشخص کنید که تمام عرض (به صورت کامل به صفحه میچسبد) باشد یا جعبهای (فاصلههایی از حاشیه در نظر گرفته میشود). اگر روی جعبهای قرار دهید، میتوانید عرض آن را نیز مشخص کنید (بر اساس پیکسل، درصد، و تنظیمات سفارشی).
- تنظیم عرض و ارتفاع: میتوانید عرض و ارتفاع کانتینر را کم و زیاد کنید.
- جهتدهی آیتمها (دایرکشن): این گزینه برای تعیین جهت محتوای درون کانتینر استفاده میشود. شما میتوانید دایرکشن را عمودی قرار دهید تا کانتینرهای داخلی یا ستونها زیر هم قرار بگیرند. همچنین میتوانید آن را روی حالت سطری (افقی) قرار دهید. گزینههای معکوس (سطری برعکس یا ستونی برعکس) نیز وجود دارد. حالت پیشفرض معمولاً ردیف افقی است که محتوا به صورت افقی قرار میگیرد.
- تراز کردن محتوا: شما میتوانید محتوای کانتینر خود را تراز کنید. این تراز میتواند عمودی باشد (وسط، بالا یا پایین) و همچنین میتوانید تراز افقی را نیز روی وسط یا گزینههای دیگر قرار دهید. با تراز کردن محتوا به وسط، المانهای داخلی در وسط کانتینر قرار میگیرند.
- تنظیم شکاف (گپ): شکاف در واقع فاصله بین کانتینرهای داخلی است. شما میتوانید این شکاف را روی اندازه دلخواه خود قرار دهید. اگر شکاف را صفر کنید، فاصله از بین میرود.
- تب “استایل” (Style):
- تنظیمات پسزمینه: در این تب میتوانید برای هر کدام از کانتینرهای خود یک پسزمینه در نظر بگیرید تا تفاوت آنها بیشتر مشخص شود. مثلاً میتوانید رنگ پسزمینه را تغییر دهید و موارد کاربردی دیگری که وجود دارد.
کار با کانتینرهای تو در تو (Nesting) برای طرحهای پیچیده
ویژگی قدرتمند کانتینر به شما اجازه میدهد که کانتینرها را درون یکدیگر قرار دهید.
- نحوه قرار دادن کانتینر درون کانتینر: کافی است یک ویجت کانتینر را به داخل یک کانتینر موجود بکشید و رها کنید.
- ساخت طرحهای چندبخشی با استفاده از جهتدهی کانتینرهای داخلی: با استفاده از کانتینرهای تو در تو و تنظیم جهتدهی (دایرکشن) کانتینرهای مادر، میتوانید طرحهای پیچیدهای ایجاد کنید. برای مثال، میتوانید یک کانتینر اصلی داشته باشید، آن را به دو قسمت (دو کانتینر داخلی) تقسیم کنید (با تنظیم دایرکشن افقی در کانتینر مادر). سپس، در یکی از این کانتینرهای داخلی، دو کانتینر دیگر اضافه کنید. اگر میخواهید این دو کانتینر داخلی زیر هم قرار بگیرند، دایرکشن کانتینر مادر آنها را روی عمودی تنظیم میکنید. اگر میخواهید کنار هم قرار بگیرند، دایرکشن کانتینر مادر آنها را روی افقی تنظیم میکنید. به همین راحتی میتوانید با استفاده از ویژگی کانتینر، طرحهای خود را به راحتی طراحی کنید.
مزایای استفاده از کانتینر در المنتور
کانتینر در المنتور مزایای قابل توجهی دارد:
- کاربری آسانتر: کار ما را برای طراحیهای پیچیده خیلی راحت کرد.
- سادهسازی فرآیند رسپانسیو کردن: کانتینر تقریباً کار ما را برای رسپانسیو کردن خیلی راحت میکند. با ویجت ردیف و ستون قبلی، ما خیلی درگیر میشدیم؛ مثلاً یک المان را در موبایل حذف میکردیم، در دسکتاپ باز نشان میداد، یا در دسکتاپ حذف میکردیم، در موبایل نشان میداد. کلاً خیلی درگیری وجود داشت و روی المانها نمیشد کنترل کامل داشت. اما با آپدیت این ویژگی و بحث کانتینر، ما میتوانیم تماماً محتوای خودمان را شخصیسازی کنیم.
- کنترل کاملتر بر محتوا: با استفاده از کانتینر، ما میتوانیم روی محتوای خودمان کنترل کاملی داشته باشیم.
جمعبندی
ویجت کانتینر یک ویژگی بسیار خوب در المنتور است که طراحی و رسپانسیو کردن طرحها را سادهتر کرده و کنترل بیشتری بر محتوا فراهم میآورد. با آشنایی با مبحث کانتینرها در المنتور، میتوانید به راحتی در طراحیهای خود از آن استفاده کنید.
