تخفیف 50 درصد برای همه محصولات!

کد تخفیف: BFriday

یه تنفس عمیق و بعد همه چیز رو راجع بهش بخون

راحیل دست پیمان

راحیل دست پیمان

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

به اشتراک گذاری بر روی facebook
به اشتراک گذاری بر روی twitter
به اشتراک گذاری بر روی linkedin
به اشتراک گذاری بر روی telegram

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

فروشگاه اینترنتی

ریسپانسیو کردن مگا منو در ادان جت منو المنتور

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

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

با توجه به اینکه در حال حاضر اکثر افراد سایتها رو با گوشیهاشون چک میکنن بر ما واجبه که سایتهامونو برای گوشیها ریسپانسیو کنیم. در این مطلب میخوام نحوه ریسپانسیو کردن منوی سایت در جت منو رو توضیح بدم. 

ساخت مگا منوی ریسپانسیو

دو روش برای ساخت مگامنوی ریسپانسیو داریم: 

  1. از داشبورد وردپرس
  2. از ویرایشگر المنتور

اول بریم سراغ روش اول از داشبورد وردپرس.

برای سبک دهی به مگا منوی تلفن همراه، کافیه به داشبورد وردپرس Crocoblock و بعد از اون  Jetplugins Settings سپس منوی موبایل برین. 

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

ریسپانسیو کردن منو در جت منو

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

ریسپانسیو کردن منو در جت منو

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

تنظیمات ریسپانسیو کردن منو در جت منو

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

تنظیمات استایل منو در جت منو

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

تنظیمات حاشیه منو در جت منو

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

تنظیم رنگ آیکن منو در جت منو

همچنین میتونین آیکنهای آیتمها رو فعال کنین و ظاهرشون رو تغییر بدین.

تنظیم پدینگ آیکن در جت منو

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

تنظیمات زیرمنو در جت منو

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

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

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

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

تنظیمات جت منو در ویرایشگر المنتور

در بخش Style میتونین تنظیمات مختلفی رو برای دسک تاپ و موبایل انتخاب کنین. همانطور که مشاهده میکنین، تنظیمات استایل برای تلفن همراه مثل داشبورده.

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

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

ریسپانسیو کردن منو در جت منو

گام آخر هم که همیشه ذخیره و بروزرسانیه. ببینین که در دسک تاپ چجوریه؟

مگا منو در دسک تاپ

حالا ببینیم در موبایل چجوریه؟

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

تبریک میگم حالا شما میدونین که چطوری با کمک افزونه JetMenu یه منوی عالی موبایل برای وب سایتتون ایجاد کنین.

فروشگاه اینترنتی

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

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

مگا-منوی-چند-ستونی

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

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

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

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

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

ادامه مطلب
ریسپانسیو کردن مگا منو

ریسپانسیو کردن مگا منو در ادان جت منو المنتور

ادامه مطلب

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

من موافق این قوانین هستم .

پنجاه درصد تخفیف بلک فرایدی!! از فرصت استفاده کن

کد تخفیف: BFriday