آیلین وب

دوستان عزیز، برای حمایت از ما حتما به ما رای بدهید​

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

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

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

app menu elementor min - ساخت استایل منوی اپلیکیشن موبایل با المنتور

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

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

 پیش نیازهای آموزش

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

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

 ویرایش صفحه مورد نظر با المنتور

حالا صفحه ای را که میخواهید منو در داخل این صفحه نمایش داده بشه که اصولاً صفحه اصلی هستش رو یا سربرگی که طراحی کردیم را با ویرایشگر المنتور باز کنید.

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

app menu elementor 1 - ساخت استایل منوی اپلیکیشن موبایل با المنتور

سپس در بالای صفحه یا در بالای هدر سایت، یک سکشن یا یک بخش تک ستونه ایجاد بکنید همانند تصویر زیر :app menu elementor 2 - ساخت استایل منوی اپلیکیشن موبایل با المنتور

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

app menu elementor 3 - ساخت استایل منوی اپلیکیشن موبایل با المنتور

حالا به تنظیمات آیکون برید و چیدمان را همانند تصویر زیر به حالت وسط چین تغییر بدید :

app menu elementor 4 - ساخت استایل منوی اپلیکیشن موبایل با المنتور

سپس به تب استایل ابزارک آیکون بیاید و رنگ اولیه رو روی کد رنگ #4A4A4A تنظیم کنید اندازه و آن را روی ۲۰ قرار بدید :

app menu elementor 5 - ساخت استایل منوی اپلیکیشن موبایل با المنتور

سپس به تنظیمات ابزارک سربرگ بیاید و توی تب استایل رنگ متن و روی کد رنگ #3E3E3E تنظیم کنید و تایپوگرافی اون رو سایزش روی ۱۴ قرار بدید و وزن فونت روی ۴۰۰ تنظیم بکنید.

app menu elementor 6 - ساخت استایل منوی اپلیکیشن موبایل با المنتور

سپس به تنظیمات پیشرفته ابزارک سربرگ بیاید و فاصله از بالا روی -17 قرار بدید.

app menu elementor 7 - ساخت استایل منوی اپلیکیشن موبایل با المنتور

حالا به تنظیمات ستون برید  و عرض ستون رو روی ۲۰ تنظیم بکنید.

app menu elementor 8 - ساخت استایل منوی اپلیکیشن موبایل با المنتور

خوب الان ما وقتی عرضش رو روی ۲۰ تنظیم کردیم، یعنی ما میتونیم پنج تا از این ستون‌ها ایجاد بکنیم اول از همه شما باید ستون خودتون رو هم آیکونش و هم متنش رو تغییر بدید من برای مثال یک آیکون خانه قرار میدم همانند تصویر زیر :

app menu elementor 9 - ساخت استایل منوی اپلیکیشن موبایل با المنتور

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

app menu elementor 10 - ساخت استایل منوی اپلیکیشن موبایل با المنتور

شما باید چهار بار از ستون خودتون یک کپی تهیه کنید تا پنج تا ستون کنار همدیگه نمایش داده بشه و بعد از چهار بار کپی باید منو شما همانند تصویر زیر ظاهر بشه.

app menu elementor 11 - ساخت استایل منوی اپلیکیشن موبایل با المنتور

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

app menu elementor 12 - ساخت استایل منوی اپلیکیشن موبایل با المنتور

حالا به تنظیمات سکشن یا بخش موردنظر برید (بخشی که منوها درون اون هستن) و در بخش استایل نوع پس زمینه رو رنگش روی کد رنگ #F9F9F9 تنظیم بکنید.

app menu elementor 13 - ساخت استایل منوی اپلیکیشن موبایل با المنتور

سپس باز هم در بخش استایل بخش مورد نظر به بخش حاشیه بیاید و سایه کادر رو بزنید و کد رنگ آن را rgba(0, 0, 0, 0.12) قرار بدید همانند تصویر زیر

app menu elementor 14 - ساخت استایل منوی اپلیکیشن موبایل با المنتور

سپس روی پیشرفته بیایید و گزینه ایندکس Z روی ۱۰۰ قرار بدید.

app menu elementor 15 - ساخت استایل منوی اپلیکیشن موبایل با المنتور

سپس  به بخش CSS سفارشی بیاید و کدهای زیر رو درون این بخش وارد بکنید :

selector {position: fixed;bottom:0;}

app menu elementor 16 - ساخت استایل منوی اپلیکیشن موبایل با المنتور

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

app menu elementor 17 - ساخت استایل منوی اپلیکیشن موبایل با المنتور

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

app menu elementor 18 - ساخت استایل منوی اپلیکیشن موبایل با المنتور

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

app menu elementor min - ساخت استایل منوی اپلیکیشن موبایل با المنتور

میتونید برای راحتی کار هم میتونید از ویدئوی آموزشی هم استفاده بکنید.

فیلم آموزشی

دیدگاه‌ خود را بنویسید

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

پیشنهاد میکنیم این مقالات را هم بخوانید
ساخت بخش دانلود به ازای دریافت ایمیل یا موبایل با المنتور + ویدئوی آموزشی

ساخت بخش دانلود به ازای

با یک مقاله و آموزش بسیار مفید و اختصاصی از تیم آیلین

ارسال لینک دانلود به ایمیل در وردپرس با افزونه subscribe & download + ویدئوی آموزشی

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

با معرفی افزونه subscribe & download با ما همراه باشید،  یا همان ارسال

قالب Astra Pro : قالب

قالب Astra Pro | قالب آسترا مخصوص افزونه المنتور بعد از مدتها

ساخت استایل منوی اپلیکیشن موبایل با المنتور

ساخت استایل منوی اپلیکیشن موبایل

در این مقاله بسیار مفید می خوام که نحوه ساخت یک استایل

مطالب داغ
اسکرول به بالا
طراحی انواع سایت
طراحی انواع سایت با قیمت بسیار ارزان!