آموزش طراحی سایت دیجی کالا – قسمت اول

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

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

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

طراحی بخش اول هدر دیجی‌کالا

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

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

قرار دادن لوگو دیجی‌کالا

اولین گزینه‌ای که باید به هدر اضافه بشه، لوگوی سایت دیجی کالاست. برای دانلود تصاویر دیجی‌کالا می‌تونید روی تصویر موردنظرتون کلیک راست کنید و Save Image As رو بزنید یا اینکه Inspect رو بزنید و لینک دانلودش رو پیدا کنید. یا با نصب افزونه‌ Image Downloader برای مرورگرتون به راحتی هرکدوم که خواستیدو دانلود کنید.

بعد از دانلود تصویر از لوگوSVG قالب اهورا در قسمت بالا و سمت راست سایت استفاده کنید. یعنی توی اولین کانتینری که توی سکشن بالا قرار داره.

اندازه‌ی لوگو رو با کلیک راست کردن روی اون و زدن گزینه‌ی inspect، خارج کنید. به همون اندازه به لوگویی که توی هدر قرار می‌دید، عرض بدید.

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

قراردادن فرم جستجو

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

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

سایه جعبه رو بردارید، برای این‌کار باید رنگ سایه رو کلا بردارید.

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

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

قرار دادن دکمه ورود و ثبت‌نام دیجی‌کالا

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

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

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

اگه فونتی که می‌خواید رو توی تایپوگرافی پیدا نکردید، باید وارد پیشخوان وردپرس بشید، نمایش، سفارشی‌سازی رو بزنید. از تب استایل، تایپوگرافی هر فونتی که نیاز بود رو تیک بزنید.

قرار دادن سبد خرید

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

قرار دادن جداکننده عمودی

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

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

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

طراحی بخش دوم هدر دیجی‌کالا

از سکشن بخش اول هدر یه تکثیر بگیرید.

قراردادن مگامنو

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

قراردادن منو

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

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

قراردادن جداکننده عمودی

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

قراردادن دکمه نارنجی رنگ

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

قراردادن سایه زیر باکس هدر

با کلیک راست کردن روی باکس هدر و زدن گزینه‌ی inspect، می‌تونید box shadow باکس هدر رو پیدا کنید و اونو روی بخش سایه جعبه هدر خودتون اعمال کنید.

نتیجه چیزی شبیه تصویر زیر میشه.

اگه می‌خواید به صورت کامل هدرتون به هدر سایت دیجی‌کالا شبیه بشه، باید بیشتر براش وقت بذارید. در ادامه ریسپانسیو هدر سایت دیجی‌کالا رو هم انجام میدیم.

ریسپانسیو کردن هدر

توی حالت موبایل سایت دیجی‌کالا رو باز کنید، که بتونید برای حالت موبایل و تب‌لت هم هدر رو طراحی کنید.

طراحی سکشن دوم در ریسپانسیو هدر

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

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

طراحی بخش دسته‌بندی کالاها

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

افزودن منوی موبایل

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

افزودن جداکننده بین سکشن‌ها

می‌تونید به ستون‌ها از سمت پایین حاشیه بدید تا جدا کننده‌هایی که زیر هر بخش قرار داره هم نمایش داده بشه.

قراردادن هدر طراحی شده به عنوان هدر پیش فرض سایت

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

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

با سپاس از همراهی شما، شاد و پیروز باشید. 🙂

رضا راد

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