تکنیک های مهم در طراحی هدر سایت

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

آشنایی بیشتر با هدر

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

آیا میدانید هدر از چند بخش ساخته میشه؟

هدر ها میتونن از یک یا دو و یا سه بخش تشکیل شوند. در انواع سه بخشی یک نوار در بالای صفحه قرار میگیره که به آن ( Top Bar ) گفته میشه و یک نوار در وسط که به آن Main Bar  گفته میشه، که معمولا در این قسمت از یک تصویر یا تصاویری مرتبط با موضوع و هدف سایت استفاده میشه که کاربر با دیدن آن به صورت بصری در عرض چند ثانیه متوجه نوع کسب و کار و موضوع سایت شما بشه  و یک نوار پایینی در که به آن Botton Bar  گفته میشه که طراح باید با استفاده از نیازی که برای سایت حس میکنه از یک یا هر سه بخش در طراحی هدر وب سایت استفاده کنه. در گذشته برای ساخت هدر وب سایت معمولا از یک نوار باریک در بالای صفحه اصلی استفاده میشد ولی جالب بدونین که امروزه دیگه اون طراحی  خیلی مرسوم نیست و بیشتر سعی میشه که در طراحی هدر از کل فضای صفحه اصلی استفاده بشه.

عناصر اصلی در طراحی هدر

با توجه به موضوع و نوع فعالیت سایتتون میتونین از این عناصر در طراحی هدر سایتتون استفاده کنین:

لوگو

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

امکان جستجو

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

خدمات وب سایت

این قسمت معمولا در نوار سربرگ قرار داده میشه مثلا اگه در حوزه مشاور سئو فعال هستید میتونین این قسمت یعنی مشاوره سئو را در نوارسربرگ قرار دهید و یا اگر خدمات دیگری مانند خرید هاست یا خدمات سئو دیگری هم دارین میتوانین اگر نوار سربرگ شما شلوغ نیست این قسمت ها را هم در نوار سربرگ قرار دهید. و یا به عنوان  زیر گزینه های طراحی سایت قرار بدید.

اطلاعات تماس

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

شبکه های اجتماعی

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

گزینه ثبت نام یا سابسکریپشن

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

سبد خرید

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

سوییچ تغییر زبان

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

تصویر یا عکس

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

فهرست ناوبری

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

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

اهمیت طراحی هدر چیست؟

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

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

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

گام اول طراحی هدر

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

گام دوم طراحی هدر

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

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

گام سوم طراحی هدر

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

گام چهارم طراحی هدر

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

گام پنجم طراحی هدر

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

گام ششم طراحی هدر

در ستون بعدی از ابزارک یا المان nav menu استفاده می کنیم تا بتونیم منو سایتمون رو در این ستون با کمک گرفتن از این المان بسازیم

گام هفتم طراحی هدر

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

به این ترتیب ما می توانیم هدر وب سایت را به صورت اصولی و مطابق با آنچه که سلیقه ماست طراحی کنیم.

اگر نیاز به قیمت سئو تضمیمی هم دارید می‌توانیدبه خدمات ما نگاهی بیندازید.

سخن آخر

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