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

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

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

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

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

افزودن مگامنو به هدر

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

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

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

چیدمان مگامنو

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

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

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

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

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

اگر بعد از ذخیره کردن فهرست، توی پیش‌نمایش سایت هنوز مگامنو رو نمی‌بینید یا ظاهرش به‌درستی نشون داده نمی‌شه، یک بار کش مرورگرتون رو پاک کنید یا سایت رو با Ctrl + F5 رفرش کنید. همچنین مطمئن بشید که قالب اهورا به‌روز باشه و پلاگین‌های مربوط به المنتور و قالب فعال باشن.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

رنگ‌بندی مگامنو

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

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

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

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

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

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

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

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

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

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

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

تنظیم فونت‌ها

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

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

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

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

فعالسازی کانتینر

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

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

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

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

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

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

هیرو چیه؟

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

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

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

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

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

طراحی هیرو

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ولی خب شاید بپرسید این رنگ از کجا بیاریم؟ من خودم برای این کار میام روی همون سایت اتریوم، روی یه بخشی که رنگ پس‌زمینه داره راست کلیک می‌کنم و گزینه‌ی “Inspect” رو می‌زنم. این ابزار توسعه‌دهنده‌ی مرورگره که بهم اجازه می‌ده رنگ دقیق اون بخش رو ببینم. حالا ممکنه یه‌کم سخت باشه پیدا کردن کد رنگ، ولی معمولاً می‌تونید بین کدهای CSS توی همون بخش یه کدی مثل این پیدا کنید: #f5f5f7 یا rgb(245,245,247).

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

مثلاً من الان اینجا کد رنگ سازمانی اتریوم رو پیدا کردم #627eea. این رنگ رو کپی می‌کنم و توی بخش پس‌زمینه کانتینرم توی المنتور، اون رو پیست می‌کنم. حالا رنگ پس‌زمینه‌مون دقیقاً همون رنگیه که توی سایت اتریوم استفاده شده. اگه RGB بود، می‌تونید همون حالت RGB رو نگه دارید یا تبدیلش کنید به HEX.

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

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

نکته مهم

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

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

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

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

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

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

افزودن عنوان

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

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

اگه بخوای دقیق همون رنگ‌هایی که توی اتریوم هست رو دربیاری، یه راه ساده استفاده از ابزار inspect توی مرورگره. البته گاهی رنگ رو با فرمت RGB نشون می‌ده که کارو یکم سخت می‌کنه. واسه همین یه روش راحت‌تر هم داریم: یه المنت دیگه‌ای که همون رنگ رو داره توی صفحه پیدا می‌کنیم، ابزار انتخاب رنگ المنتور (Color Picker) رو باز می‌کنیم، با ابزار قطره‌چکان اون رنگ رو برمی‌داریم، و از کد هگزش استفاده می‌کنیم. مثلاً برای رنگ سفید، همون کد معروف #FFFFFF رو داریم که همیشه کار می‌کنه.

برای تنظیم اندازه و فونت هم، می‌ریم توی بخش تایپوگرافی. اینجا می‌تونیم فونت تیتر اول (۱۰ سال با اتریوم) رو بزرگ‌تر بذاریم، مثلاً بالای ۳۶ پیکسل، و فونت متن دوم (نظر شما چیه؟) رو یه کم کوچیک‌تر، مثلاً حدود ۱۸ تا ۲۴ پیکسل. وزن فونت هم اگه یه‌کم سبک‌تر باشه بهتره؛ مثلاً وزن ۳۰۰ یا ۴۰۰ کاملاً کافیه. اگه دوست دارید که کل متن وسط صفحه قرار بگیره، تراز متن رو هم حتماً روی «وسط‌چین» بذارید.

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

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

تصویر اصلی سایت اتریوم

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

حالا برمی‌گردیم به برگه «خانه» که با المنتور در حال طراحیش هستیم. جایی که قراره عکس رو بذاریم، دقیقاً زیر عنوانیه که قبلاً اضافه کردیم («۱۰ سال با اتریوم…»). توی همون سکشنی که قبلاً ساختیم، یک المنت جدید اضافه می‌کنیم؛ المنتی به نام «تصویر».

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Ethereum
• ETH
• اتریوم

این سه متن با افکت تایپی یکی‌یکی نمایش داده می‌شن.

بعد از وارد کردن متن‌ها، به تب “استایل” می‌ریم تا استایل متن‌ها رو طبق برندینگ اتریوم تنظیم کنیم. چون اتریوم از رنگ سازمانی خاصی استفاده می‌کنه، رنگ متن‌های متحرک رو به اون رنگ تغییر می‌دیم. اگر رنگ دقیق رو نمی‌دونید، می‌تونید از ابزارهایی مثل “Color Picker” در مرورگر (از طریق Inspect) استفاده کنید و کد رنگ هگز یا RGB رو کپی کنید.

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

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

در نهایت، یک ویرایشگر متن به زیر عنوان اضافه می‌کنیم. مثلاً جمله‌ای مثل «پلتفرم همه‌منظوره برای راه‌اندازی اپلیکیشن و وب‌سایت شما».به استایل اون هم رسیدگی می‌کنیم؛ فونتش رو کمی بزرگ‌تر می‌ذاریم (مثلاً ۱۶ تا ۱۸ پیکسل)، وزن فونت رو روی حالت سبک‌تر (مثلاً 300 یا 400) تنظیم می‌کنیم، و چینش متن رو وسط نگه می‌داریم تا با تیتر بالا هماهنگ باشه.

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

طراحی دکمه‌های CTA در سایت اتریوم

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

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

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

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

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

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

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

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

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

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

دریافت فایل SVG

خب روشش خیلی سادست. اول باید اون آیکونی که تو سایت هست رو با استفاده از Inspect توی مرورگر برداری. واسه این کار، روی آیکون راست کلیک کن، بعدش گزینه‌ی “Inspect” یا “بررسی” رو بزن. حالا توی اون بخش HTML یه چیزی می‌بینی که با <svg شروع میشه و با </svg تموم میشه. همونو انتخاب کن کامل.

بعدش این کدی که کپی کردی رو باید ببری تو یه نرم‌افزار و به‌صورت یه فایل ذخیرش کنی. حالا می‌خوای با Visual Studio Code کار کنی یا Notepad++ یا حتی همون نوت‌پد ساده‌ی ویندوز، فرقی نمی‌کنه.

یه فایل جدید باز کن، اون کدی که کپی کردی رو توش پیست کن. حالا وقتشه ذخیره‌اش کنی. وقتی Save as رو میزنی، اسمش رو بذار مثلاً icon1.svg یا هرچی که راحتی، و مطمئن شو پسوندش svg باشه نه txt یا چیز دیگه.

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

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

روش ساده‌ی دیگه‌ای هم برای این‌کار وجود داره. می‌تونید با نصب افزونه‌ی SVG Export روی مرورگرتون مثل تصویر پایین به راحتی دانلودشون کنید.

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

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

حالا میریم سراغ استایل دقیق‌تر. رنگ قاب دور آیکون‌هامون رو می‌ذاریم روی رنگ سازمانی که همون رنگ اصلی اتریومه (مثلاً #627eea یا هر چی که خودت ازش کپی کردی).

ضخامت کادر یا Border رو هم کم می‌کنیم، مثلاً ۱ پیکسل. آیکون‌هارو هم اگه دیدی زیادی بزرگن، از همون قسمت سایز یا Size، کوچیک‌ترشون کن، مثلاً روی ۳۰ یا ۴۰ پیکسل.

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

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

ایجاد Shadow و ZoomOut

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

یعنی مثلاً گفتم هر آیکونی که قراره این افکت‌ها رو بگیره، اسم کلاسش باشه «rad-icon-hover». اینو از بخش “پیشرفته” توی تنظیمات المنتور می‌نویسی. فقط کافیه بری روی اون آیکون کلیک کنی، بری توی تب “پیشرفته”، و داخل قسمت کلاس‌های CSS این اسم رو بنویسی. برای همه‌ی اون چهار تا آیکون هم همینو نوشتم.

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

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

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

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

خارج کردن هدر از حالت چسبان

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

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

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

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

جمع بندی

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

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

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

رضا راد

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