هدر وب سایت قسمت بالای صفحه وب شما است. معمولاً هدر در سرتاسر سایت شما ثابت است. با این حال، وب سایت هایی نیز وجود دارند که سربرگ های متفاوتی برای بخش های مختلف وب سایت دارند.
اولین برداشتی که کاربران شما از وب سایت شما خواهند داشت چه به صفحه اصلی شما، چه در مورد صفحه یا هر پست فردی دیگر از طریق طراحی هدر شماست. و اگر به خوبی طراحی شود، توجه کاربر را به خود جلب می کند و به عنوان قلابی برای ادامه پیمایش و خواندن عمل می کند.
هدر همچنین می تواند نقش مهمی در ارتقای هویت برند تجاری شما داشته باشد با ترکیب عناصری مانند لوگوی شرکت، تایپوگرافی، رنگ‌ها و زبان کلی برند.
هدرها همچنین حاوی گزینه‌های کاربردی مانند ناوبری سایت، جستجوی سایت، سبد خرید (برای سایت‌های فروش)، دکمه‌های فراخوان برای اقدام (CTA) و سایر عملکردهایی هستند که تجربه کاربر را بهبود می‌بخشند و نرخ تبدیل را افزایش می‌دهند
طراحی هدر وبسایت
با طی مراحل زیر، می توانید اقدام به شخصی سازی و طراحی هدر وبسایت خود داشته باشید.
- از مسیر پیشخوان>قالب ها> theme builder وارد پوسته ساز افزونه المنتور پرو شوید
- با کلیک بر روی دکمه افزودن جدید، وارد صفحه قالب ها شوید
- بر روی دکمه + در بخش هدر، کلیک کنید.
با ورود به این بخش، می توانید از قالب های آماده استفاده کنید و یا به صورت دستی، طراحی هدر را ادامه دهید.
ایجاد اجزای هدر
برای ایجاد هدر، ابتدا یک سکشن ایجاد می کنیم. رنگ این سکشن را از تب استایل، برابر رنگ سفید قرار دهید. در غیر این صورت، با تغییر رنگ زمینه، رنگ هدر نیز تغییر خواهد کرد. مقدار پدینگ نیز برابر 0 قرار می گیرد.
در ادامه شما می توانید ستون های مختلف را ایجاد کنید. غالبا اجزایی مانند لگو، منو، اطلاعات کابری و.. در این بخش قرار می گیرد. در این بخش شما می توانید تنظیمات مختلف را بر روی ابزارک های مورد استفاده خود مانند سایه، حاشیه، رنگ، سایز و…اعمال کنید.
شما می توانید با استفاده از ابزار های مختلف، موقعیت و نحوه نمایش این ابزارک ها را شخصی سازی کنید. در طراحی این هدر، لوگو، منو، شماره تماس و حساب کاربری استفاده شده است که هر کدام را می توانید با ابزارک ها ایجاد و شخصی سازی کنید.
طراحی و شخصی سازی هدر در نمایشگر موبایل
پس از انجام تنظیمات بر روی نمایشگر دسکتاپ، لازم است بر روی نمایشگر موبایل نیز تغییراتی اعمال کنید.
برای بهینه سازی هر بخش در حالت موبایل، تنظیمات زیر را انجام دهید
نمایش لوگو در ویرایشگر موبایل
در نمایشگر موبایل، میتوانید سایز لوگو را تغییر داده تا در کنار منو، به صورت نواری نشان داده شود. مقدار 80 درصد برای لگو مناسب است.
نمایش منو در ویرایشگر موبایل
در نمایشگر دسکتاپ، کافیست آیکون منو در کنار لوگو نمایش داده شود. از این رو سایز منو کوچک و مقدار 20 درصد را به آن اختصاص می دهیم.
برای نمایش منو به صورت تمام صفحه و کامل در موبایل، از بخش محتوا، گزینه full width را فعال کنید.
از تب استایل و بخش دراپ دان، distance جایگاه فاصله اجزا با ستون منو را مشخص کنید.
در بخش تنظیمات آیکون منو، toggle button تنظیمات آیکون منو را انجام دهید
سایر اجزا را نیز می توانید شخصی سازی کنید.
نمایش اطلاعات تماس و حساب کاربری در موبایل
بهتر است در نمایشگر موبایل، ستون مربوط به اطلاعات تماس و حساب کاربری در هدر را مخفی، و به صورت زیر نمایش دهید:
از مسیر پیشخوان>قالب ها و با کلیک بر روی افزودن جدید، قالب خود را روی سکشن قرار داده و بر روی نمایشگر موبایل، یک سکشن سه ستونه، ایجاد می کنیم. عرض سکشن ها را به نحوی قرار دهید که در امتداد هم در یک ردیف قرار بگیرند.
در سه ستون، ابزارک آیکون را فعال می کنیم و برای هر یک، تنظیمات زیر را اجرا می کنیم:
- پیوند به صفحه home: آیکون هوم، پیوند داینامیک site URL قرار می دهیم. سایز و رنگ را نیز میتوانید تغییر دهید.
- پیوند به حساب کاربری: آیکون یوزر و پیوند را صفحه حساب کاربری قرار می دهیم
- پیوند به شماره تماس: آیکون تماس و پیوند را بر روی حالت content URL قرار می دهیم. با استفاده از ابزار تنظیمات در همین قسمت، type را بر روی حالت Tel قرار اده و شماره تماس را وارد می کنیم
با استفاده از این قسمت، کاربر با کلیک بر روی آیکون تماس، به صورت خودکار به شماره گیر موبایل با شماره تماس شما وارد خواهد شد.
منابع:
