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

create digikala menu in elementor aylinweb

فهرست مطالب

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

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

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

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

منوی دیجی کالا
طرح منوی دیجی کالا در المنتور

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

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

ساخت فهرست
ساخت فهرست منو در وردپرس

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

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

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

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

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

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

ساخت قالب
ساخت قالب در المنتور

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

پوسته ساز المنتور
چگونه در المنتور پوسته بسازیم

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

ساخت ستون
ساخت سکشن در محیط المنتور

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

ایجاد 4 ستون
ساخت ستون برای مگامنوی دیجی کالا

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

لیست آیکون
افزودن المان لیست آیکون به صفحه

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

رنگ بندی صفحه
ایجاد رنگ و ستون اول مگامنوی دیجی کالا

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

پر کردن ستون
پر کردن ستون های مگامنو در المنتور

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

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

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

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

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

عرض منو
تنظیم عرض مگامنوی طراحی شده در المنتور

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

هدایت به المنتور
هدایت به افزونه صفحه ساز المنتور پرو

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

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

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

درج منو
درج منوی طراحی شده در تب مورد نظر

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

تغییر محتوای تب
با این کار محتوای تب با هاور موس تغییر میکند

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

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

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

عرض تب ها
باید عرض منوها را روی 250 قرار بدید

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

گوشه های منو
تنظیمات پدینگ و گوشه های مدرو منو

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

پدینگ منوها
تنظیم مقدار پدینگ منوها

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

نوع کادر دور
تنظیم نوع کادر دور مگامنوی دیجی کالا

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

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

[su_button url=”http://dl.aylinweb.com/extras/fontello-04b099ca.zip” target=”blank” style=”flat” background=”#ffd200″ color=”#000000″ size=”6″ center=”yes” radius=”5″]دانلود فونت آیکون های دیجی کالا[/su_button]

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

فونت آیکون دلخواه در المنتور
قرار دادن فونت آیکون دلخواه در المنتور

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

انتخاب دسته بندی
باید آیکون دسته بندی مورد نظر خود را انتخاب کنید

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

فاصله آیکونها
تنظیم فاصله آیکون های مورد نظر در المنتور

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

هاور منو
تنظیم هاور منو روی ترنسپرنت

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

منوی نهایی
منوی طراحی شده سایت دیجی کالا در المنتور

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

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

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

درج مگامنو
قرار دادن مگامنوی طراحی شده در هدر سایت

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

انتخاب منوی طراحی شده
باید دسته بندی و فهرست طراحی شده رو انتخاب کنید

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

ساخت منوی دیجی کالا
ساخت منوی سایت دیجی کالا در المنتور

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

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

[su_button url=”http://dl.aylinweb.com/extras/elementor-templates-2019-12-06.zip” target=”blank” style=”flat” background=”#ffd200″ color=”#000000″ size=”6″ center=”yes” radius=”5″]دانلود فایل نهایی منوی طراحی شده[/su_button]

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

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

۷ دیدگاه دربارهٔ «آموزش ساخت مگامنوی سایت دیجی کالا در المنتور + آموزش تصویری;

  1. با سلام ممنون از اموزش عالیتون
    ولی یه مشکلی وجود داره الان در هدر دیجی کالا که در پکیج بود فعاله اما در هدر سایت که بر طبق اموزش از جت منو پیش رفتم فعال نمیشه و عبارت ” دسته بندی کالا ” بصورت یه عبارت معمولی می اد که با کلیک بر ان منو نمی اد

    پاسخ
  2. سلام ممنون از آموزشتون من یک مشکلی دارم که مگامنو فاصله داره از سمت راست و موقع باز شدن ظاهر قشنگی نداره ممنون میشم کمکم کنید

    پاسخ

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