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

اشتراک گذاری در 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 پیکسل قرار می دهیم.

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

کد 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 انتخاب کنید.

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

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

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

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

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

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

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

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

دانلود فایل

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

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

045-microphone

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

013-globe

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

035-essay

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

امتیاز دهید

اشتراک گذاری

اشتراک گذاری در telegram
اشتراک گذاری در whatsapp
اشتراک گذاری در facebook
اشتراک گذاری در twitter
اشتراک گذاری در linkedin
اشتراک گذاری در email

آخرین مقالات

آخرین محصولات

آخرین محصولات

برچسب ها

لینک کوتاه

https://elementorfa.ir/?p=16156

فهرست مطالب

Avatar
محمد در 00:37

با سلام
برای لینک دسته بندی ها، راهی وجود نداره که از طریق فیلدهای پویا بتونیم لینک دسته بندی های ووکامرس رو به آیتم ها بدیم ؟

پاسخ
المنتور فارسی
المنتور فارسی در 11:46

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

پاسخ
Avatar
اریا در 04:06

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

پاسخ
المنتور فارسی
المنتور فارسی در 13:06

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

پاسخ
Avatar
somayehabbasi در 18:37

خیلی ممنونم اون مشکل خود به خود حل شد. توی قالبها ترازبندی تب ها از سمت چپ بود و توی صفحه هم همون رو نشون میداد. اما الان با وجود اینکه توی قالب تب ها هنوز ترازبندی از سمت چپ به راسته اما توی صفحه درست نشون میده. از لینک زیر ببینید.
https://somayeabbasi.ir/digikala-home
خیلی سپاسگذارم بابت آموزش خوب وپاسخگویی فوق العاده تون آقای احمدزاده عزیز

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

خواهش میکنم در خدمت هستیم.

پاسخ
Avatar
somayehabbasi در 11:35

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

پاسخ
المنتور فارسی
المنتور فارسی در 13:58

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

پاسخ
Avatar
somayehabbasi در 11:10

در قسمت محتوای تب ها

پاسخ
Avatar
somayehabbasi در 10:54

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

پاسخ
المنتور فارسی
المنتور فارسی در 10:57

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

پاسخ
Avatar
somayehabbasi در 15:27

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

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

با سلام
چه مشکلی در هنگام درج آیکون پیش میاد ؟

پاسخ
Avatar
somayehabbasi در 15:47

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

پاسخ
Avatar
somayehabbasi در 16:23

من متوجه نشدم چرا شما افزونه رو نصب کردید و از قسمت آیکون های سفارشی آیکون رو اضافه نکردید.؟
من از اون طریق آیکن ها رو اضافه کردم.موفق شدم اما مرحله آخر که کد رو اضافه میکنی قسمت سفید کاملا به لبه کادر نمی چسبه و یه فاصله هست. لینک زیر رو ببینید.
/https://somayeabbasi.ir/digikala-home

پاسخ
المنتور فارسی
المنتور فارسی در 19:03

نسخه های قدیمی افزونه قابلیت استفاده از کتابخانه المنتور را ندارد به همین دلیل از اون افزونه استفاده شده است.
ظاهرا یک پدینک با مقدار 8 پیکسل اضافه داره. ازقسمت کنترل تب ها می توانید از سمت چپ مقدار پدینگ رو 0 کنید.

پاسخ
HAYDRA HIROY
HAYDRA HIROY در 17:36

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

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

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

پاسخ
HAYDRA HIROY
HAYDRA HIROY در 15:21

سلام بنده دقیقا عین این آموزشو پیش رفتم نشد افزونمم اوجیناله و بروزرسانی خودکار در مخزنو داره قالبمم hello هست عین همین اموزشو پیش رفتم نشد ازتون خواستم راهنمایی کنید گفتید در سایت بپرسید خواستم تیکت بدم دیدم تیکتا فقط برای افرادیه که محصول خریدن الان مین چیکار کنم ایمیلمو میزارم لطفا برام پاسخو ارسال کنید یا حد اقل یه راهنمایی کنید که چیکار کنم ؟ امکانش هست دسترسی بدمتون خودتون چک کنید؟

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

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

پاسخ
Avatar
علی در 15:39

سلام
هر کاری میکنم افزونه jet menu کار نمیکنه
قالب هم قالب hello است
ممنون

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

با سلام
در کدوم مرحله مشکل ایجاد می شود؟

پاسخ
HAYDRA HIROY
HAYDRA HIROY در 15:53

نه تماما قرار دادم و بدون هیچ مشکلی و ایرادی از رو ویدیو جلو رفتم لطفا اجازه بدید دسترسی بدم خودتون چک کنید jet menu فعاله و در قسمت اخر هم ازش استفاده کردم ولی نمیاره

پاسخ
Kamal Mohammadi Majd
Kamal Mohammadi Majd در 16:43

باسلام و عرض ادب
ضمن تشکر و تبریک برای تلاش پربارتان، بفرمایید تکلیف نمایش منوهای رده سوم این مگامنو در موبایل و تبلت چیست؟ فعلا خیلی ناخوانا و فشرده است. درست گفتم؟

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

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

پاسخ
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

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

پاسخ

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

نیاز به کمک دارید؟ پیام دهید