با آموزش کانتینر المنتور برای همیشه از طرح‌بندی سنتی و قدیمی المنتور خلاص شوید! امروز قصدداریم یکی از جذاب‌ترین المان‌های طرح‌بندی المنتور را که جایگزین “بخش داخلی” شده‌است را به شما آموزش دهیم.

کانتینر (container) در المنتور درواقع کلید دروازه خلاقیت شما در طراحی انواع سایت‌های ودرپرسی است. کانتینر المنتور یک ابزار بسیار قدرتمند و انعطاف‌پذیر برای طراحی و قراردادن چیدمان‌های پیچیده و حرفه‌ای در صفحات سایت است که از ویژگی فلکس باکس پیروی می‌کند.

از برترین مزیت‌های استفاده از کانتینر المنتور در طراحی سایت، ریسپانسیو صفحات است. اگر قبلاً با المان بخش داخلی در ریسپانسیوکردن صفحات سایت خود با محدودیت و مشکلات مختلف مواجه بودید، دیگر نباید نگران باشید! با آموزش کانتینر المنتور، تمامی محدودیت‌ها از بین رفته و درعرض چندثانیه سایتتان ریسپانسیو خواهدشد.

اگر در طراحی سایت مبتدی هستید، اگر جز افرادی هستید که هنوز با سیستم فلکس باکس و کانتینر در المنتور آشنایی ندارید پیشنهاد می‌کنیم این مقاله را از دست ندهید.

در این مقاله، به‌طورکامل به آموزش کانتینر المنتور، تنظیمات کانتینر، فعال‌سازی کانتینر و آموزش فلکس باکس(flexbox) در صفحه‌ساز المنتور می‌پردازیم.

 مفهوم کانتینر در المنتور چیست؟

اولین موضوعی که در آموزش کانتینر المنتور باید با آن آشنا شوید، معنی و مفهوم کانتینر است. به زبان ساده، کانتینر بلوک یا جعبه‌ای است که به شما امکان می‌دهد تا گروهی از المان‌ها را در کناریکدیگر با چیدمان‌های متفاوت و منظم قراردهید.

کانتینر در المنتور دقیقاً جایگزین سکشن، ردیف‌ها و ستون‌ها شده است. کانتینر علاوه بر داشتن تنظیمات سکشن در المنتور، تنظیمات بخصوصی برای طراحی منظم‌تر و پیچیده‌تر دارد که در ادامه با آنها آشنا خواهیدشد.

قبل از اینکه سراغ تنظیمات و نحوه فعال‌سازی کانتینر المنتور برویم باید با سیستم فلکس باکس آشنا شوید. چون لازمه کار با کانتینر، آشنایی با سیستم فلکس باکس است.

منظور از سیستم فلکس المنتور چیست؟

همان‌طور که درجریان هستید، طرح‌بندی و نوع چیدمان المان‌ها و بخش‌ها در صفحات سایت، یکی از مهم‌ترین چالش‌های طراحان سایت است. این چالش به‌طورکامل با ورود ویژگی flexbox به المنتور برطرف شده است.

سیستم فلکس باکس درواقع یک مدل چیدمان، مانند خاصیت block و inline در css است که عناصر صفحه را به‌صورت انعطاف‌پذیرتر و منظم‌تر درکنار یکدیگر قرارمی‌دهد. این ویژگی به‌شما امکان می‌دهد تا صفحات پیچیده‌تر و بسیار سبک‌تری را طراحی کنید و باعث شده‌است که طراحی واکنشگرایی سایت بسیار ساده‌تر از قبل شود.

شما برای اینکه بتوانید با کانتینر در المنتور کارکنید باید سیستم فلکس باکس را فعال کنید. اگر مقاله المنتور چیست را مطالعه کرده‌باشید، با نحوه فعال‌کردن فلکس باکس آشنا هستید، اما برای راحتی شما در این آموزش هم آن را تکرار می‌کنیم.

فعال‌کردن خاصیت فلکس باکس در آموزش کانتینر المنتور

همان‌طور که گفتیم برای اینکه بتوانید از خاصیت فلکس باکس در کانتینر المنتور استفاده کنید باید ابتدا آن را فعال کنید.

برای اضافه‌کردن المان کانتینر در المنتور طبق مراحل زیر عمل کنید:

• بعداز نصب المنتور و المنتورپرو، از پیشخوان وردپرس> منوی المنتور> وارد تنظیمات المنتور شوید.
• از بالای صفحه وارد تب ویژگی‌ها شوید.
• در قسمت امکانات باثبات، ویژگی کانتینر فلکس باکس را فعال کنید.

• وارد یکی از صفحات ویرایش با المنتور شوید، مشاهده می‌کنید که المان کانتینر اضافه شده است.

سوال: چرا بخش داخلی در المنتور نیست؟

بسیاری از طراحان و حتی مدیران سایت وردپرسی بعداز نصب آخرین نسخه افزونه المنتور، به دنبال المان بخش داخلی می‌گردند. بهتراست در جریان این موضوع باشید که در نسخه‌های جدید المنتور به‌طور خودکار، المان بخش داخلی حذف و المان کانتینر جایگزین شده‌است.

اگر صفحات سایت خود را با المان بخش داخلی طراحی کرده‌اید و قصددارید همچنان از این ویژگی استفاده کنید، طبق روش قبلی وارد تنظیمات المنتور شوید و خاصیت فلکس باکس را غیرفعال کنید. با این‌کار بخش داخلی به المنتور بازمی‌گردد.

آموزش کار با کانتینر المنتور

حالا که با مفهوم کانتینر و چگونگی اضافه‌کردن المان کانتینر به المنتور آشنا شدید، وقت آموزش کار با این المان است. کار کردن با کانتینر المنتور آنقدر ساده، جذاب و راحت است که باعث لذت شما در طراحی سایت می‌شود.

زمانی که وارد محیط کار با المنتور می‌شوید، بعداز زدن دکمه + در وسط صفحه با دو بخش فلکس باکس و شبکه‌ای روبه‌رو می‌شوید.

خاصیت شبکه‌ای یکی دیگر راه‌های طرح‌بندی در المنتور است که هنوز درحال تست‌وبررسی توسط تیم سازنده المنتور است.(درآینده درباره المان شبکه‌ای آموزش جامعی ارائه می‌دهیم)

برای شروع کار با کانتینر روی گزینه فلکس باکس کلیک کنید. المنتور به‌طور پیش‌فرض 12 ساختار برای کانتینر درنظر گرفته که باتوجه به نیازتان یکی را می‌توانید انتخاب کنید.

یکی از نکات برجسته کار با کانتینر المنتور، طراحی انواع چیدمان‌ها و ساختارها در صفحات وب است. شما می‌توانید کانتینرها را با هر عرض و ارتفاعی در کنار یکدیگر قرار دهید و داخل هریک از آنها المان‌های دلخواه خود را بگذارید.

اگر به تصویرزیر توجه کنید، هر کانتینر با رنگی متفاوت مشخص شده است که به‌طور منظم درکنار یکدیگر قرارگرفته‌اند.

آموزش تنظیمات کانتینر در المنتور

مثل هر المان دیگری، کانتینر المنتور هم دارای تنظیمات بخصوصی است. زمانی که روی ویرایش کانتینر کلیک کنید با سه بخش طرح‌بندی، استایل و پیشرفته مواجه می‌شوید.

تنظیمات طرح‌بندی کانتینر المنتور، شامل مواردی مثل نوع چیدمان کانتینرها، عرض و ارتفاع کانتینر، جهت و ترازبندی کانتینر، نوع چینش محتوای درون آن و غیره می‌شود.

بخش استایل کانتینرهم مانند همه المان‌های صفحه‌ساز المنتور شامل تنظیماتی برای زیباسازی و تغییر ظاهر می‌شود. مثل رنگ پس‌زمینه، روکش، حاشیه و غیره.

تنظیمات بخش پیشرفته کانتینر هم شامل نحوه چینش محتوای درون کانتینر، ترتیب قرارگرفتن المان‌، اندازه هر المان درون کانتینر و غیره می‌شود.

در ادامه آموزش کانتینر المنتور به‌طورکامل به بررسی هریک از بخش‌های مختلف در تنظیمات کانتینر المنتور می‌پردازیم.

تنظیمات طرح‌بندی کانتینر

تنظیمات طرح‌بندی کانتینر شامل بخش‌های مهمی است که هر طراح سایتی باید کاملاً به آنها مسلط باشد. این تنظیمات تاثیر زیادی در نحوه قرارگیری المان‌ها درکنار یکدیگر، موضوع حجم کد تولیدی در صفحه و ریسپانسیو سایت دارد.

تنظیمات طرح‌بندی کانتینر شامل موارد زیر می‌شود:

• چیدمان کانتینر

درصورتی که ویژگی شبکه‌ای در المنتور فعال باشد، از این بخش می‌توانید نوع چیدمان را فلکس باکس یا شبکه‌ای تعیین کنید.

• عرض محتوا

از این طریق می‌توانید عرض کانتینر را در حالت جعبه‌ای یا حالت تمام عرض قراردهید. با این نکته که اگر حالت جعبه‌ای فعال باشد، عرض کانتینر مطابق با عرض تعیین شده در قالب سایت خواهدبود و با تغییر اندازه، تنها عرض المان‌های درون کانتینر تغییر می‌کند.

اما در حالت تمام عرض با تغییر اندازه، عرض کانتینر و محتویات درون آن تغییر پیدا می‌کند.

• کمترین ارتفاع

از این طریق می‌توانید ارتفاع کانتینر خود را تعیین کنید. برای اینکه کانتینر کل صفحه را پوشش دهد باید رو حالت vh و اندازه 100 قرار بگیرد.

• شکاف‌ها

یکی از مواردی که در چینش و نحوه قرارگیری عناصر یک کانتینر تاثیرگذار است، شکاف یا فاصله است. از طریق تنظیمات شکاف شما می‌توانید فاصله بین عناصر یا کانتینرها را درحالت ستونی یا ردیف تعیین کنید. به‌طور پیش‌فرض مقدار این دو  px20 است.

جهت یابی یا flex direction

اولین آیتم یا ویژگی مهم برای کانتینرها، جهت یابی یا flex direction است. از طریق این تنظیمات می‌توانید تعیین کنید که المان‌های داخل یک کانتینر در چه جهتی قرار بگیرند.

شما با استفاده از این خاصیت می‌توانید 4 جهت را تعیین کنید که شامل موارد زیر می‌شود:

1. Row (المان‌ها در یک ردیف قرار بگیرند)
2. Row-reverse ( المان‌ها در یک ردیف به شکل برعکس قرار بگیرند)
3. Column (المان‌ها به‌صورت ستونی قرار بگیرند)
4. Column-reverse (المان‌ها در یک ستون به شکل برعکس قرار بگیرند)

ترازکردن محتوا یا justify content

منظور از ترازکردن محتوا درون یک کانتینر، توزیع فضای خالی بین المان‌ها یا آیتم‌های فلکس در امتداد محور اصلی است. منظور از محور اصلی، نحوه قرارگیری المان‌ها در کنار یکدیگر است.( المان‌ها به‌صورت ردیفی یا ستونی قرار می‌گیرند).

این تنظیمات شامل 6 خاصیت می‌شود که عبارت‌اند از:

1. آغاز یا flex-start
2. وسط یا center
3. پایان یا flex-end
4. فاصله بینابینی یا space-between
5. فضای اطراف یا space-around
6. فضای یکنواخت یا space-evenly

چینش موارد یا align items

تنظیمات align items عموماً زمانی استفاده می‌شود که جهت یابی المان‌ها در کانتینر به‌صورت ردیف یا ردیف برعکس باشد. همچنین کانتینر باید دارای یک ارتفاع معین باشد.

با استفاده از این تنظیمات شما می‌توانید تراز یا نحوه قرارگیری آیتم‌های فلکس در داخل یک کانتینر را در امتداد محور فرعی تعیین کنید.

تنظیمات align items شامل 4 خاصیت می‌شود که عبارت‌اند از:

1. آغاز یا flex-start
2. وسط یا center
3. پایان یا flex-end
4. کشیده یا stretch

نکته: به‌طور پیش‌فرض آیتم‌های یک کانتینر درحالت کشیده هستند.

ویژگی wrap در آموزش کانتینر المنتور

یکی از مهم‌ترین بخش‌ها در تنظیمات کانتینرها، خاصیت wrap و no wrap است. این خاصیت میزان انعطاف‌پذیری در طراحی شما را 2 برابر می‌کند. تنظیمات wrap در کانتینر المنتور به شما امکان می‌دهد تا نحوه چیدمان آیتم‌ها در داخل کانتینر را به‌طور دقیق کنترل کنید.

این ویژگی به شما کمک می‌کند تا از فضاهای موجود در هر کانتینر بهترین استفاده را داشته باشید و طرح‌های مناسب و واکنشگرا برای وبسایت خود ایجاد کنید.

زمانی که خاصیت wrap فعال باشد، المان‌های داخل یک کانتینر در یک ردیف چیده می‌شوند و اگر از عرض کانتینر بیشتر شوند، خودکار وارد ردیف بعدی می‌شوند. حتی امکان تعیین نوع چینش المان‌ها در ردیف بعدی هم امکان‌پذیر است.

زمانی که خاصیت no wrap فعال باشد، المان‌ها تنها در یک ردیف قرار می‌گیرند و اگر تعداد المان‌ها از عرض کانتینر بیش‌تر شوند، به‌جای رفتن به ردیف بعدی، در همان ردیف با عرض کوچک‌تر قرار می‌گیرند.

تنظیمات پیشرفته در آموزش کانتینر المنتور

بخش پیشرفته تنظیمات کانتینر المنتور شامل 3 ویژگی مهم می‌شود که کمتر کسی به آن توجه می‌کند. یادگیری و استفاده از این ویژگی‌ها می‌تواند خلاقیت شما را در طراحی انواع بخش‌ها و صفحات بیش‌تر کند. این ویژگی‌ها شامل align self، ترتیب یا order و اندازه (grow یا shrink) می‌شود.

در ادامه آموزش کانتینر المنتور، به بررسی سه ویژگی مهم در تنظیمات پیشرفته کانتینر می‌پردازیم.

ویژگی align self

درواقع ویژگی align self به شما امکان تغییر تراز عمودی المان‌های موجود در یک کانتینر را به‌طور دقیق می‌دهد. برای مثال، شما 4 المان در یک کانتینر قرارداده‌اید و قصددارید تراز یک المان را تغییر دهید. در این زمان از ویژگی align self استفاده می‌کنید.

تفاوت align self با align items در این است که در در ویژگی چینش موارد، همه المان‌های یک کانتینر جابه‌جا می‌شوند اما در ویژگی align self هر المان می‌تواند تراز متفاوتی داشته باشد.

ویژگی order یا ترتیب در فلکس باکس کانتینر

یکی دیگر از ویژگی‌های جالب فلکس باکس کانتینر در المنتور، ویژگی order است. این ویژگی به شما امکان می‌دهد تا ترتیب قرارگیری و نمایش المان‌های داخل یک کانتینر را کنترل کنید.

شما می‌توانید تعیین کنید که المان‌ها به چه ترتیبی در کانتینر نمایش دهند یا به‌صورت سفارشی برای هرالمان جایگاه بخصوصی درنظر بگیرید.

برای اینکه هرالمان جایگاه خاص خودش را داشته باشد، باید روی سه نقطه در ویژگی order (ترتیب) کلیک کرده و در کادر مربوط به “ترتیب دلخواه” یک شماره به المان مربوطه اختصاص دهید.

تنظیمات اندازه فلکس باکس کانتینر المنتور

تنظیمات اندازه در فلکس باکس کانتینر شامل دو مولفه grow و shrink می‌شود. این دو مولفه به شما امکان کنترل نحوه توزیع فضای خالی بین المان‌های داخل یک کانتینر را می‌دهد.

مشخصه grow درواقع تعیین می‌کند که یک عنصر یا المان در کانتینر را تاچه حد می‌توان بزرگ کرد تا فضای خالی موجود در کانتینر را پر کند.

مشخصه shrink برعکس grow عمل می‌کند. shrink تعیین می‌کند که تا چه حد می‌توان یک المان را در کانتینر کوچک کرد تا فضای اضافی را اشغال نکند.

نکته1: مقدار grow المان‌ها در یک کانتینر برابر با صفر است.

نکته2: مقدار shrink المان‌ها در یک کانتینر به‌طور پیش‌فرض برابر با یک است.

نکته3: المانی که مقدار grow بیشتری دارد، فضای خالی بیشتری را در کانتینر اشغال می‌کند.

نکته4: عنصر یا المانی که مقدار shrink بیشتری دارد، درصورت وجود فضای اضافی در کانتینر، کوچک‌تر می‌شود.

نکته5: زمانی که قصددارید از ویژگی shrink استفاده کنید، ویژگی wrap در کانتینر باید غیرفعال باشد.

چه تفاوتی بین سیستم فلکس باکس المنتور و چیدمان پیش‌فرض المنتور وجود دارد؟

چیدمان پیش‌فرض المنتور درواقع از مدل سلسله مراتبی استفاده می‌کند که شامل ردیف‌ها و ستون‌ها با اندازه های ثابت می‌شود. اما، سیستم فلکس باکس المنتور از ساختار انعطاف‌پذیر یا flexible layout استفاده می‌کند. در سیستم فلکس المنتور می‌توانید المان‌ها را به‌طور پویا وبا اندازه، عرض دلخواه جابه‌جا کنید.

یکی دیگر از تفاوت‌های مهم سیستم فلکس باکس المنتور با سیستم پیش‌فرض آن، میزان کدتولیدی در صفحه است. سیستم فلکس کانتینر المنتور به‌دلیل انعطاف‌پذیری بالا و چیدمان منظم عناصر در کنار یکدیگر برخلاف سیستم پیش‌فرض المنتور کدهای بسیاری کمتری تولید می‌کند. این موضوع باعث افزایش چشمگیر سرعت در صفحات سایت می‌شود.

نتیجه گیری

کانتینر المنتور یکی از ابزارهای قدرتمند و انعطاف‌پذیر است که بسیاری از مشکلات مربوط به طراحی وبسایت و صفحات فرود را برطرف کرده‌است. کانتینر المنتور از سیستم فلکس باکس پیروی می‌کند و این موضوع باعث افزایش سرعت در طراحی و بهبود تجربه کاربری(ux) می‌شود.

ما در این مقاله سعی کردیم به‌طور جامع به آموزش کانتینر المنتور و تنظیمات کانتینر در المنتور بپردازیم. امیدواریم از خواندن این مقاله لذت کافی را برده باشید.

از آنجایی که کانتینر فلکس باکس به‌تازگی به المنتور اضافه شده‌است، کاربران مشکلات زیادی با این ابزار در طراحی صفحات وب دارند.

اگر شماهم هنگام کار با کانتینر المنتور با چالش روبه‌رو هستید، در بخش دیدگاه‌ها با ما درمیان بگذارید.