آموزش ساخت دسته بندی محصولات در المنتور – (مشابه دیجی کالا)

یکی از مهم‌ترین بخش‌های هر فروشگاه اینترنتی موفق، نمایش دسته‌بندی محصولات به شکلی جذاب و کاربردی است. این کار به مشتریان کمک می‌کند تا به راحتی محصولات مورد نظر خود را پیدا کنند و تجربه کاربری (UX) بهتری داشته باشند. حتماً ظاهر منظم و کاربرپسند دسته بندی محصولات دیجی کالا توجه شما را جلب کرده است.

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

---

مزایای نمایش دسته بندی محصولات در ووکامرس

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

• ناوبری آسان: چیدمان دسته بندی محصولات به کاربران کمک می‌کند تا به سرعت به بخش‌های مختلف فروشگاه شما دسترسی پیدا کنند.
• افزایش نرخ تبدیل: با سهولت در یافتن محصولات، احتمال خرید افزایش می‌یابد و این به افزایش فروش شما کمک می‌کند.
• ظاهر حرفه‌ای: یک چیدمان منظم و جذاب، اعتبار فروشگاه شما را بالا می‌برد و به طراحی حرفه ای دسته بندی کمک می‌کند.
• بهبود سئو (SEO): ساختار منظم دسته‌بندی‌ها به خزنده‌های موتورهای جستجو کمک می‌کند تا سایت شما را بهتر ایندکس کنند و این یعنی بهینه سازی دسته بندی محصولات برای سئو.

---

پیش‌ نیاز ساخت انواع دسته بندی محصولات

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

1. وردپرس (WordPress): آخرین نسخه پایدار سیستم مدیریت محتوای شما.
2. ووکامرس (WooCommerce): افزونه‌ای ضروری برای مدیریت فروشگاه اینترنتی و محصولات شما.
3. افزونه المنتور پرو : نسخه پرو (برای امکانات پیشرفته‌تر مانند المنتور پرو برای ووکامرس). این افزونه به شما اجازه طراحی دسته بندی ووکامرس با المنتور را می‌دهد.
4. تصاویر دسته‌بندی: برای هر دسته محصول، یک تصویر مناسب و با کیفیت آماده کنید. این تصاویر به عنوان تصاویر دایره ای در المنتور نمایش داده خواهند شد.

---

گام به گام: ساخت بخش دسته بندی محصولات با المنتور (مشابه دیجی کالا)

حالا به سراغ مراحل عملی ساخت دسته بندی محصولات المنتور می‌رویم:

گام 1: ایجاد یا ویرایش صفحه اصلی فروشگاه با المنتور

1. وارد پیشخوان وردپرس خود شوید.
2. اگر قصد دارید این بخش را در صفحه اصلی فروشگاه ووکامرس خود قرار دهید، به “برگه‌ها” > “همه برگه‌ها” بروید. صفحه اصلی فروشگاه (که معمولاً “فروشگاه” یا “Shop” نام دارد) را با ویرایش با المنتور باز کنید.
3. اگر می‌خواهید این بخش را در یک صفحه جدید ایجاد کنید، به “برگه‌ها” > “افزودن برگه جدید” بروید و پس از نام‌گذاری، روی “ویرایش با المنتور” کلیک کنید.

گام 2: افزودن یک سکشن جدید و تنظیم ساختار ستون‌ها

1. در محیط المنتور، روی آیکون “افزودن سکشن جدید” (+) کلیک کنید.
2. یک ساختار ستون‌بندی انتخاب کنید. برای شبیه سازی دیجی‌کالا که معمولاً 6 یا 7 دسته‌بندی در یک ردیف دارد، یک سکشن با 6 ستون انتخاب کنید. (با توجه به تصویر شما، ردیف‌های 6 ستونی مناسب‌تر به نظر می‌رسند.)
3. در صورت نیاز، می‌توانید با راست کلیک روی یک ستون و انتخاب “افزودن ستون جدید” (Add New Column)، تعداد ستون‌ها را افزایش دهید.

گام 3: افزودن عنوان بخش خرید بر اساس دسته‌بندی

1. یک “ویجت عنوان” (Heading Widget) را به بالای سکشن خود بکشید و رها کنید.
2. عنوان را به “خرید بر اساس دسته‌بندی” یا “دسته‌بندی‌های پربازدید” تغییر دهید.
3. عنوان را در مرکز قرار داده و استایل (فونت، رنگ، اندازه) آن را مطابق با طراحی کلی سایت خود تنظیم کنید. این عنوان، کلمات کلیدی مهمی را شامل می‌شود.

گام 4: طراحی هر یک از باکس‌های دسته بندی محصولات در المنتور

برای هر دسته‌بندی، ما از ویجت “جعبه تصویر” (Image Box) استفاده می‌کنیم تا ظاهری مشابه تصویر شما ایجاد کنیم:

1. افزودن ویجت “جعبه تصویر”: این ویجت گزینه بسیار مناسبی است زیرا به طور پیش‌فرض شامل تصویر و عنوان است و امکان افزودن لینک به دسته بندی در المنتور را فراهم می‌کند. آن را به ستون اول بکشید.
2. تنظیمات محتوا (Content Tab):
   • انتخاب تصویر: روی “انتخاب تصویر” کلیک کنید و تصویر دسته‌بندی مربوطه را از کتابخانه رسانه خود انتخاب یا آپلود کنید.
   • عنوان (Title): نام دسته‌بندی (مثلاً “موبایل و تبلت”) را بنویسید. بخش توضیحات را خالی بگذارید تا ساده و شبیه دیجی‌کالا باشد.
   • لینک (Link): لینک صفحه دسته‌بندی مربوطه در ووکامرس را وارد کنید (مثلاً yourwebsite.com/product-category/mobile-tablets/).
   • موقعیت تصویر (Image Position): آن را روی “بالا” (Top) تنظیم کنید.
   • تگ HTML عنوان: برای عنوان دسته‌بندی، از تگ H5 یا H6 استفاده کنید.
3. تنظیمات استایل (Style Tab) برای ظاهر دیجی‌کالا:
   • جعبه (Box): “تراز بندی” (Alignment) را روی “مرکز” (Center) تنظیم کنید.
   • تصویر (Image):
     • عرض (Width): عرض تصویر را حدود 60-80 پیکسل تنظیم کنید.
     • شعاع مرز (Border Radius): این مهم‌ترین تنظیم برای تصاویر دایره ای در المنتور است. آن را روی 50% تنظیم کنید.
     • سایه جعبه (Box Shadow): برای برجسته‌تر شدن، یک سایه ملایم به تصویر اضافه کنید.
   • محتوا (Content):
     • رنگ عنوان (Title Color): رنگ متن را تنظیم کنید.
     • تایپوگرافی (Typography): فونت، اندازه و وزن فونت را برای نام دسته‌بندی تنظیم کنید تا خوانا باشد.

گام 5: تکرار و سفارشی‌سازی برای همه دسته‌ بندی‌ ها

1. پس از اینکه اولین باکس دسته‌بندی را به طور کامل طراحی و استایل‌دهی کردید، روی ستون حاوی ویجت “جعبه تصویر” راست کلیک کرده و گزینه “تکرار” (Duplicate) را انتخاب کنید.
2. این ستون‌های تکراری را در سراسر ردیف خود کپی و جایگذاری کنید تا تعداد مورد نیاز شما تکمیل شود.
3. برای هر ستون جدید، تصویر و نام دسته‌بندی را تغییر دهید و لینک مربوطه را به درستی تنظیم کنید.
4. اگر تعداد دسته‌بندی‌های شما زیاد است، می‌توانید سکشن جدیدی اضافه کرده و مراحل را تکرار کنید تا یک ردیف دیگر از دسته‌بندی‌ها ایجاد شود.

گام 6: تنظیمات ریسپانسیو و سازگاری با موبایل و تبلت

سازگاری با موبایل و Core Web Vitals اینجا اهمیت پیدا می‌کند. بسیار مهم است که این بخش در دستگاه‌های مختلف (موبایل، تبلت، دسکتاپ) به درستی نمایش داده شود:

1. در المنتور، روی آیکون “حالت ریسپانسیو” (Responsive Mode) در پایین پنل کلیک کنید.
2. حالت تبلت: به حالت تبلت بروید. عرض ستون‌ها را تنظیم کنید (مثلاً 33.33% برای 3 ستون در هر ردیف).
3. حالت موبایل: به حالت موبایل بروید. عرض ستون‌ها را روی 50% تنظیم کنید بیشتر از 2 ستون در یک ردیف نمایش داده شود.
4. فاصله داخلی و خارجی: فواصل را برای هر دستگاه تنظیم کنید تا ظاهر مرتبی داشته باشید.

گام 7: ذخیره و انتشار طراحی

1. پس از اتمام طراحی و اطمینان از صحت نمایش در تمامی دستگاه‌ها، روی دکمه “به‌روزرسانی” (Update) یا “انتشار” (Publish) کلیک کنید.
2. صفحه اصلی فروشگاه خود را در یک مرورگر دیگر باز کنید تا نتیجه نهایی طراحی دسته بندی محصولات با المنتور را مشاهده نمایید.

---

نکات مهم برای سئو و بهبود عملکرد دسته بندی محصولات در المنتور

برای اینکه این بخش طراحی شده با المنتور به بهینه سازی سئو شما کمک کند و تجربه بهتری به کاربر بدهد:

• Alt Text برای تصاویر: حتماً برای هر تصویر دسته‌بندی، یک “متن جایگزین” (Alt Text) توصیفی و شامل کلمات کلیدی مرتبط بنویسید (مثلاً: “تصویر دسته بندی موبایل و تبلت”). این به سئو و دسترسی‌پذیری سایت کمک می‌کند.
• لینک‌سازی داخلی: اطمینان حاصل کنید که تمامی لینک‌های دسته‌بندی‌ها به صفحات دسته‌بندی اصلی ووکامرس شما که دارای محتوای کافی و بهینه شده هستند، اشاره می‌کنند.
• بهینه‌سازی تصاویر: قبل از آپلود، تصاویر خود را فشرده کنید. استفاده از Lazy Load (بارگذاری تنبل) برای تصاویر نیز به سرعت بارگذاری المنتور و رعایت Core Web Vitals کمک می‌کند.
• محتوای مفید: گوگل به محتوای مفید ارزش می‌دهد. اطمینان حاصل کنید که صفحات دسته‌بندی شما تنها شامل محصولات نیستند، بلکه توضیحات مفید و مختصری نیز دارند.
• افزونه‌های جانبی المنتور: برخی افزونه‌های جانبی المنتور ویجت‌های تخصصی برای نمایش دسته‌بندی‌های ووکامرس دارند که می‌توانند کار را آسان‌تر کنند و قابلیت‌های بیشتری برای نمایش دسته بندی محصولات در صفحه اصلی ووکامرس ارائه دهند.

---

نتیجه‌ گیری :

با دنبال کردن این آموزش گام به گام، شما قادر خواهید بود یک بخش دسته بندی محصولات حرفه ای و جذاب مشابه دیجی‌کالا را با استفاده از المنتور در صفحه اصلی فروشگاه ووکامرس خود ایجاد کنید. این کار نه تنها به زیبایی بصری سایت شما می‌افزاید، بلکه تجربه کاربری (UX) را نیز به طور چشمگیری بهبود می‌بخشد و به افزایش فروش شما کمک می‌کند. امیدواریم این راهنما برای شما مفید بوده باشد. اگر سوالی دارید یا در مرحله‌ای با مشکل مواجه شدید، حتماً در بخش نظرات مطرح کنید.