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

megamenu elementor wi min

فهرست مطالب

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

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

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

المنتور مگامنو
المنتور مگامنو

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

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

ایجاد مگامنو در المنتور
ایجاد مگامنو در المنتور

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

ساخت فهرست
ساخت فهرست

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

ساخت فهرست المنتور
ساخت فهرست المنتور

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

منوی مگا
مگامنو در المنتور

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

بخش جدید المنتور
بخش جدید المنتور

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

سکشن المنتور
سکشن المنتور

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

ویجت منوی المنتور
ویجت منوی المنتور

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

انتخاب منوی ساخته شده
انتخاب منوی ساخته شده

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

منوی ناوبری
منوی ناوبری

مرحله 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;
}

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

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

موفق باشید.

۲ دیدگاه دربارهٔ «نحوه ایجاد مگامنو در المنتور (بدون افزودنی);

دیدگاهتان را بنویسید