ساخت منو با المنتور؛ طراحی مگامنو و منوی ریسپانسیو

منوی سایت باید کاربر را سریع به مهم‌ترین بخش‌ها برساند؛ نه اینکه خودش به مانعی برای پیدا کردن محتوا تبدیل شود. با Elementor می‌توانید ظاهر منو را با طراحی سایت هماهنگ کنید، نسخه موبایل را جداگانه تنظیم کنید و در سایت‌های بزرگ‌تر از Mega Menu برای نمایش دسته‌بندی‌های بیشتر استفاده کنید.

در این آموزش ابتدا یک منوی معمولی و ریسپانسیو می‌سازیم و بعد سراغ مگامنو می‌رویم. نکته مهم این است که در نسخه‌های جدید Elementor ممکن است به‌جای Nav Menu قدیمی، دو ابزارک WordPress Menu و Menu را ببینید. اولی برای نمایش منوهای ساخته‌شده در وردپرس مناسب است و دومی امکان ساخت منو و Mega Menu پیشرفته‌تر را فراهم می‌کند.

نکته درباره نسخه‌های جدید Elementor

مستندات Elementor در ژوئن ۲۰۲۶، Menu widget را هنوز یک قابلیت Experimental معرفی می‌کنند. اگر این ابزارک را در پنل نمی‌بینید، نسخه و تنظیمات Features/Experiments سایت را بررسی کنید. فعال شدن Menu همراه با Nested Elements و Containers می‌تواند Nav Menu قدیمی را با WordPress Menu و Menu widget جایگزین کند.

 

قبل از ساخت منو با المنتور چه چیزهایی لازم است؟

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

• Elementor روی سایت نصب و فعال باشد.
• صفحات اصلی مثل خانه، درباره ما، خدمات، فروشگاه و تماس با ما از قبل ساخته شده باشند.
• محل نمایش منو، مثل Header یا Footer، مشخص باشد.
• اگر از WordPress Menu widget استفاده می‌کنید، منوی موردنظر را ابتدا در WordPress بسازید.
• اگر قصد ساخت Mega Menu دارید، در دسترس بودن Menu widget و قابلیت‌های Nested Elements و Containers را بررسی کنید.

در سایت‌هایی که منو از قبل در بخش Appearance > Menus وردپرس ساخته شده، WordPress Menu widget مسیر ساده‌تری است. اگر قرار است خود آیتم‌ها و محتوای Dropdown را داخل Elementor بسازید، Menu widget انعطاف بیشتری دارد.

WordPress Menu یا Menu widget؛ کدام را انتخاب کنیم؟

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

ابزارک	مناسب برای	نکته اصلی
WordPress Menu	نمایش منویی که قبلاً در وردپرس ساخته‌اید	برای منوی معمولی، Dropdown و استایل‌دهی سریع مناسب است.
Menu widget	ساخت منو و Mega Menu داخل Elementor	می‌تواند Dropdown Content، تصویر، آیکون و Widgetهای دیگر داشته باشد.

 

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

برای یک منوی معمولی، ساده‌ترین مسیر این است که ابتدا ساختار لینک‌ها را مشخص کنید و بعد ظاهر و رفتار منو را در Elementor تنظیم کنید. اگر از WordPress Menu widget استفاده می‌کنید، منو باید از قبل در وردپرس ساخته شده باشد.

 

1. 1. اگر هنوز منویی ندارید، از پیشخوان وردپرس به پوسته > فهرست بروید و یک منوی جدید بسازید. صفحات اصلی را اضافه کنید و در صورت نیاز با Drag & Drop زیرمنو ایجاد کنید.
   2. Header یا قالبی را که قرار است منو داخل آن باشد با Elementor باز کنید.
   3. WordPress Menu widget را به محل موردنظر بکشید و از بخش Menu، منوی ساخته‌شده را انتخاب کنید.
   4. Layout را متناسب با طراحی انتخاب کنید. Horizontal معمولاً برای دسکتاپ مناسب است و Dropdown یا Toggle برای صفحه‌های کوچک کاربرد بیشتری دارد.
   5. Alignment، فاصله آیتم‌ها و Typography را تنظیم کنید تا منو با لوگو و سایر اجزای Header هماهنگ شود.
   6. زیرمنوها را باز کنید و فاصله، رنگ پس‌زمینه و خوانایی متن را بررسی کنید.
   7. در حالت ریسپانسیو، منو را روی Tablet و Mobile تست کنید و در صورت نیاز Breakpoint را تغییر دهید.

 

تنظیمات پایه منو؛ Alignment، Indicator و فاصله‌ها

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

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

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

سفارشی‌سازی Hover و Active State

برای اینکه کاربر بداند کدام لینک قابل تعامل است، حالت Hover را از حالت Normal متمایز کنید. این تفاوت می‌تواند با تغییر رنگ متن، Underline، Background یا Border ایجاد شود. لازم نیست هم‌زمان چند افکت استفاده کنید؛ یک تغییر واضح معمولاً کافی است.

• Normal: ظاهر عادی لینک قبل از تعامل کاربر.
• Hover: حالتی که نشانگر موس روی آیتم قبل از کلیک کردن قرار می‌گیرد.
• Active: صفحه یا بخشی که کاربر در حال حاضر داخل آن قرار دارد.

Active State را از Hover جدا نگه دارید تا کاربر بتواند موقعیت فعلی خود را تشخیص دهد. مثلاً Hover می‌تواند فقط رنگ متن را تغییر دهد و Active با یک خط زیرین ثابت مشخص شود.

طراحی منوی موبایل و تبلت

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

Elementor به‌صورت پیش‌فرض Breakpointهای رایج برای دسکتاپ، تبلت و موبایل دارد و می‌توانید آن‌ها را از Site Settings تغییر دهید. در مستندات فعلی، مرز پیش‌فرض تبلت حدود 1024 پیکسل و موبایل 767 پیکسل است؛ بااین‌حال اگر Header شما در عرض خاصی می‌شکند، Breakpoint را براساس طراحی واقعی سایت تنظیم کنید، نه صرفاً عدد پیش‌فرض.

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

آموزش ساخت مگامنو با المنتور

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

در Elementor جدید، ساخت Mega Menu با Menu widget انجام می‌شود. برای هر Menu Item می‌توانید Dropdown Content را فعال کنید و سپس داخل فضای بازشده Container و سایر عناصر Elementor را قرار دهید.

ساخت Mega Menu با Menu widget

1. Menu widget را به Header یا بخش موردنظر اضافه کنید.
2. نام آیتم‌های سطح اول را مشخص کنید و برای هرکدام لینک مناسب قرار دهید.
3. برای آیتمی که قرار است Mega Menu داشته باشد، Dropdown Content را فعال کنید.
4. داخل ناحیه Dropdown یک Container بسازید و ستون‌بندی موردنیاز را ایجاد کنید.
5. برای هر ستون یک عنوان کوتاه و لینک‌های مرتبط قرار دهید.
6. در صورت نیاز آیکون یا یک تصویر شاخص اضافه کنید؛ تصویر باید به پیدا کردن مسیر کمک کند، نه اینکه فقط فضای منو را پر کند.
7. عرض Content را روی حالت مناسب تنظیم کنید و رفتار باز شدن منو را در Hover و Click بررسی کنید.
8. نسخه Tablet و Mobile را جداگانه تست کنید؛ یک Mega Menu چندستونه معمولاً در موبایل نیاز به ساختار ساده‌تری دارد.

چیدمان دسته‌بندی‌ها، آیکون‌ها و تصاویر در مگامنو

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

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

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

چگونه مگامنو را بدون افت سرعت طراحی کنیم؟

خود Mega Menu لزوماً سایت را کند نمی‌کند، اما پر کردن آن با تصاویر بزرگ، Widgetهای زیاد و Animationهای متعدد می‌تواند هزینه پردازشی و حجم صفحه را بالا ببرد. منو باید سریع باز شود؛ چون بخشی از Navigation اصلی سایت است.

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

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

منوی معمولی یا Mega Menu؛ کدام مناسب‌تر است؟

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

نوع سایت	انتخاب پیشنهادی
سایت شرکتی کوچک	منوی معمولی
وبلاگ ساده	منوی معمولی
سایت خدماتی با چند صفحه اصلی	معمولاً منوی معمولی
فروشگاه با دسته‌بندی‌های زیاد	Mega Menu
مجله یا پورتال محتوایی	Mega Menu
سایت آموزشی بزرگ	بسته به تعداد دوره‌ها و دسته‌ها

 

اشتباهات رایج در طراحی منو با المنتور

بیشتر مشکلات منو از کمبود امکانات Elementor نیست؛ از ساختار نامناسب Navigation شروع می‌شود. قبل از اضافه کردن افکت و تصویر، مطمئن شوید مسیرها برای کاربر قابل فهم هستند.

• شلوغ کردن سطح اول منو: همه صفحات سایت لازم نیست در Header باشند.
• استفاده از زیرمنوهای خیلی عمیق: چند لایه پشت سر هم پیدا کردن لینک را سخت می‌کند.
• فونت یا فاصله خیلی کوچک در موبایل: لمس و خواندن منو را دشوار می‌کند.
• Hover نامشخص: کاربر متوجه Interactive بودن گزینه نمی‌شود.
• استفاده از Mega Menu برای سایت کوچک: پیچیدگی بدون ارزش واقعی ایجاد می‌کند.
• تست نکردن Header در عرض‌های میانی: منو ممکن است بین دسکتاپ و تبلت بشکند، حتی اگر دو Preview اصلی درست باشند.