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

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

ایجاد هدر یا سربرگ با المنتور

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

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

جلسه چهارم:
آشنایی با انوع قالب های المنتور

اجرای طرح  UI به کمک المنتور

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

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

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

طرح‌بندی

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

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

ساختار

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

استایل

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

پیشرفته

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

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

اضافه کردن ابزارها به هدر

لوگوی سایت

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

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

منوی سایت

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

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

ایجاد آیکون‌های شبکه اجتماعی

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

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

منوی باز شونده هدر

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

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

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