هدر و فوتر نخستین و آخرین بخشهایی هستند که تقریباً در تمام صفحات سایت دیده میشوند. هدر باید کاربر را سریع به مقصد برساند و فوتر باید مسیرهای تکمیلی، اطلاعات تماس و نشانههای اعتماد را در اختیار او بگذارد. در این راهنما، طراحی هدر و فوتر با المنتور را از ساخت قالب تا تنظیم نمایش، واکنشگرایی، سرعت و عیبیابی بررسی میکنیم؛ بهگونهای که نتیجه فقط زیبا نباشد، بلکه برای تجربه کاربری، سئو و تبدیل بازدیدکننده نیز مفید عمل کند.
برای طراحی هدر و فوتر با المنتور به چه چیزی نیاز داریم؟
در Elementor Pro ابزار Theme Builder بهصورت داخلی وجود دارد و میتوان قالب Header و Footer را بدون ویرایش فایلهای قالب ساخت. در نسخه رایگان، ویجتهای لازم برای منوی پویا و تعیین شرط نمایش کامل در دسترس نیستند؛ بنابراین باید از قابلیت قالب فعال یا یک افزونه جانبی معتبر استفاده کنید. اگر سایت تجاری است، استفاده از Elementor Pro معمولاً انتخاب کمریسکتری است؛ زیرا تعداد افزونهها، احتمال ناسازگاری و بار اضافی سایت را کاهش میدهد.
پیش از شروع، لوگو، ساختار منو، شماره تماس، CTA اصلی و لینک شبکههای اجتماعی را مشخص کنید. طراحی بدون معماری اطلاعات معمولاً به هدر شلوغی منجر میشود که در دسکتاپ جذاب اما در موبایل ناکارآمد است.
ساخت هدر در Theme Builder المنتور
۱. ایجاد قالب Header
از پیشخوان وردپرس به Templates → Theme Builder بروید، بخش Header را انتخاب و یک قالب جدید بسازید. میتوانید از طرحهای آماده شروع کنید، اما برای هماهنگی با هویت بصری برند بهتر است ساختار را از یک کانتینر خالی ایجاد کنید. کانتینر اصلی را تمامعرض بگذارید و محتوای داخلی را با Max Width کنترل کنید تا هدر در نمایشگرهای بزرگ بیش از حد کشیده نشود.
۲. چیدمان عناصر اصلی
یک هدر استاندارد فارسی معمولاً سه بخش دارد: لوگو در سمت راست، منوی اصلی در مرکز و دکمه اقدام یا ابزارهای کاربردی در سمت چپ. برای فروشگاه میتوان جستوجو، حساب کاربری و سبد خرید را نیز اضافه کرد. تعداد گزینههای سطح اول منو را محدود نگه دارید؛ اگر خدمات متنوعاند، از منوی کشویی دستهبندیشده استفاده کنید.
- لوگو را با ویجت Site Logo قرار دهید تا از تنظیمات هویت سایت خوانده شود.
- برای منو از WordPress Menu یا ویجت منوی Elementor استفاده کنید.
- CTA را با متن روشن مانند «درخواست مشاوره» یا «مشاهده تعرفهها» بسازید.
- ارتفاع هدر دسکتاپ را معمولاً بین ۷۲ تا ۹۶ پیکسل نگه دارید.
- برای کنترل منظم فاصلهها از Gap و Padding کانتینر استفاده کنید، نه مارجینهای پراکنده.
۳. تنظیم هدر چسبان بدون ایجاد مزاحمت
هدر Sticky دسترسی به منو و CTA را آسان میکند، اما اگر بلند باشد بخشی از صفحه موبایل را میپوشاند. در تب Advanced و بخش Motion Effects، حالت Sticky Top را فعال کنید. سپس برای حالت اسکرول یک کلاس CSS در نظر بگیرید تا ارتفاع، سایه یا شفافیت پسزمینه تغییر کند. بهتر است هدر چسبان موبایل از نسخه دسکتاپ کوتاهتر باشد و فقط لوگو، آیکون منو و اقدام ضروری را نمایش دهد.
طراحی فوتر حرفهای با المنتور
در Theme Builder بخش Footer را باز و قالب جدیدی ایجاد کنید. فوتر خوب انبار لینک نیست؛ ادامه منطقی مسیر کاربر است. کسی که به انتهای صفحه میرسد ممکن است به اطلاعات تماس، خدمات مرتبط، نمونهکار، شرایط همکاری یا پاسخ یک سؤال اعتمادساز نیاز داشته باشد.
ساختار پیشنهادی فوتر
برای بیشتر سایتهای شرکتی، یک ساختار سه یا چهارستونه کافی است. ستون معرفی کوتاه برند، ستون خدمات مهم، ستون دسترسی سریع و ستون تماس را در نظر بگیرید. در ردیف پایین میتوان کپیرایت، حریم خصوصی و شبکههای اجتماعی را قرار داد. برای حفظ دسترسیپذیری، لینکها باید کنتراست مناسب و حالت Hover مشخص داشته باشند.
| بخش | محتوای پیشنهادی | هدف |
|---|---|---|
| معرفی برند | لوگو و توضیح یک یا دو جملهای | یادآوری ارزش پیشنهادی |
| خدمات | ۳ تا ۶ خدمت اصلی | هدایت به صفحات تجاری |
| دسترسی سریع | درباره ما، نمونهکار، بلاگ و تماس | کاهش بنبست ناوبری |
| تماس | تلفن، ایمیل، ساعات پاسخگویی | افزایش اعتماد و سرنخ |
| ردیف پایانی | کپیرایت و قوانین | شفافیت حقوقی |
سال کپیرایت پویا و دادههای داینامیک
بهجای واردکردن دستی سال، از Dynamic Tags و تاریخ جاری استفاده کنید تا فوتر هر سال نیازمند ویرایش نباشد. عنوان سایت، لوگو و اطلاعاتی که ممکن است تغییر کنند نیز بهتر است از تنظیمات مرکزی خوانده شوند. این رویکرد نگهداری سایت را سادهتر میکند و احتمال نمایش اطلاعات متفاوت در صفحات گوناگون را کاهش میدهد.
شرط نمایش هدر و فوتر در Elementor
پس از انتشار قالب، پنجره Display Conditions باز میشود. شرط Entire Site هدر یا فوتر را در کل سایت نمایش میدهد. میتوانید با Include و Exclude ساختارهای متفاوتی بسازید؛ برای مثال هدر ساده برای لندینگپیج، هدر فروشگاهی برای محصولات یا فوتر ویژه برای یک کمپین.
ترتیب شرطها مهم است. اگر دو قالب برای یک صفحه شرط معتبر داشته باشند، ممکن است قالبی خلاف انتظار نمایش داده شود. نام قالبها را واضح انتخاب کنید؛ مانند «Header – Global» و «Header – Landing – Minimal». سپس شرایط را مستند کنید تا در آینده و با افزایش قالبها، عیبیابی دشوار نشود.
طراحی واکنشگرا برای موبایل و تبلت
کوچککردن نسخه دسکتاپ، طراحی موبایل محسوب نمیشود. در موبایل اولویتها تغییر میکنند: لوگو، منوی همبرگری و یک اقدام اصلی کافی است. عناصر تزئینی، متن طولانی، شماره تماس کامل یا دکمههای متعدد را حذف یا ساده کنید.
- نقاط شکست را براساس محتوای واقعی تنظیم کنید، نه فقط نام دستگاه.
- سطح لمس دکمهها و آیکونها را حداقل حدود ۴۴ پیکسل در نظر بگیرید.
- منوی بازشونده را روی گوشی واقعی آزمایش کنید.
- از اسکرول افقی ناشی از عرض ثابت، Offset یا Padding زیاد جلوگیری کنید.
- برای لوگو عرض مناسب تعیین کنید تا باعث جابهجایی چیدمان نشود.
- در فوتر موبایل، ستونها را آکاردئونی یا به ترتیب اهمیت زیر هم قرار دهید.
برای تصمیمهای گستردهتر درباره مسیر کاربر، مقاله بهبود تجربه کاربری سایت میتواند مکمل این بخش باشد.
بهینهسازی سرعت هدر و فوتر المنتور
هدر و فوتر در همه صفحات بارگذاری میشوند؛ بنابراین هر تصویر، فونت، اسکریپت یا ویجت اضافی در آنها اثر سراسری دارد. از لوگوی SVG امن یا تصویر سبک با ابعاد واقعی استفاده کنید. شبکههای اجتماعی را با آیکون نمایش دهید و از انیمیشنهای سنگین، اسلایدر و افکتهای غیرضروری دوری کنید.
فونتهای متعدد و وزنهای زیاد نیز هزینه دارند. دو یا سه وزن موردنیاز را نگه دارید و در صورت امکان فونت را محلی بارگذاری کنید. اگر لوگو یا آیکون تصویری استفاده میشود، نکات مقاله بهینهسازی تصاویر وردپرس را اجرا کنید. همچنین نتایج را با معیارهای توضیحدادهشده در راهنمای Core Web Vitals وردپرس بسنجید.
ارتباط هدر با CLS و LCP
اگر ارتفاع هدر از ابتدا مشخص نباشد یا فونت و لوگو دیر بارگذاری شوند، عناصر صفحه جابهجا شده و CLS افزایش مییابد. برای لوگو Width و Height مناسب تعریف کنید، ارتفاع کانتینر را پایدار نگه دارید و از نمایش دیرهنگام نوارهای اعلان بدون رزرو فضا خودداری کنید. معمولاً هدر نباید عنصر LCP صفحه باشد؛ اما تصویر یا انیمیشن بزرگ در آن میتواند مسیر رندر را سنگین کند.
نکات سئو و دسترسیپذیری
هدر باید فقط یک ساختار ناوبری روشن داشته باشد. لینکدادن افراطی از همه صفحات به دهها مقصد، ارزش منو را کاهش میدهد. صفحات خدمات اصلی، دستههای مهم و مسیر تماس را در اولویت بگذارید. منوی موبایل و دسکتاپ نیز بهتر است از نظر مقاصد کلیدی هماهنگ باشند.
- برای لوگوی لینکشده، متن جایگزین معنادار ثبت کنید.
- ترتیب فوکوس کیبورد را بررسی کنید و حالت Focus را حذف نکنید.
- برای آیکونهای بدون متن، برچسب قابلفهم در نظر بگیرید.
- رنگ متن و پسزمینه را با کنتراست کافی انتخاب کنید.
- در فوتر از انکرتکستهای طبیعی و دقیق استفاده کنید.
- شماره تماس و آدرس را بهصورت متن واقعی نمایش دهید، نه داخل تصویر.
خطاهای رایج و راهحل آنها
هدر یا فوتر نمایش داده نمیشود
ابتدا Display Conditions را بررسی کنید و مطمئن شوید قالب روی Entire Site یا مقصد درست فعال است. سپس کش Elementor و افزونه کش را پاک کنید. ناسازگاری قالب، وجود هدر اختصاصی در تنظیمات برگه و تداخل چند قالب Theme Builder نیز از علتهای رایجاند.
دو هدر همزمان دیده میشود
این مشکل معمولاً زمانی رخ میدهد که هدر قالب وردپرس همچنان فعال است و هدر Elementor نیز نمایش داده میشود. تنظیمات قالب یا Layout برگه را بررسی کنید. استفاده بیدلیل از Elementor Canvas راهحل عمومی مناسبی نیست، زیرا فوتر و سایر اجزای قالب را نیز حذف میکند.
منوی موبایل باز نمیشود
خطاهای JavaScript، بهینهسازی تهاجمی فایلها، Z-index نادرست یا قرارگرفتن منو پشت Overlay را بررسی کنید. ادغام و تأخیر اسکریپتها را موقتاً خاموش و دوباره آزمایش کنید. اگر مشکل رفع شد، فایل Elementor را از تنظیمات Delay یا Defer افزونه سرعت مستثنا کنید.
هدر چسبان روی محتوا میافتد
برای هدر ثابت باید فاصله بالای محتوای صفحه متناسب با ارتفاع واقعی هدر باشد. اگر ارتفاع در موبایل و دسکتاپ متفاوت است، مقدار فاصله را واکنشگرا تنظیم کنید. استفاده از Sticky بهجای Fixed در بسیاری از سناریوها مدیریت سادهتری دارد.
چکلیست نهایی قبل از انتشار
- لوگو به صفحه اصلی لینک است و ابعاد مشخص دارد.
- منو فقط مسیرهای اصلی را نمایش میدهد.
- CTA هدر واضح و قابلاندازهگیری است.
- شرایط نمایش قالبها تداخل ندارند.
- نسخه موبایل روی چند عرض واقعی آزمایش شده است.
- منو با لمس، کیبورد و دکمه بازگشت درست کار میکند.
- فوتر اطلاعات تماس و لینکهای ضروری را دارد.
- هیچ لینک شکسته یا متن قدیمی در فوتر نیست.
- کشها پس از تغییر پاک و صفحه در حالت ناشناس بررسی شده است.
- CLS، زمان بارگذاری و کنتراست عناصر کنترل شدهاند.
مثال یک ساختار مناسب برای سایت خدماتی
فرض کنید یک شرکت سه خدمت اصلی دارد. در دسکتاپ، لوگو در راست، لینکهای «خدمات»، «نمونهکارها»، «بلاگ» و «درباره ما» در مرکز و دکمه «درخواست مشاوره» در چپ قرار میگیرد. در موبایل فقط لوگو، منوی همبرگری و آیکون تماس باقی میماند. فوتر نیز معرفی کوتاه، لینک سه خدمت، اطلاعات تماس و مسیرهای قانونی را نشان میدهد. این ساختار کاربر را با گزینههای زیاد سردرگم نمیکند و CTA را در دسترس نگه میدارد.
اگر هنوز معماری کلی سایت مشخص نیست، ابتدا راهنمای طراحی سایت شرکتی حرفهای را ببینید. برای آشنایی با فرایند کاملتر نیز مقاله آموزش طراحی سایت با وردپرس مفید است.
سؤالات متداول
آیا با نسخه رایگان Elementor میتوان هدر و فوتر ساخت؟
بهصورت داخلی و کامل خیر. میتوان از امکانات قالب یا افزونه جانبی استفاده کرد، اما Theme Builder و ابزارهای پویا در Elementor Pro روند یکپارچهتری ارائه میدهند.
چرا هدر المنتور در بعضی صفحات نمایش داده نمیشود؟
رایجترین علت، شرط نمایش اشتباه، قالب صفحه Canvas، تداخل با هدر قالب یا کش قدیمی است. شرایط قالب و تنظیمات Layout همان صفحه را بررسی کنید.
ارتفاع مناسب هدر چقدر است؟
عدد ثابت برای همه سایتها وجود ندارد، اما حدود ۷۲ تا ۹۶ پیکسل در دسکتاپ و ۵۶ تا ۷۲ پیکسل در موبایل معمولاً نقطه شروع مناسبی است.
آیا هدر چسبان برای سئو مفید است؟
اثر مستقیم رتبهبندی ندارد، اما اگر ناوبری را آسان کند میتواند تجربه کاربری را بهتر کند. هدر چسبان بلند یا سنگین نتیجه معکوس دارد.
چطور فوتر متفاوت برای یک لندینگ پیج بسازیم؟
یک قالب Footer جداگانه بسازید و در Display Conditions همان برگه را Include کنید. سپس آن برگه را از شرط فوتر عمومی Exclude کنید تا تداخل رخ ندهد.
جمعبندی
طراحی هدر و فوتر با المنتور زمانی موفق است که معماری اطلاعات، واکنشگرایی، سرعت و شرایط نمایش همزمان مدیریت شوند. هدر باید کوتاهترین مسیر را به مقصدهای اصلی بسازد و فوتر باید بدون شلوغی، اطلاعات تکمیلی و اعتماد لازم را ارائه دهد. اگر برای طراحی ساختار اختصاصی، رفع تداخل قالبها یا بهینهسازی نسخه موبایل نیاز به کمک دارید، از صفحه خدمات تکوبیت دیدن کنید یا برای بررسی سایت از طریق تماس با تکوبیت پیام بفرستید.