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

مقدمه:

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

منوی همبرگری چیست:

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

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

محاسن استفاده از منوی همبرگری:

صرفه‌جویی در فضا:

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

آشنایی:

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

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

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

1. ساخت پاپ آپ در المنتور:

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

در پنجره جدید بر روی گزینه “افزودن قالب جدید” کلیک می‌کنیم و نام قالب را وارد می‌کنیم (توجه داشته باشید که حتما نوع قالب popup انتخاب شده باشد).

2.اعمال تنظیمات پنجره پاپ آپ:

• در قدم اول به سراغ تنظیمات popup رفته و عرض پنجره پاپ آپ را کمتر می‌کنیم، این مقدار را در دسکتاپ 325 پیکسل و در موبایل 280 پیکسل وارد می‌کنیم.
• height را بر روی fit to screen قرار داده و مکان قرارگیری پنجره را سمت راست تنظیم می‌کنیم.
• گزینه close button را غیر فعال کرده و انیمیشن ورود و خروج پاپ آپ را تنظیم می‌کنیم تا منوی ما با جذابیت بیشتری نمایش داده شود.
• سرعت اجرای انیمیشن را کمتر کرده تا منوی ما با سرعت بیشتری نمایش داده شود (0.7 ثانیه).

3. طراحی پنجره‌ی پاپ آپ:

• در ابتدا 2 کانتینر به پاپ آپ اضافه می‌کنیم، محتوای کانتینر اول را بر روی وسط تراز کرده و به کانتینر اول یک تصویر از بخش المان ها اضافه می‌کنیم، می‌توانیم برای جذابیت بیشتر یک تصویر پس‌زمینه به کانتیر اول داده و روکش پس‌زمینه را نیز تنظیم کنیم. برای ساخت این تصاویر جذاب، می‌توانید از هوش مصنوعی Perchance برای تبدیل متن به تصویر استفاده کنید تا جلوه‌ای منحصر به فرد به طراحی خود ببخشید.
• از بخش المان ها ابزارک wordpress menu را به کانتینر دوم اضافه می‌کنیم و منوی مورد نظر خود را انتخاب می‌کنیم.
• در تب محتوای ابزارک wordpress menu گزینه layout را بر روی drop down قرار داده و toggle button را بر روی none تنظیم می‎‌کنیم.
• در تب استایل ابزارک wordpress menu منوی خود را در حالت های دسکتاپ، تبلت و موبایل استایل دهی می‌کنیم.

شما میتوانید موارد بیشتری مانند دکمه ورود و ثبت‌نام، شبکه‌های اجتماعی، لوکیشن، اسلایدر و … را به منوی خود اضافه کنید تا منوی شما جذابتر و حرفه‌ای تر نمایش داده شود. در آخر نیز بر روی انتشار کلیک کرده و گزینه “Save & Close” را میزنیم.

اضافه کردن منوی ایجاد شده به هدر سایت در المنتور:

• برای نمایش منوی ایجاد شده در هدر سایت، وارد پیشخوان وردپرس شده و در بخش قالب ها گزینه theme builder را انتخاب می‌کنیم.

• وارد بخش ویرایش هدر شده و یک ابزارک دکمه را (برای فراخوانی منو) در مکان مناسب قرار میدهیم.

• در تب محتوا متن دکمه را حذف کرده و آیکن bars را برای دکمه انتخاب می‌کنیم.
• در بخش پیوند بر روی برچسب‌های پویا کلیک کرده و گزینه popups را انتخاب می‌کنیم و نام پاپ آپ ایجاد شده را جستجو کرده و انتخاب می‌کنیم.

• در آخر نیز به تب استایل دکمه رفته و در بخش تایپوگرافی سایز فونت را در حالت های دسکتاپ، تبلت و موبایل وارد می‌کنیم و دکمه انتشار را میزنیم (شما می‌توانید رنگ پس‌زمینه دکمه خود را تغییر داده و از یک رنگ مناسب برای دکمه منوی همبرگری خود استفاده کنید).

نتیجه:

منوها دسترسی کاربران را به بخش‌های مختلف سایت آسان می‌کنند با این حال نباید منوی وبسایت بیش از حد فضای وبسایت شما را اشغال کند، منوهای همبرگری علاوه بر این که این فضا را مدیریت می‌کنند (اگر به درستی ایجاده شده باشند) می‌توانند جذابیت ویژه ای به وبسایت شما ببخشند.