آموزش ویرایش و ساخت هدر سایت وردپرسی با المنتور
فهرست مطالب
هدر (Header) یا سربرگ سایت، یکی از مهمترین بخشهای هر وبسایت است که اولین نقطه تعامل کاربر با صفحه محسوب میشود. یک هدر حرفهای و استاندارد باعث بهبود تجربه کاربری (UX)، افزایش نرخ ماندگاری کاربر و بهینهسازی سئو (SEO) میشود. با استفاده از المنتور پرو (Elementor Pro)، میتوان یک هدر سفارشی و کاملاً واکنشگرا طراحی کرد که علاوه بر زیبایی، قابلیتهای پیشرفتهای را نیز ارائه دهد و در این مقاله به آموزش ویرایش و ساخت هدر سایت وردپرسی با المنتور می پردازیم.
در این مقاله، ساخت هدر سایت وردپرسی با المنتور را از ابتدا تا انتشار بررسی کرده و نکات کلیدی برای ساخت یک سربرگ حرفهای را توضیح خواهیم داد.
درمورد مقایسه سایت وردپرسی با کدنویسی بخوانید.
نصب و فعالسازی المنتور پرو
قبل از شروع، باید افزونه المنتور پرو را روی سایت وردپرسی خود نصب کنید. المنتور در دو نسخه رایگان و پرو عرضه میشود، اما برای طراحی هدر سفارشی نیاز به نسخه Pro دارید.
مراحل نصب المنتور پرو:
- از پیشخوان وردپرس، به بخش افزونهها > افزودن بروید.
- در نوار جستجو، عبارت Elementor را تایپ کرده و افزونه را نصب و فعال کنید.
- برای استفاده از ویژگیهای پیشرفته، نسخه المنتور پرو را دانلود کرده و از بخش افزونهها > بارگذاری افزونه، فایل ZIP آن را نصب کنید.
ساخت هدر سایت وردپرسی با المنتور
- در پیشخوان وردپرس، از منوی المنتور به بخش قالبها > افزودن جدید بروید.
- در صفحه باز شده، گزینه Header (سربرگ) را انتخاب کنید.
- نام دلخواهی برای قالب هدر خود انتخاب کرده و روی ایجاد قالب (Create Template) کلیک کنید.
- المنتور چندین قالب آماده هدر را نمایش میدهد که میتوانید از آنها استفاده کنید یا از صفر، طراحی خود را انجام دهید.
طراحی و سفارشیسازی هدر در المنتور
انتخاب ساختار (Layout) هدر
- از بخشبندی (Sections) در المنتور استفاده کنید و ساختار هدر را مشخص کنید.
- پیشنهاد میشود از سه ستون برای بخشهای زیر استفاده کنید:
- ستون اول: لوگو و برندینگ
- ستون دوم: منوی اصلی سایت
- ستون سوم: آیکونهای شبکههای اجتماعی و دکمه CTA (تماس، خرید، ورود و غیره)
افزودن عناصر اصلی هدر
پس از تعیین ساختار کلی، باید المانهای ضروری هدر را اضافه کنید:
اضافه کردن لوگو
- ویجت Site Logo را به قسمت مربوطه بکشید.
- اگر لوگوی سایت از قبل تنظیم نشده است، از سفارشیسازی وردپرس > هویت سایت، لوگوی خود را آپلود کنید.
- برای نمایش لوگوی داینامیک (که از تنظیمات وردپرس دریافت شود)، گزینه Site Logo را در تنظیمات ویجت فعال کنید.
افزودن منوی ناوبری (Navigation Menu)
- ویجت Nav Menu را به بخش میانی هدر اضافه کنید.
- از منوی کشویی، منوی ناوبری ایجادشده در وردپرس را انتخاب کنید.
- تنظیمات استایل، رنگها و افکتهای Hover را در بخش Style و Advanced انجام دهید.
افزودن فرم جستجو در هدر
- برای دسترسی سریع کاربران به محتوای سایت، ویجت Search Form را اضافه کنید.
- امکان تعیین نوع جستجو (جستجوی مقالات، محصولات، برگهها و غیره) در تنظیمات ویجت وجود دارد.
افزودن آیکونهای اجتماعی
- با استفاده از ویجت Social Icons، لینکهای شبکههای اجتماعی را در هدر قرار دهید.
- رنگ و اندازه آیکونها را متناسب با طراحی کلی وبسایت تنظیم کنید.
تنظیمات نمایش هدر در المنتور
اعمال شرایط نمایش (Display Conditions)
بعد از اتمام طراحی، برای اینکه هدر در صفحات مختلف سایت نمایش داده شود، باید شرایط نمایش (Display Conditions) را تعیین کنید:
- روی دکمه انتشار (Publish) کلیک کنید.
- در پنجره باز شده، روی Add Condition بزنید.
- گزینه Entire Site را انتخاب کنید تا هدر در تمام صفحات نمایش داده شود.
- در صورت نیاز، میتوانید تنظیم کنید که هدر فقط در صفحه اصلی، صفحات خاص یا فروشگاه نمایش داده شود.
افزودن قابلیتهای پیشرفته به هدر
طراحی هدر چسبان (Sticky Header)
هدر چسبان باعث میشود که هنگام اسکرول صفحه، سربرگ سایت در بالای صفحه باقی بماند. برای فعالسازی:
- به تب Advanced > Motion Effects بروید.
- گزینه Sticky را فعال کنید و مقدار آن را روی Top قرار دهید.
- مشخص کنید که هدر در چه دستگاههایی (موبایل، تبلت، دسکتاپ) چسبان باقی بماند.
ساخت هدر متحرک (Shrink on Scroll)
- برای کاهش ارتفاع هدر هنگام اسکرول، در تنظیمات Motion Effects، مقدار Effects Offset را تغییر دهید.
طراحی هدر شفاف (Transparent Header)
- برای نمایش هدر شفاف در صفحات فرود، پسزمینه هدر را Transparent تنظیم کنید.
- از CSS Custom Code برای کنترل شفافیت هنگام اسکرول استفاده کنید.
بهینهسازی سئو و سرعت هدر
یک هدر بهینهشده نه تنها زیبایی و کارایی سایت را افزایش میدهد، بلکه روی سئو سایت و سرعت بارگذاری نیز تأثیرگذار است. برای بهینهسازی:
- از تصاویر فشردهشده برای لوگو استفاده کنید.
- تعداد ویجتهای اضافه را کاهش دهید تا سرعت لود صفحه بهبود یابد.
- از Lazy Load برای بارگذاری تأخیری تصاویر و آیکونها استفاده کنید.
- از کدنویسی CSS و JavaScript سفارشی در المنتور برای کنترل افکتهای اضافی بهره ببرید.
نتیجهگیری
با استفاده از المنتور پرو، میتوان یک هدر کاملاً سفارشی، واکنشگرا و بهینه برای سایت وردپرسی طراحی کرد. رعایت نکات زیر در طراحی هدر، باعث بهبود عملکرد و تجربه کاربری خواهد شد:
✅ استفاده از ساختار مناسب (لوگو، منو، دکمه CTA)
✅ چسبان کردن هدر برای دسترسی سریع کاربران
✅ افزودن فرم جستجو و آیکونهای شبکههای اجتماعی
✅ بهینهسازی برای سرعت لود و سئو
💡 آیا شما تا به حال از المنتور برای طراحی هدر استفاده کردهاید؟ نظرات و تجربیات خود را در بخش دیدگاهها با ما به اشتراک بگذارید! 🚀
درمورد ویرایش فوتر با المنتور بخوانید.
