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

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

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

انواع Container در المنتور

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

1. کانتینرهای متقارن (Grid): این نوع کانتینر به شما امکان می‌دهد عناصر را به صورت متقارن و در یک ساختار شبکه‌ای قرار دهید. این نوع طراحی معمولاً برای چیدمان‌های منظم و یکسان استفاده می‌شود.
2. کانتینرهای نامتقارن (Flexbox): این کانتینرها بیشتر برای چیدمان‌های انعطاف‌پذیر و نامتقارن کاربرد دارند. با استفاده از Flexbox، می‌توانید عناصر را در کنار یکدیگر قرار دهید و نحوه نمایش آن‌ها را به راحتی تغییر دهید.

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

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

• کاهش DOM: یکی از مزایای بزرگ کانتینرها، کاهش اندازه DOM (Document Object Model) است. با استفاده از کانتینرها، می‌توانید تعداد عناصر HTML را کاهش دهید، که این امر به بهبود عملکرد سایت و افزایش سرعت بارگذاری کمک می‌کند.
• طراحی هوشمند: کانتینرها به شما اجازه می‌دهند طراحی‌های هوشمندانه‌تری ایجاد کنید. با استفاده از امکانات Flexbox و Grid، می‌توانید چیدمان‌های پیچیده‌تری بسازید که به راحتی قابل تنظیم و مدیریت هستند.
• ساختاردهی و نظم‌دهی به چیدمان: کانتینرها به شما کمک می‌کنند تا محتوای خود را در یک ساختار منظم و دقیق بچینید، به طوری که طراحی صفحات شما بیشتر شبیه به یک الگوی ثابت و منظم باشد.
• کنترل راحت‌تر بر فضای داخلی و خارجی: با استفاده از کانتینرها، می‌توانید به راحتی فاصله‌ها، حاشیه‌ها و پدینگ‌ها را مدیریت کنید، که باعث بهبود تجربه کاربری و ظاهر طراحی می‌شود.
• پاسخگویی بهینه: کانتینرها در المنتور برای طراحی صفحات واکنش‌گرا و تطبیق‌پذیر (Responsive) بسیار مفید هستند و این امکان را به شما می‌دهند که نمایش صفحه را در اندازه‌های مختلف صفحه‌نمایش به خوبی تنظیم کنید.
• سادگی در استفاده: با استفاده از کانتینرها، نیازی به نوشتن کدهای پیچیده نخواهید داشت. این ابزار به طراحان کمک می‌کند تا بدون نیاز به دانش برنامه‌نویسی، صفحات زیبا و کاربردی بسازند.
• ترکیب آسان با ابزارک‌ها: کانتینرها به راحتی می‌توانند ابزارک‌های مختلف مانند متن، تصویر، دکمه و غیره را در خود جای دهند و در عین حال امکان مدیریت بهتر این ابزارک‌ها را فراهم می‌کنند.
• افزایش انعطاف‌پذیری طراحی: با استفاده از کانتینرها، می‌توانید طراحی‌های پیچیده‌تری بسازید که در آن‌ها تمام اجزا به صورت جداگانه و در عین حال هماهنگ با هم قرار می‌گیرند.
• پشتیبانی از انواع محتوا: کانتینرها می‌توانند انواع مختلف محتوا از جمله متن، تصویر، ویدئو و ابزارک‌های مختلف را در بر بگیرند و به شما این امکان را می‌دهند که طراحی صفحه‌ای بسیار متنوع و جذاب ایجاد کنید.
• بهبود زمان بارگذاری صفحات: استفاده بهینه از کانتینرها می‌تواند باعث بهبود عملکرد سایت و سرعت بارگذاری صفحات شود، زیرا ساختارهای ساده‌تر و بهینه‌تر برای بارگذاری سریع‌تر محتوا کمک می‌کنند.

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

کانتینرهای تودرتو

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

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

معرفی ویژگی‌های کانتینرها در المنتور

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

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

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

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

1. ابتدا کانتینر مورد نظر را انتخاب کنید.
2. به تب و یا زبانه طرح‌بندی بروید.
3. کمی پایین‌تر از بخش طرح‌بندی، گزینه‌های اضافه را خواهید دید.
4. در این قسمت، گزینه تگ HTML را پیدا کرده و روی آن کلیک کنید.
5. تگ را به “a” (پیوند) تغییر دهید.
6. سپس لینک مورد نظر خود را وارد کنید.

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

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

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

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

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

در ادامه با قوانینی که کانتینرها بر اساس آن‌ها عمل می‌کنند، آشنا خواهیم شد.

1. عرض جعبه ای: در حالت جعبه‌ای، عرض محتوای داخلی کانتینر به تغییرات عرض کانتینر واکنش می‌دهد و خود را به اندازه‌ی مشخصی که تعیین شده محدود می‌کند. در این حالت، محتوای درون کانتینر بسته به تنظیمات تعیین شده توسط کاربر در داخل یک محدوده قرار می‌گیرد.
2. عرض کامل: در حالت تمام عرض، کل کانتینر بدون محدودیت، عرض صفحه را پر می‌کند و محتوای داخل کانتینر با عرض کانتینر تطبیق می‌یابد و تغییرات را دنبال می‌کند.
3. اولویت کانتینر در المنتور: قابلیت ارث‌بری در کانتینرها به عناصر داخلی این امکان را می‌دهد که برخی از ویژگی‌های کانتینر والد را به صورت خودکار دریافت کنند. این ویژگی می‌تواند در بهینه‌سازی و یکپارچگی تنظیمات سبک و چیدمان بسیار مفید باشد.
4. کمترین ارتفاع: تنظیم کمترین ارتفاع کانتینر باعث می‌شود کانتینر حتی در صورت داشتن محتوای کم، به ارتفاع مشخصی برسد. این کار به شما کمک می‌کند طرحی ثابت و منظم ایجاد کنید و از تغییرات ناخواسته در اندازه کانتینرها جلوگیری شود..
5. جهت‌یابی: گزینه جهت‌یابی به شما اجازه می‌دهد که نحوه قرارگیری محتوا را در کانتینر تعیین کنید، به‌صورت افقی یا عمودی. این ویژگی برای چیدمان دقیق عناصر بسیار کاربردی است.
6. تراز کردن محتوا: تنظیمات تراز کردن محتوا به شما این امکان را می‌دهد که موقعیت محتوای درونی کانتینر را بر اساس نیازهای طراحی خود، مانند تراز مرکزی، چپ، راست یا بالا و پایین، تنظیم کنید.
7. شکاف (Gap): گزینه شکاف برای تعیین فاصله بین عناصر داخلی کانتینر استفاده می‌شود. با این گزینه می‌توانید فاصله‌گذاری‌ها را دقیق تنظیم کنید و چیدمان مرتب‌تری برای محتوا داشته باشید.
8. Wrap: در کانتینرها به عناصر داخلی اجازه می‌دهد که در صورت پر شدن عرض کانتینر، به خط بعدی منتقل شوند. این ویژگی برای چیدمان ریسپانسیو و منظم عناصر در کانتینرها بسیار مفید است.
9. No Wrap: گزینه No Wrap از انتقال عناصر به خط بعدی جلوگیری می‌کند و همه‌ی عناصر را در یک خط نگه می‌دارد. این تنظیم در مواقعی مفید است که می‌خواهید عناصر داخلی کنار هم و بدون شکاف باقی بمانند.

عملکرد عناصر منفرد کانتینردر المنتور

در ادامه با گزینه های مختلف این مورد را با هم برسی میکنیم این ویژگی ها در تب پیشرفته هر عنصر وجود دارد و چند زیر گزینه را برای تنظیم عرض عنصر ارائه می‌دهد:

عرض سفارشی

• پیش‌فرض: عرض عنصر به طور پیش‌فرض بر اساس تنظیمات کانتینر و چیدمان کلی تعیین می‌شود.
• تمام عرض (100%): عنصر کل عرض کانتینر را پر می‌کند و بدون حاشیه‌ای از لبه‌های کانتینر نمایش داده می‌شود.
• در متن (Auto): عنصر به صورت “درون متنی” نمایش داده می‌شود، یعنی در یک خط با سایر عناصر قرار می‌گیرد، به خصوص زمانی که می‌خواهید عناصر به‌صورت کنار هم قرار گیرند.
• عرض سفارشی: این گزینه به شما اجازه می‌دهد تا عرض عنصر را به صورت دستی و با مقدار دقیق تنظیم کنید. این تنظیمات می‌تواند برای طرح‌های پیچیده مفید باشد.

چیدمان

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

• آغاز (Start): عنصر را در بالای کانتینر قرار می‌دهد و در ابتدای محور عمودی چیدمان می‌کند.
• وسط : عنصر را در وسط کانتینر قرار می‌دهد و آن را در مرکز محور عمودی قرار می‌دهد.
• پایان (End): عنصر را در پایین کانتینر قرار می‌دهد و در انتهای محور عمودی چیدمان می‌کند.
• کشیده : عنصر را به طور کامل در امتداد محور عمودی کشیده می‌کند، به‌طوری‌که کل ارتفاع کانتینر را پر کند.

اندازه

تنظیمات اندازه، کنترل بیشتری بر رفتار اندازه‌ی هر عنصر ارائه می‌دهد و شامل این زیر گزینه‌ها است:

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

نتیجه گیری

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

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