آموزشها
قالبها
افزونهها
سایت برتر
هاست وردپرس
طراحی سایت
تولزینابخش پنجم: طراحی فوتر اتریوم
- مقالات آموزشی آموزش المنتور
- بروزرسانی شده در
رسیدیم به آخرین بخش طراحی سایت اتریوم! توی ویدیوهای قبلی با همدیگه هدر سایت رو ساختیم، صفحه اصلی رو کامل کردیم، بخشهای مختلف رو طراحی کردیم و حالا نوبت میرسه به آخرین تکهی پازل یعنی فوتر سایت.
فوتر، هرچند آخرین بخشی هست که توی صفحه دیده میشه، اما اهمیت خیلی زیادی داره. این بخش هم ظاهر سایت رو کامل میکنه، هم آخرین نقطه ارتباط کاربر با برند و محتوای سایته.
توی این قسمت با هم فوتر سایت اتریوم رو طراحی میکنیم، استایل و چیدمانش رو شبیه نسخه اصلی در میاریم و کاری میکنیم که هم با طراحی کلی سایت هماهنگ باشه و هم حرفهای به نظر برسه. اگه تا اینجا همراه ما بودی، این قسمت رو از دست نده چون بعد از این مرحله سایتت کامل میشه و آماده تحویله.
آنچه در این مقاله میخوانید
طراحی فوتر سایت اتریوم
خب بریم سراغ آخرین بخش طراحی سایت اتریوم؛ این بار قراره با استفاده از المنتور فوتر سایت رو طراحی کنیم. لینک دموی سایتی که تا اینجا ساختیم رو هم براتون اینجا میذارم: mihanwp.com/demo/ahura/ethereum
تا اینجا هدر سایت رو طراحی کردیم، صفحه اصلی رو کامل کردیم و حالا وقتشه فوتر رو هم بسازیم تا سایت کامل بشه. همونطور که گفته بودم، توی این بخش طراحی فوتر رو انجام میدیم و در جلسه بعد میریم سراغ ریسپانسیو کردن کل سایت. البته نسخه جدید المنتور بخش زیادی از ریسپانسیو رو خودش بهصورت خودکار انجام میده، اما ما حتماً چک میکنیم تا همهچیز درست و بینقص باشه.
حالا وقتشه فوتر سایت اتریوم رو طراحی کنیم. وارد پیشخوان وردپرس میشیم و میریم سراغ بخش «اهورا سازنده».
اینجا روی گزینه «افزودن مورد جدید» کلیک میکنیم.
نوع قالب رو روی «فوتر» قرار میدیم و یک اسم انتخاب میکنیم، مثلاً «فوتر سایت اتریوم». بعد گزینه انتخاب بهعنوان پیشفرض رو فعال میکنیم تا همین فوتر بهصورت خودکار روی کل سایت نمایش داده بشه.
بعد از ساختن قالب، اهورا خودش بهصورت اتوماتیک فوتر رو میسازه و با المنتور برامون باز میکنه. همین که وارد المنتور میشیم، یک صفحه خالی آماده است تا هر چیزی که نیاز داریم رو داخلش طراحی کنیم. واقعاً این قابلیت خیلی کمک میکنه چون نیازی نیست دستی شرط نمایش تنظیم کنیم یا مسیرهای پیچیده بریم تا فوتر روی سایت فعال بشه؛ همهچیز خودش ست میشه. این مرحله خیلی مهمه چون با طراحی فوتر، سایت اتریوم ما کامل میشه و دیگه تمام بخشهای اصلی سایت آماده هست.
باز کردن سایت ethereum.org
حالا برای اینکه فوتر رو درست مثل سایت اصلی دربیاریم، از اون طرف سایت ethereum.org رو هم باز میکنیم. میریم روی نسخه فارسی سایت تا فوتر رو ببینیم و دقیقاً همون رو پیادهسازی کنیم.
جالبه که همین الان هم میبینیم آخرین بهروزرسانی این وبسایت مربوط به ۲۶ شهریور بوده، یعنی طراحی و محتوای سایت همیشه بهروز نگه داشته میشه.
این فوتر رو بهدقت نگاه میکنیم تا ببینیم چه بخشهایی داره و چیدمانش چطوره. قراره همین ساختار رو داخل المنتور طراحی کنیم تا فوتر سایت ما هم کاملاً شبیه نسخه اصلی بشه و حس حرفهای بودن داشته باشه.
شروع طراحی فوتر سایت اتریوم
اولین کاری که برای طراحی فوتر انجام میدیم اینه که یک کانتینر اصلی داخل المنتور اضافه میکنیم. این کانتینر مثل ستون فقرات فوتر عمل میکنه و بقیهی بخشها رو داخل خودش نگه میداره.
بعد داخل همین کانتینر اصلی، یک کانتینر دیگه میندازیم تا بتونیم بخشبندی فوتر رو راحتتر مدیریت کنیم. این کار کمک میکنه کنترل کامل روی فاصلهها، چیدمان و استایل داشته باشیم.
حالا میریم سراغ استایل کانتینر اصلی. توی بخش استایل، نوع حاشیه رو روی «یکپارچه» قرار میدیم و ضخامت حاشیه رو فقط برای بالای کانتینر روی عدد یک تنظیم میکنیم. رنگ حاشیه رو هم یک خاکستری ملایم انتخاب میکنیم تا یک خط باریک و ظریف بالای فوتر بیفته.
این خط کمک میکنه فوتر از محتوای اصلی سایت جدا بشه و مرزبندی تمیزی داشته باشه. اگر لازم باشه میتونیم این رنگ خاکستری رو کمی روشنتر کنیم تا با طراحی کلی سایت هماهنگتر بشه.
طراحی بخش اول فوتر
داخل این مرحله چیز خیلی پیچیدهای نداریم، فقط باید داخل همون کانتینر یک کانتینر دیگه اضافه کنیم تا بتونیم محتوا رو کنار هم قرار بدیم. این کانتینر داخلی رو روی حالت افقی میذاریم تا آیتمها کنار همدیگه بچینن.
حالا اولین المانی که اضافه میکنیم یک متن ساده است.
این متن همون «آخرین بهروزرسانی وبسایت» هست که تو سایت اصلی هم وجود داره. متن رو اضافه میکنیم و استایلش رو طوری تنظیم میکنیم که با طراحی کلی فوتر هماهنگ باشه.
طراحی دکمه بازگشت به بالا
کنار این متن یک دکمه اضافه میکنیم. این دکمه همون دکمه «به قسمت بالا بروید» هست که کاربر رو با یک کلیک به ابتدای سایت میبره. چون قبلاً استایل دکمهها رو توی پروژه تنظیم کرده بودیم، نیازی به طراحی مجدد نیست و فقط رنگ پسزمینه دکمه رو تغییر میدیم تا با فوتر هماهنگ بشه.
برای اینکه ظاهر دکمه کامل بشه، توی تنظیمات محتوا یک آیکون ساده هم اضافه میکنیم. آیکون «Up» رو سرچ میکنیم و انتخاب میکنیم. این آیکون رو در سمت راست متن دکمه قرار میدیم و کمی فاصله بین متن و آیکون اضافه میکنیم تا مرتبتر به نظر برسه.
در نهایت چینش دکمه رو از بخش استایل روی حالت چپچین میذاریم تا بیفته سمت چپ کانتینر. به این ترتیب هم متن «آخرین بهروزرسانی» داریم و هم دکمه رفتن به بالا، دقیقاً مثل چیزی که توی فوتر سایت اصلی هست.
تنظیم حالت پارالل
بعد از این که دکمه رو ساختیم و آیکون رو اضافه کردیم، نوبت میرسه به این که کاری کنیم با کلیک روی این دکمه صفحه به ابتدای سایت اسکرول بشه. برای این کار اول میریم سراغ هدر سایت و روی گزینه ویرایش با المنتور کلیک میکنیم. هر سکشن یا کانتینر بالایی هدر رو انتخاب میکنیم (مهم نیست دقیقاً کدوم باشه، فقط همونی که بالاترین بخش صفحه است).
توی تنظیمات سکشن، به بخش پیشرفته میریم و داخل قسمت شناسه (CSS ID) یک اسم وارد میکنیم. مثلاً اسمش رو میذاریم top بعد این تغییر رو ذخیره میکنیم.
حالا برمیگردیم به دکمهای که توی فوتر گذاشته بودیم. داخل تنظیمات لینک دکمه، توی قسمت پیوند، عبارت #top رو مینویسیم. حتماً دقت کنید که اول هشتگ رو بگذارید و بعد اسم شناسه رو، چون بدون هشتگ کار نمیکنه. توی سایتهای راستچین ممکنه هشتگ سمت راست نمایش داده بشه ولی مهم نیست، همونطور که هست ذخیره کنید.
حالا هر دو صفحه رو ذخیره میکنیم، صفحه اصلی رو رفرش میکنیم و روی دکمه کلیک میکنیم. میبینیم که صفحه به نرمی اسکرول میکنه و میره بالای سایت. این دقیقاً همون چیزی هست که توی خیلی از سایتهای مدرن و تکصفحهای میبینیم و باعث میشه تجربه کاربری خیلی روانتر و حرفهایتر بشه.
طراحی بخش دوم فوتر
حالا نوبت میرسه به بخش اصلی فوتر، جایی که باید چند ستون کنار هم داشته باشیم. اول یک کانتینر جدید پایین فوتر اضافه میکنم. داخل این کانتینر هم یک کانتینر دیگه قرار میدم تا بخشبندیمون مرتبتر بشه. حالا این کانتینر داخلی رو چهار بار تکثیر میکنم تا در مجموع پنج کانتینر داشته باشیم. کانتینر اصلی رو انتخاب میکنم و چیدمانش رو روی حالت افقی میذارم تا این پنج ستون کنار هم ردیف بشن.
تیترها
حالا هر ستون رو برای یک بخش خاص در نظر میگیرم. مثلاً ستون اول رو برای «آموزش» در نظر میگیریم. داخلش یک تیتر قرار میدم و متنش رو مینویسم «آموزش». برای اینکه ظاهرش زیباتر بشه و با طراحی کلی هماهنگ باشه، اندازه تیتر رو کمی کوچکتر میکنم تا ظریفتر دیده بشه. از نظر سئو بهتره این تیتر رو با تگ span یا یک heading مناسب بسازیم تا ساختار صفحه بهم نریزه.
بعد میرم سراغ بخش تایپوگرافی و سایز فونت رو کمی بزرگتر میکنم تا تیتر جذابتر دیده بشه و راحتتر توجه کاربر رو جلب کنه. به همین شکل برای چهار ستون دیگه هم تیترهای مناسب قرار میدم مثل «مستندات»، «منابع»، «ارتباط با ما» و… تا هر بخش کاربرد خودش رو داشته باشه.
زیرمنوها
حالا که تیتر هر ستون رو گذاشتیم، نوبت میرسه به زیرمجموعهها یا همون لینکهای فوتر. سادهترین روش اینه که از یک ویراشگر متنی استفاده کنیم و لینکها رو یکییکی داخلش بنویسیم و زیر تیتر قرار بدیم. این کار خیلی سریع انجام میشه و ظاهر تمیزی هم داره.
برای این کار یک ویرایشگر متن اضافه میکنم، لینکها رو داخلش پیست میکنم و استایل متن رو طوری تنظیم میکنم که فاصله بین لینکها مناسب باشه و همه زیر هم مرتب بشن. به همین شکل برای ستونهای دیگه هم لینکهای مربوط به خودشون رو قرار میدم.
اگر بخوام کمی حرفهایتر عمل کنم، میتونم از بخش فهرستهای وردپرس استفاده کنم. یک فهرست جدید میسازم، لینکهای مربوط به هر بخش رو داخلش اضافه میکنم و بعد توی المنتور از ویجت «منوی عمودی» استفاده میکنم و اون فهرست رو نمایش میدم. این روش مزیتش اینه که بعداً راحت میتونم لینکها رو از پیشخوان وردپرس مدیریت کنم و نیازی نیست بیام داخل المنتور تغییر بدم.
اما برای این پروژه، چون هدفمون بیشتر یادگیری طراحی با المنتوره، همه لینکها رو به شکل دستی اضافه میکنم و حتی میتونم همشون رو به یک هشتگ وصل کنم تا فعلاً فقط ظاهر فوتر رو داشته باشیم. بعداً هر وقت لازم شد میتونم این لینکها رو به آدرسهای واقعی تغییر بدم.
تکثیر ستون اول
برای اینکه سریعتر کار رو جلو ببرم و لازم نباشه همه ستونها رو یکییکی بسازم، بقیه ستونها رو حذف میکنم و فقط یکی رو نگه میدارم. بعد همین کانتینر رو تکثیر میکنم تا پنج ستون همشکل داشته باشم. این روش باعث میشه همه ستونها استایل یکسانی داشته باشن و کارم خیلی سریعتر بشه.
حالا داخل هر ستون تیتر مربوط به خودش رو میذارم. مثلاً یکی رو «راهنما»، یکی رو «توسعه»، یکی رو «مشارکت» و همینطور تا بقیه. زیر هر تیتر هم لینکهای مربوط به اون بخش رو کپی و پیست میکنم. در این مرحله مهم نیست لینکها واقعی باشن، حتی میتونم همه رو به یک هشتگ وصل کنم تا فعلاً فقط ظاهر فوتر درست بشه.
این کار باعث میشه فوتر ظاهر کامل و حرفهای بگیره و همه بخشها کنار هم مرتب نمایش داده بشن. بعداً هر وقت لازم شد، میتونم برگردم و لینکهای واقعی رو جایگزین کنم یا حتی کل این لینکها رو از بخش فهرستهای وردپرس مدیریت کنم تا راحتتر قابل ویرایش باشن.
طراحی بخش سوم فوتر
میرسیم به آخرین بخش فوتر. این قسمت واقعاً خیلی ساده است و کار خاصی نداره. برای ساختش یک کانتینر جدید پایین فوتر اضافه میکنم. داخل این کانتینر هم یک کانتینر دیگه میذارم تا محتوا رو داخلش قرار بدم و بتونم راحتتر استایل بدم.
حالا میرم سراغ تنظیمات استایل همین کانتینر داخلی و رنگ پسزمینه رو تغییر میدم. بهتره یک رنگ کمی تیرهتر از بخش بالایی فوتر انتخاب کنیم تا این قسمت جدا بشه و حالت یک نوار انتهایی پیدا کنه.
در این بخش میتونید هر چیزی که دوست دارید اضافه کنید؛ میتونید یک منو قرار بدید، لینکهای مهم مثل قوانین سایت یا سیاست حریم خصوصی رو اینجا بذارید، یا حتی متن کپیرایت رو نمایش بدید. این قسمت به سلیقه شما بستگی داره و هر طور طراحی کنید ظاهر کلی سایت رو جمعوجورتر و حرفهایتر میکنه.
آیکنهای شبکه اجتماعی
حالا میرسیم به بخش آیکونهای اجتماعی فوتر. اینجا کافیه داخل المنتور ویجت «آیکونهای اجتماعی» رو سرچ کنیم و اضافه کنیم. این ویجت خودش چند آیکون پیشفرض مثل فیسبوک، توییتر (یا همون X)، لینکدین و اینستاگرام داره و میتونیم هرکدوم رو که خواستیم حذف کنیم یا آیکون جدید اضافه کنیم.
اگر بخوایم آیکونهای بیشتری مثل گیتهاب داشته باشیم، از همین بخش میتونیم آیکون جدید اضافه کنیم و آدرس صفحه گیتهاب رو وارد کنیم. این کار باعث میشه کاربر خیلی راحت بتونه از طریق فوتر به شبکههای اجتماعی یا مخزن کد پروژه وصل بشه.
بعد از اضافه کردن آیکونها، میریم سراغ بخش استایل. اینجا میتونیم شکل آیکونها رو عوض کنیم. مثلاً میتونیم بذاریم به شکل مربع نمایش داده بشن، یا گوشههای گرد داشته باشن تا نرمتر دیده بشن. حتی میشه شکل کاملاً دایرهای انتخاب کرد تا با طراحی کلی سایت هماهنگ بشه.
رنگبندی آیکونها رو هم میتونیم سفارشی کنیم. مثلاً رنگ اولیه رو شفاف بگذاریم تا فقط خط آیکون دیده بشه و رنگ ثانویه رو مشکی انتخاب کنیم تا داخل آیکونها پر بشه. اگر بخوایم آیکونها کاملاً با پسزمینه هماهنگ بشن، میتونیم کد رنگ پسزمینه فوتر رو کپی کنیم و داخل رنگ آیکونها پیست کنیم تا دقیقاً همرنگ پسزمینه بشه و ظاهری مینیمال پیدا کنه.
در آخر هم بهتره اندازه آیکونها رو کمی بزرگتر کنیم تا در فوتر بیشتر به چشم بیان و برای کاربر راحتتر قابل کلیک باشن. این کار باعث میشه فوتر سایت هم کاربردیتر بشه و هم ظاهری حرفهایتر پیدا کنه.
متنها
حالا میرسیم به آخرین قسمت فوتر که شامل چند متن و لینک کوتاه هست. اینجا میتونیم خیلی ساده از یک ویجت متن استفاده کنیم و لینکها رو داخلش کپی و پیست کنیم. اما اگر بخوایم حرفهایتر و تمیزتر کار کنیم، بهتره از منوی وردپرس کمک بگیریم.
برای این کار، اول در پیشخوان وردپرس میریم به بخش نمایش » فهرستها و یک منوی جدید میسازیم. اسم منو رو هر چیزی که خواستیم میذاریم، مثلاً «منوی فوتر» و آیتمهایی که میخوایم داخل این بخش نمایش داده بشن رو اضافه میکنیم. بعد برمیگردیم داخل المنتور و از ویجت منو استفاده میکنیم و همین منویی که ساختیم رو انتخاب میکنیم. تمام این مباحث رو داخل دورهی رایگان آموزش وردپرس توضیح دادم که میتونید با کلیک روی دکمهی پایین اون رو مشاهده کنید.
چیدمان منو رو روی حالت افقی میذاریم تا آیتمها کنار هم قرار بگیرن و در بخش استایل هم همه چیز رو وسطچین میکنیم تا کاملاً منظم به نظر برسه. برای اینکه ظاهر فوتر تمیزتر بشه، کمی فاصله داخلی (padding) هم به کانتینر اضافه میکنیم تا متنها کمی از لبهها فاصله داشته باشن و راحتتر خونده بشن.
جالب اینجاست که فوتر سایت اتریوم هیچ متن کپیرایتی نداره و خیلی مینیمال طراحی شده، پس ما هم همین سبک رو حفظ میکنیم تا ظاهر فوتر ساده و مدرن بمونه. در نهایت تغییرات رو ذخیره میکنیم و فوتر سایت تکمیل میشه.
صحبت آخر
خب، این هم از فوتر سایت اتریوم! همونطور که دیدید فوتر بهطور پیشفرض تا حد زیادی ریسپانسیوه و روی موبایل هم خوب نمایش داده میشه. با این حال در جلسه بعدی حتماً ریسپانسیو هدر، فوتر و صفحه اصلی رو بررسی و اصلاح میکنیم تا همهچیز کاملاً استاندارد بشه.
خیلیها پرسیده بودن چرا صفحات داخلی رو طراحی نمیکنیم. هدف این دوره اینه که یاد بگیرید چطور بخشهای مختلف رو با هم طراحی کنید و ساختار سایت رو کامل متوجه بشید. اگر بخوایم تکتک صفحات داخلی رو هم طراحی کنیم، هم زمان آموزش خیلی طولانی میشه و هم ممکنه خستهکننده بشه. بهجاش تصمیم گرفتیم سراغ طراحی سایتهای جدید بریم تا تجربههای بیشتری داشته باشید و طرحهای متنوعتری رو تمرین کنید.
اتریوم رو تا اینجا کامل طراحی کردیم، فوترش رو هم ساختیم و آمادهایم برای مرحله بعد: ریسپانسیو کردن سایت. بعد از اون هم سراغ پروژههای جدید میریم؛ مثلاً طراحی سایتهای تکنولوژی که خیلی از شما توی کامنتها پیشنهاد دادید. این دوره همچنان ادامه خواهد داشت و تا زمانی که فرصت باشه برای شما ویدیو و آموزش ضبط میکنیم. شاد و سربلند باشید. 🙂
