جلسات آموزشی

دوره تخصصی UI باالمنتور

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

نویسنده : ایران المنتور
26 دیدگاه
آخرین بروزرسانی : 19 شهریور, 1400

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

Share on twitter
Share on linkedin
Share on pinterest
Share on telegram
Share on whatsapp
Share on email

آنچه در این مطلب می خوانید

طراحی هدر وبسایت

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

  1. از مسیر پیشخوان>قالب ها> theme builder وارد پوسته ساز افزونه المنتور پرو شوید
  2. با کلیک بر روی دکمه افزودن جدید، وارد صفحه قالب ها شوید
  3. بر روی دکمه + در بخش هدر، کلیک کنید.

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

ایجاد اجزای هدر

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

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

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

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

طراحی و شخصی سازی هدر در نمایشگر موبایل

پس از انجام تنظیمات بر روی نمایشگر دسکتاپ، لازم است بر روی نمایشگر موبایل نیز تغییراتی اعمال کنید.

برای بهینه سازی هر بخش در حالت موبایل، تنظیمات زیر را انجام دهید

نمایش لوگو در ویرایشگر موبایل

در نمایشگر موبایل، میتوانید سایز لوگو را تغییر داده تا در کنار منو، به صورت نواری نشان داده شود. مقدار 80 درصد برای لگو مناسب است.

نمایش منو در ویرایشگر موبایل

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

برای نمایش منو به صورت تمام صفحه و کامل در موبایل، از بخش محتوا، گزینه full width را فعال کنید.

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

در بخش تنظیمات آیکون منو، toggle button تنظیمات آیکون منو را انجام دهید

سایر اجزا را نیز می توانید شخصی سازی کنید.

نمایش اطلاعات تماس و حساب کاربری در موبایل

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

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

در سه ستون، ابزارک آیکون را فعال می کنیم و برای هر یک، تنظیمات زیر را اجرا می کنیم:

  1. پیوند به صفحه home: آیکون هوم، پیوند داینامیک site URL قرار می دهیم. سایز و رنگ را نیز میتوانید تغییر دهید.
  2. پیوند به حساب کاربری: آیکون یوزر و پیوند را صفحه حساب کاربری قرار می دهیم
  3. پیوند به شماره تماس: آیکون تماس و پیوند را بر روی حالت content URL قرار می دهیم. با استفاده از ابزار تنظیمات در همین قسمت، type را بر روی حالت Tel قرار اده و شماره تماس را وارد می کنیم

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