دریافت مشاوره رایگان
جهت دریافت هدیه آموزشی و مشاوره رایگان شماره تماس خود را در فرم زیر وارد کنید. پشتیبانان ما در اسرع وقت با شما تماس خواهند گرفت.
در این مقاله یک روش ساده و کاربردی برای ریسپانسیو کردن هدر سایت و طراحی فهرست موبایلی آموزش داده میشود. با این روش، فهرست سایت شما هنگام نمایش در موبایل به صورت منوی سایدبار (منوی کناری) باز میشود. این کار تجربه کاربری را بهبود میبخشد و ظاهر سایت شما را حرفهای و کاربرپسند میکند.
ثبت نام در دوره وردپرس پیشرفته با تخفیف ویژه
برای شروع طراحی فهرست موبایلی، وارد نوار بالای صفحه شوید و گزینه ویرایش با المنتور را انتخاب کنید. سپس روی هدر اصلی سایت کلیک کنید تا بتوانید تغییرات لازم برای طراحی فهرست موبایلی و ریسپانسیو کردن هدر را اعمال کنید. این مرحله، اولین گام در آموزش طراحی منو موبایلی و ایجاد یک هدر حرفهای است.
در این مرحله، باید وضعیت ظاهری هدر در حالت موبایل ساماندهی شود. برای جلوگیری از بههمریختگی، عرض هر آیتم هدر را تنظیم کنید تا در یک ردیف منظم قرار بگیرند. معمولاً تنظیم عرض عناصر روی حدود ۳۰ تا ۳۳ درصد باعث میشود آیتمها به صورت منظم چیده شوند و هدر ساختار منسجمتری داشته باشد.
اگر بخشی از هدر را نمیخواهید در نسخه موبایل نمایش دهید، در تنظیمات پیشرفته و بخش واکنشگرا میتوانید مشخص کنید که هر آیتم در کدام نسخه—دسکتاپ، تبلت یا موبایل—قابل مشاهده باشد. این انعطافپذیری به شما اجازه میدهد ظاهر هدر دقیقاً مطابق نیاز شما باشد.
برای داشتن یک طراحی فهرست موبایلی جذاب، نباید فهرست در موبایل به صورت عمودی و رو به پایین باز شود؛ زیرا این سبک ظاهر جمعوجوری ندارد. هدف ما ساخت یک منوی کشویی است که با لمس آیکون منو از سمت چپ یا راست صفحه باز شود.
ابتدا بررسی کنید ویجت مورد استفاده قابلیت ساخت منوی سایدبار را دارد یا خیر. اگر ویجت فعلی چنین قابلیتی ندارد، افزونه Ultimate Addons را نصب کنید. پس از نصب، ویجت Navigation Menu به المنتور اضافه میشود و میتوانید آن را در هدر موبایل قرار دهید تا منوی کشویی واقعی داشته باشید.
سپس وارد بخش واکنشگرا شوید و نمایش Navigation Menu را در نسخه دسکتاپ غیرفعال کنید تا از تداخل در نمایش بزرگ جلوگیری شود. نمایش فهرست قبلی را تنها در موبایل فعال نگه دارید تا هر دستگاه نسخه مناسب خود را ببیند و ساختار هدر تمیز و هماهنگ باقی بماند.
در این بخش، باید مشخص کنیم منوی ناوبری چگونه و از کدام سمت صفحه باز شود. وارد تب محتوا در ویجت Navigation Menu شوید و در بخش طرحبندی حالت پیشفرض را از «افقی» به Flyout تغییر دهید.
با انتخاب Flyout، منو به صورت کشویی از طرفین صفحه ظاهر میشود و میتوانید تعیین کنید باز شدن از سمت چپ باشد یا راست. تقریباً همه عناصر این بخش قابل شخصیسازی هستند؛ از جهت باز شدن گرفته تا رنگ پسزمینه، رنگ لینکها و جزئیات ظاهری دیگر، تا نتیجه نهایی مطابق سبک طراحی سایت شما باشد.
پس از انجام تمام تنظیمات، روی گزینه انتشار کلیک کنید تا تغییرات ذخیره شوند. سپس وارد صفحه اصلی سایت شوید و منوی موبایلی را از دید یک کاربر بررسی کنید.
مرور دقیق رفتار منو—باز شدن از سمت انتخابی، عملکرد آیکون منو، ظاهر رنگها و هماهنگی عناصر—اطمینان میدهد که همه چیز به صورت دقیق و بینقص اجرا شده و تجربه کاربری حرفهای برای بازدیدکنندگان فراهم شده است.
دریافت مشاوره رایگان
جهت دریافت هدیه آموزشی و مشاوره رایگان شماره تماس خود را در فرم زیر وارد کنید. پشتیبانان ما در اسرع وقت با شما تماس خواهند گرفت.
سوالات متداول طراحی فهرست موبایلیچرا باید از منوی سایدبار (Flyout) برای فهرست موبایلی استفاده کنم؟ چون فهرستهای عمودیِ روبهپایین در موبایل هنوز کمی زمخت بهنظر میرسند و فضای صفحه را میبلعند. منوی سایدبار از کنارهها باز میشود، تمیز است، جمعوجور میایستد و حس نظم میدهد؛ مثل کشوی کوچکی که فقط وقتی لازمش داشتی بیرون میلغزد. اگر ویجت منوی المنتورم قابلیت Flyout نداشت، چطور میتوانم این ویژگی را اضافه کنم؟ کافی است افزونه Ultimate Addons را نصب کنی. بعد از نصب، ویجت Navigation Menu در المنتور ظاهر میشود و امکان ساخت یک منوی کشویی واقعی را به هدر موبایلی هدیه میدهد. چطور مطمئن شوم فهرست موبایلی در همه دستگاهها درست نمایش داده میشود؟ پس از انتشار، نسخه موبایل سایت را مثل یک بازدیدکننده عادی بررسی کن—باز شدن منو از سمت درست، عملکرد آیکون، هماهنگی رنگها و وضعیت نمایش ویجتها. همچنین مطمئن شو که نسخه دسکتاپ فقط منوی مخصوص خودش را نشان بدهد و نسخه موبایل فقط منوی کشویی جدید را. |
مطالب زیر را حتما مطالعه کنید
دریافت دوره رایگان طراحی سایت
