آموزش کامل کانتینر (Container) در المنتور
توی این ویدیو میخوام در مورد یکی از بهترین و پرکاربرد ترین المانهای وردپرس یعنی المان کانتینر صحبت کنم.
کانتینر (Container) در المنتور که به تازگی و توی چند آپدیت اخیر به المنتور اضافه شده، در واقع اومده و جای سکشن ها و بخش داخلی رو گرفته و تمام مشکلاتی که شما توی کار کردن با بخش داخلی ها برای طراحی سایت های خودتون داشتید رو رفع کرده. از همه بهتر کار کردن با اون خیلی خیلی راحت تر از بخش ها و سکشن هاست و همچنین توی ریسپانسیو سایت ها کار شما رو خیلی خیلی راحت تر کرده.
کانتینر (Container) در المنتور چیست ؟
کانتینر (container) در المنتور را یک سری باکس در نظر بگیرید که میتوانید هر چیزی که میخواهید را داخل آن بچینید. حال چیز هایی که ما در طراحی سایت با المنتور و وردپرس در آنها میچینیم معمولا المانهایی هستند که در صفحه ساز المنتور وجود دارند مثل عکسها، دکمه ها، عنوان ها و … که شما به کمک کانتینر ها میتوانید آنها را به هر سبک و اندازه ای که دوست دارید کنار هم بچینید.
چینش باکس های کانتینر (Container) در المنتور
در تصویر زیر هر ستون را که به یک رنگ مجزا نمایش داده شده، یک کانتینر در نظر بگیرید. شما میتوانید هر طور که دوس داشته باشید، با چینش دلخواه و اندازه های متفاوت این کانتینر ها را کنار هم قرار دهید داخل آنها محتوای مورد نظرتون رو نمایش بدید.
چطور باید با کانتینر (Container) در المنتور کار کنم ؟
کار کردن با کانتینر (container) در المنتور بسیار ساده تر و جذاب تر از کارکردن با سکشن ها و بخش داخلی ها است. به این صورت که شما توی انتخاب جهت ها، اندازه ها، معکوس کردن سطر و ستون ها و از همه مهم تر ریسپانسیو همین بخش ها توی سایز های دیگه خیلی راحت تر هستید.
در ادامه به نحوه کار با کانتینر (container) در المنتور می‌پردازیم و اینکه این المان جدید المنتور که اینقدر سر و صدا کرده چه ویژگی ها و آپشن هایی رو در اختیار ما قرار میده.
به صورت کلی شما وقتی نسخه ی جدید المنتور رو روی سایتتون نصب کنید می‌بینید که المان جدید کانتینر (container) در المنتور برای شما توی پنل ویجت های المنتوری‌تون اضافه شده. در کنار اون یک المان جدید دیگه به نام المان شبکه ای در المنتور ( حالت کانتینر شبکه ای در المنتور ) اضافه شده که این المان هم در واقع همون کانتینر هستش اما از نوع شبکه ای.
نحوه اضافه کردن المان کانتینر (container) در المنتور
اگر بعد از نصب المنتور روی وردپرس خودتون برای شما المان کانتینر (container) در المنتور وجود نداشت و المان وابسته به اون یعنی المان شبکه ای در المنتور هم وجود نداشت، اول از همه مطمعن بشید که المنتور شما جدید ترین نسخه باشه و بعد از اون مراحل زیر رو برای اضافه کردن کانتینر (container) در المنتور طی کنید :
- وارد پیشخوان وردپرسی تون بشید و روی المنتور کلیک کنید
- از زیر منو های المنتور روی گزینه تنظیمات کلیک کنید
- توی تب های بالای صفحه روی گزینه ویژگی ها کلیک کنید
- از قسمت ویژگی ها حالت های کانتینر شبکه و کانتینر فلکس باکس رو روی حالت فعال قرار بدید
حالا اگر به صفحه ویرایش با المنتور برگردید می‌بینید که المان کانتینر و شبکه ای برای شما فعال شدند.
تفاوت المان کانتینر (container) در المنتور با المان شبکه ای چیست ؟
تفاوت فلکس باکس و شبکه ای در ساخت کانتینر
حالت شبکه ای که در پنل ویجت های المنتوری شما کنار المان کانتینر قرار دارد در واقع می‌توان گفت حالت دیگری از همان کانتینر است. در حالت شبکه ای کانتینر همانطور که از اسمش پیداست باکس ها بصورت شبکه ای در کنار هم نشسته اند و اندازه های یکسانی دارند در صورتیکه در حالت فلکس باکس کانتینر بخش ها یا باکسها سایزهای متفاوتی دارند و مثل یک شبکه هم اندازه و منظم نیستند.
همانطور که در تصویر بالا مشاهده میکنید اگر روی آیکون + روی صفحه کلیک کنید، دو حالت فلکس باکس و شبکه ای به شما پیشنهاد می‌شود که بسته به نوع طرح خودتون میتونید از اون استفاده کنید.
حالا اگر کانتینر را بکشید و روی صفحه بندازید، بصورت پیشفرض برای شما یک کانتینر با حالت فلکس باکس بصورت تک ستونه ی عمودی باز میکند.
تنظیمات کانتینر (container) در المنتور
در تب طرح بندی یک گزینه ی چیدمان کانتینر وجود دارد که اگر روی آن کلیک کنید دو گزینه ی فلکس باکس و شبکه ای را می‌بینید که در بالا به آن اشاره کردیم و تفاوت این دو را گفتیم.
اگر روی گزینه ی عرض محتوا بروید، ۲ گزینه ی جعبه ای و تمام عرض را به شما نمایش می‌دهد که در حالت جعبه ای اگر عرض را تغییر دهید، عرض محتوای داخل کانتینر تغییر میکند و در حالت تمام عرض اگر عرض را تغییر دهید عرض کل کانتینر تغییر میکند.
از تب پایینی یا همان کمترین ارتفاع هم میتوانید ارتفاع کانتینر خود را تنظیم کنید.
اگر کمی پایین تر بیایید یک بخش تراز کردن محتوا را مشاهده میکنید.
این قسمت تراز کردن محتوا و قسمت چینش موارد برای تنظیم جایگاه محتوای داخل یک کانتینر بکار می‌رود.
به اینصورت که مثلا اگر یک عنوان را مثل تصویر بالا داخل یک کانتینر با پس زمینه سبز رنگ بندازیم:
در قسمت تراز کردن محتوا از راست به چپ به ترتیب آغاز، وسط، انتها، فاصله بینابینی، حالت کشیده و .. وجود دارند که باید توجه داشته باشید ۳ حالت سمت راست برای تک محتوا است و ۳ حالت سمت چپ برای زمانی است که شما بیشتر از ۲ المان داخل یک کانتینر دارید. در واقع این حالتها فاصله ی بین المانها در تنظیم می‌کنند.
از قسمت چینش موارد هم جایگاه افقی محتوای داخل یک کانتینر (container) در المنتور را میتوانید تنظیم کنید.
به این صورتکه از راست به چپ راست چین، وسط چین، چپ چین یا حالت فاصله بینابینی باشد.
جهت یابی آیتم ها در کانتینر المنتور
در همین بخش یک تب آیتم ها وجود دارد که یک گزینه ی جهت یابی دارد که آپشن فوق العاده کاربردی هست و توی ریسپانسیو بخش ها به شما کمک زیادی خواهد کرد.
اگر یک کانتینر تک ستونه عمود بسازیم یا به روش دیگر المان کانتینر را بکشیم و روی صفحه خود بندازیم :
یک کانتینر والد یا اصلی خواهیم داشت که میتوانیم داخل آن بصورت فکس باکس چیدمان های مختلفی را طراحی کنیم.
برای مثال اگر داخل یک کانتینر ۴ کانتینر دیگر بیندازیم از قسمت جهت یابی میتوانیم چینش آنها را بصورت دقیق مشخص کنیم.
حالت اول ردیف افقی : در این حالت چهار کانتینر داخل کانتینر اصلی در یک ردیف بغل همدیگر قرار می‌گیرند.
حالت ستون عمودی : در این حالت کانتینر های داخل یک کانتینر والد زیر هم بصورت عمودی قرار می‌گیرند.
حالت افقی معکوس: دقیقا حالت اول را معکوس میکند.
حالت عمودی معکوس: این حالت هم دقیقا حالت عمودی را معکوس میکند. به تصویر زیر برای درک بیشتر این بخش توجه کنید:
اگر ۴ کانتینر با رنگ های مختلف در یک کانتینر والد یا اصلی داشته باشیم، میتوانیم به کمک بخش جهت یابی آنها را بصورت عمودی در ستون یا افقی در یک ردیف کنار هم یا حتی معکوس هر دو حالت بچینیم. این قدرت بخش جدید کانتینر است که اینقدر کار رو برای ما راحت کرده 🙂
تا اینجای کار باهم متوجه شدیم که کار کردن با کانتینر (container) در المنتور چطور هست. اگه سوالی در مورد این بخش داشتید میتونید توی کامنت ها بپرسید.
24 پاسخ
سلام.ممنون بابت آموزش.لازم بود این آپدیت رو یکی دست بگیره .خدا قوت
سلام دوست عزیز، خیلی خوشحالیم که مورد توجه شما قرار گرفت
دمتون گرم. لطفا آپدیت که میاد آموزشش رو مثل این قرار بدین. فن بیان آموزشتون ساده و گویاست.
سلام ،ممنون از نظرتون. بله حتما، خوشحالیم که مورد توجهتون قرار گرفته.
سلام دوست عزیز خلی آموزشتون عالی بودش خیلی گاگ به گام و مرتب درود بر شما
موفق وپیروز باشد.
سلام، خیلی ممنون از نظر شما. خوشحالیم که مورد استفادتون قرار گرفت.
کامل و عالی بود. خداقوت
ممنون از انرژی و نظرتون
خوب و دقیق بود
ممنون
سلام خیلی ممنون واقعا عالی و کاربردی توصیح دادین.
سلام، خیلی ممنون از نظر شما. خوشحالیم که مورد استفادتون قرار گرفته
خیلی جامع و مفید. کل مبحث کانتینر رو آموزش دادین. تشکر
خوشحالیم که مفید بوده دوست عزیز
سلام وقت بخیر، چطور می توانیم نحوه نمایش یک کانتینر را (مخفی یا نشان دادن آن) مشخص کرد؟ مثلا شرط گذاشت که در حالت عادی مخفی باشد و وقتی روی لینکی کلیک شد نشان داده شود؟
سلام دوست عزیز، توی پیج اینستاگرام کنترل وب آموزش هاید کردن یک المان بعد از یک واکنش داده شده. میتونید استفاده کنید
سلام اگه کانتینر شبکه و فلکس باکس غیرفعال باشن و با حالت عادی طراحی کرده باشیم و بخوایم بعد طراحی دوباره فعال کنیم کانتینر شبکه و فلکس باکس رو طراحی قبلی خراب میشه؟
سلام، همزمان میتونین از سیستم قبلی و فلکس باکس با هم استفاده کنین و مشکلی به وجود نمیاد اما بهتره که با توجه به ویژگی های این سیستم جدید تمام قسمت ها رو با این سیستم بازسازی کنین.
سلام وقت بخیر چطور میتونم ارتفاع کانتینر کم کنم کمترین ارتفاعی که به من میده باز هم زیاده چطوری کمتر کنم من تنظیماتی پیدا نکردم
سلام دوست عزیز
هر المانی که داخل اون کانتینر بندازید، کانتینر بصورت خودکار همون ارتفاع رو میگیره که کمترین حالتش برای اون المان داخلیش هست. اگر هم بخواید بصورت دستی تنظیم کنید توی صفحه ویرایش با المنتور تا یه حدی کم میشه اما روی حالت خروجی نهایی که نگاه کنید از اون ارتفاع کمتر رو هم میگیره به خودش شما باید با توجه به خروجی نهاییش تنظیمش کنید.
عالی. the best
یکی از بهترین آموزش ها تو حوزه وردپرس و المنتور جدید به زبانی ساده ، گویا ، روزمره و در عین حال کلاسیک … مرسی
خوشحالیم که مفید بوده دوست عزیز
درود وقتتون بخیر، من از قالب آسترا استفاده میکنم.
متاسفانه همه تنظیماتسایت رو زیر و رو کردم و نمیتونم کانتینتر رو تمام عرض کنم، تقریبا ۱۰ پیکسل از راست و چپ فاصله میگیره.
سلام، اگر تمام تنطیمات رو درست انجام میدین اما باز مشکلی وجود داره، ممکنه نیاز باشه تا با کد css مشکل رو حل کنین.اگر باز هم مشکلی بود برای بررسی مشکل لطفا به پشتیبانی داخل تلگرام پیام بدین تا بررسی کنیم.
@ctrlwebsupport