المان Off-Canvas در المنتور چیست؟

المان Off-Canvas در المنتور چیست؟

یکی از جذاب‌ترین امکاناتی که در نسخه‌های جدید المنتور (به‌ویژه المنتور پرو) اضافه شده، المان Off-Canvas است.

اگر تا به حال در سایت‌هایی دیده‌اید که با کلیک روی یک آیکون منو، پنلی از سمت راست یا چپ صفحه باز می‌شود و محتوای خاصی را نمایش می‌دهد، دقیقاً دارید نمونه‌ای از Off-Canvas را می‌بینید.

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

کاربردهای المان Off-Canvas در طراحی سایت با المنتور

Off-Canvas فقط برای منوهای موبایل نیست. با المنتور، شما می‌توانید این المان را برای کارهای متنوعی استفاده کنید، مثل:

منوهای مخفی (Hidden Menus)

در طراحی نسخه موبایل یا حتی دسکتاپ، Off-Canvas می‌تواند منوی اصلی سایت را در یک فضای پنهان قرار دهد و تنها با کلیک روی آیکون “سه خط” باز شود.

سبد خرید (Shopping Cart)

اگر سایت فروشگاهی دارید، می‌توانید سبد خرید را در یک پنل Off-Canvas نمایش دهید تا کاربر بدون ترک صفحه فعلی، خرید خود را مدیریت کند.

فیلتر محصولات (Product Filters)

در صفحات فروشگاهی، فیلترها می‌توانند در یک پنل Off-Canvas قرار بگیرند تا فضای صفحه اصلی تمیز باقی بماند.

فرم تماس یا ثبت‌نام سریع

گاهی کاربران حوصله رفتن به صفحه جدید را ندارند؛ یک فرم ساده در Off-Canvas می‌تواند تجربه کاربری را بسیار بهبود دهد.

نمایش محتوای جانبی یا تبلیغاتی

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

پیشنهاد مطالعه: المان حلقه چرخ و فلک در المنتور (Loop Carousel) چیست و چه کاربردی دارد؟

مزایای استفاده از Off-Canvas در المنتور

استفاده از این المان فقط جنبه‌ی زیبایی ندارد؛ بلکه از نظر تجربه کاربری (UX) و سئو هم مزایای مهمی دارد:

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

آموزش ساخت Off-Canvas در المنتور – قدم به قدم

ساخت یک پنل Off-Canvas در المنتور خیلی ساده‌تر از چیزی است که فکر می‌کنید. کافی‌ست مراحل زیر را دنبال کنید:

۱. نصب و فعال‌سازی افزونه مناسب

در نسخه‌های جدید المنتور پرو، المان Off-Canvas به صورت پیش‌فرض وجود دارد.

اما اگر از نسخه رایگان استفاده می‌کنید، می‌توانید از افزونه‌های جانبی مثل Elementor Addons، The Plus Addons، Happy Addons یا PowerPack استفاده کنید که ویجت Off-Canvas دارند.

۲. افزودن المان Off-Canvas به صفحه

در صفحه‌ی مورد نظر، ویجت Off-Canvas را بکشید و در مکان مناسب قرار دهید.

در تنظیمات ویجت می‌توانید انتخاب کنید پنل از کدام سمت (چپ، راست، بالا یا پایین) باز شود.

۳. طراحی محتوای داخلی پنل

در بخش محتوای Off-Canvas می‌توانید هر چیزی که خواستید قرار دهید:

منو، فرم، تصویر، دکمه، سبد خرید یا حتی ویجت‌های داینامیک المنتور.

۴. تنظیمات نمایش و انیمیشن

در تب Style یا Advanced می‌توانید ظاهر، رنگ، پس‌زمینه، سرعت باز شدن و افکت‌های حرکتی را تنظیم کنید.

افکت‌های fade، slide و push از محبوب‌ترین گزینه‌ها هستند.

۵. افزودن دکمه یا آیکون فعال‌ساز (Trigger Button)

برای باز کردن Off-Canvas باید یک دکمه یا آیکون تعریف کنید. معمولاً از آیکون همبرگری (سه خط) یا آیکون سبد خرید استفاده می‌شود.

نکات سئو و فنی در استفاده از Off-Canvas

هرچند Off-Canvas یک المان بصری است، اما تأثیر غیرمستقیمی هم بر سئو سایت دارد.

در طراحی این بخش‌ها به نکات زیر توجه کنید:

• محتوای داخل Off-Canvas باید قابل ایندکس باشد (در المنتور این مورد رعایت شده است).
• از جاوااسکریپت سنگین و انیمیشن‌های طولانی خودداری کنید تا سرعت سایت کاهش پیدا نکند.
• در نسخه موبایل، اندازه و موقعیت دکمه باز شدن باید مناسب انگشت کاربر باشد.
• اگر Off-Canvas شامل لینک‌های مهم سایت است، حتماً تگ‌های SEO-friendly مثل <nav> یا <aside> را استفاده کنید.
• محتوای مخفی‌شده نباید برای فریب گوگل باشد؛ بلکه باید صرفاً برای بهبود تجربه کاربری پنهان شود.

جمع‌بندی

المان Off-Canvas در المنتور یکی از المان‌های مدرن و کاربردی در طراحی سایت است که هم از نظر زیبایی، هم از نظر کاربرد و تجربه کاربری اهمیت زیادی دارد.

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

چه طراح تازه‌کار باشید و چه یک متخصص وردپرس، اگر می‌خواهید ظاهر سایتتان حرفه‌ای‌تر شود، حتماً از Off-Canvas استفاده کنید.

این یکی از ساده‌ترین راه‌ها برای اینکه سایتتان «مدرن‌تر از بقیه» به نظر برسد.

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