آیلین وب

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

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

در این آموزش ، ما این کار را خواهیم کرد:

Custom Elementor Mega Menu11b - نحوه ایجاد مگامنو در المنتور (بدون افزودنی)
المنتور مگامنو

اکنون به صفحه المنتور خود برگردید تا بتوانیم آموزش خود ادامه دهیم!

مرحله 1: برای ایجاد مگامنو در المنتور ، اولین قدم ما این است که به داشبورد وردپرس بروید ، سپس به قسمت نمایش » فهرست بروید رو روی منوی فهرست کلیک کنید.

Custom Elementor Mega Menu1 - نحوه ایجاد مگامنو در المنتور (بدون افزودنی)
ایجاد مگامنو در المنتور

مرحله 2: پس باید در این قسمت یه منوی جدید بسازی و المان های خودتون رو توی این فهرست و منو قرار دهید.

Custom Elementor Mega Menu2 - نحوه ایجاد مگامنو در المنتور (بدون افزودنی)
ساخت فهرست

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

Custom Elementor Mega Menu3 1024x93 1 - نحوه ایجاد مگامنو در المنتور (بدون افزودنی)
ساخت فهرست المنتور

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

Custom Elementor Mega Menu4 min - نحوه ایجاد مگامنو در المنتور (بدون افزودنی)
مگامنو در المنتور

مرحله 5: برای شروع ساخت مگامنوی سفارشی در المنتور، برای دیدن مگامنو ، یک صفحه جدید (موقت) ایجاد کنید. بخش جدیدی را در آن مکان اضافه کنید.

Custom Elementor Mega Menu5 min - نحوه ایجاد مگامنو در المنتور (بدون افزودنی)
بخش جدید المنتور

مرحله 6: یک ساختار صفحه را انتخاب کنید. میتوانید همانند تصویر انتخاب کنید و یا خودتان یک طرح دلخواه را انتخاب بکنید.

Custom Elementor Mega Menu6 min - نحوه ایجاد مگامنو در المنتور (بدون افزودنی)
سکشن المنتور

مرحله 7: در صفحه سمت راست ویجت فهرست (منوی ناوبری) را پیدا کنید و آن را به ستون بکشید.

Custom Elementor Mega Menu7 min - نحوه ایجاد مگامنو در المنتور (بدون افزودنی)
ویجت منوی المنتور

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

Custom Elementor Mega Menu8 min - نحوه ایجاد مگامنو در المنتور (بدون افزودنی)
انتخاب منوی ساخته شده

مرحله 9: همانطور که در زیر می بینید سبک پیش فرض منوی ناوبری است ، برای بزرگتر کردن این منو ، ما CSS سفارشی را در این فهرست اضافه خواهیم کرد.

Custom Elementor Mega Menu9 - نحوه ایجاد مگامنو در المنتور (بدون افزودنی)
منوی ناوبری

مرحله 10: شناسه یا کلاس هر عنصر را در زیر بدست آورید تا سبک سفارشی به یکدیگر اضافه شود.

بعد از شناسه یا کلاس عناصر بالا سعی کنید این استایل را اعمال کنید.

نکته: برای این کار میتوانید روی هر منو کلیک کنید و در مرورگر با inspect element شناسه و یا آی دیه هر لیست رو بدست بیارید. شاید برای اولین بار کا سختی باشه ولی براحتی میتوانید آی دیه هر لیست را بدست بیاورید.

این کد را در کلاس لیست اعمال کنید:

ul#sm-15760584023977324-2 {
    width:1000px !important;
    left: -155px !important;
}

این کد را در آیتم های کلاس لیست اعمال کنید:

ul#sm-15760584023977324-2 li {
    display:inline-block;
}

این کد را در فلش های زیر منو ها اعمال کنید:

ul#sm-15760584023977324-2 li span.sub-arrow{
    display:none;
}

این کد را در لیست آیتم کلاس ها اعمال کنید:

ul#sm-15760584023977324-4,ul#sm-15760584023977324-6,ul#sm-15760584023977324-8{
    margin: -52px 0 0 0 !important;
    display: block !important;
}

این کد را در هاور موس اعمال کنید:

.ul#sm-15760584023977324-4 li a:hover,ul#sm-15760584023977324-6 li a:hover,ul#sm-15760584023977324-8 li a:hover{
    background-color: transparent
    ;
    color: #ed2a5b;
}

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

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

موفق باشید.

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

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

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

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

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

قالب Unik | قالب وردپرس شرکتی و خلاقانه (رایگان!)

قالب Unik | قالب وردپرس

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

قالب Alaska | قالب وردپرس هاستینگ (اورجینال و فارسی)

قالب Alaska | قالب وردپرس

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

قالب Amax | قالب وردپرس چندمنظوره خلاقانه (رایگان!)

قالب Amax | قالب وردپرس

از دیگر قالب های وردپرس که امروز قصد معرفی آن را برای

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