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

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

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

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

چرا روی دموی قالب اهورا کار می‌کنیم؟

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

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

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

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

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

نکته مهم

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

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

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

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

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

نصب و فعال‌سازی قالب اهورا و المنتور

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

کد لایسنی رو می‌تونید از داخل پنل کاربریتون کپی کنید.

توی محل فعالسازی لایسنس جایگذاری کنید.

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

نکته درباره‌ی طراحی فوتر سایت اپل

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

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

شروع طراحی هدر سایت اتریوم

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

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

ساخت برگه جدید

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

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

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

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

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

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

ایجاد ساختار اولیه‌ی هدر

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

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

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

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

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

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

ساخت چهار ستون برای طراحی هدر

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

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

اهمیت استفاده از آخرین نسخه المنتور

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

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

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

اضافه‌کردن لوگوی اتریوم به هدر سایت

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

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

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

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

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

در ادامه باید تنظیمات ظاهری‌ش رو دقیقاً مثل سایت اصلی اتریوم انجام بدیم. برای این کار، اول لوگوی اصلی سایت اتریوم رو اینسپکت (Inspect) می‌کنیم تا اندازه‌هاش رو ببینیم. وقتی روی تصویر راست کلیک می‌کنیم و گزینه‌ی Inspect رو می‌زنیم، می‌تونیم ببینیم که ابعاد لوگوی اصلی حدوداً ۲۲ در ۳۵ پیکسل هست.

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

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

الان ستون اولمون با لوگوی دقیق اتریوم آماده‌ست و با ظاهر سایت اصلی هماهنگه. بریم سراغ ستون‌های بعدی.

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

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

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

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

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

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

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

اضافه کردن منو به هدر سایت

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

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

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

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

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

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

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

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

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

استفاده از سرچ قدرتمند الگولیا در سایت اتریوم

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

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

برای استفاده از الگولیا توی سایت خودتون، باید اول توی وب‌سایت Algolia ثبت‌نام کنید. این سرویس تا ۱۰ هزار جستجو در ماه رو به‌صورت رایگان ارائه می‌ده، که برای خیلی از سایت‌ها کافیه. بعد از ثبت‌نام، بهتون یه API Key می‌ده که می‌تونید باهاش این سرویس رو به وردپرس متصل کنید.

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

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

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

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

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

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

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

تبدیل کد SVG به فایل قابل استفاده

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

برای این کار، کافیه اول کد SVG موردنظرت رو از هر منبعی کپی کنی. مثلاً از سایت‌هایی مثل FontAwesome، Heroicons یا حتی کد HTML خود یک سایت. روی همون آیکون توی سایت اتریوم هم که راست کلیک کنی و Inspect بزنی می‌تونی کد SVG رو پیدا کنی.

وقتی این کد رو کپی کردی، یک نرم‌افزار ویرایش کد مثل Visual Studio Code رو باز کن. حالا داخل VS Code یه فایل جدید بساز، مثلاً با نام search.svg. فقط مهمه که پسوندش حتماً svg باشه.

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

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

استایل‌دهی دقیق به فیلد جستجو در المنتور

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

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

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

برای «رنگ آیکون»، ابتدا با ابزار Color Picker یا Inspect مرورگر رنگ دقیق آیکون رو از سایت اصلی اتریوم استخراج می‌کنیم. در اینجا رنگ موردنظر برابر با کد هگز 121212# بود. بنابراین، این رنگ رو هم برای آیکون و هم برای رنگ متن در نظر می‌گیریم. در المنتور، می‌تونیم هم از کد RGB و هم Hex استفاده کنیم.

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

برای گرد کردن گوشه‌های جعبه جستجو، از گزینه‌ی گردی حاشیه استفاده می‌کنیم. در سایت اصلی، مقدار گردی گوشه‌ها 0.25rem (حدوداً معادل ۴ پیکسل) بوده. پس ما هم همین مقدار (۴px) رو اعمال می‌کنیم تا فرم جعبه‌ جستجو نرم و مدرن‌تر به‌نظر بیاد.

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

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

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

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

ساخت دکمه انتخاب زبان با آیکون سفارشی

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

تو نسخه اصلی سایت، این دکمه هم یه آیکون داره، هم متن. ما هم می‌خوایم یه چیزی مثل همون درست کنیم، حالا نه دقیقاً همون، ولی در اون مایه‌ها. آیکونی که اونا گذاشتن یه SVG بود. ما چی کار کردیم؟ خیلی ساده با مرورگر رفتیم روی اون آیکونه، راست‌کلیک کردیم، زدن رو “Edit as HTML”، و کل کد SVG اون آیکون رو کپی کردیم.

بعد اومدم توی VS Code (همون ویرایشگر کدی که باهاش فایل می‌سازیم) یه فایل جدید ساختم، اسمشم گذاشتم مثلاً lang.svg. بعد اون کدی که کپی کرده بودم رو توی این فایل پیست کردم و فایل رو ذخیره کردم. حالا این فایل SVG رو می‌تونیم به المنتور بدیم و مثل یه تصویر عادی آپلودش کنیم.

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

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

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

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

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

حالا بریم سراغ آیکون. بعضی از دکمه‌ها توی المنتور امکان تغییر سایز آیکون رو ندارن، یعنی یه سری دکمه‌ها هستن که فقط می‌تونی آیکون اضافه کنی، ولی دستت برای تغییر اندازش بسته‌ست. اگه دیدی اینجوریه، مشکلی نیست. می‌تونی یا بری مستقیم توی CSS اندازه‌ش رو دستی تغییر بدی، یا اینکه به جای اون دکمه بیای از یه المنت دیگه مثل “جعبه آیکون” (Icon Box) استفاده کنی. خوبی این المنت اینه که آیکون رو خیلی راحت‌تر می‌تونی کنترل کنی، از رنگ گرفته تا اندازه و مکانش.

اگه بخوای با جعبه آیکون کار کنی، خیلی ساده آیکون فایل SVG که قبلاً ساختیم رو انتخاب می‌کنی، بعد تنظیمات استایلش رو میزاری روی اینکه آیکون بیاد سمت راست، متن بیاد سمت چپ. تگ متن رو هم می‌تونی بزاری روی span که ساختارش تمیزتر باشه. ترازبندی عمودی هم می‌ذاریم وسط (vertical align: middle) تا آیکون و متن دقیقاً وسط دکمه کنار هم قرار بگیرن.

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

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

ترازبندی ستون‌ها

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

تنظیم‌بندی سکشن‌ها

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

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

می‌ریم سراغ ستون بعدی، مثلاً یه ستون دیگه داریم که اونم می‌ذاریم روی ۵ درصد. حالا جمع اینا شد ۲۵ درصد. این یعنی هنوز ۷۵ درصد از عرض باقی مونده که باید بین بقیه‌ی المنت‌ها تقسیمش کنیم.

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

حالا اگه دیدیم که هنوزم مثلاً اندازه‌ها به هم نمی‌خوره، میایم دوباره درصدها رو یه کم بالا پایین می‌کنیم. مثلاً اون ستونی که ۷۵ بود رو می‌ذاریم ۷۰، اونایی که ۱۲ بودن رو یکی می‌کنیم ۱۳، اون یکی رو ۱۴، تا ببینیم چجوری بالانس می‌شن. با این کار در نهایت یه ساختار تمیز و مرتب در میاد که هم چشم‌نوازه، هم دقیق شبیه چیزی میشه که توی سایت اتریوم دیدیم.

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

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

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

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

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

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

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

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

انتخاب فونت

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

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

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

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

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

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

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

تنظیم سایز فونت

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

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

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

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

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

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

تنظیم عرض سایت

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

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

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

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

وقتی اون بخش باز شد، رفتم سراغ گزینه‌ی «طرح‌بندی» (Layout). اونجا یه گزینه داریم به اسم «عرض سایت» یا همون Site Width که به صورت پیش‌فرض معمولاً روی ۱۱۴۰ یا ۱۲۰۰ پیکسل تنظیم شده. ولی من اون رو تغییر دادم و گذاشتم روی ۱۵۲۰.۸ پیکسل، دقیقاً همون مقداری که توی سایت اتریوم داشتیم.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

نوع قالب رو می‌ذاریم روی «سربرگ» و اسمش رو هم همون «هدر» انتخاب می‌کنیم.

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

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

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

جمع بندی

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

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

رضا راد

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