آموزش ایجاد و طراحی صفحه اصلی

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

صفحه اصلی کجاست؟

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

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

مشاهده جلسات:
تمام جلسات این دوره در کانال یوتیوب هلپ چک موجود و قابل مشاهده است.

چگونگی ایجاد هوم پیچ یا صفحه خانه

آیا باید صفحه اصلی را ایجاد کرد یا اینکه صفحه اصلی از قبل وجود دارد؟

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

پس ما برای طراحی نیاز داریم که یک برگه جدید به نام صفحه اصلی یا صفحه خانه ایجاد کنیم. برای این کار مراحل زیر را دنبال کنید:

1. وارد پیشخوان وردپرس شوید و از بخش برگه‌ها بر روی افزودن برگه کلیک کنید.
2. اسم برگه را وارد کنید. (صفحه اصلی یا صفحه خانه و یا هر چیز دیگر)
3. یک url وارد کنید و بر روی انتشار کلیک کنید.
4. از پیشخوان وردپرس و زیرمجموعه تنظیمات بر روی خواندن کلیک کنید.
5. گزینه اول را بر روی یک برگه یکتا قرار دهید و در بخش صفحه نخست برگه ایجاد شده را انتخاب کنید.

المان‌های و توضیحاتی که در صفحه اصلی باید قرار دهیم

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

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

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

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

پس ازآنکه صفحه خانه را ایجاد کردید دو راه برای ویرایش این صفحه خواهید داشت

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

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

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

طراحی سایدبار و پست کانتنت صفحه اصلی (Post content / Sidebar)

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

محتوای سایدبار به ترتیب طرح UI

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

باکس دوم: ویجت نوشته‌ها یا ارسال مطالب که می‌توانیم در تنظیمات مشخص کنیم که سه یا چهار مطلب اخیر را نمایش دهد.

باکس سوم: ویجت تصویر و دکمه و یا انتخاب تصویر در بخش استایل و اضافه‌کردن دکمه

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

کانتنت اصلی (content)

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

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

نکته: برای اینکه بهتر متوجه این طراحی شوید حتماً ویدئوی آموزشی این جلسه را مشاهده کنید.