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

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

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

این منو شامل 3 تب است که همه آنها در دسترس شما هستند:

• طراحی در المنتور
• کد Css
• کد جی کوئری

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

برای شروع، باید از Elementor Pro استفاده کنید. اگر به Elementor Pro دسترسی ندارید، می توانید افزونه Elementor Pro را از آدرس کانال اصلی سئو در انتهای مقاله دانلود کنید.

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

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

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

در صفحه باز شده اگر پنجره پاپ آپی ظاهر شد و منوهای پیش فرض را به شما نشان داد با دکمه ضربدر گوشه صفحه آن را ببندید تا محیط ویرایش Elementor نمایش داده شود.

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

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

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

در حالت عادی و روی دسکتاپ، نماد منوی همبرگر یا منوی موبایل نباید نمایش داده شود. روی نماد کلیک کنید و به تب پیشرفته بروید. به گزینه Responsive بروید، روی آن کلیک کنید و Hide on Desktop را فعال کنید.

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

اما در این آموزش ساده ترین حالت را با کمترین ابزار و المان به شما می گویم تا اگر مبتدی هستید سردرگم نشوید. ما به 3 ویجت در منوی موبایل خود نیاز داریم: لوگو، نماد، منوی وردپرس.

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

ممکن است مفید باشد: آموزش ساخت فرم ورود و ثبت نام در المنتور

اگر موقعیت ویجت ها در صفحه درست نیست و همگی در یک سمت قرار گرفته اند، روی هر ویجت کلیک کرده، به تب advanced رفته و مطابق تصویر زیر آن را به صورت self-align قرار دهید. نماد را در سمت چپ و لوگو را در سمت راست تنظیم کنید و منو نباید تغییر کند. برای مثال در تصویر زیر موقعیت لوگو را تعیین کرده ایم.

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

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

	
const ostadseomenubox = document.querySelector('.ostadseomenubox');
const ostadseomenuicon = document.querySelector('.ostadseomenuicon');
const ostadseoclosemenu = document.querySelector('.ostadseoclosemenu');

	ostadseomenuicon.onclick = () =>{
		ostadseomenubox.classList.add('active');	
	};
	ostadseoclosemenu.onclick = () =>{
		ostadseomenubox.classList.remove('active');
	};
	document.addEventListener('click', function(event) {
    if (!ostadseomenubox.contains(event.target) && !ostadseomenuicon.contains(event.target)) {
        ostadseomenubox.classList.remove('active');
    }
});

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