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

Share

اشتراک گذاری در telegram
اشتراک گذاری در whatsapp
اشتراک گذاری در facebook
اشتراک گذاری در twitter
اشتراک گذاری در linkedin
اشتراک گذاری در email
اشتراک گذاری در print
طراحی مگامنو دیجی کالا
پخش ویدیو

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

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

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

پس برای طراحی مگامنو سایت دیجی کالا مشابه تصویر زیر، از نصب بودن این 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 پیکسل قرار می دهیم.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

دانلود فایل

همچنین می توانید نسخه آنلاین این مگامنو را از طریق لینک رو برو مشاهده کنید: نسخه آنلاین

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

045-microphone

مدرس :
محمدرضا احمدزاده

013-globe

سطح آموزش :
پیشرفته

035-essay

زمان آموزش :
16 دقیقه

فهرست مطالب

Avatar
مجتبی در 09:45

سلام. ممنون از توضیحاتتون. دوتا افزونه ای که فرمودید رو از سایتتون خریداری کردم. ولی ارور میده موقع فعالسازی. چیکار باید بکنم؟

پاسخ
المنتور فارسی
المنتور فارسی در 09:48

با سلام
لطفا از طریق تیکت مشکل رو بفرمایید تا بررسی شود.

پاسخ
paapc
paapc در 15:38

سلام
شما وقتی تو 6:18 این ویدیو سرچ میکنید تب برای من تب های edd میاد و اونی که شما استفاده کردید نیست انگار . این به خاطر افزونه جت تب هست ؟‌

پاسخ
المنتور فارسی
المنتور فارسی در 15:40

بله دقیقا چون ویجت مورد نظر رو ندارید.

پاسخ
امید انواریض
امید انواریض در 14:59

جواب بدید لطفا ضروری هست کارم

پاسخ
امید انواری
امید انواری در 22:50

سلام من در قسمت ویرایش تب ها edd گزینه کانفیگ رو ندارم مشکل از کدوم افزونه هست که درونش این قسمت نیست ؟‌
در ضمن در قسمت محتوای تب هم در ویرایش تب های edd و tabe items دسته بندی هایی که ساختم رو نمیاره تا انتخابش کنم

(از افزونه های رایگان jet tab و jet menu) استفاده میکنم
برای حل این مشکل باید افزونه jet tab رو بخرم یا جت منو؟‌
امید وارم که متوجه شده باشید و جواب بدین

پاسخ
المنتور فارسی
المنتور فارسی در 22:56

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

پاسخ
امید
امید در 12:11

ببینید
من به جای تب ها , تب های edd رودارم (افزونه رایگان المنتور پرو رو از بیرون دانلود کردم).
داخل تب های edd هم گذینه ای به عنوان انتخواب ایکون یا پیکر بندی نداره که دسته بندی هایی که ساختم رو قرار بدم برای محتوای منو و خیلی چیزای دیگه . مشکل از کجاست ؟‌ باید افزونه پرو شمارو بخرم یا مشکل از jet tab هست به عنوان مثال ؟

پاسخ
المنتور فارسی
المنتور فارسی در 15:18

میخواید حساب کاربری ایجاد کنید؟ اینجا چون مخصوص طراحی مگامنو هست دقیقا ارتباط EDD با منو رو متوجه نمیشم.
ولی اگر نسخه رایگان Jet Tab رو دارید ویجت تب ها داخلش قرار نداره و باید نسخه پولی رو دریافت کنید.

پاسخ
Avatar
فرهاد در 13:07

فوق العاده بود، مرسی

پاسخ
المنتور فارسی
المنتور فارسی در 01:08

ممنون از توجه شما.

پاسخ
میلاد خانی
میلاد خانی در 20:10

درود خدمت تیم المنتور فارسی، واقعا بهترین اموزش ها و خدمات رو بنده تو سطح وب از این سایت دیدم، سلامت و پایدار باشید و مثل خورشید بدرخشید

پاسخ
المنتور فارسی
المنتور فارسی در 20:30

با سلام
لطف دارید.

پاسخ

نظرات ارزشمند خود را به اشتراک بگذارید

دو + 15 =

نیاز به کمک دارید؟ پیام دهید
  • بازگشت به کتابخانه