آیلین وب

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

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

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

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

word image - آموزش ساخت مگامنوی سایت دیجی کالا در المنتور + آموزش تصویری
طرح منوی دیجی کالا در المنتور

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

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

word image 1 - آموزش ساخت مگامنوی سایت دیجی کالا در المنتور + آموزش تصویری
ساخت فهرست منو در وردپرس

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

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

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

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

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

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

word image 2 - آموزش ساخت مگامنوی سایت دیجی کالا در المنتور + آموزش تصویری
ساخت قالب در المنتور

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

word image 3 - آموزش ساخت مگامنوی سایت دیجی کالا در المنتور + آموزش تصویری
چگونه در المنتور پوسته بسازیم

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

word image 4 - آموزش ساخت مگامنوی سایت دیجی کالا در المنتور + آموزش تصویری
ساخت سکشن در محیط المنتور

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

word image 5 - آموزش ساخت مگامنوی سایت دیجی کالا در المنتور + آموزش تصویری
ساخت ستون برای مگامنوی دیجی کالا

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

word image 6 - آموزش ساخت مگامنوی سایت دیجی کالا در المنتور + آموزش تصویری
افزودن المان لیست آیکون به صفحه

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

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

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

word image 8 - آموزش ساخت مگامنوی سایت دیجی کالا در المنتور + آموزش تصویری
پر کردن ستون های مگامنو در المنتور

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

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

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

word image 9 - آموزش ساخت مگامنوی سایت دیجی کالا در المنتور + آموزش تصویری
باید افزونه جت منو را در فهرست ها فعال کنید

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

word image 10 - آموزش ساخت مگامنوی سایت دیجی کالا در المنتور + آموزش تصویری
تنظیم عرض مگامنوی طراحی شده در المنتور

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

word image 11 - آموزش ساخت مگامنوی سایت دیجی کالا در المنتور + آموزش تصویری
هدایت به افزونه صفحه ساز المنتور پرو

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

word image 12 - آموزش ساخت مگامنوی سایت دیجی کالا در المنتور + آموزش تصویری
جت منو رو انتخاب کنید و به صفحه بکشید

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

word image 13 - آموزش ساخت مگامنوی سایت دیجی کالا در المنتور + آموزش تصویری
درج منوی طراحی شده در تب مورد نظر

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

word image 14 - آموزش ساخت مگامنوی سایت دیجی کالا در المنتور + آموزش تصویری
با این کار محتوای تب با هاور موس تغییر میکند

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

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

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

word image 15 - آموزش ساخت مگامنوی سایت دیجی کالا در المنتور + آموزش تصویری
باید عرض منوها را روی 250 قرار بدید

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

word image 16 - آموزش ساخت مگامنوی سایت دیجی کالا در المنتور + آموزش تصویری
تنظیمات پدینگ و گوشه های مدرو منو

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

word image 17 - آموزش ساخت مگامنوی سایت دیجی کالا در المنتور + آموزش تصویری
تنظیم مقدار پدینگ منوها

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

word image 18 - آموزش ساخت مگامنوی سایت دیجی کالا در المنتور + آموزش تصویری
تنظیم نوع کادر دور مگامنوی دیجی کالا

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

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

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

word image 19 - آموزش ساخت مگامنوی سایت دیجی کالا در المنتور + آموزش تصویری
قرار دادن فونت آیکون دلخواه در المنتور

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

word image 20 - آموزش ساخت مگامنوی سایت دیجی کالا در المنتور + آموزش تصویری
باید آیکون دسته بندی مورد نظر خود را انتخاب کنید

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

word image 21 - آموزش ساخت مگامنوی سایت دیجی کالا در المنتور + آموزش تصویری
تنظیم فاصله آیکون های مورد نظر در المنتور

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

word image 22 - آموزش ساخت مگامنوی سایت دیجی کالا در المنتور + آموزش تصویری
تنظیم هاور منو روی ترنسپرنت

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

word image 23 - آموزش ساخت مگامنوی سایت دیجی کالا در المنتور + آموزش تصویری
منوی طراحی شده سایت دیجی کالا در المنتور

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

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

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

word image 24 - آموزش ساخت مگامنوی سایت دیجی کالا در المنتور + آموزش تصویری
قرار دادن مگامنوی طراحی شده در هدر سایت

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

word image 25 - آموزش ساخت مگامنوی سایت دیجی کالا در المنتور + آموزش تصویری
باید دسته بندی و فهرست طراحی شده رو انتخاب کنید

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

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

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

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

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

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

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

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

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

پیشنهاد میکنیم این مقالات را هم بخوانید
هاست ویندوز و هاست لینوکس : کدوم رو انتخاب کنم؟

هاست ویندوز و هاست لینوکس

قبل از راه اندازی و ساخت سایت با وردپرس  باید حتما قبلش

آموزش ساخت مگامنو در المنتور (رایگان) + 📽فیلم آموزشی

آموزش ساخت مگامنو در المنتور

با آموزش ساخت مگامنو در المنتور در خدمت شما عزیزان هستم و

کپی کردن صفحات المنتور به صورت کامل از یک سایت به سایت دیگر + (فیلم آموزشی)

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

شاید برای خیلی از شماها پیش اومده که توی طراحی صفحات با

دوره آموزش (🥉مبتدی) قالب فلت سام Flatsome

دوره آموزش (🥉مبتدی) قالب فلت

دوره آموزش مبتدی قالب فلت سام Flatsome دوستان گلم، تصمیم گرفتم که

مطالب داغ
اسکرول به بالا