آموزش ساخت مگامنوی سایت دیجی کالا در المنتور + آموزش تصویری

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

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

1. افزونه المنتور پرو
2. افزونه JetMenu
3. افزونه JetTabs

پس از انجام مراحل، مشاهده می‌کنید که تغییرات حاصل شده مشابه سایت دیجی کالا است.

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

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

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

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

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

اگر به سایت دیجی کالا رفته و دسته بندی‌های آن را مشاهده کنید متوجه خواهید شد که 9 دسته بندی مختلف برای محصولات سایت وجود دارد. دسته بندی‌های سایت شامل کالای دیجیتال، آرایشی، بهداشتی، سلامت و غیره است.

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

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

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

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

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

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

شما باید در این بخش برای هر دسته بندی که می خواهید ایجاد کنید یک ویجت لیست آیکون و برای زیر دسته های موجود یک ویجت لیست آیکون دیگر درج کنید. رنگ متن را برای زیبایی بیشتر بر روی مقدار #424750 و هاور متن را روی #ef394e قرار دهید.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

برای استفاده از آیکون‌های قرار داده شده در بالا، افزونه Custom Icons for Elementor را نصب کرده و فایل زیپ آیکون‌ها را اضافه کنید تا به لیست آیکون‌ها در بخش مگا منو افزوده شود.(برای این منظور میتوانید از آموزش استفاده از آیکون دلخواه در المنتور استفاده کنید.)

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

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

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

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

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

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

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

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

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

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

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

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

امیدواریم آموزش داده شده برای شما کاربردی باشد و از طراحی مگا منو لذت ببرید.