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

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

اربران بتوانند تنها با چند کلیک به تمام دسته‌بندی‌های سایت دسترسی داشته باشند، محصولات را سریع‌تر پیدا کنند و تجربه کاربری بسیار بهتری داشته باشند.

در گذشته طراحی مگامنوهای حرفه‌ای نیازمند برنامه‌نویسی با HTML، CSS، JavaScript و PHP بود، اما اکنون با استفاده از ویجت مگامنو دیجی کالا در مجموعه ووکامرس پلاس، تنها با قابلیت کشیدن و رها کردن (Drag & Drop) المنتور می‌توانید در کمتر از یک دقیقه یک مگامنوی کاملاً حرفه‌ای طراحی کنید. در این آموزش، تمام مراحل ساخت مگامنو را از ابتدا تا انتها به‌صورت کاملاً عملی یاد خواهید گرفت.

مقایسه	طراحی مگامنو با کدنویسی	طراحی مگامنو با ویجت المنتور
نیاز به برنامه‌نویسی	دارد	ندارد
سرعت طراحی	چند ساعت تا چند روز	کمتر از یک دقیقه
امکان Drag & Drop	ندارد	دارد
ویرایش ظاهری	نیازمند کدنویسی	کاملاً گرافیکی
سازگاری با المنتور	محدود	کامل
مدیریت نسخه موبایل	پیچیده	با یک سوییچ
نگهداری و بروزرسانی	دشوار	بسیار ساده
مناسب افراد مبتدی	خیر	بله

---

مگامنو چیست؟ آموزش ساخت مگامنو با ویجت آماده المنتور

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

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

استفاده از مگامنو مزایای زیادی دارد:

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

---

پیش‌نیازهای آموزش

قبل از شروع آموزش، مطمئن شوید موارد زیر روی سایت شما نصب شده است.

• وردپرس
• ووکامرس
• المنتور پرو
• افزونه مگامنو پیشرفته ووکامرس پلاس

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

---

مرحله اول: باز کردن ویرایشگر المنتور

ابتدا وارد پیشخوان وردپرس شوید.

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

اکنون روی دکمه ویرایش با المنتور کلیک کنید تا ویرایشگر المنتور باز شود.

پس از باز شدن صفحه، در سمت راست (یا چپ در نسخه انگلیسی) پنل ابزارهای المنتور نمایش داده می‌شود.

---

مرحله دوم: اضافه کردن ویجت مگامنو

در بالای پنل المنتور، کادر جستجوی ویجت‌ها را مشاهده خواهید کرد.

داخل این کادر عبارت‌های زیر را جستجو کنید.

• مگامنو دیجی کالا
• MGM

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

به محض قرار دادن ویجت داخل صفحه، تنظیمات آن در پنل المنتور نمایش داده می‌شود.

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

---

مرحله سوم: انتخاب منبع اطلاعات مگامنو

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

در تب محتوا، گزینه‌ای با عنوان منبع اطلاعات مشاهده خواهید کرد.

بسته به نیاز خود می‌توانید یکی از گزینه‌های زیر را انتخاب کنید.

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

اگر فروشگاه اینترنتی دارید، این گزینه بهترین انتخاب است.

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

---

فهرست‌های وردپرس

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

اکنون می‌توانید همان منوی ساخته شده را داخل مگامنو نمایش دهید.

---

دسته‌بندی نوشته‌ها

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

با انتخاب آن، دسته‌بندی‌های نوشته‌های وردپرس داخل مگامنو نمایش داده خواهند شد.

---

قالب‌های المنتور

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

برای این کار ابتدا یک قالب جدید در المنتور طراحی کنید.

به عنوان مثال می‌توانید موارد زیر را طراحی کنید.

• بنر تخفیف
• اسلایدر
• محصولات ویژه
• فرم عضویت
• ویدئو
• تصویر تبلیغاتی

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

اکنون همان طراحی بدون هیچ تغییری داخل مگامنو نمایش داده می‌شود.

---

مرحله چهارم: تنظیم رنگ سازمانی

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

وارد تب استایل شوید.

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

با انتخاب یک رنگ، تمام بخش‌های زیر به‌صورت خودکار هماهنگ می‌شوند.

• رنگ خطوط
• رنگ تب فعال
• رنگ لینک‌ها
• رنگ آیکون‌ها
• رنگ هاور
• رنگ حاشیه‌ها

این ویژگی باعث می‌شود بدون تنظیم جداگانه هر بخش، کل مگامنو با رنگ برند سایت هماهنگ شود.

---

مرحله پنجم: انتخاب نحوه باز شدن مگامنو

در تنظیمات عمومی، گزینه‌ای برای نحوه باز شدن منو وجود دارد.

در این قسمت دو حالت در اختیار شما قرار گرفته است.

باز شدن با Hover

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

باز شدن با Click

در این حالت کاربر باید روی منو کلیک کند تا پنجره مگامنو باز شود.

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

---

مرحله ششم: مدیریت نمایش مگامنو در موبایل

در بسیاری از سایت‌ها برای نسخه موبایل از منوی همبرگری استفاده می‌شود.

به همین دلیل نیازی نیست مگامنو نیز در موبایل نمایش داده شود.

برای مدیریت این بخش، وارد تنظیمات عمومی ویجت شوید.

در قسمت نمایش در موبایل و نمایش در تبلت می‌توانید مشخص کنید مگامنو در چه دستگاه‌هایی نمایش داده شود.

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

---

مرحله هفتم: مدیریت تب‌ها و ستون‌ها

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

برای هر تب می‌توانید:

• عنوان اختصاصی تعیین کنید.
• آیکون انتخاب کنید.
• تصویر کوچک قرار دهید.
• لینک «مشاهده همه» اضافه کنید.
• تعداد ستون‌ها را مشخص کنید.

همچنین امکان ایجاد حداکثر ۱۲ ستون برای هر تب وجود دارد که برای فروشگاه‌های بزرگ کاملاً مناسب است.

---

مرحله هشتم: شخصی‌سازی کامل ظاهر مگامنو

پس از تکمیل ساختار منو، وارد تب استایل شوید.

در این قسمت تقریباً تمام اجزای مگامنو قابل تنظیم هستند.

تنظیم نوار بالایی

در این بخش می‌توانید موارد زیر را تغییر دهید.

• ارتفاع نوار
• رنگ پس‌زمینه
• رنگ متن
• رنگ آیکون
• حاشیه
• فاصله داخلی

---

تنظیم پنجره مگامنو

برای بخش بازشونده نیز تنظیمات کاملی در اختیار دارید.

از جمله:

• عرض مگامنو
• ارتفاع
• رنگ پس‌زمینه
• Border Radius
• Box Shadow
• فاصله داخلی
• عرض سایدبار

با استفاده از Box Shadow می‌توانید جلوه‌ای شناور مشابه سایت‌های حرفه‌ای ایجاد کنید.

---

تنظیم تایپوگرافی

در قسمت تایپوگرافی می‌توانید برای عنوان‌ها و لینک‌ها به‌صورت جداگانه تنظیم کنید.

• نوع فونت
• اندازه فونت
• وزن فونت
• ارتفاع خطوط
• فاصله بین حروف
• رنگ متن

در نتیجه مگامنو کاملاً با طراحی سایت شما هماهنگ خواهد شد.

---

مرحله نهم: انتشار مگامنو

بعد از اتمام تنظیمات، روی دکمه انتشار یا بروزرسانی المنتور کلیک کنید.

اکنون سایت خود را باز کنید و عملکرد مگامنو را بررسی نمایید.

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

---

نکاتی برای طراحی یک مگامنوی حرفه‌ای

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

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

---

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

---

جمع‌بندی

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