فهرست مطالب
آیا میخواهید بخش شگفت انگیز سوپرمارکتی دیجیکالا را در وبسایت خود پیادهسازی کنید؟ این بخش با نمایش محصولات تخفیفدار در قالب شبکهای و تایمر محدود، کاربران را به خرید ترغیب میکند.
در این قسمت از دوره آموزش طراحی سایت شبیه دیجی کالا با المنتور ، نحوه طراحی بخش تخفیف دیجیکالا را با دو کانتینر (تصویر و دکمه، افزونه حلقه شبکه ای با قالب دایرهای و درصد تخفیف) بهصورت گامبهگام توضیح میدهیم. شما میتوانید این بخش را به صورت ریسپانسیو برای دسکتاپ (6 ستون)، تبلت (4 ستون) و موبایل (3 ستون) یا ستون های مورد نظر خود طراحی کنید. همراه ما باشید تا چگونه بخش شگفتانگیز دیجیکالا بسازیم را یاد بگیرید.
ساختار کلی بخش شگفت انگیز سوپرمارکتی دیجی کالا
برای طراحی این بخش، ما از دو کانتینر اصلی استفاده میکنیم:
1. کانتینر اول: تصویر و دکمه CTA
در این بخش یک تصویر جذاب قرار میگیرد (برای مثال تصویر سبد سوپرمارکت) و یک دکمه با متن فراخوان مانند «تا 70% تخفیف» که کاربران را به صفحه کامل محصولات هدایت میکند. طراحی این بخش باید چشمنواز و جذاب باشد تا توجه کاربر را جلب کند.
2. کانتینر دوم: حلقه شبکهای از محصولات
در کانتینر دوم، از لیستینگ گرید (Listing Grid) استفاده میکنیم تا محصولات تخفیفدار را به صورت شبکهای نمایش دهیم. در این حلقه، هر آیتم دارای ویژگیهای زیر است:
- نمایش تصویر محصول به صورت دایرهای
- نمایش درصد تخفیف به صورت عددی (مثلاً ۲۵٪ تخفیف)
- نمایش محصولات به صورت ریسپانسیو:
- در دسکتاپ: نمایش ۶ محصول در یک ردیف
- در تبلت: نمایش ۴ محصول
- در موبایل: نمایش ۲ یا ۳ محصول
در پایین این بخش نیز یک دکمه «بیش از 100 کالا» قرار داده شده تا کاربر بتواند محصولات بیشتری را بارگذاری کند یا به صفحه دیگری هدایت شود.
کاربران گرامی:
برای مشاهده آموزش کامل این ویدیو ، ابتدا باید عضو دوره جامع طراحی فروشگاه اینترنتی مشابه دیجی کالا باشید ، پس از عضویت ، براحتی دسترسی کامل به محتوای آموزشی کامل ویدیو و همچنین فایل ها و کدهای آماده دوره را خواهید داشت.
