آموزش ساخت مگامنو در وردپرس

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

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

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

ثبت نام در دوره وردپرس پیشرفته با تخفیف ویژه

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

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

فعال‌سازی قابلیت‌های ضروری برای ساخت مگامنو

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

مراحل فعال‌سازی

1. ورود به پیشخوان وردپرس. سپس به المنتور > ویژگی‌ها (Features) بروید.
2. سه قابلیت زیر را فعال کنید:
   • Menu (برای ساخت مگامنو و ویجت هدر)
   • Nested Elements (عناصر تو در تو)
   • Container (سیستم طراحی جدید)
3. در نهایت، روی ذخیره تغییرات کلیک کنید.

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

افزودن ویجت منو به هدر جهت ساخت مگامنو

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

افزودن ویجت Menu

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

تنظیم لینک‌ها

علاوه بر این، برای هر آیتم منو، لینک صفحه موردنظر را وارد کنید. به این ترتیب، ساختار منو آماده مرحله بعدی یعنی تبدیل به مگامنو خواهد بود.

تبدیل یک آیتم منو به مگامنو

در این مرحله، یکی از آیتم‌های منو مانند «دسته‌بندی محصولات» را به مگامنو تبدیل می‌کنیم.

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

برای این کار، روی آیتم موردنظر کلیک کنید و به بخش Layout بروید. سپس گزینه Dropdown Content را روشن کنید.
همزمان با این کار، یک فلش کوچک کنار آیتم ظاهر می‌شود. بنابراین، می‌توانید مطمئن شوید که این آیتم اکنون قابلیت تبدیل به مگامنو حرفه‌ای را دارد.

انتخاب آیکون برای آیتم مگامنو

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

مراحل انتخاب آیکون

ابتدا وارد بخش آیکون‌ها شوید و سپس از Icon Library، آیکونی مناسب مثل «سه خط» یا «دسته‌بندی‌ها» انتخاب کنید. به این ترتیب، ظاهر منو جذاب‌تر خواهد شد و کاربران راحت‌تر می‌توانند گزینه‌ها را تشخیص دهند.

ساخت محتوای داخلی مگامنو حرفه‌ای

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

ایجاد ردیف اصلی

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

استفاده از ویجت Tabs برای ساخت دسته‌بندی

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

ساخت منوی چهارستونه داخل مگامنو

در هر تب یک کانتینر ۴ ستون ایجاد کنید. سپس در ستون اول از ویجت Heading و در ستون‌های دیگر از Icon List استفاده کنید.
به علاوه، لینک‌ها و آیکون‌ها را مطابق نیاز اضافه کنید.

طراحی بصری و ریسپانسیو کردن مگامنو

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

نکات مهم برای ساخت مگامنو موفق

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

نکات کلیدی

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

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

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

مگامنوها به شما امکان می‌دهند منوهای چندستونی و حرفه‌ای در سایت وردپرسی خود طراحی کنید. با استفاده از افزونه المنتز کیت (Elements Kit Mega Menu) و المنتور، می‌توان منوهای واکنش‌گرا و جذاب ساخت. این آموزش به شما نشان می‌دهد چگونه مرحله به مرحله یک مگامنو حرفه‌ای طراحی کنید.

نصب افزونه المنتز کیت قبل از ساخت مگامنو

1. از پیشخوان وردپرس وارد مسیر افزونه‌ها > افزودن شوید.
2. عبارت Elements Kit Mega Menu را جستجو کرده و افزونه را نصب کنید.
3. پس از نصب، روی فعال‌سازی کلیک کنید تا افزونه آماده استفاده شود.
4. پس از فعال‌سازی، گزینه Elements Kit در پیشخوان وردپرس ظاهر خواهد شد.

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

• به مسیر نمایش > فهرست‌ها بروید.
• بالای فهرست‌ها گزینه Elements Kit ظاهر شده است. تیک مقابل آن را فعال کنید تا امکان مگامنو برای فهرست‌ها فراهم شود.

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

مراحل ساخت مگامنو با افزونه در المنتور

ایجاد کانتینر اصلی

• ابتدا یک کانتینر اصلی (Section) ایجاد کنید. سپس ویجت تب (Tabs) را اضافه کنید.
• در تنظیمات جهت‌یابی (Direction)، گزینه راست‌چین را انتخاب کنید تا طراحی مگامنو با زبان فارسی سازگار شود.

ویرایش تب‌ها

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

ایجاد محتوا در هر تب

• یک کانتینر دو قسمتی بسازید.
• تصویر یا تصویر شاخص را در بخش اول قرار دهید.
• در بخش دوم از ویجت سربرگ (Heading) یا جداکننده (Divider) استفاده کنید.
• سپس ویجت لیست آیکون (Icon List) را اضافه کنید تا گزینه‌های منو نمایش داده شوند.
• پس از اتمام طراحی، روی انتشار (Publish) کلیک کنید.

تنظیمات نهایی مگامنو با افزونه المنتز کیت

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

آموزش ساخت منو و هدر در وردپرس

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

ساختن سربرگ ( Header ) در وردپرس

• از پیشخوان وردپرس به بخش افزونه ها می رویم
• از میان افزونه ها می توانیم از افزونه Elementor Pro یا Ultimate Addons For Elementor استفاده می کنیم
• به دلیل رایگان بودن افزونه Ultimate Addons For Elementor ما در این آموزش از آن استفاده می کنیم
• پس از نصب افزونه از گزینه Create New Header استفاده می کنیم
• نام آن را هدر اصلی سایت می گذاریم
• در قسمت نمایش، گزینه نمایش در کل سایت را انتخاب می کنیم
• نقش های کاربری را بدون تغییر می گذاریم
• سپس گزینه انتشار را می زنیم
• در پایان، ویرایش با المنتور را انتخاب می کنیم

طراحی سربرگ (Header ) توسط المنتور

• ابتدا یک فلکس باکس سه ستونه در سربرگ خود ایجاد می کنیم
• عرض ستون سمت راست 10 درصد ، ستون وسط را 60 درصد و ستون سمت چپ را 30 درصد در نظر می گیریم
• در ستون سمت راست ویجت لوگو را قرار می دهیم
• در ستون سمت راست ویجت جستجو را قرار می دهیم
• برای متمایز شدن سربرگ خود، به پس زمینه کاتینری که ساختیم رنگ می دهیم
• در پایان، انتشار را می زنیم

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

ساخت فهرست ( Menu ) در وردپرس

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

نمایش فهرست ( Header ) در سربرگ

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

خلاصه مراحل آموزش ساخت منو و هدر در وردپرس

1. استفاده از افزونه Ultimate Addons For Elementor
2. ایجاد سربرگ جدید و طراحی آن به صورت سه ستونه
3. ایجاد فهرست و افزودن  همه صفحات به آن
4. نمایش فهرست در منو
5. ذخیره و چک کردن نهایی

 

نتیجه‌گیری: آیا ساخت مگامنو ارزش دارد؟

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

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

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

ثبت نام در دوره وردپرس پیشرفته با تخفیف ویژه

آنکور (Anchor)چیست و چه کاربردی دارد؟

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

مهم‌ترین کاربردهای ویجت لنگر:

• ایجاد فهرست اسکرولی در صفحات طولانی
• ساخت منوهای پارالاکس
• دسترسی سریع کاربران به محتوای مهم
• افزایش تعامل کاربر با صفحه

ایجاد برگه و ورود به المنتور

1. وارد پیشخوان وردپرس شوید.
2. از بخش برگه‌ها روی گزینه افزودن برگه جدید کلیک کنید.
3. یک عنوان مناسب برای صفحه انتخاب کنید.
4. روی ویرایش با المنتور کلیک کنید تا وارد صفحه‌ساز شوید.

طراحی فهرست پارالاکس با دکمه‌ها

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

1. از بخش چیدمان گزینه چیدمان شبکه را انتخاب کنید.
2. یک ویجت دکمه به داخل شبکه اضافه کنید.
3. دکمه را به تعداد بخش‌های صفحه تکثیر کنید.
4. متن هر دکمه را متناسب با محتوای بخش مربوطه تغییر دهید.

این دکمه‌ها بعداً به ویجت لنگر متصل می‌شوند.

ایجاد بخش‌های محتوایی صفحه

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

این ساختار باعث خوانایی بهتر صفحه برای کاربر می‌شود.

استفاده از ویجت لنگر (anchor)در المنتور

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

ویرایشگر لنگر منو

1. ویجت Menu Anchor (ویجت لنگر) را به ابتدای هر بخش اضافه کنید.
2. در قسمت نام یا ID یک شناسه انگلیسی و بدون فاصله وارد کنید، مانند: service1

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

اتصال دکمه‌ها به ویجت لنگر

1. روی دکمه مربوطه کلیک کنید.
2. در قسمت پیوند مقدار زیر را وارد کنید: #service1

این کار را برای سایر دکمه‌ها با شناسه‌های متفاوت تکرار کنید.

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

استفاده از ویجت لنگر در منوی وردپرس

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

1. از پیشخوان وردپرس وارد نمایش ← فهرست‌ها شوید.
2. از بخش پیوندهای دلخواه یک لینک جدید اضافه کنید.
3. در قسمت نشانی اینترنتی مقدار زیر را وارد کنید:#service3
4. عنوان لینک را انتخاب کرده و آن را در جای مناسب منو قرار دهید.
5. فهرست را ذخیره کنید.

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

نکات مهم در استفاده از آنکور

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

جمع‌بندی استفاده از ابزار لنگر در وردپرس

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

---

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