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

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

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

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

کانتینر یک بلوک یا جعبه انعطاف‌ پذیر است که می ‌تواند شامل المان‌ های مختلف (مانند متن، تصویر، دکمه، فرم و…) باشد. این کانتینرها بر پایه‌ فناوری CSS Flexbox  طراحی شده‌اند که یکی از استانداردهای مدرن در طراحی وب محسوب می ‌شود.

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

با استفاده از تنظیمات انعطاف ‌پذیری  (Flexbox) می ‌توانید چینش، فاصله‌ها، جهت و تراز المان‌ها را دقیقاً کنترل کنید.

پیشنهاد مطالعه: راهنمای خرید سایت آموزشی

چرا کانتینر جایگزین سکشن شد؟

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

1. بهینه ‌تر از نظر سرعت بارگذاری : تعداد کدهای HTML تولید شده کمتر است.
2. انعطاف ‌پذیری بالا : با Flexbox می ‌توان چینش‌ های پیچیده ‌تری ساخت.
3. سادگی در طراحی ریسپانسیو : تنظیمات نمایش در موبایل و دسکتاپ آسان‌ تر شده است.
4. امکان طراحی مدرن‌تر : مثلاً طراحی ‌های افقی، چینش ‌های نامتقارن یا ترکیبی راحت‌ تر پیاده‌ سازی می‌ شوند.

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

ویژگی‌های اصلی کانتینر المنتور

با گزینه‌هایDirection  (جهت) می‌توانید مشخص کنید المان‌ها به صورت افقی کنار هم قرار بگیرند یا عمودی روی هم چیده شوند.

فاصله‌گذاری هوشمند

می‌توانید فاصله داخلی (Padding) و فاصله بیرونی (Margin) هر کانتینر را به راحتی تنظیم کنید.

قابلیت تو در تو  (Nested Containers)

یک کانتینر می ‌تواند درون کانتینر دیگر قرار بگیرد. این ویژگی امکان طراحی ‌های چند لایه و پیچیده را فراهم می‌ کند.

تراز و توزیع محتوا

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

بهینه ‌سازی برای موبایل

در طراحی ریسپانسیو، می ‌توانید برای هر دستگاه (موبایل، تبلت، دسکتاپ) چینش متفاوتی تعریف کنید.

سازگاری با Grid در آینده

المنتور علاوه بر Flexbox در حال توسعه قابلیت CSS Grid  برای کانتینرها است که امکانات بیشتری برای طراحی فراهم می ‌کند.

پیشنهاد مطالعه: آموزش کامل بخش تیتر در المنتور

المان بخش داخلی در المنتور

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

طرح‌ بندی (Layout)

در بخش طرح‌ بندی (Layout) المان بخش داخلی (Inner Section) در المنتور، تنظیمات کلیدی برای مدیریت چیدمان ستون‌های داخلی ارائه می‌شود. این تنظیمات شامل کنترل عرض محتوا برای تعیین اینکه ستون‌ها تمام عرض سکشن والد را پر کنند یا در یک عرض ثابت قرار گیرند، و همچنین مدیریت فاصله ستون‌ها برای تنظیم فضای خالی بین ستون‌ های داخلی است. علاوه بر این، می‌توانید ترتیب قرارگیری ستون‌ها را مشخص کنید و تنظیمات واکنش‌گرایی را اعمال نمایید تا مطمئن شوید که این ساختار شبکه‌ ای پیچیده در دستگاه‌های مختلف مانند موبایل و تبلت به‌درستی و با چید مانی بهینه نمایش داده می‌ شود.

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

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

ساختار (Structure)

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

بخش استایل (Style)

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

پس‌ زمینه (Background)

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

روکش پس‌ زمینه ( Cover Background)

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

حاشیه (Border)

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

جداکننده (Divider)

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

تایپو گرافی(Typography)

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

بخش پیشرفته (Advanced)

 بخش پیشرفته (Advanced) در ویجت سربرگ المنتور، مجموعه‌ ای از تنظیمات قدرتمند را ارائه می‌ دهد که فراتر از محتوا و استایل پایه هستند و به شما کنترل دقیقی بر چیدمان، فاصله و جلوه‌های ویژه می‌دهند در این بخش می‌توانید حاشیه‌ های داخلی (Padding) و خارجی (Margin) را برای کنترل دقیق فضای اطراف تیتر تنظیم کنید همچنین، گزینه‌ هایی برای افزودن افکت‌ های حرکتی جذاب مانند انیمیشن‌ های ورود، تنظیمات ریسپانسیو برای پنهان کردن تیتر در دستگاه‌ های خاص، و افزودن کلاس‌ های CSS سفارشی یا شناسه‌های ID برای استایل‌ دهی اختصاصی وجود دارد. این تنظیمات پیشرفته به طراحان اجازه می‌ دهد تا کنترل کامل بر موقعیت‌ یابی و تعامل‌ پذیری تیتر در صفحه داشته باشند.

تنظیمات بخش پیشرفته

در بخش پیشرفته المنتور، مجموعه‌ ای از تنظیمات حیاتی برای کنترل دقیق فاصله‌ گذاری و چیدمان عناصر وجود دارد. گزینه‌ های حاشیه خارجی و فاصله داخلی که با واحدهای پیکسل قابل تنظیم هستند، به شما اجازه می‌ دهند فضای اطراف و داخل یک عنصر را مدیریت کنید. می‌ توانید مقادیر بالا، راست، پایین و چپ را به‌ صورت مجزا تنظیم کرده یا با فعال کردن گزینه اتصال مقادیر به یکد یگر، یک فاصله یکنواخت اعمال کنید؛ همچنین از auto برای تراز خودکار استفاده می‌ شود. ایندکس ترتیب عمق عناصر روی هم را مشخص می‌کند، در حالی که شناسه CSS (CSS ID) و کلاس‌های CSS (CSS Classes) برای استایل‌ دهی سفارشی با کد نویسی استفاده می‌شوند. نهایتاً، نمایش شرط‌ها به شما اجازه می‌ دهد تعیین کنید که یک عنصر تحت شرایط خاصی در صفحه نمایش داده شود یا خیر.

موشن افکت (Motion Effects)

گزینه موشن افکت به شما این قابلیت را می‌ دهد که انیمیشن‌ها و جلوه‌های حرکتی جذاب به عناصر صفحه خود اضافه کنید تا وب‌ سایت شما پویاتر و جذاب‌ تر شود . این تنظیمات شامل دو دسته اصلی هستند: انیمیشن‌های ورودی مانند Fade In، Slide In یا Zoom In که هنگام بارگذاری یا اسکرول کاربر به سمت عنصر فعال می‌ شوند؛ و افکت‌های اسکرول که با حرکت دادن صفحه، باعث ایجاد جلوه‌هایی مانند حرکت پارالاکس عمودی یا افقی، شفافیت تدریجی (Opacity) یا مقیاس‌ پذیری می‌ شوند استفاده از موشن افکت‌ ها می‌ تواند توجه کاربر را به بخش‌های خاصی جلب کند، اما استفاده بیش از حد از آنها ممکن است باعث حواس‌ پرتی یا کاهش عملکرد وب‌ سایت شود.

واکنش‌ گرا (Responsive)

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

ویژگی ها (Features)

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

css سفارشی (Custom CSS)

در بخش پیشرفته (Advanced) المنتور پرو، گزینه CSS سفارشی یک ویژگی بسیار قدرتمند است که به کاربران امکان می‌ دهد کدهای استایل‌ دهی دلخواه خود را مستقیماً به یک ویجت، ستون، کانتینر یا سکشن خاص اضافه کنند این ویژگی برای طراحانی مفید است که نیاز به کنترل دقیقی فراتر از تنظیمات پیش‌فرض المنتور دارند، مانند اعمال جلوه‌های بصری منحصر به فرد یا رفع مشکلات جزئی چیدمان . با استفاده از این قابلیت، کد CSS نوشته شده تنها بر روی همان عنصر خاص اعمال می‌ شود و بدون نیاز به دسترسی به فایل‌ های اصلی قالب یا نصب افزونه‌های اضافی، امکان شخصی‌ سازی بی‌ نهایت ظاهر وب‌ سایت را فراهم می‌ کند .

تفاوت کانتینر با سکشن و ستون

• سکشن و ستون = ساختار قدیمی، سنگین‌ تر و محدودتر.
• کانتینر = ساختار جدید، سبک ‌تر و منعطف ‌تر.

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

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

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