آموزش ساخت مگامنو دیجی کالا

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

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

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

همانطور که می‌دانید، بسیاری از آموزش‌های موجود برای ساخت مگامنو در وردپرس، به استفاده از افزونه‌های جانبی مانند JetMenu، Max Mega Menu ،Jettabs و … متکی هستند. این افزونه‌ها هرچند کاربردی هستند، اما می‌توانند به افزایش حجم سایت، کاهش سرعت بارگذاری، و ایجاد وابستگی به افزونه‌های شخص ثالث منجر شوند.

حتی ما در دوره آموزش المنتور در قسمت 56 آموزش ساخت مگامنو با المنتور با استفاده از افزونه JetTabs را به شما آموزش داده بودیم.

اما رویکرد ما در این مقاله کاملاً متفاوت و نوآورانه است: ما از قابلیت‌های بومی و قدرتمند افزونه المنتور پرو استفاده خواهیم کرد. به جای استفاده از روش‌های قدیمی‌تر یا افزونه‌ها، این بار بر ترکیب هوشمندانه ویجت “منو” و ویجت “تب” (Tabs Widget) تمرکز می‌کنیم. این بدان معناست که شما:

• نیاز به افزونه اضافی نخواهید داشت: عدم نیاز به کدهای اضافی افزونه‌های جانبی به معنی یک سایت سبک‌تر و سریع‌تر است.
• کنترل کامل بر طراحی: با ابزارک‌های المنتور پرو، به آزادی عمل بی‌نظیری در طراحی هر بخش از مگامنو دسترسی خواهید داشت.
• کاهش ریسک تداخل: عدم استفاده از افزونه‌های متعدد، احتمال تداخل بین افزونه‌ها و مشکلات فنی را به حداقل می‌رساند.
• بهبود Core Web Vitals: با کاهش درخواست‌های HTTP و حجم فایل‌ها، می‌توانید عملکرد سایت خود را از نظر معیارهای حیاتی گوگل بهبود بخشید.
• رویکرد منحصر به فرد: این روش ساخت مگامنو با المنتور، که بر پایه استفاده از ویجت تب المنتور بنا شده، کمتر در سایر آموزش‌ها دیده می‌شود و یک مزیت رقابتی برای محتوای شماست.

پیش‌نیازها: شروعی قدرتمند برای آموزش مگامنو المنتور

قبل از شروع به آموزش ساخت مگامنو با المنتور، مطمئن شوید که موارد زیر را در اختیار دارید:

• نصب وردپرس: آخرین نسخه وردپرس روی هاست شما نصب شده باشد.
• نصب المنتور و المنتور پرو: المنتور (نسخه رایگان) و افزونه المنتور پرو (نسخه پریمیوم) روی سایت شما فعال باشند.
• یک قالب وردپرس سازگار با المنتور: استفاده از قالب‌هایی مانند Hello Elementor یا دیگر قالب‌های مدرن و سبک توصیه می‌شود.
• دانش اولیه کار با المنتور: آشنایی با بخش‌های مختلف المنتور، کانتینرهای فلکس باکس، ویجت‌ها و تنظیمات پیشرفته آن کمک شایانی می‌کند.

گام به گام: آموزش ساخت مگامنو دیجی کالا با المنتور پرو

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

1. فعال‌سازی ویژگی‌های لازم در المنتور

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

1. وارد پیشخوان وردپرس شوید.
2. از منوی سمت راست به مسیر المنتور > تنظیمات > آزمایشگاه (Experiments) بروید.
3. گزینه‌های زیر را فعال کنید:
   • کانتینر فلکس باکس (Flexbox Container): برای ایجاد ساختار منعطف و چینش سریع آیتم‌ها.
   • عناصر تو در تو (Nested Elements): برای قرار دادن ویجت‌ها درون یکدیگر با انعطاف‌پذیری بیشتر (مثلاً یک ویجت تب المنتور درون یک بخش مگامنو).
   • ویجت منو (Menu Widget): این ویجت جدید المنتور برای ساخت منوهای پیشرفته ضروری است.

2. ایجاد هدر جدید با Theme Builder (محل قرارگیری مگامنو)

مگامنو معمولاً بخشی از هدر (سربرگ) سایت شماست. برای ساخت یک هدر سفارشی و قابل کنترل در المنتور، از Theme Builder استفاده می‌کنیم.

1. به مسیر المنتور > قالب‌ساز (Theme Builder) بروید.
2. روی “اضافه کردن جدید” (Add New) کلیک کنید و گزینه “هدر” (Header) را انتخاب کنید.
3. یک نام توصیفی برای هدر خود بگذارید، مثلاً “هدر مگامنو دیجی‌کالا”، و روی “ایجاد قالب” (Create Template) کلیک کنید.
4. پیشنهاد می‌کنیم برای درک بهتر این مرحله، ویدیوی آموزش ساخت هدر با المنتور پرو را مشاهده کنید.

3. اضافه کردن ویجت Menu به هدر و تنظیمات اولیه

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

1. در محیط طراحی المنتور، ویجت “Menu” (جدید) را پیدا کنید و آن را به کانتینر هدر خود بکشید.
2. در تنظیمات ویجت، گزینه‌های زیر را تنظیم کنید:
   • سبک منو (Style): رنگ‌ها، فونت‌ها، و اندازه منو را شبیه دیجی‌کالا طراحی کنید. به جزئیات بصری مانند فاصله بین آیتم‌ها، رنگ هاور و رنگ متن توجه کنید.
   • افزودن آیتم‌ها (Menu Items): آیتم‌های اصلی منو (مانند “کالای دیجیتال”، “خانه و آشپزخانه”، “مد و پوشاک” و غیره) را اضافه کنید. این‌ها همان آیتم‌هایی هستند که قرار است مگامنو زیر آن‌ها باز شود.

4. تبدیل منو به مگامنو با استفاده از قابلیت Dropdown Content و ویجت تب

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

1. در تنظیمات ویجت Menu، روی هر آیتم اصلی منو که می‌خواهید زیر آن مگامنو باز شود، کلیک کنید (مثلاً “کالای دیجیتال“).
2. گزینه “Dropdown Content” (یا مشابه آن بسته به نسخه المنتور) را فعال کنید.
3. با فعال کردن این گزینه، یک ناحیه جدید و قابل ویرایش درست زیر آن آیتم منو باز می‌شود. این ناحیه در واقع یک کانتینر المنتور است که شما می‌توانید هر ویجتی را درون آن قرار دهید.
4. اهمیت ویژه: در این ناحیه، ویجت “تب” (Tabs Widget) را پیدا کنید و به داخل آن بکشید. این ویجت، کلیدی‌ترین عنصر برای ساختار مگامنو دیجی‌کالا است.
5. تنظیم ویجت تب:
   • عنوان تب‌ها: هر تب را به یک زیردسته‌بندی اصلی (مثلاً “موبایل”، “لپ‌تاپ”، “تبلت” در دسته “کالای دیجیتال”) اختصاص دهید. این عنوان‌ها در سمت راست یا چپ مگامنو شما نمایش داده می‌شوند.
   • محتوای هر تب: در بخش محتوای هر تب، شما می‌توانید یک کانتینر جدید ایجاد کرده و درون آن، جزئیات دسته‌بندی، تصاویر محصولات، لینک‌ها، و حتی بنرهای تبلیغاتی مرتبط را قرار دهید. از کانتینرهای فلکس باکس تو در تو برای سازماندهی ستونی محتوا (مشابه دیجی‌کالا) استفاده کنید.
   • برای مثال، در تب “موبایل”، می‌توانید لیستی از برندهای موبایل، یا بنرهای مربوط به جدیدترین مدل‌ها را قرار دهید.
   • از ویجت‌هایی مانند تصویر، لیست آیکون، Heading (برای لینک)، Text Editor و حتی ویجت‌های ووکامرس المنتور پرو برای نمایش محصولات ویژه در هر تب استفاده کنید. این قابلیت ساخت زیرمنو در المنتور را بسیار قدرتمند می‌کند.

5. اضافه کردن دسته‌بندی‌های سایت شما و طراحی دقیق

برای ایجاد دسته‌بندی‌های مشابه دیجی‌کالا و جزئیات بصری، مراحل زیر را دنبال کنید:

1. تکرار برای هر آیتم منو: این فرآیند (مرحله 4) را برای هر آیتم اصلی منو که نیاز به مگامنو دارد، تکرار کنید. هر آیتم منو یک ویجت تب جداگانه خواهد داشت.
2. ایجاد ستون‌ها در هر تب: در بخش محتوای هر تب، با استفاده از کانتینرهای فلکس‌باکس تو در تو، یک ساختار چند ستونی (مثلاً 3 یا 4 ستون) شبیه به چیدمان دیجی‌کالا ایجاد کنید.
3. وارد کردن دسته‌بندی‌ها و زیرمجموعه‌ها: در هر ستون، از ویجت “سربرگ” (Heading) برای عناوین اصلی زیردسته‌بندی (مثلاً “برندهای پرطرفدار موبایل”)، و از ویجت “لیست آیکون” یا “Text Editor” (برای لینک‌های متنی) برای نمایش زیردسته‌ها (مانند سامسونگ، شیائومی، اپل) استفاده کنید. هر زیردسته باید به صفحه مربوطه لینک شود.
4. استفاده از المان‌های بصری: برای جذابیت بیشتر، می‌توانید یک ستون ویژه با عرض بیشتر (مشابه دیجی‌کالا) برای نمایش بنرهای تبلیغاتی بزرگ یا محصولات شاخص ایجاد کنید. از ویجت‌های “تصویر” یا “Call to Action” المنتور برای این منظور بهره ببرید.
5. نمایش محصولات در مگامنو: با استفاده از ویجت‌های ووکامرس المنتور پرو (مانند “WooCommerce Products”), می‌توانید محصولات خاص، جدیدترین محصولات یا پرفروش‌ترین‌ها را مستقیماً در بخش‌های مختلف تب‌های مگامنوی خود نمایش دهید. این قابلیت بسیار قدرتمند است و نیاز به افزونه‌های جانبی را کاملاً از بین می‌برد.

6. پیش‌نمایش و تست مگامنو (واکنش‌گرا و عملکردی)

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

1. روی دکمه “پیش‌نمایش” کلیک کنید تا مگامنوی ساخته‌شده را در مرورگر مشاهده کنید.
2. تمامی تب‌ها، دسته‌بندی‌ها و لینک‌ها را بررسی کنید و مطمئن شوید که به درستی نمایش داده می‌شوند و به صفحات صحیح هدایت می‌شوند.
3. در صورت نیاز، طراحی را با استفاده از قابلیت‌های استایلینگ المنتور (مانند تنظیم فاصله، رنگ، فونت) بهینه کنید. این مرحله برای اطمینان از منوی واکنش‌گرا (ریسپانسیو) المنتور حیاتی است.

نکات مهم در طراحی مگامنو برای سئو و عملکرد بهتر

طراحی یک مگامنو زیبا کافی نیست؛ باید اطمینان حاصل کنید که این مگامنو به سئوی سایت شما کمک می‌کند و تجربه کاربری بهینه‌ای را ارائه می‌دهد.

• استفاده از رنگ‌های مناسب: رنگ‌هایی انتخاب کنید که با برند شما همخوانی داشته باشند و خوانایی متن را کاهش ندهند. تضاد رنگی مناسب بین متن و پس‌زمینه برای کاربران و خزنده‌های گوگل مهم است.
• طراحی واکنش‌گرا (Responsive Design): این حیاتی‌ترین نکته است! اطمینان حاصل کنید که مگامنو در موبایل و تبلت به خوبی نمایش داده شود. معمولاً در دستگاه‌های کوچک‌تر، مگامنو باید به یک منوی همبرگری (Off-canvas Menu) تبدیل شود تا فضای صفحه اشغال نشود. از تنظیمات ریسپانسیو المنتور برای مخفی کردن بخش‌های اضافی در موبایل و طراحی منوی مجزا برای آن استفاده کنید. این امر به سئوی مگامنو شما کمک شایانی می‌کند.
• سرعت بارگذاری (Core Web Vitals): این موضوع مستقیماً بر سرعت بارگذاری مگامنو و کل سایت تأثیر می‌گذارد.
  • بهینه‌سازی تصاویر: از تصاویر با فرمت‌های جدید (WebP) و فشرده‌سازی مناسب استفاده کنید. از قابلیت Lazy Load برای تصاویر درون مگامنو استفاده کنید تا فقط زمانی که کاربر مگامنو را باز می‌کند، تصاویر بارگذاری شوند.
  • حجم محتوا: از قرار دادن حجم بیش از حد محتوا (تصاویر و ویدئوهای غیرضروری) در مگامنو خودداری کنید تا بر LCP (Largest Contentful Paint) تأثیر منفی نگذارد.
  • CLS (Cumulative Layout Shift): مطمئن شوید که باز شدن مگامنو باعث پرش ناگهانی المان‌های صفحه نمی‌شود. المنتور معمولاً این مورد را به خوبی مدیریت می‌کند، اما حتماً تست کنید.
• لینک‌سازی داخلی قوی: از انکرتکست‌های (متن لینک) توصیفی و مرتبط با کلمات کلیدی برای لینک‌های درون مگامنو استفاده کنید. این کار به خزنده‌های گوگل کمک می‌کند تا موضوع صفحات مقصد را بهتر درک کنند و اعتبار صفحات را به درستی منتقل کنند.
• محتوای با کیفیت در صفحات مقصد: لینک‌های موجود در مگامنو باید به صفحات با کیفیت و محتوای غنی هدایت شوند. این صفحات باید به نیت جستجوی کاربر پاسخ دهند و ارزش واقعی ارائه دهند.
• پرهیز از محتوای تکراری: مطمئن شوید که محتوای نمایش داده شده در مگامنو به طور کامل در بخش‌های دیگر سایت تکرار نشده باشد.
• تجربه، تخصص، اعتبار، و قابلیت اعتماد (E-E-A-T): با ارائه یک ساختار ناوبری شفاف و کارآمد، نشان می‌دهید که به تجربه کاربری اهمیت می‌دهید. این خود به اعتبار و قابلیت اعتماد سایت شما کمک می‌کند.