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

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

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

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

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

با خرید افزونه های وردپرس وب سایت خود را حرفه ای کنید

تفاوت کانتینر و سکن (Section) در المنتور

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

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

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

آموزش استفاده از کانتینر برای طراحی صفحات

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

1- فعال سازی کانتینر فلکس باکس در تنظیمات المنتور

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

2- نحوه اضافه کردن کانتینر به صفحه

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

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

دو ستون اول به ستون های جهت دار معروف هستند. برای مقایسه راهکارهای «ساخت بخش‌های سفارشی با المنتور»، امکانات Elementor Addons For WooCommerce نیز قابل بررسی است. پیش از استفاده، سازگاری با نیازهای سایت را ارزیابی کنید. با انتخاب آن ها می توانید مشخص کنید محتوایی که به آن اضافه می کنید به صورت افقی یا عمودی نمایش داده شود.

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

نگران نباشید. می توانید جهت محتوای هر ستون را از پنل المنتور تغییر دهید. به مسیر چیدمان > کانتینر > جهت بروید. گزینه های مربوطه را مانند تصویر زیر مشاهده خواهید کرد.

بیشتر بخوانید: بهترین افزونه های کد تخفیف و کوپن ووکامرس

3- سفارشی سازی کانتینر فلکس باکس

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

4- افزودن ابزارک ها به کانتینر فلکس باکس

ابزارک های مورد نیاز را از پنل المنتور کشیده و در فلکس باکس ها رها کنید. این روند مشابه استفاده از المنتور سنتی بر اساس بخش ها است. برای افزودن ابزارک‌های طراحی به المنتور، افزونه Designer Powerup نیز از گزینه‌های قابل بررسی است. به عنوان مثال، در تصویر زیر از ابزارک های عنوان (Heading)، تصویر (Image) و ویرایشگر متن (Text Editor) استفاده کرده ایم.

5- تنظیم عرض، فاصله و ارتفاع کانتینر

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

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

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

6- پیش‌نمایش و تست کانتینر در موبایل و دسکتاپ

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

7- ذخیره قالب کانتینر برای استفاده در صفحات دیگر

در المنتور میتوانید کانتینر خود را به عنوان قالب ذخیره کنید تا در صفحات دیگر نیز از آن استفاده کنید. برای این کار کافی است کانتینر را انتخاب کرده و گزینه «ذخیره به عنوان قالب» را بزنید.

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

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

نکات بهینه‌سازی سرعت صفحات با کانتینر

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

• استفاده محدود از کانتینرهای تو در تو: قرار دادن کانتینرهای زیاد داخل یکدیگر باعث افزایش حجم کد و کاهش سرعت بارگذاری می شود. تنها زمانی از کانتینرهای تو در تو استفاده کنید که واقعاً نیاز است.
• بهینه‌سازی تصاویر و ابزارک ها: تصاویر و ابزارک های اضافه باعث سنگین شدن صفحه می شوند. حتما تصاویر را قبل از بارگذاری فشرده و با فرمت مناسب استفاده کنید.
• استفاده از CSS سفارشی بهینه: در صورت نیاز به CSS سفارشی، آن را کم حجم و بهینه بنویسید تا فایل های اضافه باعث کاهش سرعت نشوند. در پروژه‌هایی که طراحی افکت‌های ورود و انیمیشن صفحات المنتور اهمیت دارد، می‌توان ویژگی‌های افزونه Animated Intro for Elementor را هم بررسی کرد.
• غیرفعال کردن ویژگی های غیرضروری کانتینر: برخی افکت ها و انیمیشن ها ممکن است بار اضافی روی صفحه ایجاد کنند. تنها افکت هایی که ضروری هستند را فعال کنید.
• کنترل تعداد المان ها در هر کانتینر: اضافه کردن تعداد زیاد المان در یک کانتینر باعث افزایش زمان رندر صفحه می شود. سعی کنید هر کانتینر تعداد محدودی المان داشته باشد.

خرید قالب چند فروشندگی وردپرس

سوالات متداول

خرید قالب فروشگاهی وردپرس

جمع بندی: آموزش Container المنتور

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

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