بخش دوم: طراحی صفحه اصلی دیجی کالا با المنتور

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

قبل از دیجی‌کالا هم، توی همین دوره با هم سایت اپل رو طراحی کردیم تا ببینیم چطور می‌تونیم از طراحی‌های مینیمال و برندینگ قوی ایده بگیریم. ولی حالا نوبت یه فروشگاه پرجزئیاته؛ سایتی با دسته‌بندی، پیشنهاد شگفت‌انگیز، برندها، پرفروش‌ترین‌ها و کلی بخش دیگه.
‌
توی جلسهٔ قبلی، هدر سایت دیجی‌کالا رو با هم طراحی کردیم و حالا توی این قسمت که جلسهٔ دوم از طراحی سایت دیجی‌کالاست، قراره بریم سراغ ساخت صفحه اصلی فروشگاه. صفحه‌ای که ظاهرش، حس و حال یک فروشگاه جدی، مدرن و حرفه‌ای رو منتقل کنه.
‌
‌ما این سایت رو به‌عنوان یک دمو کامل برای قالب اهورا طراحی کردیم به نام دیجی‌کالا که بتونی برای سایت خودت ازش الهام بگیری. همه‌چی با المنتور و قالب وردپرس اهورا ساخته شده، پس اگر تا حالا فکر می‌کردی طراحی چنین سایتی فقط کار حرفه‌ای‌هاست، این آموزش قراره نظرت رو عوض کنه.

نکته مهم قبل از شروع طراحی

یه نکته‌ی خیلی مهم رو همین اول کار باید باهات درمیون بذارم. وقتی داریم یه سایت بزرگ مثل دیجی‌کالا رو به‌عنوان الگو در نظر می‌گیریم و می‌خوایم طراحی صفحه‌مون رو شبیه اون بسازیم، باید حواسمون به یه موضوع خیلی حساس باشه: محتوا و حقوق اون سایت.

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

پس یه قانون نانوشته اما خیلی مهم اینه که ما فقط از ساختار و طراحی ایده می‌گیریم؛ یعنی ببینیم فلان بخش کجاست، ظاهرش چطوریه، چی باعث شده تجربه‌ی کاربر خوب بشه. اما وقتی می‌رسه به متن‌ها، اسم دسته‌بندی‌ها و حتی سبک نوشتار محتوا، باید خودمون تولیدش کنیم یا حداقل یه نسخه‌ی شخصی‌سازی‌شده و متفاوت بسازیم. اینطوری هم سایتمون خاص و متفاوت می‌شه، هم هیچ مشکلی از نظر قانونی و اخلاقی برامون پیش نمیاد.

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

طراحی صفحه اصلی سایت دیجی‌کالا

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

حالا یه اسم شیک و باحال براش انتخاب کن، مثلاً: خانه یا هر چی که خودت دوست داری. وقتی اسم برگه رو نوشتی، نوبت می‌رسه به اصل کاری! همون دکمهٔ معروف «ویرایش با المنتور» رو بزن تا وارد دنیای طراحی بصری بشی. از اینجا به بعد دیگه همه چی بصریه و قراره با کشیدن و رها کردن (درگ و دراپ) المان‌ها، کم‌کم صفحه‌تو بسازی.

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

اول از همه، عنوان صفحه رو یه چیزی بذار که بعداً راحت بتونی پیداش کنی. مثلاً بنویس «خانه» یا «صفحه اصلی». اینطوری هم خودت سردرگم نمی‌شی، هم اگه خواستی این صفحه رو به‌عنوان صفحه اصلی سایت ست کنی، راحت‌تر پیداش می‌کنی. بعدش وضعیت برگه رو روی منتشر شده بذار. یعنی از حالت پیش‌نویس درش بیار تا واقعاً فعال بشه روی سایتت.

مهم‌ترین بخش این صفحه اینه که نوشته «طرح‌بندی صفحه»، باید حتماً تنظیمش رو بذاری روی «Convas المنتور». با این کار، همه‌ی اون حاشیه‌های اضافه، سایدبار، عنوان برگه و باقی چیزایی که نمی‌خوای توی طراحیت دخالت کنن، حذف می‌شن و یه بوم سفید کامل می‌مونه برات. دقیقاً همون چیزی که برای طراحی یه صفحه‌ی حرفه‌ای و سفارشی نیاز داری.

حالا که این تنظیمات رو انجام دادی، دکمهٔ «به‌روزرسانی» رو بزن تا ذخیره شه و تمام! الان بوم طراحی‌مون آماده‌ست، صفحه‌مون منتشر شده، و دیگه وقتشه بریم سراغ اصل کاری یعنی طراحی خود محتوای صفحه؛ جایی که قراره فروشگاهت شکل واقعی بگیره.

افزودن المنت‌های قالب اهورا به صفحه

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

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

المنت‌هایی که قراره توی این صفحه ازشون استفاده کنیم اینان:

• استوری
• اسلایدر تصویر ۳
• باکس آیکن ۴
• باکس آیکن ۵
• اسلایدر محصولات ۴
• اسلایدر محصولات ۵
• دسته‌بندی محصولات ۳
• دسته‌بندی محصولات ۴
• دسته‌بندی محصولات ۵
• باکس دسته‌بندی ۶
• شبکه پست ۱۱
• شبکه محصولات ۲
• و در نهایت، برندها

تنها یکی از المنت‌هایی که می‌خواستیم استفاده کنیم توی لیست پیدا نشد، ولی خب اگه لازم شد، راحت پیداش می‌کنیم یا یه جایگزین براش در نظر می‌گیریم. همین که این المنت‌ها رو کنار هم بذاری، بدون اغراق یه صفحهٔ دیجی‌کالایی در حد حرفه‌ای برات درمیاد. همه‌شون هم فقط با کشیدن و رها کردن، بدون هیچ دردسری. اهورا واقعاً توی این قسمت عالی عمل کرده.

افزودن محصول به سایت

خب حالا که جعبه ابزارمون تکمیل شد می‌بینیم که تمام المنت‌ها خالی هستن چون هیچ محصولی ثبت نکردیم توی سایت پس باید بریم سراغ اضافه کردن محصول به سایتمون. بدون محصول، اکثر این ابزارها چیزی برای نمایش ندارن، پس اول از همه باید وارد پیشخوان وردپرس بشیم تا محصولات جدیدمون رو اضافه کنیم.

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

اول از همه عنوان محصول رو می‌نویسی. مثلاً «هدفون بی‌سیم شیائومی». بعد می‌ری پایین‌تر و توی بخش توضیحات کامل محصول، هر چیزی که لازم می‌دونی وارد می‌کنی؛ مثلاً ویژگی‌ها، مزایا یا هر توضیحی که فکر می‌کنی کاربر باید بدونه. یه کم پایین‌تر یه بخش دیگه هست برای توضیح کوتاه محصول که معمولاً همون چیزیه که توی کارت محصول نشون داده می‌شه.

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

حالا مهم‌ترین قسمت: تصویر محصول. توی سایدبار سمت چپ یا راست (بسته به زبان سایتت)، یه بخشی هست به اسم «تصویر محصول». روی اون کلیک می‌کنی و یه تصویر از محصول آپلود می‌کنی. می‌تونی تصاویر دیگه هم به گالری محصول اضافه کنی تا وقتی کاربر وارد صفحه محصول شد، بتونه تصاویر بیشتری ببینه.

در آخر، دسته‌بندی محصول رو انتخاب می‌کنی؛ مثلاً لوازم دیجیتال، موبایل، هدفون یا هر چیزی که مناسب اون محصوله. حتی می‌تونی برچسب هم بزنی تا بعداً بتونی بهتر محصولات رو فیلتر کنی. وقتی همه‌ی این کارها رو کردی، فقط کافیه روی دکمه‌ی «انتشار» کلیک کنی. همین! حالا یه محصول کامل توی سایتت داری.

شروع طراحی

خب بریم سراغ شروع طراحی واقعی صفحه‌مون. اگه وارد سایت دیجی‌کالا بشی، اولین چیزی که چشم آدمو می‌گیره، بالای اسلایدر سایت دیجی‌کالا، بخشی هست که معمولاً استوری‌ها یا آفرهای ویژه‌ی سریع (مثل بنرهای خیلی کوتاه مدت) رو نمایش می‌ده؛ یه نوار اسلایدی که چند آیتم به‌شکل دایره‌ای و افقی پشت سر هم قرار گرفتن. برای پیاده‌سازی این قسمت توی سایتی که با قالب اهورا طراحی شده، می‌تونیم از المنتی به اسم «استوری» استفاده کنیم.

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

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

اگه بخوای ظاهر حرفه‌ای‌تری هم بهش بدی، می‌تونی برای هر آیتم یه لینک اختصاص بدی که کاربر رو به صفحه‌ی مربوط به همون استوری هدایت کنه؛ مثلاً صفحه‌ی تخفیف محصولات دیجیتال یا یک دسته‌بندی خاص. اینجوری علاوه بر جذابیت بصری، تجربه‌ی کاربری رو هم تقویت کردی.

در نهایت وقتی این بخش بالا باشه و بعد اسلایدر بیاد، ساختار صفحه‌ی اول سایت خیلی شبیه دیجی‌کالا می‌شه و کاربر به‌خوبی می‌تونه با یه نگاه سریع بفهمه که چه کمپین‌ها یا محصولات ویژه‌ای روی سایت فعال هستن.

افزودن اسلایدر

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

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

تنظیم ردیف برای هر المنت

یه نکته خیلی مهمی که قبل از اضافه کردن هر المنتی مثل اسلایدر باید بهش توجه کنیم، ساختن یه ردیف (سکشن) جداگونه برای هر بخشه. توی دیجی‌کالا همه چی خیلی مرتب و منظم کنار هم چیده شده و دلیلش هم همینه که برای هر قسمت یه ردیف مجزا در نظر گرفته شده.

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

روی آیکون ویرایش سکشن کلیک می‌کنیم، بعد توی تنظیمات سمت چپ، گزینه عرض محتوا رو می‌ذاریم روی «تمام عرض». با این کار، المنتی که داخل این ردیف قرار می‌گیره، دیگه محدود به یه عرض ثابت وسط صفحه نیست، بلکه از لبهٔ چپ تا لبهٔ راست صفحه رو می‌گیره.

بعدش می‌رسیم به فاصله بین ستون‌ها. این گزینه رو می‌ذاریم روی «بدون فاصله». چون نمی‌خوایم هیچ فضای خالی یا فاصله‌ای بین قسمت‌های مختلف اسلایدر یا لبه‌های اون با حاشیه‌های صفحه باشه. این دقیقاً همون کاریه که دیجی‌کالا کرده: یه اسلایدر تمام صفحه، بدون حاشیه، درست مثل یه بنر عریض که تو چشم کاربر باشه.

حالا که این تنظیمات انجام شد، المنت اسلایدر تصویر ۳ رو داخل این ردیف می‌ندازیم و خیالمون راحته که درست همون جایی قرار گرفته که باید باشه، با همون عرض و همون استایل. این اسلایدر می‌شه ویترین فروشگاهت. همون جایی که کاربر اولین تاثیرش رو از سایت می‌گیره. پس بهتره این بخش رو درست و حرفه‌ای بچینی. خب حالا که اسلایدرمون رو آوردیم سرجاش و تنظیمات ردیف رو هم انجام دادیم، نوبت می‌رسه به گذاشتن تصاویر داخل اسلایدر.

دانلود تصاویر دیجی‌کالا

اگه می‌خوای اسلایدهایی که توی دیجی‌کالا هست رو بذاری، یه راه خیلی ساده هست برای اینکه عکسا رو مستقیماً از خود سایت برداری. کافیه بری توی سایت دیجی‌کالا، روی خود اسلایدر کلیک راست کنی و گزینهٔ Inspect رو بزنی. اینطوری سورس صفحه باز می‌شه و می‌تونی مستقیم لینک تصویر رو پیدا کنی.

کافیه یکی‌یکی روی بخش‌های اسلایدر ماوس رو ببری تا قسمت مربوط به تصویر روشن شه. اونجا یه لینک تصویر پیدا می‌کنی که با فرمت jpg یا webp هست. روی اون لینک کلیک راست کن، گزینهٔ Open in new tab یا باز کردن در تب جدید رو بزن، بعدش خیلی راحت اون عکس رو دانلود کن و توی اسلایدر خودت آپلودش کن.

ولی اگه دوست نداری بری سراغ inspect و کدنویسی و این داستان‌ها، یه روش خیلی ساده‌تر هم هست: استفاده از افزونه‌های مرورگر. مثلاً توی کروم می‌تونی افزونه‌هایی مثل Image Downloader یا Download All Images نصب کنی. این افزونه‌ها خودشون به صورت خودکار تمام عکس‌های صفحه رو لیست می‌کنن و حتی دسته‌بندی‌شون هم می‌کنن. فقط کافیه وارد صفحهٔ دیجی‌کالا بشی، روی آیکون افزونه کلیک کنی و عکس‌هایی که می‌خوای رو تیک بزنی و دانلودشون کنی.

آپلود تصاویر برای اسلایدر

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

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

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

نکته مهم اینه که هیچ مشکلی نداره اگه اوایل یه کم تفاوت حس بشه. چون داریم با ابزارهای متفاوتی طراحی می‌کنیم، اما با یه‌کم دقت و تنظیم درست، می‌تونیم کاملاً اون حس و ظاهر حرفه‌ای رو شبیه‌سازی کنیم.

باکس آیکون

بعد از اسلایدر نوبت می‌رسه به اون باکس‌های معروفی که آیکن دارن و معمولاً خدمات یا دسته‌های خاص رو معرفی می‌کنن. توی دیجی‌کالا هم این قسمت دقیقاً بعد از بنر اسلایدی قرار داره. ما هم همین مسیر رو می‌ریم. اما اینجا نیازی به المنت خاصی نداریم. خود المنتور بهمون این امکان رو می‌ده که فقط با یه ردیف و چندتا ستون، یه ساختار تمیز بسازیم.

کاری که می‌کنم اینه که روی همون ردیف قبلی که برای اسلایدر ساختیم راست‌کلیک می‌کنم و یه کپی ازش می‌گیرم. بعدش المنت اسلایدر رو حذف می‌کنم تا یه ردیف خالی داشته باشم. تو این ردیف خالی، ۸ تا ستون می‌سازیم، دقیقاً به همون شکلی که دیجی‌کالا ازش استفاده کرده.

یه نکته مهم اینه که چون توی این قسمت نمی‌خوایم محتوا تمام عرض باشه و ترجیح می‌دیم همه‌چی یه مقدار محدودتر باشه (مثل خود دیجی‌کالا)، پس توی تنظیمات ردیف، عرض محتوا رو روی «جعبه‌ای» می‌ذارم. این کار باعث می‌شه ستون‌هامون وسط صفحه بمونن و چپ و راست فضای خالی داشته باشیم. دقیقاً مثل چیزی که توی دیجی‌کالا می‌بینی. اینجا یواش‌یواش صفحه‌مون داره شکل یه فروشگاه واقعی رو می‌گیره!

خب حالا که ساختار ۸ تا ستون رو ساختیم، وقتشه تصاویر مربوط به اون باکس‌های آیکن رو بذاریم. این تصاویر همون آیکن‌هایی هستن که توی دیجی‌کالا نمایش داده می‌شن. مثل «دیجی‌پی»، «سوپرمارکت»، «خرید اقساطی» و… که هر کدوم با یه تصویر کوچیک و یه عنوان کوتاه نمایش داده شدن. کاری که می‌کنم اینه که می‌رم توی سایت دیجی‌کالا و همه‌ی این عکس‌ها رو یکی‌یکی ذخیره می‌کنم. بعدش هم میارمشون توی وردپرس و توی ستون‌ها قرار می‌دم.

نکته مهم

ولی اینجا یه چیزی رو باید خیلی جدی بگم، واقعاً مهم‌ترین چیزی که توی طراحی سایت تاثیر داره، تصاویریه که استفاده می‌کنی. شاید فکر کنی طراحی حرفه‌ای یعنی کلی کدنویسی یا انیمیشن‌های عجیب‌غریب. ولی نه! توی تجربه من، چیزی که یه سایتو در نگاه اول حرفه‌ای و قابل اعتماد نشون می‌ده، کیفیت تصاویره.

ببین، تصاویر اولین چیزی‌ان که چشم کاربر رو می‌گیرن. حتی قبل از اینکه متن رو بخونه یا دکمه‌ای رو کلیک کنه، این تصاویره که باعث می‌شن کاربر حس کنه با یه سایت با کیفیت طرفه یا نه. حالا دیجی‌کالا دقیقاً همین کار رو کرده. آیکن‌هایی که توی این بخش استفاده کرده همگی طراحی اختصاصی دارن، رنگ‌بندی‌شون حساب‌شدست و از لحاظ وضوح کاملاً شارپن. همین باعث می‌شه یه حس خیلی خوب به کاربر منتقل شه.

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

حتی پیشنهاد می‌کنم اگه دسترسی به طراح داری، یه سری آیکن اختصاصی سفارش بدی که دقیقاً با تم برند و رنگ سایتت هم‌خونی داشته باشن. این کار تأثیر روانی خیلی قوی روی ذهن مخاطب می‌ذاره.

خب، حالا که تصاویر با کیفیت رو آپلود کردیم، می‌ریم سراغ چیدنشون توی ستون‌ها. من برای شروع می‌رم سراغ ستون اول. داخلش یه المان «تصویر» می‌ذارم و تصویر مورد نظرم رو از پرونده‌های چندرسانه‌ای انتخاب می‌کنم. درست زیر تصویر هم یه متن با المان «سربرگ» قرار می‌دم و مثلاً می‌نویسم، «دیجی‌پی» یا هر چیزی که مربوط به اون آیکنه.

این روش خیلی ساده و منعطفه، چون تصویر و متن رو جدا از هم داریم و خیلی راحت می‌تونیم اندازه، فاصله و فونتشونو تنظیم کنیم. ولی اگه بخوای یه مقدار مرتب‌تر و جمع‌و‌جورتر باشه و همه‌چی یه جا قرار بگیره، می‌تونی به‌جای این کار، از المان «کادر تصویر» (یا Image Box) استفاده کنی.

کادر تصویر یه المانه که تصویر، عنوان و توضیح رو توی خودش داره و باعث می‌شه نظم بیشتری توی طراحی باشه. توی اون حالت هم عکس رو انتخاب می‌کنی، هم عنوانش رو می‌نویسی، و اگه خواستی یه توضیح کوتاه هم می‌تونی اضافه کنی.

اگه بخوای واقعاً یه طراحی حرفه‌ای و نزدیک به سایت دیجی‌کالا داشته باشی، باید فقط به ظاهر کلی قانع نشی. یعنی چی؟ یعنی باید بشینی تک‌تک اجزا رو بررسی کنی؛ از سایز نوشته‌ها گرفته تا فاصله‌ی بین متن و تصویر، حتی ضخامت فونت و رنگ دقیقش.

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

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

برای تصویر هم همین کارو می‌کنم. می‌زنم روی آیکنی که توی دیجی‌کالا هست، Inspect رو باز می‌کنم و می‌بینم مثلاً عرض تصویر ۶۴ پیکسل هست یا فاصله‌ی پایینش تا متن حدود ۸ پیکسل تنظیم شده. اینارو توی المنتور با دقت وارد می‌کنم. بخش مارجین یا پدینگ المنتور دقیقاً همون چیزیه که باید باهاش بازی کنی تا فاصله‌ها مثل نسخه‌ی اصلی دربیاد.

حس خوبی داره وقتی می‌بینی اون چیزی که ساختی، داره شبیه یه سایت بزرگ و حرفه‌ای مثل دیجی‌کالا درمیاد. انگار داری یه قطعه‌ی دقیق و منظم از پازل طراحی رو جا می‌زنی. و جالبه بدونی که کاربر نهایی شاید اصلاً نفهمه این جزئیات چقدر زحمت داشته، ولی ناخودآگاه بهش حس نظم، دقت و اعتماد منتقل می‌شه.

حالا که ستون اول رو با دقت و حوصله طراحی کردیم، نوبت اون بخشیه که خیلی وقتا ساده گرفته می‌شه، ولی اتفاقاً تأثیر زیادی روی تمیزی و هماهنگی کل طراحی داره. من توی این مرحله میام اون هفت‌تا ستون قبلی رو که بدون تنظیم بودن، کامل پاک می‌کنم. به‌جای اینکه بخوام برای هر ستون از نو عکس بذارم، متن بنویسم، فونت و سایز و فاصله تنظیم کنم، فقط از همین ستونی که الان همه چیزش درسته و تنظیم‌شده، هفت بار تکثیر می‌گیرم.

این کار یه مزیت بزرگ داره؛ اینکه همه‌ی ستون‌ها دقیقاً یه‌شکل درمی‌آن. یعنی همون فونتی که توی ستون اول استفاده کردی، توی بقیه هم حفظ می‌شه. فاصله‌ی تصویر تا متن یکیه، رنگ متن یکیه، عرض تصویر، همه‌چی هماهنگه. همین هماهنگیه که وقتی کار تموم می‌شه، باعث می‌شه طراحی تمیز، منظم و چشم‌نواز باشه. اصلاً نیازی نیست بری برای هر ستون دوباره استایل‌سازی کنی یا با margin و padding بجنگی.

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

اینطوری هم کار رو سریع‌تر جلو می‌بری، هم نتیجه‌ت حرفه‌ای‌تر درمیاد. به‌جای اینکه بخوای هشت‌تا بار یه کار تکراری انجام بدی، یه‌بار درستش می‌کنی و بعد فقط هوشمندانه تکثیرش می‌کنی. همین کارای کوچیک‌ه که توی طراحی وب باعث می‌شه خروجی کارت شبیه یه سایت واقعی و حرفه‌ای مثل دیجی‌کالا بشه، نه یه سایت آماتوری.

بخش پیشنهاد شگفت انگیز

حالا نوبت می‌رسه به یکی از جذاب‌ترین قسمت‌های طراحی صفحه، یعنی همون بخشی که توی دیجی‌کالا به اسم «پیشنهاد شگفت‌انگیز» می‌شناسیمش. بخشی که هم از نظر ظاهری به چشم میاد، هم از نظر فروش خیلی تأثیرگذاره. توی قالب اهورا، ما برای ساخت این قسمت می‌تونیم از المانی به اسم «شبکه محصولات ۲» استفاده کنیم. یه المان خیلی کاربردی و شسته‌رفته که دقیقاً می‌تونه ظاهر حرفه‌ای این بخش رو برامون بسازه.

وقتی بخش «شبکه محصولات ۲» رو می‌ذاری سر جای خودش توی صفحه. اون‌وقت خودش به‌صورت خودکار شروع می‌کنه آخرین محصولاتی که ساختی رو نشون دادن. اگه بخوای دقیق‌تر کنترلش کنی، می‌تونی فیلترش کنی که فقط یه دسته‌ی خاص از محصولات رو نشون بده، مثلاً فقط محصولاتی که روی تخفیف هستن، یا فقط از دسته‌ی دیجیتال.

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

شگفت انگیز سوپرمارکتی

حالا می‌رسیم به بخش بعدی که توی سایت دیجی‌کالا خیلی به چشم میاد و کاربرا خیلی راحت باهاش ارتباط می‌گیرن؛ همون بخشی که به اسم «شگفت‌انگیز سوپرمارکتی» شناخته می‌شه. توی قالب اهورا هم یه المنت جدا براش در نظر گرفته شده که دقیقاً همون ظاهر و ساختار رو داره و استفاده‌ش هم خیلی ساده‌ست.

اول از همه باید یه ردیف جدید بسازیم. چون هر بخش از سایتمون باید توی یه ردیف مستقل قرار بگیره تا هم تنظیماتش جدا باشه، هم موقع چینش صفحه بتونیم کنترل بیشتری روی فاصله‌ها، پس‌زمینه و ساختار داشته باشیم. پس توی ادیتور المنتور، یه ردیف جدید اضافه می‌کنیم و مثل قبل تنظیمش می‌کنیم روی تمام عرض و فاصله‌ی بین ستون‌ها رو هم روی بدون فاصله می‌ذاریم که این بخش هم با ظاهر دیجی‌کالا هماهنگ باشه.

بعد از ساخت ردیف، فقط کافیه المنت «شگفت‌انگیز سوپرمارکتی» رو از پنل سمت راست بگیریم و بندازیم داخل همین ردیف. همین‌قدر راحت. چون این المنت خودش از قبل طراحی شده و همه‌چیش تنظیمه، از ظاهر و رنگ گرفته تا جای دکمه‌ها و اسلایدر محصولات، فقط کافیه مطمئن باشی که توی محصولاتت، چند تا محصول سوپرمارکتی هم وجود داره تا این بخش بتونه چیزی برای نمایش داشته باشه.

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

ایجاد ردیف چهارستونه‌ی تصویر

تو این مرحله می‌خوایم بریم سراغ یه بخش ساده ولی خوش‌ظاهر که معمولاً چه توی دیجی‌کالا و چه توی خیلی از سایت‌های فروشگاهی دیگه دیده می‌شه. این قسمت شامل ۴ تا سکشنه که هرکدوم فقط یه تصویر داخل خودش دارن. چیزی پیچیده‌ای نیست ولی اگه با دقت و تمیز اجراش کنیم، حسابی می‌تونه به زیبایی صفحه‌مون اضافه کنه.

اولین کاری که می‌کنیم اینه که می‌ریم توی صفحه‌ی دیجی‌کالا و اون چهار تا تصویر رو با استفاده از ابزار inspect یا یکی از افزونه‌های مرورگر ذخیره می‌کنیم. معمولاً این تصاویر در ابعاد و فرمت مناسبی هستن، ولی بهتره یه بررسی کنیم که خیلی سنگین نباشن و بهینه بشن تا هم سرعت لود سایت خوب بمونه، هم کیفیت حفظ بشه.

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

نکته

یه نکته‌ای که ممکنه موقع طراحی صفحه سایتت بهش بخوری، اینه که وقتی داری از سایت‌هایی مثل دیجی‌کالا عکس ذخیره می‌کنی، بیشتر عکس‌ها با فرمت webp هستن. این فرمت هم سبک‌تره، هم کیفیت خوبی داره، برای همینم بیشتر سایت‌های حرفه‌ای ازش استفاده می‌کنن. ولی مشکل اینجاست که وردپرس به‌صورت پیش‌فرض اجازه نمی‌ده عکس‌های webp رو آپلود کنی و اگه بخوای یه عکس با این فرمت بارگذاری کنی، بهت یه ارور می‌ده که می‌گه این نوع فایل پشتیبانی نمی‌شه.

اما اصلاً لازم نیست نگران بشی یا بری سمت کدنویسی و فایل‌های قالب. خیلی راحت می‌تونی با نصب یه افزونه کوچیک این محدودیت رو برداری و هر فرمتی رو بدون دردسر آپلود کنی.

برای این کار، فقط کافیه بری توی پیشخوان وردپرس، از منوی سمت راست بری به قسمت «افزونه‌ها» و بعد روی «افزودن» کلیک کنی. توی کادر جستجو بنویس: Mime Types Plus. وقتی افزونه رو دیدی، نصبش کن و بعدش فعالش کن. همین! هیچ کار دیگه‌ای لازم نیست انجام بدی. بعد از این، هر وقت خواستی یه عکس webp آپلود کنی، بدون هیچ اروری برات بالا میاد و کارت راه می‌افته.

حالا کع عکسا رو آپلود کردی، باید یه سری تنظیمات جزئی رو انجام بدیم تا همه‌چی تمیز و مرتب بشه. مثلاً گوشه‌های تصویر رو گرد می‌کنیم اگه توی دیجی‌کالا هم اینطوری باشه، یا اگه حاشیه‌ای داشت، از بخش تنظیمات حاشیه براش تعریف می‌کنیم. می‌تونیم سایه بندازیم، سایز رو دقیق تنظیم کنیم یا از margin و padding برای فاصله‌ها استفاده کنیم.

وقتی این ستون و تصویرش رو کامل کردیم و به اون شکلی که می‌خوایم دراومد، دیگه لازم نیست برای بقیه‌ی سکشن‌ها از صفر شروع کنیم. میایم همون سکشن رو انتخاب می‌کنیم و ازش سه تا تکثیر می‌گیریم. حالا ۴ تا سکشن مشابه داریم که فقط کافیه توی هر کدوم عکس مربوط به خودش رو بذاریم. اینطوری هم همه‌ی تنظیمات قبلی حفظ می‌شن، هم کلی توی زمان صرفه‌جویی می‌کنیم و همه‌ی تصاویر ظاهر یکسان و منظمی پیدا می‌کنن.

در نهایت، چون این سکشن‌ها کنار هم هستن و قراره به‌صورت افقی چیده بشن، باید فاصله‌ی بین‌شون رو هم یه‌دست کنیم. می‌تونیم از تنظیمات ستون‌ها margin بینشون بذاریم یا اگه توی یه ردیف هستن، فاصله‌ی بین ستون‌ها رو از تنظیمات ردیف کنترل کنیم. مثلاً ۲۰ یا ۳۰ پیکسل فاصله بذاریم که نفس بکشند و به هم نچسبن.

با همین چندتا قدم ساده، یه بخش تصویری تمیز، هماهنگ و جذاب می‌سازیم که هم حس حرفه‌ای بودن می‌ده و هم باعث می‌شه کاربر راحت‌تر جذب بشه. تمام هدف همینه؛ با کم‌ترین پیچیدگی، بیش‌ترین تاثیر رو توی ظاهر سایت بذاریم.

تنظیمات ظاهری

اینجا می‌رسیم به یه نکته‌ی خیلی ظریف اما مهم توی طراحی یعنی فاصله‌ها. چیزی که شاید تو نگاه اول به چشم نیاد، ولی اگه رعایت نشه، کل صفحه یه‌جوری به‌هم‌ریخته و غیرحرفه‌ای به نظر می‌رسه. اینجاست که سر و کله‌ی ابزار inspect پیدا می‌شه و بهمون کمک می‌کنه که طراحی‌مون رو تا جای ممکن شبیه دیجی‌کالا دربیاریم.

برای اینکه بفهمیم توی دیجی‌کالا بین ردیف‌های مختلف چقدر فاصله هست، روی خود سایت دیجی‌کالا کلیک راست می‌کنیم و گزینه‌ی “Inspect” یا “بررسی” مرورگر رو می‌زنیم. بعد با ماوس روی بخش‌هایی از صفحه حرکت می‌کنیم تا حاشیه‌ها (margin) و فاصله‌های داخلی (padding) بخش‌ها به‌صورت رنگی مشخص بشن. معمولاً margin با رنگ نارنجی مشخص می‌شه. وقتی به اون بخش‌هایی که دنبالشی رسیدی، می‌تونی خیلی راحت ببینی که مثلاً فاصله‌ی بالای یه سکشن ۸ پیکسل هست و فاصله‌ی پایینش هم همین‌طور.

حالا برمی‌گردیم به صفحه‌ای که توی المنتور داریم طراحی می‌کنیم. می‌ریم سراغ هر ردیفی که ساختیم و از بخش تنظیمات خود ردیف، توی قسمت “پیشرفته” (Advanced)، مقدار margin بالا و پایین رو روی ۸ پیکسل تنظیم می‌کنیم. یعنی ۸px برای بالا و ۸px برای پایین. این کار باعث می‌شه که فاصله‌ی بین ردیف‌ها نه خیلی زیاد باشه که عناصر صفحه از هم جدا و بی‌ربط به نظر بیان، نه اون‌قدر کم باشه که همه چیز به‌هم بچسبه و شلوغ بشه.

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

افزودن عنوان

بعد از اون سکشن‌هایی که ساختیم و فاصله‌هاشون رو دقیق تنظیم کردیم، وقتشه یه عنوان مرتب و خوش‌فرم اضافه کنیم تا کاربر بدونه داره وارد یه بخش جدید می‌شه. برای شروع، یه ردیف (سکشن) جدید توی المنتور می‌سازیم. فقط هم قراره یه عنصر توی این ردیف قرار بگیره: یه «سربرگ». اینو از بخش ابزارهای المنتور پیدا می‌کنیم و می‌کشیمش توی اون ردیف تازه.

حالا می‌ریم سراغ تنظیمات. اول از همه، مهمه که این عنوان وسط‌چین باشه. چون وقتی یه بخش تازه رو شروع می‌کنیم، معمولاً بهتره تیترش تو مرکز صفحه باشه تا توجه رو جلب کنه. پس توی تنظیمات سربرگ، تراز رو می‌ذاریم روی حالت وسط.

حالت تیتر هم خیلی مهمه. اینجا ما نمی‌خوایم تیتر اصلی صفحه باشه، چون اون معمولاً H1 یا نهایتاً H2 می‌شه. برای این بخش که یه تیتر داخلیه، حالت H3 کاملاً مناسبه. نه زیادی برجسته‌ست، نه بی‌اثر. درست همون‌قدر که باید.

حالا بریم سراغ استایل. فونت رو روی ۲۱ پیکسل می‌ذاریم، که اندازه‌ی خوانا و خوبی برای تیترهای فرعی هست. نه کوچیکه که گم بشه، نه بزرگه که خیلی به چشم بیاد. بعدش ضخامت فونت رو روی ۵۰۰ تنظیم می‌کنیم؛ این هم باعث می‌شه متن یه‌کم بولدتر دیده بشه، ولی نه اون‌قدر که احساس سنگینی یا شلوغی بده. همون وسط کار، کاملاً مناسب برای حفظ نظم بصری.

حالا متن خود تیتر رو می‌نویسیم: «دسته‌بندی‌های کالا». سادست، ولی دقیقاً چیزی که باید باشه. خوانا، گویا و به‌دور از پیچیدگی اضافی. بهتره رنگ متن هم با تم کلی سایت هم‌خوانی داشته باشه. مثلاً اگه قالب‌مون تم قرمز یا آبی داره، رنگ تیتر رو هم یه جوری تنظیم می‌کنیم که توی همون فضا قرار بگیره. رنگ‌هایی مثل خاکستری تیره یا مشکی ملایم هم معمولاً برای این مدل عنوان‌ها خیلی خوب جواب می‌دن.

در آخر، یه فاصله‌ی کوچیک از بالا براش در نظر می‌گیریم. ۲۰ پیکسل معمولاً گزینه‌ی خوبیه. با این کار، تیتر از سکشن قبلی جدا می‌شه و ظاهر صفحه هم نفس می‌کشه. این فاصله کمک می‌کنه تا کاربر راحت‌تر بفهمه که این یه بخش جدیده و ناخودآگاه چشمش از بخش قبل جدا می‌شه.

اینجور چیزها شاید توی طراحی ساده به نظر برسه، ولی همین جزئیات کوچیکن که ظاهر کلی سایت رو حرفه‌ای می‌کنن. اینکه بدونی چطور و کِی از یه تیتر استفاده کنی، با چه اندازه و فاصله‌ای، و اون تیتر چه نقشی توی تجربه‌ی کاربر داره، دقیقاً همون چیزیه که یه طراحی سطحی رو از یه طراحی اصولی جدا می‌کن

دسته‌بندی کالا

حالا نوبت می‌رسه به یکی از بخش‌های مهم سایت فروشگاهی‌مون؛ یعنی «دسته‌بندی کالا». این بخش درست همون جاییه که کاربر قراره خیلی راحت و سریع بین دسته‌های مختلف محصولاتی که داریم حرکت کنه. پس هم باید از نظر طراحی چشم‌نواز باشه و هم کاربر به‌راحتی بتونه بفهمه هر بخش مربوط به چیه.

خب، چون قبلاً بالاتر یه بخش مشابه ساختیم که شامل ۸ تا ستون بود (همون بخش کوچیک‌دسته‌ها که عکس و متن زیرشون بودن)، دیگه لازم نیست از اول همه‌چی رو بسازیم. همون سکشن قبلی رو انتخاب می‌کنیم و با استفاده از گزینه‌ی “تکثیر” یا “Duplicate”، یه نسخه‌ی جدید ازش می‌سازیم.

بعد از اینکه سکشن جدید ساخته شد، تعداد ستون‌ها رو میاریم روی ۶ تا. برای این کار، کافیه دو تا از ستون‌های اضافی رو حذف کنیم. توی المنتور این کار خیلی راحته؛ با یه کلیک روی ستون و انتخاب حذف، ستون‌ها رو کم می‌کنیم تا دقیقاً ۶ تا بشن.

حالا نوبت به محتوا می‌رسه. مثل قبل، باید بریم توی سایت دیجی‌کالا و از بخش دسته‌بندی‌ها، عکس‌های مرتبط رو دانلود کنیم. حواست باشه که کیفیت تصاویر خیلی مهمه؛ چون اگه عکس‌ها بی‌کیفیت باشن یا سایزشون با اندازه‌ی قالب هم‌خوانی نداشته باشه، ظاهر کلی سایت می‌ره زیر سوال.

بعد از اینکه تصاویر رو ذخیره کردیم، توی وردپرس آپلودشون می‌کنیم و میایم سراغ هر ستون. توی هر کدوم از این ۶ ستون، تصویر قبلی رو حذف می‌کنیم و عکس جدید رو جایگزین می‌کنیم. زیر هر تصویر هم متنی رو که مربوط به دسته‌اش هست می‌نویسیم. مثلاً «کالای دیجیتال»، «لوازم خانگی»، «مد و پوشاک» و… اینطوری با یه نگاه ساده، کاربر متوجه می‌شه که هر تصویر مربوط به چه بخشی از فروشگاهه و می‌تونه سریع‌تر تصمیم بگیره.

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

در کل، چون این سکشن یکی از نقاط اصلی تعامل کاربر با سایت حساب می‌شه، ارزش داره که یه‌کم وقت بیشتر بذاریم و تصاویر و متن‌ها رو دقیق‌تر تنظیم کنیم. اینجا دیگه بحث صرفاً زیبایی نیست؛ راحتی کاربره که در اولویته.

نکته مهم درباره‌ی فرمت تصاویر

یکی از کارای خیلی هوشمندانه‌ای که توی طراحی سایت دیجی‌کالا انجام شده، همین استفاده از فرمت تصویر WebP هست. شاید توی نگاه اول اصلاً متوجهش نشیم، ولی وقتی روی یه تصویر راست‌کلیک می‌کنیم و گزینه‌ی Inspect یا بررسی عنصر رو می‌زنیم، می‌بینیم که فرمت عکس‌ها به‌جای JPG یا PNG، با پسوند .webp نمایش داده می‌شه. این کار خیلی مهمه و می‌تونه تفاوت زیادی توی سرعت بارگذاری سایت شما ایجاد کنه.

حالا بریم ببینیم اصلاً این فرمت WebP چیه و چرا انقدر توصیه می‌شه ازش استفاده کنیم. WebP یه فرمت تصویریه که توسط گوگل توسعه داده شده و هدف اصلیش اینه که تصاویر سایت‌ها هم با حجم کمتر لود بشن، هم کیفیتشون حفظ بشه. یعنی چی؟ یعنی دقیقاً همون چیزی که یه طراح سایت دنبالشه: کاهش حجم تصاویر بدون افت کیفیت بصری.

وقتی شما عکس‌های سایتتون رو با فرمت WebP آپلود می‌کنید، حجمشون گاهی تا ۴۰٪ یا حتی بیشتر نسبت به فرمت JPG کم می‌شه. اما جالبیش اینجاست که ظاهرش برای کاربر هیچ فرقی نمی‌کنه؛ همون وضوح، همون رنگ، همون شفافیت. فقط فرقش اینه که سایت سریع‌تر لود می‌شه و کاربر زمان کمتری منتظر می‌مونه. و همه می‌دونیم که سرعت سایت یکی از فاکتورهای مهم برای سئو و تجربه‌ی کاربریه.

حالا ممکنه بگی خب چجوری عکس‌هامو به فرمت WebP تبدیل کنم؟ برای این کار ابزارهای زیادی هست. هم می‌تونی با نرم‌افزارهایی مثل فتوشاپ یا افزونه‌های وردپرسی مثل «WebP Express» یا «ShortPixel» این کارو انجام بدی، هم سایت‌های آنلاین رایگانی هستن که فقط کافیه تصویرتو آپلود کنی و نسخه‌ی WebP تحویلت بدن.

من داخل سایت آموزش کامل تبدیل تصاویر به WebP و استفاده ازش توی وردپرس رو گذاشتم. پیشنهاد می‌کنم حتماً یه سر به اون آموزش بزنی، چون استفاده از این فرمت می‌تونه تأثیر خیلی مثبتی روی سرعت سایتت داشته باشه، مخصوصاً اگه مثل دیجی‌کالا، قراره کلی تصویر مختلف توی صفحات استفاده کنی.

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

حالا که ۱۲ تا تصویر برای دسته‌بندی محصولات رو از سایت دیجی‌کالا دانلود کردیم و آماده‌ آپلود شدن هستن، وقتشه که بریم سراغ بارگذاریشون توی سایت خودمون. از بخش «پرونده‌های چندرسانه‌ای» وردپرس همه‌ی این عکس‌ها رو یک‌جا آپلود می‌کنیم. بهتره قبل از آپلود، اسم فایل‌ها رو دقیق و مشخص بذارید (مثلاً: digital-goods.webp، home-appliances.webp و…) تا بعداً توی انتخاب و جایگذاری راحت‌تر باشید و لازم نباشه بین کلی فایل مشابه دنبال عکس درست بگردید.

بعد از اینکه تصاویر آپلود شد، می‌ریم سراغ اون بخشی از صفحه که مخصوص دسته‌بندی کالاهاست. چون از قبل این بخش رو ساخته بودیم و ۶ ستون براش در نظر گرفتیم، حالا باید دوتا سکشن مشابه بسازیم تا جمعاً ۱۲ تصویر داشته باشیم. توی هر سکشن ۶ تا ستون داریم. حالا وقتشه که بریم توی سایت دیجی‌کالا و با زدن گزینه‌ی «Inspect» روی یکی از تصاویر دسته‌بندی، اندازه‌ی دقیق اون تصویر رو بررسی کنیم.

توی کدهای سایت مشخصه که عرض تصاویر دسته‌بندی، دقیقاً ۱۷۰ پیکسله. ما هم میایم و همین عرض رو برای تصاویر خودمون اعمال می‌کنیم تا نتیجه‌ی نهایی از نظر ابعاد، دقیقاً مثل دیجی‌کالا بشه. این کار باعث می‌شه تصاویر نه خیلی کشیده بشن و نه خیلی کوچک بیفتن، و در کل ظاهر صفحه تمیزتر و حرفه‌ای‌تر باشه.

بعد از این مرحله، تصویر رو توی هر ستون قرار می‌دیم و زیرش یه متن کوچیک اضافه می‌کنیم. این متن‌ها هم از همون قبل آماده‌ شدن، پس فقط جایگذاری لازمه. فونت، اندازه، وزن فونت (مثلاً ۵۰۰)، و فاصله‌ی متن از تصویر همه همون تنظیماتی هست که از قبل داشتیم. فقط یه نکته کوچیک اینجا هست: توی سایت دیجی‌کالا، رنگ متن‌های زیر دسته‌بندی‌ها یه کمی تیره‌تره. پس ما هم می‌تونیم رنگ متن‌هامون رو یه مقدار به سمت طوسی تیره ببریم یا کد رنگی مشابه دیجی‌کالا رو از کدها کپی کنیم و توی المنتور وارد کنیم.

حالا می‌رسیم به یه بخش خیلی باحال، وقتی ستون اول رو تنظیم کردیم و همه‌چیش از نظر طراحی و محتوا درست شد، دیگه لازم نیست بقیه‌ی ستون‌ها رو دونه‌دونه از اول بسازیم. فقط کافیه روی همون ستون اول کلیک کنیم و ازش تکثیر بگیریم. با زدن دکمه‌ی Ctrl + D (یا روی خود ستون کلیک راست کنیم و گزینه‌ی Duplicate رو بزنیم) یه کپی دقیق از ستون ساخته می‌شه. این کارو ۵ بار دیگه انجام می‌دیم تا ۶ ستون بشه، و بعد فقط میایم تصویر و متن هر ستون رو جایگزین می‌کنیم.

این روش چندتا مزیت مهم داره. اول اینکه کلی توی وقت صرفه‌جویی می‌شه. دوم اینکه چون از یه ستون استاندارد تکثیر گرفتیم، مطمئنیم که همه‌چی دقیقاً مثل قبلیه: اندازه‌ها، رنگ‌ها، فونت‌ها، فاصله‌ها… همه یکی هستن. و سوم اینکه احتمال خطا کمتر می‌شه؛ چون یه‌بار همه‌چیزو تنظیم کردیم، و دیگه لازم نیست همه‌ی مراحل رو برای هر ستون تکرار کنیم.

اگه تازه‌کار باشی، ممکنه توی روزای اول این چیزها برات جدید باشه. ولی نگران نباش. با هر بار طراحی، یه تکنیک جدید یاد می‌گیری. حتی همین که امروز فهمیدی چجوری با Ctrl + D تکثیر کنی، یا از روی کد سایت دیجی‌کالا اندازه تصویر رو دربیاری، خودش کلی جلو بردتت. طراحی سایت همینه دیگه، پر از ریزه‌کاریه که کم‌کم واردش می‌شی و هر روز حرفه‌ای‌تر می‌شی.

خب حالا که یه ردیف کامل داریم با ۶ تا تصویر و متن که مربوط به دسته‌بندی محصولات هست، دیگه نیاز نیست بیایم از صفر یه ردیف جدید بسازیم. کاری که می‌کنیم خیلی ساده‌ست ولی توی زمان و انرژی صرفه‌جویی خیلی خوبی داره، از همین ردیف آماده یه نسخه‌ی جدید می‌سازیم. یعنی چی؟ یعنی کل اون ردیف شش‌ستونه رو انتخاب می‌کنیم، روش کلیک راست می‌کنیم و گزینه‌ی Duplicate یا همون “تکثیر” رو می‌زنیم. با این کار یه نسخه‌ی کاملاً مشابه، دقیقاً با همون طراحی و تنظیمات ساخته می‌شه و زیر ردیف قبلی قرار می‌گیره.

حالا می‌ریم سراغ جایگزینی اطلاعات. توی ردیف جدید، تصویرها رو یکی‌یکی عوض می‌کنیم و متن‌ها رو هم بر اساس دسته‌بندی‌های جدیدی که داریم، به‌روزرسانی می‌کنیم. چون تنظیمات ظاهری مثل فونت، رنگ، اندازه، فاصله و … از قبل روی ردیف اول اعمال شده، دیگه نیازی نیست دوباره همه‌ی این تنظیمات رو انجام بدی. فقط کافیه محتوای جدید رو بذاری سر جاش.

این بخش هم خیلی مهمه، چون نه‌تنها کار رو سریع‌تر پیش می‌بره، بلکه باعث می‌شه طراحی صفحه‌ت انسجام بیشتری داشته باشه. وقتی همه‌چی با یه الگو و استایل ثابت پیش می‌ره، کاربر موقع دیدن سایت حس منظم‌بودن و حرفه‌ای‌بودن رو به‌وضوح حس می‌کنه. درواقع همین جزئیات کوچیکه که ظاهر کلی سایتت رو تا حد زیادی بالا می‌بره.

با این کار ما عملاً بخش «دسته‌بندی محصولات» رو کامل کردیم. حالا دو ردیف داریم، هرکدوم با ۶ تا تصویر و متن که می‌شن ۱۲ دسته‌بندی مختلف. دقیقاً مشابه چیزی که توی سایت دیجی‌کالا می‌بینیم. این یکی از بخش‌های مهم صفحه‌ی اصلیه، چون کاربر خیلی راحت و سریع می‌تونه از روی این دسته‌بندی‌ها بره سراغ محصولاتی که بهش علاقه داره. پس هرچی این بخش تمیزتر و باکیفیت‌تر طراحی بشه، تجربه‌ی کاربر بهتر می‌شه و احتمال اینکه توی سایت بچرخه و خرید کنه هم بیشتر می‌شه.

افزودن ردیف دوستونه‌ی تصویر

حالا که بخش دسته‌بندی‌هامون تموم شد، بلافاصله می‌رسیم به یه قسمت دیگه از طراحی که توی سایت دیجی‌کالا هم کاملاً قابل مشاهده‌ست: یه ردیف با دو ستون، که هر ستون داخلش یه تصویر قرار داره. این بخش معمولاً برای معرفی کمپین‌ها یا بنرهای تبلیغاتی خاص استفاده می‌شه. هم خیلی ساده‌ست از نظر ساختار، و هم اگر درست طراحی بشه، می‌تونه خیلی شیک و حرفه‌ای ظاهر بشه.

برای ساخت این قسمت، اول از همه یه ردیف جدید توی صفحه اضافه می‌کنیم و تعداد ستون‌هاش رو روی ۲ تا تنظیم می‌کنیم. اما نکتۀ جالب و خیلی مفیدی که اینجا داریم، اینه که لازم نیست دوباره بریم و برای هر ستون، از اول تصویر بذاریم، حاشیه بدیم، شعاع گوشه‌ها رو تنظیم کنیم و کلی کار دیگه انجام بدیم.

چون قبلاً توی اون ردیف ۴‌ستونه‌ای که بالاتر ساخته بودیم، همۀ این تنظیمات رو یک‌بار انجام دادیم. پس حالا می‌تونیم خیلی راحت بریم سراغ یکی از همون تصاویر، روش کلیک کنیم، Copy بزنیم، بیایم توی یکی از ستون‌های جدید، Paste کنیم و تمام. با همین یه حرکت، تصویر دقیقاً با همون تنظیماتی که قبلاً داشتیم، وارد ستون جدید می‌شه. این یعنی شعاع گوشه‌ها، انحنای حاشیه، سایه‌ها، اندازه تصویر و همه‌چی مثل قبله.

همین کار رو برای ستون دوم هم تکرار می‌کنیم. فقط کافیه تصویر رو عوض کنیم و عکس جدید مورد نظر رو جایگزین کنیم. اگر لازم بود از روی سایت دیجی‌کالا اون عکس‌ها رو دانلود کنید، دقیقاً مثل قبل با ابزار Inspect یا اکستنشن‌های مرورگر می‌تونید عکس رو بردارید، ذخیره کنید و توی بخش چندرسانه‌ای وردپرس آپلودش کنید.

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

در ضمن چون داریم از یه المان آماده استفاده می‌کنیم، طراحی سریع‌تر پیش می‌ره و احتمال اینکه اشتباهی توی سایز یا استایل پیش بیاد خیلی کمتره. همین ریزه‌کاری‌ها، توی پروژه‌های بزرگ به شدت خودشونو نشون می‌دن و کیفیت نهایی صفحه رو بالا می‌برن. پس اگه دیدی یه جایی توی طراحی قبلی کارت تنظیمات خوبی انجام دادی، حتماً ازشون کپی بگیر و توی قسمت‌های دیگه هم استفاده کن. این‌طوری هم کارت تمیزتره و هم سرعتت بالاتر می‌ره.

نکته مهم

توی طراحی تجربه‌ی کاربری، یکی از چیزایی که شاید خیلی به چشم نیاد اما تأثیر زیادی روی حس مخاطب از سایت می‌ذاره، همین فاصله‌گذاری‌هاست. وقتی شما بین بخش‌ها یا ردیف‌های صفحه، فضای کافی در نظر می‌گیری، در واقع داری به ذهن کاربر اجازه استراحت می‌دی. اجازه می‌دی بین هر بخش، یه نفس بکشه، محتوای قبلی رو هضم کنه و بعد آماده‌ی دیدن بخش بعدی بشه.

توی همین پروژه‌ای که داریم انجام می‌دیم و داریم ظاهر صفحه‌ی اصلی دیجی‌کالا رو با قالب اهورا می‌سازیم، شاید تا الان متوجه شده باشی که سایت دیجی‌کالا خیلی کم از فضای خالی بین ردیف‌ها استفاده کرده. این موضوع باعث شده صفحه‌ش یه کم فشرده به نظر بیاد، یعنی وقتی کاربر اسکرول می‌کنه، همه‌چی انگار توی هم رفته. به قول معروف، همه‌چیز یه جورایی در هم تنیده‌ست.

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

پس یه نکته‌ی طلایی توی UX رو همیشه یادت باشه: هوا بده به طراحی‌ات! یعنی خساست به خرج نده توی دادن فضای خالی. از مارجین‌های بالا و پایین، از فاصله بین ستون‌ها، از فاصله بین تیتر و تصویر، همه‌ و همه استفاده کن. اما خب، نه دیگه اون‌قدر زیاد که بخش‌ها از هم جدا بیفتن. همه‌چی باید یه ریتم آروم و منظم داشته باشه.

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

پیشنهاد دیجی‌کالا

خب حالا که رسیدیم به بخشی که مربوط میشه به “پیشنهاد دیجی‌کالا”، یه نکته‌ی مهم رو همین اول کار باید با هم مرور کنیم، اونم اینکه وقتی دارید طراحی‌تون رو براساس یه سایت دیگه مثل دیجی‌کالا پیش می‌برید، نباید اسم برند اون سایت رو توی بخش‌ها و عنوان‌ها مستقیماً استفاده کنید، مخصوصاً وقتی پروژه برای مشتری یا استفاده‌ی عمومی قراره باشه.

چرا؟ چون این می‌تونه هم از لحاظ اخلاقی درست نباشه و هم از نظر قانونی براتون دردسر درست کنه. دیجی‌کالا یه برند ثبت‌شده‌ست، و استفاده‌ی مستقیم از نامش توی سایت‌های دیگه، به‌خصوص توی عنوان‌ها و بخش‌ها، ممکنه باعث شکایت یا تذکر رسمی بشه.

پس به‌جای اینکه توی این بخش بنویسیم “پیشنهاد دیجی‌کالا”، خیلی راحت می‌تونیم بنویسیم “پیشنهاد ما” یا حتی یه چیزی مثل “پیشنهاد ویژه”. همین تغییر کوچیک باعث میشه هم ظاهر سایت حرفه‌ای‌تر باشه، هم شما از نظر حقوقی کاملاً در امان بمونید.

اما بریم سراغ طراحی این قسمت. کاری که می‌کنیم اینه که از همون ردیفی که قبلاً برای عنوان «دسته‌بندی کالا» ساختیم یه کپی می‌گیریم. با همون تنظیمات: وسط‌چین بودن، فونت ۲۱ پیکسل، ضخامت ۵۰۰، رنگ دلخواه، و فاصله‌ی بالا ۲۰ پیکسل. فقط متنش رو تغییر می‌دیم و می‌نویسیم: «پیشنهاد ما».

بعد از اینکه این ردیف آماده شد، نوبت اینه که بررسی کنیم توی المنت‌های قالب اهورا چیزی برای ساختن بخش پیشنهاد ویژه یا مثلاً محصولات منتخب وجود داره یا نه. وقتی لیست المنت‌ها رو بالا پایین کنیم، متوجه می‌شیم که فعلاً چنین المنتی داخل قالب اضافه نشده. البته بچه‌های توسعه قالب پیام دادن و گفتن که قراره توی نسخه‌های آینده همچین المنتی هم به قالب اضافه بشه، ولی خب ما که الان عجله داریم و نمی‌خوایم متوقف بشیم، این بخش رو می‌ذاریم برای بعد و مستقیم می‌ریم سراغ بخش بعدی، یعنی برندها.

بخش محبوب‌ترین برندها

حالا که بخش «پیشنهاد ما» رو ساختیم و ازش عبور کردیم، وقتشه بریم سراغ یه بخش خیلی مهم دیگه یعنی بخش محبوب‌ترین برندها. توی دیجی‌کالا، این بخش همیشه با لوگوی برندهای معروف و محبوب پر شده و اتفاقاً تأثیر زیادی توی اعتماد کاربر داره. چون کاربر وقتی برندهایی که براش آشنا هستن رو ببینه، احساس اطمینان بیشتری می‌کنه.

اگه توی دیجی‌کالا دقت کرده باشی، کنار این عنوان یه آیکن کوچیک هم هست. اون رو هم با استفاده از inspect پیدا می‌کنیم و دانلودش می‌کنیم و بعد می‌ذاریمش کنار عنوان، دقیقاً مثل دیجی‌کالا. این آیکن‌ها معمولاً با فرمت SVG یا PNG ذخیره می‌شن، پس کیفیت خوبی دارن و توی طراحی هم بهمون کمک می‌کنن.

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

تو تنظیمات المنت برندها، خیلی مهمه که عرض محتوا رو روی “تمام عرض” بذاریم. چون توی دیجی‌کالا هم این بخش به صورت تمام عرض طراحی شده و اگه ما بخوایم با عرض جعبه‌ای نمایش بدیم، همون حس رو منتقل نمی‌کنه و ظاهر کار بهم می‌ریزه. بعد از اون تنظیمات چیدمان برندها رو هم می‌تونیم تغییر بدیم. مثلاً تعیین کنیم چند برند توی هر ردیف نمایش داده بشه یا فاصله بین‌شون چقدر باشه.

به همین راحتی، این بخش هم ساخته می‌شه. هم ظاهراً خیلی شبیه دیجی‌کالا درمیاد، هم از لحاظ فنی کاملاً با المنت‌های قالب خودمون پیاده‌سازی شده. و مهم‌تر از همه اینکه از نظر تجربه‌ی کاربری، این بخش خیلی مهمه چون کاربر با دیدن برندهایی که بهشون اعتماد داره، خیلی راحت‌تر توی سایت می‌مونه و شروع به خرید می‌کنه.

بخش دوستونه

بعد از اینکه بخش «محبوب‌ترین برندها» رو ساختیم و کاملش کردیم، حالا نوبت به ادامه‌ی طراحی صفحه می‌رسه. درست زیر بخش برندها، دو تا تصویر تبلیغاتی یا معرفی محصول هستن، دقیقاً مثل چیزی که توی دیجی‌کالا می‌بینیم. این دوتا عکس معمولاً برای معرفی دسته‌های خاص یا کمپین‌های تخفیف هستن و هم از لحاظ بصری توجه مخاطب رو جلب می‌کنن، هم کاربر رو به کلیک کردن و ورود به صفحات دیگه ترغیب می‌کنن.

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

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

خیلی مهمه که موقع انتخاب تصویر جدید، حواستون باشه هم سایزش با تصویر قبلی هماهنگ باشه، هم کیفیتش بالا باشه. چون توی این بخش، مثل یک ویترین بزرگ جلوی چشم کاربره و کیفیت پایین خیلی سریع توی ذوق می‌زنه. اگر تصویر جدیدی که گذاشتید اندازش با قبلی فرق داشت، می‌تونید از تنظیمات تصویر یا خود ستون، سایز رو متناسب با نیازتون تغییر بدید تا همه‌چی دوباره مرتب بشه.

دسته‌بندی محصول

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

توی قالب اهورا، خوشبختانه یه المنت اختصاصی برای این کار در نظر گرفته شده که اسمش هست «دسته‌بندی محصولات ۵». وقتی این المنت رو به صفحه اضافه می‌کنی، دقیقاً یه ساختار شبیه چیزی که توی دیجی‌کالا هست بهت می‌ده: چندتا باکس که توی هر کدومش یه تصویر و یه عنوان قرار گرفته و با یه استایل خیلی مرتب کنار هم چیده شدن.

کاری که باید بکنی اینه که اول از همه این المنت رو از بین ابزارک‌های قالب اهورا پیدا کنی (می‌دونم گاهی بین این‌همه المنت پیدا کردنشون سخته، ولی با یه سرچ ساده راحت پیداش می‌کنی). بعد که انداختیش توی صفحه، شروع می‌کنی به شخصی‌سازی.

مثلاً عنوان‌هایی که به‌صورت پیش‌فرض نوشته شدن رو می‌تونی خیلی راحت تغییر بدی و متن دلخواه خودت رو بنویسی. فرض کن می‌خوای بنویسی “موبایل و تبلت” یا “لوازم خانگی”، خیلی راحت از تنظیمات هر آیتم وارد بخش عنوانش می‌شی و متن رو ویرایش می‌کنی.

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

در کل این بخش با المنت دسته‌بندی محصولات ۵ واقعاً راحت و سریع ساخته می‌شه و هیچ نیازی نیست دستی طراحی کنی یا با کلی تنظیمات پیچیده سروکله بزنی. همه‌چیز از قبل آماده‌ست، فقط کافیه محتوا رو به سلیقه‌ی خودت تنظیم کنی.

بخش دیجی‌پلاس

خیلی خب، حالا رسیدیم به بخشی که توی دیجی‌کالا اسمش هست «دیجی‌پلاس». اونجایی که رنگ‌بندی متفاوتی داره و یه‌جورایی حس ویژه بودن به کاربر می‌ده. این بخش معمولاً شامل یه دسته‌بندی خیلی مشخص از خدمات یا محصولاتیه که مخصوص اعضای پلاس هستن.

خبر خوب اینکه قالب اهورا برای این بخش هم یه المنت اختصاصی داره به اسم «اهورا پلاس» یا همون باکس دسته‌بندی محصولات ۶. در واقع وقتی این المنت رو بندازی توی صفحه، خودش یه ساختار آماده برات می‌سازه که دقیقاً حس همون بخش دیجی‌پلاس رو القا می‌کنه.

لازم نیست بیای از صفر یه ردیف و چندتا ستون بسازی و بخوای تصویر و متن بچینی کنارشون، نه. فقط کافیه المنت «اهورا پلاس» رو از لیست ابزارک‌ها انتخاب کنی و بندازیش داخل یه ردیف جدید. همین! همه‌چی خودش هست: تصویر، عنوان، توضیح کوتاه، دکمه، و حتی استایل خاصی که برای این بخش در نظر گرفته شده تا کاربر وقتی می‌رسه به اینجا، یه توقفی بکنه و توجهش جلب بشه.

حالا اگه بخوای دقیق‌ترش کنی، می‌تونی به تنظیمات هر آیتمش بری و مثلاً عنوان‌ها رو عوض کنی، تصاویر مخصوص خودتو آپلود کنی یا رنگ‌ها رو تغییر بدی تا با تم کلی سایتت هماهنگ بشه. اگه دقیق نگاه کنی، می‌بینی که بخش دیجی‌پلاس توی دیجی‌کالا دقیقاً از همین سبک طراحی استفاده کرده: یه طراحی کارتی، با رنگ‌های جداکننده و آیتم‌های شاخص.

بخش دیجی‌کلاب

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

برای پیاده‌سازی این بخش با قالب اهورا، اصلاً نیاز نیست وقت زیادی صرف کنی یا بخوای ترکیب‌های خاصی از المنت‌ها بچینی. فقط کافیه بری سراغ المنتی به اسم «باکس آیکون ۴». این ابزارک دقیقاً همون چیزی رو می‌سازه که توی دیجی‌کلاب می‌بینی: یه باکس با آیکن در بالا و متن زیرش که خیلی مرتب و تمیز نمایش داده می‌شن.

اول یه ردیف جدید می‌سازی، باکس آیکون ۴ رو می‌ندازی توی اون، و بعد به‌راحتی می‌تونی بیای آیکن‌های خودتو انتخاب کنی، متن‌هات رو بنویسی و استایل دلخواهت رو پیاده کنی. یکی از نکته‌های مهم توی این قسمت اینه که پس‌زمینه‌ی این بخش باید شبیه دیجی‌کالا باشه، چون رنگ زمینه خیلی در جلب توجه کاربر مؤثره.

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

اگه یه نگاه بندازی به همین بخش توی سایت دیجی‌کالا، متوجه می‌شی که ساختارش اصلاً پیچیده نیست ولی چون طراحی تمیزی داره، توی چشم میاد. با اهورا خیلی راحت می‌تونی همین حس رو توی سایت خودت هم داشته باشی، بدون اینکه نیاز باشه ساعت‌ها طراحی کنی یا کدنویسی بلد باشی.

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

دسته‌بندی‌های محصولات

بعد از بخش دیجی‌کلاب، دیجی‌کالا دوباره از همون ساختار قبلی دسته‌بندی محصولات استفاده کرده، فقط این بار عنوان آیتم‌ها رو تغییر داده تا متناسب با موضوع جدید باشن. برای ما هم هیچ نیازی نیست که دوباره از صفر شروع کنیم یا کل ساختار رو بچینیم؛ خیلی راحت از همون بخشی که قبلاً ساختیم و شامل دسته‌بندی محصولاته، یه تکثیر می‌گیریم.

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

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

پرفروش‌ترین کالاها

خب حالا می‌رسیم به بخش پرفروش‌ترین کالاها. اگه تا اینجای طراحی رو با ما پیش اومده باشی، احتمالاً دیگه ذهنت کاملاً با منطق قالب اهورا و المنتور هماهنگ شده. توی این قسمت، دیجی‌کالا یه ردیف اختصاصی داره که محصولات پرفروش رو به صورت یه اسلایدر افقی نشون می‌ده. برای این بخش، خوشبختانه قالب اهورا یه المنت دقیق و اختصاصی داره به اسم “اسلایدر محصولات ۵” که دقیقاً همین کار رو برات انجام می‌ده.

اول یه ردیف جدید می‌سازیم و عرض محتوا رو می‌ذاریم روی تمام عرض. بعد المنت “اسلایدر محصولات ۵” رو از پنل المنت‌ها می‌کشیم و داخل ردیف می‌ندازیم. فقط کافیه توی تنظیمات این اسلایدر، محصولات موردنظرت رو انتخاب کنی و تعیین کنی که پرفروش‌ترین‌ها نمایش داده بشن. قالب اهورا این امکان رو بهت می‌ده که خیلی راحت فیلتر محصولات رو بر اساس دسته‌بندی، برچسب یا حتی پرفروش بودن بچینی. این یعنی دقیقاً همون چیزی که توی دیجی‌کالا می‌بینی.

مهم‌ترین نکته توی این بخش اینه که نیازی به طراحی پیچیده یا کدنویسی خاصی نداری. تمام امکانات از قبل توی المنت طراحی شده و فقط کافیه با چند تا کلیک ساده، پرفروش‌ترین کالاهای سایتت رو به کاربرات نمایش بدی؛ دقیقاً مثل دیجی‌کالا ولی با انعطاف بیشتر چون دست خودته که چه محصولاتی توش باشن. پس راحت تکیه بده، یه لیوان قهوه بردار و با یه المنت ساده، یه بخش حرفه‌ای توی سایتت بساز. 😎

افزودن بنر پا تو کفش ما کنید

حالا نوبت اون بخشیه که یه تصویر بزرگ به صورت تمام عرض زیر بخش پرفروش‌ترین کالاها قرار گرفته. معمولاً توی سایت دیجی‌کالا این تصویر یه جور بنر تبلیغاتی یا اطلاع‌رسانی برای یه کمپین خاصه. برای پیاده‌سازیش اصلاً نیازی نیست از صفر یه ردیف بسازیم. همون ردیفی که قبلاً برای قرار دادن دو تا تصویر استفاده کردیم رو خیلی راحت می‌تونیم دوباره استفاده کنیم.

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

اگه اون تصویر یه بنر تبلیغاتیه، پیشنهاد می‌کنم حتماً حواست به سایز تصویر باشه. اگه تصویر خیلی کشیده یا خیلی بلند باشه، ممکنه توی نسخه موبایل ظاهر مناسبی نداشته باشه. توی این موارد بهتره عرض تصویرو مث همون چیزی که از دیجی‌کالا توی کدش چک کردی تنظیم کنی و اگه لازمه، از ابزارهایی مثل فتوشاپ یا فوتوپیا کمک بگیری که نسبت ابعاد تصویر رو دقیق در بیاری.

بخش منتخب محصولات تخفیف و حراج

برای بخش منتخب محصولات تخفیف و حراج، می‌تونیم خیلی ساده و سریع از المنت «شبکه محصولات ۲» استفاده کنیم که داخل قالب اهورا در دسترسه. این المنت به‌خوبی برای نمایش مجموعه‌ای از محصولات با استایل شبیه دیجی‌کالا طراحی شده، مخصوصاً برای بخشی که باید تخفیف‌ها یا حراجی‌ها رو به‌شکل چشم‌نواز نمایش بدیم.

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

نمایش تک‌ردیفه باعث میشه این بخش سریع دیده بشه، کاربر از بالا تا پایین صفحه سر نخورده، و بتونه بدون مزاحمت و با تمرکز تخفیف‌های جذاب رو بررسی کنه. اگه بیش از ۵ محصول بذاریم و دو ردیفه بشه، ممکنه کاربر حس کنه این بخش زیادی بزرگه و سریع از روش بگذره.

در نهایت، می‌تونی مطمئن باشی با انتخاب این المنت و محدود کردن نمایش به تعداد مناسب، هم ظاهر سایتت شبیه دیجی‌کالا میشه و هم تجربه کاربری بهینه‌ای ارائه می‌دی.

بخش خواندن

بخش بعدی که به سراغش می‌ریم، بخشی به اسم «خواندنی‌ها» هست که در واقع همون بخش وبلاگ یا بلاگه. این بخش معمولاً در پایین صفحه‌ی اصلی سایت‌های فروشگاهی قرار می‌گیره و هدفش اینه که علاوه بر فروش محصول، محتواهایی هم ارائه کنه که به کاربر ارائه بده؛ مثل راهنمای خرید، مقایسه‌ی محصولات، معرفی برندها یا حتی مقالات آموزشی.

برای پیاده‌سازی این بخش، المنتی که توی قالب اهورا خیلی خوب به کارمون میاد، «شبکه پست ۱۱» هست. این المنت به‌شکل گرافیکی و شسته‌رفته چند تا از آخرین مقالات سایت رو نمایش می‌ده. وقتی این المنت رو به صفحه اضافه کنیم، خودش اتوماتیک آخرین پست‌های منتشرشده‌ی سایت رو نمایش می‌ده، البته اگه چندتا مقاله‌ی منتشرشده توی سایت داشته باشیم.

پس اول لازمه که چند مقاله‌ی کوتاه و مناسب آماده کنیم و از داخل پیشخوان وردپرس، در قسمت «نوشته‌ها»، اون‌ها رو منتشر کنیم. می‌تونیم عنوان‌های جذاب و عکس شاخص مناسب براشون در نظر بگیریم. بعد که شبکه پست ۱۱ رو داخل ردیفمون قرار دادیم، اون پست‌ها به‌صورت خودکار توی این بخش نمایش داده می‌شن.

این بخش نه‌تنها ظاهر سایت رو حرفه‌ای‌تر می‌کنه، بلکه به سئو (بهینه‌سازی برای موتورهای جست‌وجو) هم کمک زیادی می‌کنه چون محتوای متنی داریم که روی کلمات کلیدی می‌چرخن و کاربر رو بیشتر توی سایت نگه می‌دارن.

اگر بخوای فروشگاهت هم ظاهر جذابی داشته باشه و هم موتورهای جست‌وجو دوستش داشته باشن، وجود چنین بخشی کاملاً ضروریه.

تنظیمات نهایی

وقتی داریم صفحه‌ای مثل دیجی‌کالا رو بازطراحی یا شبیه‌سازی می‌کنیم، مهمه که فقط ظاهرش رو کپی نکنیم بلکه با درک اصول طراحی درست و تجربه کاربری بهتر، نسخه‌ی حرفه‌ای‌تر و کاربردی‌تری بسازیم.

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

برای هر ردیف هم از بالا و پایین ۲۰ پیکسل فاصله در نظر می‌گیریم. این فاصله باعث می‌شه که بخش‌ها نفس بکشن، یعنی به چشم کاربر شلوغ و درهم‌ریخته دیده نشن. برخلاف دیجی‌کالا که بعضی جاها فاصله‌ی بین ردیف‌هاش کمه و باعث می‌شه محتواها به هم بچسبن، ما می‌خوایم ساختارمون تمیز، قابل درک و مرتب باشه. فاصله‌ی منطقی بین بخش‌ها یکی از ساده‌ترین و مؤثرترین راه‌ها برای بهبود تجربه کاربریه، پس حتماً بهش توجه کنید.

در آخرین قدم برای شباهت بیشتر سایت با دیجی‌کالا، می‌رسیم به اضافه کردن رنگ سازمانی دیجی‌کالا در بخش «سفارشی‌سازی» قالب. این کار باعث میشه ظاهر کلی سایتتون هماهنگ‌تر بشه و از نظر رنگ‌بندی، انسجام بیشتری داشته باشه. مخصوصاً برای دکمه‌ها، لینک‌ها، آیکن‌ها و سایر بخش‌های گرافیکی.

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

در این قسمت می‌تونید کد رنگ سازمانی دیجی‌کالا رو وارد کنید. کد رنگ اصلی دیجی‌کالا قرمز هست با کد HEX‌ برابر با:
#EF394E. این کد رو در قسمت رنگ اصلی (primary color) قرار بدید. اگر قالب شما تنظیمات پیشرفته‌تری داشته باشه، شاید بتونید این رنگ رو برای اجزای مختلف سایت مثل لینک‌ها، دکمه‌ها یا هاورها هم به‌طور جداگانه تنظیم کنید. بعد از اینکه رنگ‌ها رو تنظیم کردید، روی دکمه‌ی «انتشار» یا «ذخیره تغییرات» کلیک کنید تا تغییرات اعمال بشن.

به همین راحتی، ظاهر سایتتون یکدست و حرفه‌ای‌تر می‌شه، و هماهنگی بیشتری با حال‌و‌هوای دیجی‌کالا پیدا می‌کنه. حالا می‌تونید با افتخار بگید صفحه‌ی خانه‌ای ساختید که از نظر طراحی و تجربه‌ی کاربری، چیزی از دیجی‌کالا کم نداره.

تنظیم به عنوان صفحه پیش فرض

خب حالا که طراحی صفحه‌ی خانه به پایان رسیده، لازمه که این صفحه رو به عنوان صفحه‌ی اصلی یا همون صفحه‌ی پیش‌فرض سایتتون تنظیم کنید تا هر کسی که دامنه‌ی سایت شما رو وارد می‌کنه، مستقیماً با همین صفحه روبه‌رو بشه.

برای این کار، وارد پیشخوان وردپرس بشید. از منوی سمت راست، روی گزینه‌ی «تنظیمات» کلیک کنید و بعد وارد بخش «خواندن» بشید. توی این صفحه، اولین گزینه‌ای که می‌بینید مربوط به نمایش صفحه‌ی نخست هست. به صورت پیش‌فرض روی گزینه‌ی «نوشته‌های تازه» تنظیم شده. این یعنی صفحه‌ی اصلی سایت شما همون بلاگ وردپرسه که آخرین نوشته‌ها رو نشون می‌ده.

ما این رو تغییر می‌دیم و روی گزینه‌ی «یک برگه‌ی یکتا» کلیک می‌کنیم. بعد از اون، از منوی کشویی‌ای که برای گزینه‌ی «برگه‌ی نخست» باز می‌شه، صفحه‌ای که طراحی کردید رو (مثلاً «خانه») انتخاب می‌کنید. اگر صفحه‌ی خانه‌تون رو با المنتور طراحی کرده باشید و ذخیره کرده باشید، حتماً توی این فهرست نمایش داده می‌شه.

بعد از انتخاب، پایین صفحه روی دکمه‌ی «ذخیره تغییرات» کلیک کنید. از این به بعد، وقتی کسی وارد سایت شما بشه، مستقیم وارد صفحه‌ی خانه‌ای می‌شه که طراحی کردید، دقیقاً همون چیزی که می‌خواستید.

جمع بندی

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

فوتر چیزی فراتر از یک نوار ساده در انتهای صفحه‌ست. در واقع یکی از مهم‌ترین بخش‌های هر سایته که می‌تونه شامل لینک‌های کلیدی، اطلاعات تماس، شبکه‌های اجتماعی، نمادهای اعتماد، فرم عضویت در خبرنامه، لوگوی برند و حتی باکس جستجو باشه. همه‌ی این موارد اگر درست و اصولی چیده بشن، می‌تونن هم به تجربه‌ی کاربری کمک کنن و هم تأثیر مثبتی روی سئوی سایت داشته باشن.

پس اگر تا اینجا همراه ما بودید و صفحه‌ی اصلی سایتتون رو طراحی کردید، در ویدیوی بعدی همراهمون باشید تا مرحله‌به‌مرحله طراحی یک فوتر حرفه‌ای با قالب اهورا و المنتور رو هم یاد بگیرید. قراره بهتون نشون بدیم چطور با ابزارک‌ها و المنت‌های مناسب، یه فوتر کامل و منظم درست شبیه دیجی‌کالا بسازید.

رضا راد

میلیون‌ها کیلومتر اسکرول کردم تا به هدفم نزدیک بشم و این داستان همچنان ادامه داره...