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

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

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

ساخت یک فوتر در بخش سازنده قالب اهورا

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

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

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

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

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

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

حالا یه دکمه به اسم «ویرایش با المنتور» ظاهر می‌شه. روی این دکمه کلیک کنید تا وارد محیط آشنای المنتور بشید و طراحی فوتر رو شروع کنیم.

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

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

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

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

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

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

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

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

طراحی بخش اول فوتر

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

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

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

استایل دهی به دکمه

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

حالا توی کدی که ظاهر می‌شه، دنبال بخش‌هایی به اسم Color و Border Color بگردید. معمولاً اینا همون رنگ‌هایی هستن که برای متن و کادر دکمه استفاده شدن. کد رنگ‌ها معمولاً با علامت # شروع می‌شن.

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

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

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

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

در آخر هم، برای اینکه دکمه ظاهر گرد و قشنگ‌تری داشته باشه، وارد تب استایل بشید و مقدار انحنای گوشه‌ها (یا همون Border Radius) رو روی ۸ پیکسل تنظیم کنید. این کار باعث می‌شه دکمه ظاهر نرم‌تر و کاربرپسندتری پیدا کنه. به همین راحتی، دکمه‌ی بازگشت به بالای شما آماده‌ست!

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

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

طراحی بخش دوم فوتر

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

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

در نهایت، برای اینکه ساختار HTML بهینه و سبک بمونه، تگ HTML مربوط به سربرگ رو از حالت پیش‌فرض (که معمولاً h2 یا h3 هست) به span تغییر بده. این کار برای سئو و نظم کدها هم بهتره، چون این متن واقعاً عنوان اصلی نیست. به همین راحتی، این بخش از فوتر هم مثل دیجی‌کالا آماده‌ست!

طراحی بخش سوم فوتر

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

ایجاد ردیف پنج ستونه

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

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

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

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

ایجاد دستی باکس آیکن

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

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

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

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

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

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

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

طراحی بخش چهارم فوتر

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

ساخت ردیف جدید

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

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

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

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

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

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

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

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

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

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

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

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

افزودن المان به ستون‌ها

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

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

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

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

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

در مورد ضخامت فونت هم حواستون باشه که برای شبیه‌تر شدن به دیجی‌کالا، باید وزن فونت یا همون font weight رو روی ۷۰۰ قرار بدید. این باعث می‌شه عنوان ستون‌تون پررنگ‌تر دیده بشه و بهتر از بقیه‌ی متن‌ها جدا بشه.

افزودن منو

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

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

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

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

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

وقتی سربرگ رو گذاشتید، حالا یه سر بزنید به سایت دیجی‌کالا و روی یکی از این لینک‌های فوتر کلیک راست کنید و گزینه‌ی Inspect رو بزنید. با این کار خیلی راحت می‌تونید رنگ متن، اندازه‌ی فونت (Font Size) و ضخامتش (Font Weight) رو ببینید. مثلاً ممکنه رنگش یه خاکستری خاص باشه، اندازه‌ش حدود ۱۴ تا ۱۶ پیکسل باشه و وزن فونت هم یه چیزی مثل ۴۰۰ یا ۵۰۰.

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

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

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

تکثیر ستون‌ها

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

جایگذاری متن‌ جدید به ستون‌های تکثیر شده

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

المان‌های شبکه اجتماعی

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

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

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

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

اگه یادتون باشه، توی ویدیوهای قبلی آموزش دادم که برای دانلود آیکن‌های SVG از سایت‌ها، می‌تونید از یه افزونه‌ی خیلی سبک و کاربردی به اسم SVG Export استفاده کنید. اگه هنوز نصبش نکردید، اول مرورگر خودتون (مثلاً کروم) رو باز کنید، بعد برید به بخش افزونه‌ها یا همون Extension ها. حالا توی قسمت جستجو، عبارت “SVG Export” رو تایپ کنید و این افزونه رو پیدا کنید. بعدش هم با یه کلیک ساده نصبش کنید.

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

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

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

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

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

اول از همه زیر عنوان این ستون (که مثلاً نوشته “همراه ما باشید”)، یه کانتینر جدید اضافه کنید. بعد از اضافه کردن کانتینر، جهت (Direction) اون رو روی حالت افقی (Horizontal) بذارید. این کار باعث می‌شه که آیکن‌ها کنار هم قرار بگیرن، نه زیر هم.

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

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

افزودن متن زیر آیکن‌های اجتماعی

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

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

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

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

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

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

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

افزودن خبرنامه با المنت قالب اهورا

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

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

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

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

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

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

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

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

طراحی بخش پنجم فوتر دیجی‌کالا

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

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

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

تنظیمات ردیف

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

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

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

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

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

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

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

حالا بیاید همین عدد رو توی المنتور وارد کنیم. روی ردیفتون کلیک کنید، برید به تب استایل (Style)، و توی قسمت مربوط به انحنای حاشیه (Border Radius)، مقدار ۸px رو وارد کنید.

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

افزودن محتوا به ردیف

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

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

کانتینر اول شامل تصویر و متن معرفی اپلیکیشن

توی کانتینر سمت راست (یا کانتینر اول)، دوتا ابزارک بندازید:

• یکی تصویر (Image)
• یکی هم سربرگ (Heading)

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

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

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

کانتینر دوم شامل دکمه‌های دانلود مارکت‌ها

بریم سراغ کانتینر دوم که توی سمت چپ ردیف قرار می‌گیره. اینجا قراره پنج تا تصویر قرار بدید که هرکدوم نماد یه مارکت دانلود هستن. ترتیب و چینششون باید چپ‌چین (Align: Left) باشه، تا مثل دیجی‌کالا از چپ به راست کنار هم بیان.

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

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

• یه رنگ پس‌زمینه انتخاب کنید (مثلاً سفید یا خاکستری خیلی روشن)
• بهش یه عرض خاص بدید (مثلاً ۱۲۰ پیکسل)
• شاید هم بخواید براش یه انحنای حاشیه یا سایه‌ی سبک تعریف کنید تا از بقیه متمایزتر باشه

با این تنظیمات، ظاهر این دکمه دقیقاً شبیه دیجی‌کالا درمیاد.

طراحی بخش ششم فوتر سایت دیجی‌کالا

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

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

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

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

1. ویرایشگر متن (Text Editor):
   یه ابزارک “ویرایشگر متن” اضافه کنید و متن موردنظرتون رو داخلش بنویسید. این ابزار مثل یه پاراگراف ساده عمل می‌کنه و دقیقاً مناسب همین کاربرده.
2. سربرگ با تگ پاراگراف:
   اگه دوست دارید متن زیر همون استایل ابزارک‌های سربرگ رو داشته باشه، می‌تونید یه سربرگ جدید بندازید و فقط تگ HTML اون رو از h3 یا h4 به p تغییر بدید. اینطوری همچنان استایل دلخواه رو دارید ولی از نظر ساختار HTML، متن شما تبدیل به یه پاراگراف می‌شه.

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

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

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

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

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

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

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

حالا جهت این ستون جدید رو تغییر بدید. برای این کار، روی ستون کلیک کنید، برید به تب Layout و جهت (Direction) رو روی حالت افقی (Horizontal) قرار بدید. اینطوری، نمادها کنار هم ردیف می‌شن به‌جای اینکه زیر هم قرار بگیرن.

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

برای اینکه بفهمید دقیقاً باید چه اندازه‌ای باشه، وارد سایت دیجی‌کالا بشید، روی یکی از نمادها کلیک راست کنید و گزینه‌ی Inspect رو بزنید. توی پنجره‌ای که باز می‌شه، دنبال گزینه‌هایی مثل width یا height بگردید. اون‌جا دقیقاً عددهایی که دیجی‌کالا استفاده کرده رو می‌تونید ببینید.

حالا برای اینکه ظاهر نمادهای اعتماد دقیقاً مثل سایت دیجی‌کالا بشه، فقط کافیه ابعاد هر تصویر رو روی ۷۵ در ۷۵ پیکسل تنظیم کنید. برای این کار، روی هر تصویر کلیک کنید، برید به تنظیمات سمت چپ و توی قسمت عرض (Width) و ارتفاع (Height)، مقدار ۷۵px رو وارد کنید.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

طراحی بخش آخر سایت دیجی‌کالا

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

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

پیدا کردن رنگ پس زمینه

برای اینکه رنگ پس‌زمینه‌ی هر ستون و رنگ Border اون دقیقاً مثل دیجی‌کالا بشه، کافیه وارد خود سایت دیجی‌کالا بشید، برید روی یکی از ستون‌های اون بخش و روش کلیک راست کنید. از منویی که باز می‌شه، گزینه‌ی Inspect یا بررسی رو انتخاب کنید. حالا توی پنجره‌ی بازشده دنبال بخش‌هایی بگردید که مربوط به background-color و border-color هستن. کد رنگ‌هایی که اونجا نمایش داده می‌شن رو کپی کنید و بعد برگردید به المنتور. حالا روی ستون خودتون کلیک کنید، برید به تب استایل و همون کد رنگ‌ها رو وارد کنید.

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

برای همین، بیاید اول از همه به هر ستون، یه مقدار فاصله‌ی داخلی (Padding) از بالا و پایین بدید. یه چیزی حدود ۱۵ تا ۲۰ پیکسل از بالا و پایین معمولاً مناسبه و باعث می‌شه محتوا توی ستون‌هاتون نفس بکشه و توی هم نره.

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

وقتی که تصویر و استایل ستون اول رو کامل کردید، حالا بهترین بخش ماجراست: تکثیر! کافیه روی همون ستون کلیک راست کنید و گزینه‌ی Duplicate رو بزنید. این کار رو تا وقتی که ۹ ستون داشته باشید تکرار کنید (یعنی ۸ بار تکثیرش کنید). حالا توی هر ستون، فقط لازمه که تصویر مخصوص به اون دسته رو جایگزین کنید و اگر لازم بود، متن یا تنظیمات جزئی هر کدوم رو هم تغییر بدید.

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

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

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

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

تنظیم به عنوان فوتر پیش‌فرض سایت

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

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

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

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

ریسپانسیو فوتر

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

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

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

نمایش حالت موبایل سایت دیجی‌کالا

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

حالا از بالای ابزار Inspect، حالت نمایش رو روی «iPhone 12 Pro» یا هر گوشی دیگه‌ای که دوست دارید بذارید. اینطوری می‌تونید نمای موبایلی سایت دیجی‌کالا رو مستقیماً روی دسکتاپ ببینید.

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

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

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

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

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

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

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

مخفی کردن آیکن‌های خدمات در حالت موبایل

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

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

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

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

مخفی کردن راهنمای خرید در حالت موبایل

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

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

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

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

مخفی کردن عنوان خبرنامه در حالت موبایل

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

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

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

تنظیم کردن المنت‌ها در یک خط

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

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

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

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

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

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

تنظیم ارتفاع خط

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

برای اینکه همین حالت رو توی طراحی خودمون پیاده کنیم، کافیه روی المان عنوان کلیک کنی و از تب «استایل»، گزینه‌ی «Typography» رو باز کنی. اونجا یه گزینه به اسم Line Height یا فاصله‌ی خطوط هست. این مقدار رو یکمی بیشتر کن، مثلاً از ۱.۲ به ۱.۶ یا ۱.۸ برسون (بسته به ظاهرش). این کار باعث می‌شه خط‌ها از هم بازتر بشن و نوشته، مخصوصاً توی موبایل، خیلی راحت‌تر خونده بشه.

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

قراردادن نمادها در یک خط

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

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

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

از بین بردن فاصله داخلی

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

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

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

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

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

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

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

صحبت آخر

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

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

رضا راد

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