آموزش کامل کانتینر (Container) در المنتور

آموزش کامل کانتینر (Container) در المنتور

توی این ویدیو میخوام در مورد یکی از بهترین و پرکاربرد ترین المانهای وردپرس یعنی المان کانتینر صحبت کنم.

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

کانتینر (Container) در المنتور چیست ؟

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

چینش باکس های کانتینر (Container) در المنتور

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

چطور باید با کانتینر (Container) در المنتور کار کنم ؟

کار کردن با کانتینر (container) در المنتور بسیار ساده تر و جذاب تر از کارکردن با سکشن ها و بخش داخلی ها است. به این صورت که شما توی انتخاب جهت ها، اندازه ها، معکوس کردن سطر و ستون ها و از همه مهم تر ریسپانسیو همین بخش ها توی سایز های دیگه خیلی راحت تر هستید.

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

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

نحوه اضافه کردن المان کانتینر (container) در المنتور

اگر بعد از نصب المنتور روی وردپرس خودتون برای شما المان کانتینر (container) در المنتور وجود نداشت و المان وابسته به اون یعنی المان شبکه ای در المنتور هم وجود نداشت، اول از همه مطمعن بشید که المنتور شما جدید ترین نسخه باشه و بعد از اون مراحل زیر رو برای اضافه کردن کانتینر (container) در المنتور طی کنید :

1. وارد پیشخوان وردپرسی تون بشید و روی المنتور کلیک کنید
2. از زیر منو های المنتور روی گزینه تنظیمات کلیک کنید
3. توی تب های بالای صفحه روی گزینه ویژگی ها کلیک کنید
4. از قسمت ویژگی ها حالت های کانتینر شبکه و کانتینر فلکس باکس رو روی حالت فعال قرار بدید

حالا اگر به صفحه ویرایش با المنتور برگردید می‌بینید که المان کانتینر و شبکه ای برای شما فعال شدند.

تفاوت المان کانتینر (container) در المنتور با المان شبکه ای چیست ؟

تفاوت فلکس باکس و شبکه ای در ساخت کانتینر

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

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

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

تنظیمات کانتینر (container) در المنتور

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

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

از تب پایینی یا همان کمترین ارتفاع هم می‌توانید ارتفاع کانتینر خود را تنظیم کنید.

اگر کمی پایین تر بیایید یک بخش تراز کردن محتوا را مشاهده میکنید.

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

به اینصورت که مثلا اگر یک عنوان را مثل تصویر بالا داخل یک کانتینر با پس زمینه سبز رنگ بندازیم:

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

از قسمت چینش موارد هم جایگاه افقی محتوای داخل یک کانتینر (container) در المنتور را می‌توانید تنظیم کنید.

به این صورتکه از راست به چپ راست چین، وسط چین، چپ چین یا حالت فاصله بینابینی باشد.

جهت یابی آیتم ها در کانتینر المنتور

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

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

یک کانتینر والد یا اصلی خواهیم داشت که میتوانیم داخل آن بصورت فکس باکس چیدمان های مختلفی را طراحی کنیم.

برای مثال اگر داخل یک کانتینر ۴ کانتینر دیگر بیندازیم از قسمت جهت یابی می‌توانیم چینش آنها را بصورت دقیق مشخص کنیم.

حالت اول ردیف افقی : در این حالت چهار کانتینر داخل کانتینر اصلی در یک ردیف بغل همدیگر قرار می‌گیرند.

حالت ستون عمودی : در این حالت کانتینر های داخل یک کانتینر والد زیر هم بصورت عمودی قرار می‌گیرند.

حالت افقی معکوس: دقیقا حالت اول را معکوس می‌کند.

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

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

تا اینجای کار باهم متوجه شدیم که کار کردن با کانتینر (container) در المنتور چطور هست. اگه سوالی در مورد این بخش داشتید میتونید توی کامنت ها بپرسید.