آموزش طراحی مگا منو سایت دیجی کالا با المنتور

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

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

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

• افزونه المنتور پرو
• افزونه JetMenu 
• افزونه JetTabs

پس برای طراحی مگامنو سایت دیجی کالا مشابه تصویر زیر، از نصب بودن این 3 افزونه مطمئن باشید.

ایجاد فهرست در وردپرس

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

خب بعد از ایجاد این فهرست، با این بخش کاری نداریم و محتوای مگا منو را طراحی می کنیم.

طراحی مگا منو شبیه دیجی کالا

طراحی قالب داخلی دسته بندی ها

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

از بخش قالب ها، افزودن جدید را بزنید و نوع قالب را روی بخش قرار بدید.

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

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

روی ویرایش با المنتور قالب بزنید. سپس در ویرایشگر المنتور، دکمه + یا اضافه کردن بخش را زده و یک ساختار با 4 ستون ایجاد کنید.

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

برای ایجاد این منو ها، از ویجت لیست آیکون استفاده می کنیم.

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

رنگ متن را روی مقدار #424750 و هاور متن را روی مقدار #ef394e قرار دهید.

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

تمامی مراحل بالا را برای قالب های بعدی که قبلا ایجاد کردیم انجام دهید.

طراحی مگامنو با افزونه Jet Menu

حالا باید به بخش فهرست ها در پیشخوان وردپرس رفته و مکان منو را روی اصلی ( این عنوان بسته به قالب وردپرسی که استفاده کردید متفاوت است. دراینجا از قالب وردپرس Hello Elementor استفاده شده است) قرار دهیم.  سپس گزینه مگامنو افزونه Jet Menu را از ستون سمت راست فعال کنید.

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

در پنجره باز شده ابتدا به گزینه پیکربندی رفته و مقدار عرض مگامنو را روی مقدار 1280 قرار دهید.

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

در ویرایشگر المنتور ویجت تب ها از افزونه Jet Tabs را انتخاب کرده و در صفحه قرار می دهیم.

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

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

سپس به پیکربندی ویجت تب ها رفته و موقعیت تب ها را روی گزینه راست قرار دهید و گزینه رویداد تب ها را روی گزینه هاور قرار می دهیم. با انتخاب این گزینه هنگامی که با ماوس روی تب ها برویم، بدون کلیک کردن محتوا تب تغییر می کند.

سفارشی سازی مگامنو دیجی کالا

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

در تب استایل ویجت، بخش عمومی عرض تب ها را روی مقدار 250 پیکسل قرار دهید.

بعد به تب کنترل تب ها رفته و مقدار عرض کادر را روی 0 قرار داده و گوشه های پایین، سمت راست و چپ را به مقدار 5 پیکسل انحنا دهید. مقدار پدینگ را 8 پیکسل از بالا، راست و پایین مقدار دهی کنید. با این کار تب ها از این جهت ها کمی فاصله میگیرند.

بعد از تنظیم کنترل تب ها، حالا باید متن های داخل تب را سفارشی سازی کنیم. برای این کار به تب آیتم کنترل تب ها برید و رنگ متن و هاور متن را تغییر بدید. همچنین در اینجا نوع فونت و سایز فونت را انتخاب کنید. در اینجا ما سایز فونت را روی مقدار 0.857 rem قرار دادیم.

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

حالا به تب محتوا تب ها رفته و مقدار نوع کادر را روی گزینه یکپارچه قرار داده و عرض کادر را روی 0 قرار دهید.

فونت آیکون های دیجی کالا

بعد از اتمام تنظیمات تب ها، باید به هر دسته بندی یک آیکون اختصاص دهیم. ما در اینجا آیکون های اختصاصی دیجی کالا را برای شما آماده کرده ایم که می توانید از لینک زیر دانلود کنید:

دانلود فونت آیکون

برای استفاده از این آیکون ها کافیه افزونه Custom Icons for Elementor را نصب کرده و فایل زیپ آیکون را به افزونه اضافه کنید تا به لیست آیکون ها در مگامنو اضافه شود.

سپس به ویجت تب ها رفته در در بخش آیتم ها، آیکون هر دسته را انتخاب کنید.

برای اینکه بین آیکون و عنوان فاصله قرار دهیم مجدد به تب آیتم کنترل تب ها رفته و مقدار فاصله آیکون از چپ را روی 8 پیکسل قرار می دهیم.

کد CSS برای رنگ سفید پس زمینه منو ها در حالت هاور:

.jet-tabs__control-inner:hover,.jet-tabs__control.jet-tabs__control-icon-left.elementor-menu-anchor.active-tab .jet-tabs__control-inner {
    background: #fff;
    border-radius: 0 5px 5px 0;
}

بروزرسانی: در نسخه جدید افزونه Jet Tabs قابلیت تغییر رنگ پس زمینه اضافه شده و نیازی به افزودن کد CSS نیست. در ادامه با استفاده از المنتور پس زمینه منو را اعمال می کنیم.

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

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

حالا باید این تب ها را در منو قرار دهیم.

قرار دادن مگا منو در هدر سایت

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

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

درنهایت با مشاهده هدر سایت، مگامنو به صورت زیر پیاده سازی شده است.

دانلود فایل های اجرایی

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

همچنین سربرگ طراحی شده سایت دیجی کالا هم درون این بسته به صورت رایگان قرار گرفته است.

دانلود فایل

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