بخش چهارم: تکمیل صفحه اصلی سایت اتریوم

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

تکمیل صفحه اصلی سایت اتریوم

تا اینجای پروژه طراحی سایت اتریوم، ما دو مرجع اصلی در اختیار داشتیم، اولی دموی قالب اهورا بود که داشتیم داخل اون سایت اتریوم رو طراحی می‌کردیم، mihanwp.com/demo/ahura/ethereum. دومی هم سایت رسمی اتریوم به آدرس ethereum.org که داشتیم از روش طراحی می‌کردیم.

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

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

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

رفع یه ایراد توی طراحی قبل

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

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

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

طراحی بخش قوی‌ترین اکوسیستم

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

افزودن بخش جدید

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

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

افزودن تصویر

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

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

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

افزودن متن

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

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

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

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

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

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

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

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

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

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

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

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

افزودن محتوای متنی

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

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

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

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

استایل نهایی

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

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

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

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

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

طراحی بخش بعد

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

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

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

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

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

بخش اینترنت در حال تغییر است

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

بخش بزرگترین انجمن سازندگان بلاک‌چین

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

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

افزودن عنوان

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

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

افزودن دکمه

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

بخش نمونه کدها

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

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

بخش جامعه اتریوم

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

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

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

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

بخش پست‌های آخر

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

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

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

بخش رویدادها

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

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

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

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

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

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

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

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

فصل جدید دوره سایت برتر

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

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

اینجا بود که دیدم جای یه فصل جدی و اصولی درباره‌ی طراحی UI توی دوره خالیه. برای همین داریم یه فصل کاملاً جدید با تمرکز روی طراحی ظاهری (UI Design) به دوره سایت برتر ۲ اضافه می‌کنیم. این فصل دقیقاً بعد از فصل طراحی RFP قرار می‌گیره و کاملاً رایگان به‌عنوان آپدیت برای همه‌ی شرکت‌کننده‌های فعلی دوره در دسترس قرار می‌گیره. این آپدیت واقعاً می‌تونه یه جهش بزرگ باشه برای همه کسایی که می‌خوان پروژه‌های وردپرسی‌شون از نظر بصری هم «در سطح برتر» باشه.

برای ثبت نام در دوره جامع سایت برتر روی دکمه‌‌ی پایین کلیک کنید.

صحبت آخر

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

دوره آموزش المنتورمون همین‌طور ادامه‌داره؛ یعنی تا وقتی ایده هست، انرژی هست و شما همراه‌مون هستید، ما هم هستیم. هر بار یه طراحی جدید، یه طرح جدید، یه تجربه جدید، این مسیر هنوز تموم نشده!

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

در نهایت، مثل همیشه شاد، سربلند، موفق و پرانرژی باشید. یادتون نره، توی هر شرایطی امیدتونو نگه دارید. تا جلسه بعدی بدرود. 🙂

رضا راد

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