آموزش چسبان کردن هدر شیشه ای المنتور — قدم به قدم با نکات پیشرفته (۲۰۲۵)

در این آموزش، می‌آموزید چطور هدر سایت وردپرسی‌تان (یا همان هدر شیشه ای المنتور) را به‌صورت حرفه‌ای چسبان کنید تا با اسکرول کاربر، همیشه در بالای صفحه بماند. این قابلیت نه تنها ناوبری سایت را سریع‌تر می‌کند، بلکه نرخ پرش (Bounce Rate) را کاهش می‌دهد و سایت را کاربرپسندتر نشان می‌دهد. با آپدیت‌های جدید المنتور در سال ۲۰۲۵ (نسخه ۳.۲۰+)، این کار بدون کد اضافی و در کمتر از ۲ دقیقه انجام می‌شود. اگر از المنتور پرو استفاده می‌کنید، گزینه‌های بیشتری مثل افکت‌های سفارشی دارید، اما نسخه رایگان هم کافی است.
پیش‌نیازهای ضروری قبل از شروع
قبل از اینکه شروع کنیم، مطمئن شوید:
المنتور فعال باشد (نسخه ۳.۱۸ یا بالاتر برای بهترین عملکرد)
هدر را قبلاً ساخته باشید یا آماده کنید (لوگو، منو، جستجو و … داخل یک کانتینر واحد)
از مرورگر مدرن مثل کروم استفاده کنید تا پیش‌نمایش واقعی ببینید
اگر سایت چندزبانه است، این تنظیم را برای هر زبان جداگانه اعمال کنید
کش مرورگر و سایت (مثل WP Rocket یا Litespeed) را بعد از ذخیره خالی کنید تا تغییرات فوری دیده شود
مراحل دقیق چسبان کردن هدر (Sticky) در المنتور
۱. وارد ویرایشگر المنتور شوید
از پیشخوان وردپرس به بخش “قالب‌ها” → “سربرگ” (Header Templates) بروید. اگر سربرگ جدیدی می‌سازید، یک کانتینر اصلی اضافه کنید و تمام عناصر هدر (لوگو، منو ناوبری، عنوان سایت، دکمه‌های کال‌تو‌اکشن و جستجو) را داخل آن بگذارید. این کانتینر باید ریشه‌ای باشد تا sticky روی کل هدر اعمال شود.
۲. کانتینر اصلی هدر را انتخاب کنید
روی کانتینر کلیک کنید (اگر مطمئن نیستید، روی یک عنصر داخل هدر کلیک کنید و سپس از نوار بالا روی “ویرایش کانتینر” بزنید). این کار مطمئن می‌کند تنظیم sticky روی کل هدر تأثیر بگذارد، نه فقط یک بخش کوچک.
۳. به تب پیشرفته (Advanced) بروید
در پنل سمت چپ المنتور، تب “پیشرفته” را باز کنید. این تب شامل تنظیمات پدینگ، حاشیه، CSS سفارشی، موقعیت و افکت‌های حرکتی است. اگر پنل باز نمی‌شود، صفحه را رفرش کنید.
۴. بخش موشن افکت (Motion Effects) را پیدا کنید
کمی پایین‌تر اسکرول کنید تا به بخش “موشن افکت” برسید. اگر المنتور نسخه قدیمی دارید، ممکن است نیاز به آپدیت باشد. این بخش شامل گزینه‌هایی مثل اسکرول افکت، انیمیشن ورود و sticky است.
۵. گزینه شناور (Sticky) را فعال کنید
روی “شناور” کلیک کنید و مقدار پیش‌فرض “هیچ” را به “بالا” تغییر دهید. این کار هدر را به بالای صفحه می‌چسباند. بلافاصله پیش‌نمایش را چک کنید — با اسکرول، هدر باید ثابت بماند.
۶. تنظیمات پیشرفته برای سفارشی‌سازی بیشتر (اختیاری)
دستگاه‌های خاص: در همان بخش، می‌توانید sticky را فقط برای دسکتاپ، تبلت یا موبایل فعال کنید (مثلاً روی موبایل غیرفعال کنید تا فضا اشغال نشود).
فاصله افست (Offset): اگر نوار اعلان یا باری بالای هدر دارید، مقدار پیکسل (مثل ۶۰px) وارد کنید تا هدر از آن فاصله بچسبد.
افکت‌های اسکرول: اگر می‌خواهید هدر با اسکرول کوچک‌تر شود یا شفافیتش تغییر کند، از بخش “افکت‌های اسکرول” استفاده کنید (مثل Scale یا Fade).
Z-Index: در بخش موقعیت (Position)، z-index را روی ۱۰۰۰ بگذارید تا هدر همیشه روی بقیه عناصر بماند (مثل مودال‌ها یا پاپ‌آپ‌ها).
انیمیشن چسبیدن: برای نرم‌تر شدن، از “انیمیشن‌های ورود” در تب سبک استفاده کنید (مثل Ease-in برای ۰.۳ ثانیه).
تست با ابزارهای توسعه‌دهنده: F12 را بزنید و در تب Elements چک کنید که position: sticky; درست اعمال شده باشد.
۷. ذخیره تغییرات و تست نهایی
روی “به‌روزرسانی” کلیک کنید و صفحه را رفرش کنید. حالا سایت را در حالت دسکتاپ و موبایل اسکرول کنید — هدر باید همیشه در بالا بماند. اگر مشکل داشت، کش المنتور را از تنظیمات → ابزارها خالی کنید.
مشکلات رایج و حل سریع آن‌ها
هدر ناپدید می‌شود: کانتینر اشتباه انتخاب شده — مطمئن شوید کانتینر اصلی است.
تداخل با منو: z-index منو را کمتر از هدر کنید.
کندی روی موبایل: تعداد المنت‌های هدر را کم کنید یا از “Lazy Load” المنتور استفاده کنید.
سازگاری با تم: اگر تم مثل Astra یا GeneratePress استفاده می‌کنید، بخش header تم را غیرفعال کنید.
مشکل با پلاگین‌های دیگر: اگر با WooCommerce یا RankMath تداخل داشت، priority المنتور را در تنظیمات افزایش دهید.
هدر شفاف نمی‌شود: اگر گلسمورفیسم استفاده می‌کنید، backdrop-filter را چک کنید.
مزایای sticky header در ۲۰۲۵
افزایش ۳۰-۵۰% نرخ کلیک روی منو (بر اساس آمار Google Analytics)
بهبود سئو با کاهش نرخ پرش
سازگاری با طراحی موبایل-فرست (Mobile-First)
حس حرفه‌ای‌تر به سایت (مخصوصاً برای فروشگاه‌ها و بلاگ‌ها)