آموزش حرفه‌ ای افزونه جت منو

اگر اینجایید، یعنی می خواهید با آموزش جت منو (JetMenu) یکی از جذاب ترین بخش های طراحی سایت را یاد بگیرید.

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

چرا باید آموزش جت منو را ببینیم؟

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

این افزونه به خوبی با المنتور یکپارچه شده و این یعنی آزادی کامل در طراحی دارید: از منوهای چند ستونه گرفته تا اضافه کردن آیکون، تصویر، فرم تماس و حتی ویجت های داینامیک در داخل منوها!

پایان محدودیت های طراحی منو در وردپرس

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

آموزش حرفه ای جت منو در سایت جت ساز

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

پشتیبانی کامل در طول دوره

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

آموزش پروژه محور

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

آموزش جامع و کاربردی

تمامی تنظیمات، گزینه ها و ویژگی های افزونه JetMenu از پایه تا پیشرفته آموزش داده می شود. حتی اگر تجربه ای در طراحی منو نداشته باشید، با این دوره می توانید به سطح حرفه ای برسید.

بدون نیاز به پیش نیاز خاص

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

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

جت منو چیست؟

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

برای مثال در دیجی کالا وقتی نشانگر موس را روی دسته بندی “کالای دیجیتال” می برید، یک مگامنو باز می شود که شامل چند ستون با زیرشاخه هایی مثل “موبایل”، “لپ تاپ”، “دوربین” و… است. هر ستون با آیکون و عنوان منظم شده و دسترسی سریع به بخش های مختلف را فراهم می کند. افزونه JetMenu دقیقاً چنین مگامنو های پیشرفته و بصری را برای سایت های وردپرسی ایجاد می کند.

برای دسترسی به تنظیمات جت منو، به مسیر: پیشخوان وردپرس > کروکوبلاک > تنظیمات جت افزونه ها > جت منو بروید.

 گزینه های سفارشی سازی در سه تب اصلی سازماندهی شده اند:

• تنظیمات عمومی (General Settings)
• منوی اصلی (Main Menu)
• نمایشگر موبایل (Mobile Render)

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

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

• افزونه المنتور (Elementor) نصب و فعال شده باشد.
• افزونه جت منو (JetMenu) نصب و فعال شده باشد.

مگامنو حرفه ای در آموزش جت منو

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

• به مسیر پیشخوان وردپرس > نمایش > فهرست ها بروید. در اینجا می توانید یکی از فهرست های موجود را برای ویرایش انتخاب کنید یا یک فهرست جدید بسازید.
• موقعیت نمایش فهرست خود (“اصلی”، “پاورقی (Footer)”، “شبکه های اجتماعی”) را در تنظیمات فهرست انتخاب کنید.
• پس از آن، در بخش تنظیمات موقعیت های جت منو (JetMenu Locations Settings)، گزینه فعال سازی جت منو برای موقعیت فعلی (Enable JetMenu for Current Location) را روشن کرده و روی دکمه “ذخیره فهرست” (Save Menu) کلیک کنید.

انتخاب آیتم در جت منو

اکنون با توجه به آموزش جت منو، برای فعال سازی مگامنو، آیتمی را که می خواهید به آن اضافه کنید، انتخاب نمایید. نشانگر ماوس را روی آن آیتم نگه دارید (هاور (Hover) کنید) و روی دکمه “تنظیمات” (Settings) که هنگام هاور کردن نمایان می شود و در سمت راست آیتم قرار دارد، کلیک کنید.

اگر می خواهید مگامنو را برای چندین یا حتی تمام آیتم های منو تنظیم و اعمال کنید، این کارها را برای هر یک تکرار کنید. بلافاصله پس از کلیک روی دکمه “تنظیمات” (Settings)، یک پنجره پاپ آپ (Popup) ظاهر می شود و بلوک محتوا به صورت پیش فرض باز است.

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

• محتوای مگا در آموزش جت منو: در این تب می توانید تنظیمات مگامنو شامل کلید فعال سازی، ویرایش محتوا، گزینه های موقعیت و غیره را پیکربندی کنید:

استفاده از محتوای مگا: یک کلید فعال/غیرفعال ساز که به صورت پیش فرض غیرفعال است. با روشن کردن آن، مگامنو برای این آیتم منو فعال می شود.

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

محتوای مگا: یک دکمه “ویرایش محتوای مگا (Edit Mega Content)” که ویرایشگر المنتور را فعال می کند.

موقعیت محتوای مگا: یک فیلد انتخابی که می توانید بین موقعیت های “پیش فرض (Default)” یا “نسبت به آیتم (Relative Item)” انتخاب کنید.

عرض سفارشی محتوای مگا: یک فیلد که می توانید عرض محتوای مگا را برای یک پوسته (Container) (بر حسب پیکسل) وارد کنید.

• آیکون آیتم: در این تب با توجه به آموزش جت منو، می توانید تنظیمات آیکون را با گزینه هایی برای نوع آیکون، انتخابگر آیکون، انتخاب رنگ و تنظیم اندازه سفارشی سازی کنید:

آیکون اس وی جی: یک فیلد انتخابگر آیکون که می توانید یک آیکون را انتخاب کنید.

رنگ آیکون: یک فیلد انتخابگر رنگ که می توانید رنگ آیکون را انتخاب کنید.

اندازه آیکون: اندازه آیکون را برای این آیتم (بر حسب پیکسل) تنظیم کنید.

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

نوع: یک منوی کشویی که می توانید نوع نشان آیتم را انتخاب کنید، بین “متن (Text)” یا “اس وی جی (SVG)” انتخاب کنید.

نشان آیتم: یک فیلد که می توانید متن نشان را مشخص کنید.

رنگ نشان: یک فیلد که می توانید رنگ متن نشان را تنظیم کنید.

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

فاصله افقی نشان: یک فیلد که می توانید فاصله افقی نشان را برای این آیتم (بر حسب پیکسل) تنظیم کنید. تمامی این مراحل در آموزش جت منو ذکر شده است.

فاصله عمودی نشان: یک فیلد که می توانید فاصله عمودی نشان را برای این آیتم (بر حسب پیکسل) تنظیم کنید.

• پیشرفته (Advanced): در این تب می توانید برچسب ناوبری و فیلدها را پنهان کنید یا پدینگ (Padding) سفارشی برای آیتم تنظیم کنید:

پنهان کردن برچسب ناوبری آیتم: یک کلید که به صورت پیش فرض غیرفعال است و با فعال کردن آن، منوی ناوبری پنهان می شود.

پدینگ سفارشی آیتم: مجموعه ای از فیلدها برای تنظیم پدینگ آیتم بر حسب پیکسل.

پس از تنظیم تمام گزینه ها در آموزش جت منو، کلید “استفاده از محتوای مگا” (Use Mega Content) را در تب محتوای مگا (Mega Content) فعال کرده و روی دکمه “ذخیره” (Save) کلیک کنید. سپس، برای رفتن به ویرایشگر المنتور، روی دکمه “ویرایش محتوای مگا” (Edit Mega Content) کلیک نمایید.

انتخاب ابزارک در آموزش جت منو

می توانید از هر ابزارکی (Widget) برای ساخت مگامنو استفاده کنید، مانند عناوین، اسلایدرها، نمونه کارها، چینش پست ها، ویدیوها و غیره، و آن ها را مطابق با سلیقه خود سفارشی سازی کنید.

به عنوان مثال، ما یک جدول محصول با استفاده از افزونه Jet Product Tables و یک ابزارک کد کوتاه (Shortcode) المنتور برای اضافه کردن کد کوتاه جدول محصول به مگامنو ایجاد خواهیم کرد.

با استفاده از آموزش جت منو می توانید هر آیتم منو را به همین روش با محتوای مناسب غنی کنید. پس از سفارشی سازی تمام آیتم های منو، روی “انتشار” (Publish) در ویرایشگر المنتور و سپس روی دکمه “ذخیره” (Save) در پنجره پاپ آپ تنظیمات مگامنو کلیک کنید.

هشدار: مطمئن شوید که فهرست را طبق دستورالعمل بالا ذخیره کرده اید؛ در غیر این صورت، تغییرات ذخیره نخواهند شد. آیتم هایی که محتوای مگا برای آن ها فعال شده است، با برچسب “مگا فعال شده (Mega Activated)” مشخص می شوند.

نمایش مگامنو در قالب سربرگ

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

به عنوان مثال، اگر افزونه JetThemeCore نصب و فعال باشد، می توانید به مسیر پیشخوان وردپرس > کروکوبلاک > قالب های پوسته بروید، سربرگی را که می خواهید مگامنو در آن اعمال شود انتخاب کنید و روی دکمه “ویرایش با المنتور” کلیک نمایید.

مگامنو در المنتور با آموزش جت منو

برای پیدا کردن ابزارک “مگامنو” (Mega Menu) از قابلیت جستجو استفاده کرده و آن را به ستون یا بخش مورد نظر در صفحه بکشید و رها کنید. با استفاده از این روش مگا منو وارد بخش انتخابی شما میشود.

انتخاب و سفارشی سازی مگامنو

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

پس از سفارشی سازی کامل با استفاده از آموزش جت منو، روی دکمه “انتشار” (Publish) کلیک کرده و به نمای کاربری وب سایت (فرانت اند (Front End)) بروید تا نتایج را پیش نمایش کنید.

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

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

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

این افزونه با آموزش جت منو، به طور پیش فرض تنظیماتی دارد که برای اکثر سایت ها کارایی بالایی دارد. اما شما می توانید بخش های مختلف آن مانند رنگ بندی، سبک و… را طبق سلیقه خودتان تغییر دهید تا با قالب سایت شما همخوانی داشته باشد.

برای اینکه ظاهر مگامنو را سفارشی کنید، از قسمت تنظیمات افزونه، روی گزینه “پوسته منو (Menu Theme)” در منوی سمت چپ کلیک کنید.

حالا وارد تب “نوار منو (Menu Bar)” شوید. در این بخش می توانید مثلاً رنگ پس زمینه منو را تغییر دهید. بعد از اینکه تغییرات مورد نظرتان را اعمال کردید، حتماً روی دکمه “ذخیره (Save)” کلیک کنید تا تنظیمات اعمال شوند.

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

• وارد پیشخوان وردپرس خود شوید و از بخش “نمایش (Appearance)” روی گزینه “فهرست ها (Menus)” کلیک کنید. اگر با ساخت فهرست در وردپرس آشنایی ندارید، نگران نباشید؛ در آموزش جت منو تمامی موارد ذکر شده است.
• اگر از قبل منویی ساخته اید، می توانید آن را انتخاب و ویرایش کنید. اگر هم منویی ندارید، ابتدا باید یک منو بسازید.
• نکته مهم اینجاست که قبل از اینکه لینک های دلخواهتان را به مگامنو تبدیل کنید، باید قابلیت مگامنو را برای آن منو فعال کنید. برای این کار، تیک گزینه “فعال (Enabled)” را در قسمت تنظیمات مگامنو بزنید و آن را ذخیره کنید.
• بعد از فعال سازی، وقتی نشانگر ماوس خود را روی آیتم های منو در صفحه “فهرست ها (Menus)” حرکت می دهید، گزینه “مگامنو (Mega Menu)” را کنار آن ها خواهید دید.

سفارشی سازی آیتم های مگامنو در آموزش جت منو

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

برای اینکه بتوانید امکانات خاصی را به مگامنو اضافه کنید، ابتدا باید حالت نمایش زیر منو را روی “مگامنو – چیدمان استاندارد بگذارید. سپس می توانید روی گزینه “یک ابزارک برای اضافه کردن به پنل انتخاب کنید” کلیک کنید تا آیتم های مورد نظرتان را به منو اضافه کنید.

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

بعد از اعمال تنظیمات مربوط به ابزارک، روی گزینه “ذخیره” کلیک کنید تا تغییرات ذخیره شوند. در نهایت هم می توانید روی آیکون کنار آیتم منو کلیک کنید تا یک آیکون دلخواه برای آن انتخاب کنید.

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

نتیجه:

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

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