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

مگامنو ها یکی از مواردی است که می تواند کاربر را در مرور یک وب سایت بسیار پیچیده و بزرگ مانند فروشگاه تجارت الکترونیکی با احتمالاً صدها دسته و برچسب انتخاب کند. با این حال ، ساخت مگامنو در المنتور کار آسانی به نظر نمی رسد. در حالی که ایجاد منوهای ساده حتی بدون افزونه المنتور هم قابل دستیابی است ، اما هنوز هم می توانید از 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;
}

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

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

موفق باشید.