---
title: "آموزش طراحی منو ناوبری موبایل (Bottom navigation) با استفاده از المنتور"
url: "https://elementorfa.ir/bottom-navigation-elementor/"
type: "post"
published: "2020-01-14T13:36:22+03:30"
modified: "2023-07-26T11:12:07+03:30"
author: "المنتور فارسی"
---

4.7/5 - (27 امتیاز)

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

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

در این مقاله قصد داریم تا با استفاده از افزونه المنتور یک منوی ناوبری برای برای دستگاه های موبایل ایجاد کنیم.

![منو موبایل](https://elementorfa.ir/wp-content/uploads/2020/01/Bottom-navigation-elementor.png)

از نمونه های استفاده شده از این قابلیت سایت [www.rottentomatoes.com](https://www.rottentomatoes.com/) می باشد. rottentomatoes یک سایت مخصوص امتیاز دهی به فیلم و سریال می باشد. این سایت در حالت موبایل از Bottom navigation استفاده می کند.

![](https://elementorfa.ir/wp-content/uploads/2020/01/www.rottentomatoes.com_.png)

## طراحی Bottom navigation با المنتور

### طراحی فوتر در المنتور

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

> **بخوانید :** [چگونه یک فوتر سفارشی با المنتور طراحی کنیم ؟](https://elementorfa.ir/?p=14669)

بعد از طراحی فوتر، در پایین ترین بخش یک **سکشن** اضافه کنید. این بخش را به 4 ستون تقسیم کنید.

![طراحی منو موبایل با المنتور](https://elementorfa.ir/wp-content/uploads/2020/01/nav-menu-elementor.png)

### استایل Bottom navigation

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

![طراحی منو موبایل با المنتور](https://elementorfa.ir/wp-content/uploads/2020/01/nav-menu-elementor-color.png)

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

![طراحی منو موبایل با المنتور](https://elementorfa.ir/wp-content/uploads/2020/01/mobile-navigation-bottom-3.png)

### ویجت های منو ناوبری

در هر یک از ستون ها یک **ویجت آیکون** و یک**ویجت سربرگ** قرار داده و اطلاعات مورد نظر را پر کنید.

![طراحی منو موبایل با المنتور](https://elementorfa.ir/wp-content/uploads/2020/01/mobile-navigation-bottom-5.png)

سپس روی هر آیکون کلیک کرده و در بخش پیوند، آدرس صفحه مورد نظر را وارد کنید.

![طراحی منو موبایل با المنتور](https://elementorfa.ir/wp-content/uploads/2020/01/link-icon-elementor.png)

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

در اینجا گزینه شناور را کلیک کنید و روی گزینه **پایین** قرار دهید.

![طراحی منو موبایل با المنتور](https://elementorfa.ir/wp-content/uploads/2020/01/motion-effect-elementor.png)

### مخفی کردن تبلت و دسکتاپ

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

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

![طراحی منو موبایل با المنتور](https://elementorfa.ir/wp-content/uploads/2020/01/elementor-hide-on-responsive.png)

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

### نتجیه نهایی

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



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