آموزش ساخت هدر عمودی برای سایت وردپرسی

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

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

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

هدر عمودی چیه و چه مزایایی داره؟

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

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

مهم‌ترین مزایای هدر عمودی

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

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

قبل از شروع، به چه چیزهایی نیاز داریم؟

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

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

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

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

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

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

مرحله اول: ساخت ساختار هدر در المنتور

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

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

ایجاد نوار بالایی (اختیاری اما کاربردی)

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

برای ساختنش:

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

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

تنظیم کانتینر اصلی هدر

بعد از آماده کردن نوار بالا، می‌رسیم به مهم‌ترین بخش: کانتینر اصلی هدر. این همون قسمتیه که قراره به‌صورت عمودی کنار سایت نمایش داده بشه.

کانتینر اصلی رو انتخاب کن و برو به تب Advanced. بعد تو بخش Positioning این تنظیمات رو اعمال کن:

• Position رو روی Fixed بذار.
  با این کار، هدر سر جاش ثابت می‌مونه و با اسکرول صفحه حرکت نمی‌کنه. این یعنی منوی سایت همیشه جلوی چشم کاربره.
• Vertical رو روی Top تنظیم کن تا هدر از بالای صفحه شروع بشه.
• Horizontal رو بسته به طراحی سایتت روی Right یا Left بذار. تو سایت‌های فارسی معمولاً سمت راست انتخاب رایج‌تریه، ولی این کاملاً به سبک طراحی خودت بستگی داره.

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

چند توصیه برای اینکه کارت تمیزتر دربیاد

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

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

فعلاً سعی کن ساختار رو ساده نگه داری. تمرکز این مرحله روی جایگاه و رفتار هدره، نه جزئیات ظاهری.

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

مرحله دوم: تبدیل هدر به حالت عمودی

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

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

معمولاً عددی بین ۲۶۰ تا ۳۰۰ پیکسل یه بازه استاندارد و کاربردیه. نه اون‌قدر کمه که عناصر تو هم فشرده بشن، نه اون‌قدر زیاده که تمرکز کاربر از محتوای اصلی گرفته بشه. مثلاً می‌تونی این مقدار رو بذاری:

Width: 280px

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

چیدمان عناصر به‌صورت عمودی

حالا باید آیتم‌های داخل هدر رو هم مرتب کنیم. برای این کار، گزینه Direction رو روی Column بذار. با این تنظیم، همه عناصر — از لوگو گرفته تا منو و دکمه‌ها — زیر هم قرار می‌گیرن و ساختار ستونی هدر کامل می‌شه.

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

تنظیم ارتفاع هدر

یکی از ویژگی‌های اصلی هدر عمودی اینه که کل ارتفاع صفحه رو پوشش بده. برای این کار، مقدار Min Height رو بذار روی:

Min Height: 100vh

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

چند نکته که همین‌جا به کارت میاد

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

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

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

مرحله سوم: استفاده از منوی عمودی

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

اگه از ویجت Nav Menu تو Elementor استفاده می‌کنی، وارد تنظیماتش شو و گزینه Layout رو روی Vertical بذار. با این کار لینک‌های منو زیر هم نمایش داده می‌شن و کاملاً با ساختار عمودی هدر هماهنگ می‌شن.

تنظیم فاصله بین آیتم‌های منو

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

می‌تونی با افزایش Line Height یا اضافه کردن Padding عمودی، یه تعادل خوب ایجاد کنی؛ طوری که هم خوانا باشه، هم خوش‌فرم.

استفاده از آیکون و افکت Hover

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

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

هماهنگی منو با کل هدر

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

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

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

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

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

راه‌حل چیه؟

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

از این مسیر برو:

نمایش → سفارشی‌سازی → CSS اضافی

و بعد این کد رو وارد کن:

body{
margin-right:320px;
}

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

اگه هدر سمت چپه چی؟

اگه هدر رو سمت چپ سایت قرار دادی، فقط کافیه به‌جای margin-right از margin-left استفاده کنی:

body{
margin-left:320px;
}

چند نکته که بهتره رعایت کنی

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

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

حتماً سایت رو تو حالت دسکتاپ و نمایشگرهای کوچیک‌تر هم چک کن تا مطمئن شی تعادل طراحی به‌هم نخورده.

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

مرحله پنجم: تنظیم فاصله از بالا برای هدر ثابت

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

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

باز هم از مسیر:

نمایش → سفارشی‌سازی → CSS اضافی

این کد رو اضافه کن:

body{
padding-top:80px;
}

این کار باعث می‌شه کل محتوای سایت کمی پایین‌تر بیاد و دیگه زیر هدر ثابت پنهان نشه.

چه عددی مناسبه؟

عدد ۸۰ پیکسل فقط یه پیشنهاده. بهتره ارتفاع واقعی هدر یا نوار بالایی خودت رو در نظر بگیری و تقریباً همون مقدار رو به‌عنوان padding تنظیم کنی. اگه هدر بلندتره، طبیعتاً باید عدد بیشتری بذاری تا تعادل طراحی حفظ بشه.

چرا اینجا از Padding استفاده می‌کنیم؟

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

حتماً تستش کن

بعد از اعمال تغییرات:

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

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

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

مرحله ششم: تست سایت در حالت مهمان

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

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

بهترین روش برای بررسی واقعی سایت

ساده‌ترین راه اینه که سایت رو در حالت مهمان یا Incognito مرورگر باز کنی. تو این حالت:

• هیچ حساب کاربری وارد نشده
• نوار مدیریت نمایش داده نمی‌شه
• سایت دقیقاً همون‌طوری که کاربر عادی می‌بینه، نشون داده می‌شه

اگه از مرورگر Chrome استفاده می‌کنی، از منوی بالا گزینه New Incognito Window رو انتخاب کن و بعد آدرس سایتت رو وارد کن.

چرا این مرحله انقدر مهمه؟

تو طراحی هدرهای ثابت — مخصوصاً هدرهای عمودی — حتی چند پیکسل اختلاف می‌تونه باعث بشه:

• بخشی از محتوا زیر هدر مخفی بشه
• فاصله‌ها نامنظم دیده بشن
• یا ظاهر سایت غیرحرفه‌ای به نظر برسه

وقتی سایت رو در حالت مهمان بررسی می‌کنی، این ایرادها رو قبل از اینکه کاربر واقعی ببینه، پیدا و اصلاح می‌کنی.

یه راه جایگزین: غیرفعال کردن نوار مدیریت

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

• وارد پیشخوان شو.
• برو به ویرایش شناسنامه.
• تیک گزینه «نمایش نوار ابزار هنگام مشاهده سایت» رو بردار.
• تغییرات رو ذخیره کن.

با این کار حتی در حالت ورود هم سایت رو مثل یه کاربر عادی می‌بینی.

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

مرحله هفتم: ریسپانسیو کردن هدر عمودی

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

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

خوشبختانه Elementor ابزارهای کاملی برای کنترل نمایش عناصر تو اندازه‌های مختلف صفحه در اختیارت می‌ذاره.

تنظیم هدر برای تبلت

تو حالت تبلت فضای کمتری نسبت به دسکتاپ داری. اگه همون عرض ۲۸۰ یا ۳۰۰ پیکسلی رو نگه داری، بخش زیادی از صفحه اشغال می‌شه.

برای حلش:

• پایین صفحه المنتور روی آیکون Tablet کلیک کن
• کانتینر اصلی هدر رو انتخاب کن
• عرضش رو کمتر کن (مثلاً بین ۲۰۰ تا ۲۴۰ پیکسل)

این کار کمک می‌کنه تعادل بین هدر و محتوای اصلی حفظ بشه و کاربر راحت‌تر محتوا رو ببینه.

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

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

راهکار حرفه‌ای اینه که تو موبایل، هدر عمودی رو به منوی همبرگری تبدیل کنی.

برای این کار می‌تونی:

• نسخه دسکتاپ هدر رو در حالت موبایل مخفی کنی
• یه هدر جدا مخصوص موبایل طراحی کنی
• از ویجت Nav Menu در حالت Dropdown یا Toggle استفاده کنی

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

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

المنتور این امکان رو می‌ده که برای هر دستگاه تنظیمات جدا داشته باشی. یعنی می‌تونی:

• عرض‌های متفاوت تعریف کنی
• بعضی عناصر رو فقط در دسکتاپ یا موبایل نمایش بدی
• فاصله‌ها و اندازه‌ها رو جداگانه تنظیم کنی

حتماً بعد از اینکه طراحی تموم شد، سایت رو در هر سه حالت Desktop، Tablet و Mobile بررسی کن و اگه لازم بود تنظیمات اختصاصی انجام بده.

چرا این مرحله این‌قدر مهمه؟

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

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

چند نکته حرفه‌ای برای بهتر شدن طراحی هدر عمودی

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

۱. عرض هدر رو بیش از حد بزرگ نکن

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

۲. فضای خالی (Whitespace) رو جدی بگیر

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

۳. آیکون‌ها رو یکدست انتخاب کن

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

۴. از افکت Hover استفاده کن

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

۵. رنگ پس‌زمینه رو هوشمندانه انتخاب کن

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

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

هدر عمودی رو خودمون طراحی کنیم یا از نسخه آماده استفاده کنیم؟

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

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

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

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

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

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

جمع‌بندی

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

برای رسیدن به نتیجه درست، چند مرحله کلیدی رو باید جدی بگیری:

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

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

تیم تولید محتوا

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