آموزش جامع طراحی هدر با المنتور

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

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

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

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

تنظیمات هدر

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

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

کم و زیاد کردن ارتفاع هدر سایت

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

ایجاد مرز میان هدر و صفحه اصلی سایت

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

چگونه هدر سایت را تمام عرض کنیم؟

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

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

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

استافده از المان‌های شبکه اجتماعی

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

استفاده از آیکون‌های مربوط به ووکامرس

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

سخن پایانی

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