هدر (Header) اولین بخشی است که کاربران پس از ورود به سایت شما میبینند. یک هدر حرفهای میتواند برند شما را معرفی کند، مسیر ناوبری را سادهتر سازد و نرخ ماندگاری کاربر را افزایش دهد.
در این آموزش از المنتور پرو (Elementor Pro) استفاده میکنیم تا بدون نیاز به کدنویسی، یک هدر واکنشگرا و شیک بسازیم.
برای ساخت هدر در المنتور باید از بخش Theme Builder استفاده کنید.
وارد پیشخوان وردپرس شوید.
از منوی سمت راست به مسیر زیر بروید:
المنتور → قالبساز (Theme Builder)
روی گزینهی Header (هدر) کلیک کنید.
سپس دکمهی Add New Header (افزودن هدر جدید) را بزنید.
💡 نکته: برای دسترسی به این بخش باید نسخهی پروی المنتور را نصب داشته باشید.
بعد از کلیک روی “Add New Header”، المنتور چندین قالب آماده برای هدر نمایش میدهد.
در این مرحله دو گزینه دارید:
استفاده از قالبهای آماده (سریع و ساده)
طراحی از صفر (اختصاصی و قابل شخصیسازی کامل)
برای طراحی اختصاصی:
روی آیکون + کلیک کنید.
یک ساختار سهستونه انتخاب کنید (لوگو / منو / دکمه).
در حال حاضر سه ستون دارید. حالا محتوای هر ستون را پر کنید:
در ستون سمت چپ، از ابزارکها Site Logo را بکشید و رها کنید.
در ستون وسط، ابزارک Nav Menu (منوی ناوبری) را اضافه کنید.
در ستون سمت راست، ابزارک Button (دکمه) را قرار دهید و متن آن را مثلاً “تماس با ما” یا “شروع کنید” بگذارید.
المنتور امکانات بسیار قدرتمندی برای استایلدهی دارد:
تغییر رنگ پسزمینه هدر: در تب Style → Background → Color
افزودن سایه زیر هدر: Box Shadow
تنظیم فاصله و حاشیهها (Padding / Margin) برای مرتبسازی بخشها
تغییر فونت منو: از تب Typography در تنظیمات Nav Menu
💡 نکته سئو: در منوی هدر فقط صفحات مهم (خانه، خدمات، وبلاگ، تماس) را بگذارید تا گوگل ساختار سایت را بهتر درک کند.
امروزه بیش از ۷۰٪ کاربران با موبایل وارد سایت میشوند، پس هدر باید کاملاً واکنشگرا (Responsive) باشد.
برای تست در المنتور:
از پایین صفحه روی آیکون Responsive Mode کلیک کنید.
بین حالتهای Desktop / Tablet / Mobile جابهجا شوید.
در حالت موبایل، منو را به صورت Hamburger Menu (منوی همبرگری) تنظیم کنید.
فونتها و اندازهی دکمه را برای موبایل تنظیم کنید تا راحت کلیک شود.
اگر میخواهید هنگام اسکرول، هدر همیشه بالای صفحه باقی بماند، مراحل زیر را دنبال کنید:
روی بخش هدر کلیک کنید تا تنظیمات آن باز شود.
از تب Advanced → بخش Motion Effects گزینهی Sticky → Top را فعال کنید.
گزینهی “On Scroll Up” را نیز میتوانید فعال کنید تا فقط هنگام بالا رفتن صفحه نمایش داده شود.
در آخرین مرحله باید مشخص کنید هدر کجا نمایش داده شود.
روی فلش کنار دکمهی Publish کلیک کنید.
گزینهی Display Conditions را بزنید.
اگر میخواهید در کل سایت نمایش داده شود، گزینهی Entire Site را انتخاب کنید.
سپس روی Save & Close بزنید.
🔹 از رنگهایی استفاده کنید که با لوگو و برند شما هماهنگ باشند.
🔹 ارتفاع هدر را کم بگیرید تا محتوای اصلی سریعتر در دید کاربر قرار گیرد.
🔹 از فونت خوانا و ساده استفاده کنید.
🔹 آیکونهای شبکههای اجتماعی را در گوشهی هدر قرار دهید.
🔹 برای نسخهی موبایل حتماً لوگو و دکمه را در مرکز قرار دهید.
با انجام این مراحل، شما توانستید یک هدر حرفهای، واکنشگرا و جذاب برای وبسایت وردپرسی خود بسازید — بدون حتی یک خط کدنویسی.
المنتور با رابط کاربری ساده و امکانات زیادش، بهترین ابزار برای طراحان تازهکار و حرفهای است.
پیشنهاد سایتکده Sitekadeh:اگر اولین بار است با المنتور کار میکنید، پیشنهاد میکنیم ابتدا از قالبهای آماده استفاده کنید، سپس کمکم رنگها، فونتها و منوها را شخصیسازی کنید تا تسلط کامل به طراحی پیدا کنید.
