چگونه با المنتور هدر بسازیم؟
ساخت هدر اختصاصی و حرفه ای یکی از اولین و مهم ترین دغدغه های طراحان وب پس از نصب وردپرس و صفحه ساز المنتور است. هدر یا سربرگ سایت، ویترین اصلی وب سایت شماست که نقش حیاتی در تجربه کاربری و مسیریابی بازدیدکنندگان دارد. برای ساخت هدر با المنتور، شما دو راهکار اصلی پیش رو دارید: استفاده از قابلیت Theme Builder در المنتور پرو که روش استاندارد و قدرتمند است، و یا استفاده از افزونه های جانبی در المنتور رایگان. در این مقاله آموزشی از المنتور ایران، هر دو روش را به صورت کاملاً فنی، دقیق و مرحله به مرحله بررسی می کنیم تا بتوانید یک هدر ریسپانسیو، چسبان و بهینه برای سئو طراحی کنید.
اگر به دنبال این هستید که بدانید چگونه می توانید هدر پیش فرض قالب وردپرس خود را حذف کرده و یک طراحی کاملاً سفارشی با ویجت های المنتور جایگزین کنید، این راهنما تمام نیازهای شما را پوشش می دهد. ما در این آموزش از اصطلاحات تخصصی مانند Theme Builder، Canvas Template و Display Conditions استفاده خواهیم کرد تا شما را با محیط کاری المنتور حرفه ای آشنا سازیم.
پیش نیازهای ساخت هدر در المنتور
قبل از شروع طراحی، باید مطمئن شوید که محیط کاری شما برای ساخت یک هدر ساز آماده است. بسته به اینکه از نسخه رایگان یا پرو استفاده می کنید، پیش نیازها متفاوت است:
- نسخه المنتور پرو: اگر قصد خرید المنتور پرو را دارید یا لایسنس آن را فعال کرده اید، شما به صورت پیش فرض به بخش Theme Builder دسترسی دارید و نیازی به افزونه اضافی نیست.
- نسخه المنتور رایگان: اگر از دانلود رایگان المنتور استفاده می کنید، باید یک افزونه مکمل مانند Header Footer Elementor یا ElementsKit را نصب و فعال کنید تا امکان ساخت هدر و فوتر فراهم شود.
- قالب وردپرس سازگار: اکثر قالب های مدرن با المنتور سازگار هستند، اما برای بهترین نتیجه پیشنهاد می شود از قالب Hello Elementor استفاده کنید تا تداخل کدهای قالب با طراحی شما به حداقل برسد.
روش اول: ساخت هدر با المنتور پرو (Theme Builder)
حرفه ای ترین روش برای ساخت هدر، استفاده از ماژول Theme Builder در المنتور پرو است. این قابلیت به شما اجازه می دهد تا کنترل کاملی بر تمام بخش های قالب داشته باشید. در این روش، ما یک قالب هدر می سازیم و به المنتور می گوییم که این قالب را در تمام صفحات سایت نمایش دهد.
گام اول: ورود به بخش Theme Builder
وارد پیشخوان وردپرس شوید. از منوی سمت راست، روی گزینه المنتور و سپس Theme Builder کلیک کنید. در صفحه باز شده، بخش Header را پیدا کرده و روی دکمه Add New یا افزودن جدید در قسمت هدر کلیک کنید.
گام دوم: انتخاب قالب پایه (Block)
پس از کلیک روی افزودن جدید، کتابخانه قالب های المنتور باز می شود. در اینجا می توانید یکی از قالب های آماده هدر را انتخاب کنید یا برای شروع از صفر، روی دکمه X در گوشه بالا کلیک کنید تا یک صفحه سفید باز شود. پیشنهاد ما برای یک طراح المنتور حرفه ای این است که طراحی را از یک بلوک خالی شروع کنید تا ساختار کدها تمیزتر باشد.
گام سوم: تنظیمات صفحه و انتخاب قالب Canvas
این مهم ترین بخش فنی کار است. قبل از شروع طراحی، باید به تنظیمات صفحه بروید. روی آیکون چرخ دنده (تنظیمات صفحه) در گوشه پایین سمت چپ پنل المنتور کلیک کنید. در قسمت Page Layout، گزینه را روی Elementor Canvas قرار دهید.
چرا قالب Canvas؟ انتخاب این قالب باعث می شود که هدر، فوتر و سایدبار پیش فرض قالب وردپرس شما حذف شود. اگر این کار را نکنید، شما دو هدر روی سایت خواهید داشت: یکی هدر قالب و یکی هدر طراحی شده شما. بنابراین برای جایگزینی کامل، حتماً از قالب Canvas استفاده کنید.
گام چهارم: طراحی ساختار هدر
اکنون وارد محیط ویرایشگر می شوید. برای ساخت یک هدر استاندارد، معمولاً به یک سکشن (Section) با یک ستون یا دو ستون نیاز دارید.
ویجت های ضروری برای هدر عبارتند از:
- Site Logo: برای نمایش لوگوی سایت که به صورت داینامیک از تنظیمات سفارشی سازی وردپرس خوانده می شود.
- Nav Menu: برای نمایش منوی اصلی سایت. شما می توانید منوی ساخته شده در بخش نمایش > فهرست ها وردپرس را اینجا فراخوانی کنید.
- Site Title: برای نمایش عنوان سایت (اختیاری).
- Button / Icon: برای دکمه های تماس، سبد خرید ووکامرس یا آیکون جستجو.
نکته مهم در طراحی المنتور پرو، توجه به حالت موبایل است. حتماً ویجت Nav Menu را طوری تنظیم کنید که در موبایل به صورت همبرگری (Hamburger) نمایش داده شود. در تب استایل ویجت منو، می توانید رنگ و آیکون منوی موبایل را شخصی سازی کنید.
گام پنجم: تنظیمات چسبان (Sticky Header)
یکی از ویژگی های جذاب المنتور حرفه ای، قابلیت Sticky است. برای اینکه هدر شما هنگام اسکرول کردن کاربر در بالای صفحه ثابت بماند:
- روی آیکون شش نقطه (Handle) سکشن هدر کلیک کنید.
- به تب پیشرفته (Advanced) بروید.
- گزینه Motion Effects را پیدا کنید.
- گزینه Sticky را روی Top قرار دهید.
- در بخش Offset می توانید تعیین کنید که هدر پس از چند پیکسل اسکرول، چسبان شود.
- گزینه Effects Offset و Stay in column را بررسی کنید تا رفتار هدر را دقیق تنظیم نمایید.
گام ششم: انتشار و تنظیمات شرط نمایش (Conditions)
پس از اتمام طراحی، دکمه انتشار را بزنید. پنجره ای باز می شود که از شما می پرسد این هدر کجا نمایش داده شود. روی دکمه Add Condition کلیک کنید. برای اینکه هدر در کل سایت نمایش داده شود، شرط را روی Entire Site قرار دهید و سپس Save and Close را بزنید. اکنون هدر جدید شما جایگزین هدر قبلی شده است.
روش دوم: ساخت هدر با المنتور رایگان
اگر هنوز اقدام به خرید المنتور پرو نکرده اید و از المنتور رایگان استفاده می کنید، نگران نباشید. شما همچنان می توانید هدر بسازید، اما نیاز به یک پل ارتباطی بین المنتور و قالب دارید. بهترین و سبک ترین افزونه برای این کار Header Footer Elementor است.
مراحل کار با افزونه Header Footer Elementor
- نصب افزونه: افزونه Header Footer Elementor را از مخزن وردپرس جستجو، نصب و فعال کنید.
- ایجاد قالب جدید: به منوی Appearance > Header Footer & Blocks بروید و روی Add New کلیک کنید.
- تنظیمات اولیه:
- عنوان را Main Header بگذارید.
- در بخش Type of Template، گزینه Header را انتخاب کنید.
- در بخش Display On، گزینه Entire Website را انتخاب کنید تا هدر در همه صفحات فعال شود.
- در بخش User Roles، گزینه All را انتخاب کنید.
- طراحی با المنتور: روی دکمه Edit with Elementor کلیک کنید. اکنون وارد محیط ویرایشگر می شوید و می توانید مانند نسخه پرو، از ویجت ها برای ساخت هدر استفاده کنید.
- نکته مهم: در این روش، چون به Theme Builder دسترسی ندارید، ممکن است لازم باشد برای حذف هدر پیش فرض قالب، از تنظیمات خود قالب وردپرس استفاده کنید یا کدهای CSS سفارشی برای مخفی کردن هدر قبلی بنویسید.
مقایسه روش ساخت هدر در پرو و رایگان
برای درک بهتر تفاوت ها و انتخاب روش مناسب بر اساس قیمت المنتور پرو و بودجه شما، جدول زیر را بررسی کنید:
| ویژگی | المنتور پرو (Theme Builder) | المنتور رایگان (با افزونه جانبی) |
| نیاز به افزونه اضافی | خیر (داخلی) | بله (مانند HFE) |
| قابلیت Sticky (چسبان) | دارد (با تنظیمات Motion Effects) | معمولاً نیاز به کد یا تنظیمات افزونه دارد |
| مدیریت شرط نمایش (Conditions) | بسیار پیشرفته و دقیق | محدود به تنظیمات پایه افزونه |
| حذف هدر پیش فرض قالب | با انتخاب قالب Canvas | نیاز به تنظیمات قالب یا CSS |
| ویجت های اختصاصی هدر | Site Logo, Site Title, Nav Menu | محدود به ویجت های عمومی |
نکات طلایی برای طراحی هدر حرفه ای و سئو
صرفاً ساختن هدر کافی نیست؛ یک طراح وب باید به نکات فنی و سئو نیز توجه کند. در ادامه به موارد حیاتی اشاره می کنیم:
1. بهینه سازی منوی موبایل
بیش از 70 درصد ترافیک سایت ها از طریق موبایل است. در تنظیمات ویجت Nav Menu، حتماً تب Mobile Hamburger را چک کنید. آیکون همبرگر باید به اندازه کافی بزرگ و در دسترس باشد. همچنین رنگ پس زمینه منوی کشویی در موبایل باید کنتراست لازم را با متن داشته باشد.
2. استفاده از تگ های معنایی (Semantic Tags)
برای سئو، ساختار HTML هدر اهمیت دارد. سکشن اصلی هدر خود را در تنظیمات پیشرفته، تگ HTML را روی Header قرار دهید. ویجت منو را نیز روی تگ Nav تنظیم کنید. این کار به گوگل کمک می کند تا ساختار سایت شما را بهتر درک کند.
3. مدیریت افکت های حرکتی
استفاده از افکت های المنتور حرفه ای مانند Fade In یا Slide Down برای نمایش هدر می تواند جذاب باشد، اما زیاده روی در آن باعث کندی سایت می شود. اگر از قابلیت Sticky استفاده می کنید، تنظیمات Effects Offset را طوری قرار دهید که هدر با کوچکترین اسکرول تغییر حالت ندهد تا کاربر اذیت نشود.
4. دسترسی پذیری (Accessibility)
مطمئن شوید که لینک های منو با کیبورد قابل انتخاب هستند و فوکوس مناسبی دارند. همچنین اگر از آیکون جستجو استفاده می کنید، حتماً متن جایگزین (Alt Text) یا برچسب ARIA برای آن در نظر بگیرید تا برای کاربران نابا هم قابل استفاده باشد.
عیب یابی مشکلات رایج هدر
گاهی اوقات پس از ساخت هدر، با مشکلاتی روبرو می شوید. در اینجا به رایج ترین آن ها و راه حلشان می پردازیم:
- هدر دو بار نمایش داده می شود: شما فراموش کرده اید که قالب صفحه را روی Elementor Canvas بگذارید یا هدر پیش فرض قالب در تنظیمات قالب فعال است.
- هدر در موبایل نمایش داده نمی شود: ممکن است در تنظیمات Condition، تیک نمایش در موبایل را برداشته باشید یا در تنظیمات Responsive المنتور، سکشن را برای موبایل مخفی کرده باشید.
- منوی موبایل کار نمی کند: مطمئن شوید که افزونه های کش یا بهینه سازی، اسکریپت های جاوا اسکریپت المنتور را دیفر (Defer) نکرده باشند. همچنین تداخل با سایر افزونه های منو را بررسی کنید.
- هدر روی محتوا می افتد: این مشکل معمولاً به دلیل استفاده از پوزیشن Absolute یا Fixed در CSS سکشن رخ می دهد. در المنتور پرو، قابلیت Sticky این مشکل را به صورت خودکار حل می کند.
سوالات متداول
آیا می توان بدون خرید المنتور پرو هدر ساخت؟
بله، با استفاده از المنتور رایگان و نصب افزونه های جانبی مانند Header Footer Elementor یا ElementsKit می توانید هدر بسازید، اما امکاناتی مانند Sticky پیشرفته و ویجت های اختصاصی Theme Builder را نخواهید داشت.
چرا هدر من در همه صفحات نمایش داده نمی شود؟
باید به بخش Display Conditions در Theme Builder بروید و مطمئن شوید که شرط نمایش روی Entire Site تنظیم شده باشد. اگر شرط خاصی گذاشته باشید، فقط در همان صفحات نمایش داده می شود.
بهترین افزونه برای ساخت هدر در المنتور رایگان چیست؟
افزونه Header Footer Elementor (HFE) سبک ترین و سازگارترین گزینه است. اگر نیاز به مگامنو و امکانات بیشتر دارید، ElementsKit گزینه مناسب تری است.
چگونه هدر را در المنتور چسبان (Sticky) کنیم؟
در نسخه پرو، از تب Advanced > Motion Effects گزینه Sticky را روی Top بگذارید. در نسخه رایگان، معمولاً افزونه های هدر ساز این امکان را در تنظیمات خود دارند یا باید از کد CSS استفاده کنید.
آیا ساخت هدر با المنتور روی سرعت سایت تاثیر می گذارد؟
اگر از ویجت های سنگین استفاده نکنید و کدهای اضافی ننویسید، تاثیر محسوسی ندارد. اما استفاده بیش از حد از انیمیشن ها و تصاویر بهینه نشده در هدر می تواند سرعت لود اولیه را کاهش دهد.
نتیجه گیری
ساخت هدر با المنتور، چه از طریق Theme Builder در نسخه پرو و چه با افزونه های جانبی در نسخه رایگان، به شما قدرت مانور بالایی در طراحی ظاهر سایت می دهد. اگر یک طراح وب جدی هستید و قصد دارید پروژه های تجاری انجام دهید، خرید المنتور پرو به دلیل امکانات بی نظیر در مدیریت شرط نمایش و ویجت های داینامیک، یک سرمایه گذاری ضروری است. با این حال، برای شروع و یادگیری، دانلود رایگان المنتور به همراه افزونه های مکمل نیز کاملاً راهگشا خواهد بود.
فراموش نکنید که هدر اولین نقطه تعامل کاربر با برند شماست؛ بنابراین در طراحی آن، تعادل میان زیبایی بصری، کاربری آسان در موبایل و سرعت بارگذاری را حتماً رعایت کنید. با رعایت نکات گفته شده در این مقاله از المنتور ایران، شما قادر خواهید بود هدرهایی بسازید که هم از نظر فنی بی نقص باشند و هم تجربه کاربری فوق العاده ای را ارائه دهند.
