آموزش ساخت هدر چسبان با المنتور – Sticky Header (ویدیوی آموزشی)

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

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

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

هدر چسبان چیست؟

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

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

۱. باز کردن بخش هدر در ویرایشگر المنتور

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

۲. انتخاب بخش اصلی هدر

در این مرحله، باید بخشی که تمامی اجزای هدر (مانند لوگو، منو و دکمه‌ها) در آن قرار دارند را انتخاب کنید.

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

۳. اعمال تنظیمات لازم برای ساخت هدر چسبان

برای فعال‌سازی قابلیت چسبان، این مراحل را دنبال کنید:

1. وارد تنظیمات پیشرفته بخش هدر شوید.
2. وارد قسمت “موشن افکت” شوید. (آموزش موشن افکت ها در المنتور)
3. تنظیمات مربوط به شناور را فعال کرده و گزینه‌ی “بالا” را انتخاب کنید.

۴. انتخاب دستگاه‌های مورد نظر

در قسمت شناور روی ، می‌توانید تعیین کنید که هدر چسبان در چه دستگاه‌هایی فعال باشد:

• دسکتاپ (کامپیوتر): برای کاربران رایانه.
• تبلت: برای نمایش در صفحات بزرگ‌تر از موبایل.
• موبایل: برای صفحات کوچک‌تر و کاربران تلفن همراه.

۵. اعمال پس زمینه هنگام حرکت با کدهای css

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

.elementor-sticky--effects{
    background-color: #ffffff;
    padding: 10px;
}

6. انتشار هدر چسبان

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

نکات مهم در ساخت هدر چسبان با المنتور

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

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

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