فهرست مطالب
صفحه محصول در هر فروشگاه اینترنتی باید طوری طراحی شود که کاربر بتواند خیلی راحت به تمام بخشها دسترسی داشته باشد. بخشی برای خلاصه محصول، بخشی برای توضیحات اصلی، ویژگیهای محصول و همچنین نقد و بررسی مشتریان. اگر این محتواها به صورت ساده و پشت سر هم نمایش داده شوند، کاربر سریع خسته میشود و تجربه کاربری کاهش پیدا میکند.
یکی از بهترین راهحلها برای این مشکل، استفاده از تبهای چسبان (Sticky Tabs) در المنتور است. در این جلسه از دوره آموزش طراحی سایت شبیه دیجی کالا با المنتور یاد میگیرید که چطور با استفاده از ویجتهای المنتور چنین تبهایی طراحی کنید.
مرحله اول: ساختار کلی صفحه
- وارد صفحه تکی محصول شوید و روی دکمه ویرایش با المنتور کلیک کنید.
- یک بخش (Section) جدید در بالای محتوای محصول اضافه کنید.
- این بخش قرار است منوی تبها را در خود جای دهد.
مرحله دوم: طراحی منوی تبها
- در این بخش، از ویجت منوی ناوبری (Nav Menu) یا لیست آیکنها (Icon List) استفاده کنید.
- برای هر آیتم، عنوان یکی از بخشهای محصول را وارد کنید:
- معرفی
- بررسی تخصصی
- مشخصات
- نقد و بررسی کاربران
- به هر آیتم یک لینک با استفاده از ویجت لنگر المنتور ، اختصاص دهید. مثلا:
- #introduction
- #reviewspecialized
- #attribute
- #users-reviews
مرحله سوم: تنظیم بخشهای محتوایی
- پایینتر از منوی تبها، برای هر قسمت یک بخش جداگانه بسازید.
- برای هر بخش، از ویجت لنگر المنتور استفاده کنید و نامی قرار دهید که با لینکهای مرحله قبل هماهنگ باشد.
- بخش معرفی→ لنگر با نام introduction
- بخش بررسی تخصصی → لنگر با نام reviewspecialized
- بخش مشخصات → لنگر با نام attribute
- بخش نقد و بررسی کاربران → لنگر با نام users-reviews
مرحله چهارم: فعالسازی حالت چسبان
- به تنظیمات بخش منوی تبها بروید.
- از تب Advanced گزینه Motion Effects را باز کنید.
- بخش Sticky را روی Top قرار دهید تا منو هنگام اسکرول همیشه بالای صفحه باقی بماند.
مرحله پنجم: فعالسازی تب هنگام رسیدن به هر بخش
این بخش باعث میشود وقتی کاربر به بخشی از صفحه رسید، تب مربوطه در منو فعال شود:
1- در تب اول از ویجت شرح کوتاه استفاده کنید.
2- در تب دوم از ویجت محتوا محصول استفاده کنید.
3- در تب سوم از ویجت اطلاعات اضافی استفاده کنید و مطایق ویدیو ، از کدهای CSS برای استای دهی مشابه دیجی کالا استفاده کنید تا ظاهری مانند تصویر زیر داشته باشید.
4- در تب آخر از ویجت نظرات مشتریان استفاده کنید.
برای هر بخش لنگر هم یک شناسه (ID) تعیین کنید.
در بخش Custom CSS المنتور (در نسخه پرو)، کدی قرار دهید تا هنگام رسیدن به بخش مربوطه، آیتم منو حالت فعال (active) بگیرد.
نتیجه نهایی
حالا یک منوی تب چسبان دارید که:
- همیشه بالای صفحه محصول ثابت میماند.
- کاربر را مستقیماً به بخشهای مختلف هدایت میکند.
- هنگام رسیدن به هر بخش، تب مربوطه به صورت خودکار فعال میشود.
این تکنیک نهتنها ظاهر حرفهایتری به صفحه محصول شما میدهد، بلکه تجربه کاربری را بهطور چشمگیری بهبود میبخشد.
کاربران گرامی:
برای مشاهده آموزش کامل این ویدیو ، ابتدا باید عضو دوره جامع طراحی فروشگاه اینترنتی مشابه دیجی کالا باشید ، پس از عضویت ، براحتی دسترسی کامل به محتوای آموزشی کامل ویدیو و همچنین فایل ها و کدهای آماده دوره را خواهید داشت.
