آموزش ساخت هدر با المنتور پرو با ویدیو و عکس [سربرگ موبایل و ریسپانسیو در 15 مرحله ساده]

ساختاگر وارد یک سایت حرفه ای شوید، تقریباً در همه صفحات یک بخش مشترک را در بالاترین قسمت صفحه می بینید: هدر سایت. لوگو، منوی اصلی، دکمه ورود یا تماس، جستجو و گاهی سبد خرید یا حساب کاربری معمولاً در همین بخش قرار می گیرند. به همین دلیل، ساخت هدر با المنتور فقط به معنی چیدن چند ویجت کنار هم نیست. هدر باید طوری طراحی شود که در تمام صفحات سایت ظاهر یکپارچه ای داشته باشد، روی دسکتاپ فضای کافی برای منو ایجاد کند و در موبایل هم بدون به هم ریختگی به یک رابط کاربری ساده و قابل استفاده تبدیل شود.

در این آموزش قرار است ساخت یک هدر واقعی را مرحله به مرحله بررسی کنیم؛ از ایجاد قالب Header در المنتور و ساخت منوی وردپرس گرفته تا قرار دادن لوگو، جستجو، دکمه، تنظیم فاصله ها، طراحی حالت Hover و Active و در نهایت ساخت نسخه مناسب برای تبلت و موبایل. در بخش جداگانه ای هم تفاوت ساخت هدر با المنتور پرو و المنتور رایگان را بررسی می کنیم تا دقیقاً بدانید با هر نسخه چه کاری می توانید انجام دهید.

هدر سایت چیست؟

هدر سایت (Header) به بخش بالایی و معمولاً تکرارشونده صفحات وب گفته می شود که مهم ترین عناصر شناسایی و پیمایش سایت را در خود قرار می دهد. در یک سایت وردپرسی حرفه ای، هدر معمولاً شامل لوگو، منوی اصلی، دکمه های مهم، جستجو، حساب کاربری، سبد خرید یا عناصر مشابه است. مهم ترین نکته این است که هدر معمولاً بخشی از ساختار کلی سایت است، نه یک بخش معمولی از یک صفحه. در Elementor Pro می توان هدر را به عنوان یک Site Part در Theme Builder ساخت تا در قسمت هایی که مشخص می کنید نمایش داده شود.

برای مثال، ممکن است سایت شما یک هدر اصلی برای تمام صفحات داشته باشد، اما برای فروشگاه یا صفحات خاص بخواهید هدر متفاوتی طراحی کنید. Theme Builder امکان مدیریت چنین قالب هایی را فراهم می کند. البته قرار نیست همه این موارد را داخل یک هدر قرار دهید. هدر خوب، هدری نیست که بیشترین تعداد المان را داشته باشد؛ هدر خوب اطلاعات موردنیاز کاربر را با کمترین اصطکاک در اختیار او قرار می دهد.

انواع هدر سایت

قبل از اینکه وارد ساخت هدر با المنتور شویم، بهتر است بدانیم هدرها از نظر ساختار و کاربرد چه مدل هایی دارند.

هدر ساده: در این مدل، معمولاً لوگو در یک سمت، منوی اصلی در بخش مرکزی و یک دکمه یا عنصر کاربردی در سمت دیگر قرار دارد. این مدل برای وب سایت های شرکتی، شخصی و خدماتی بسیار رایج است.

هدر فروشگاهی: در هدر فروشگاهی علاوه بر لوگو و منو، معمولاً جستجو، حساب کاربری، سبد خرید و گاهی دسته بندی محصولات هم حضور دارند. در این حالت باید فضای بیشتری برای تعاملات کاربر در نظر گرفت.

هدر مینیمال: در این مدل عناصر اضافی حذف می شوند و فقط مهم ترین اجزای پیمایش باقی می مانند. لوگو، منو و یک CTA مشخص ممکن است تمام چیزی باشد که در هدر نیاز دارید.

هدر چسبان یا Sticky: در هدر Sticky، بخش بالایی سایت هنگام اسکرول در موقعیت مشخصی باقی می ماند. این مدل برای سایت هایی که پیمایش سریع بین صفحات یا دسته بندی ها اهمیت دارد، کاربردی است.

هدر دارای مگامنو: اگر ساختار سایت بزرگ باشد، یک منوی ساده کافی نیست. در این شرایط می توان از مگامنو استفاده کرد تا دسته بندی ها، زیرمجموعه ها و حتی عناصر تصویری در یک پنل سازمان یافته نمایش داده شوند. Elementor برای ساخت مگامنو نیز ابزارهایی دارد، هرچند قابلیت Menu در مستندات فعلی Elementor به عنوان یک قابلیت تجربی معرفی شده است.

آموزش ویدیویی گام به گام ساخت هدر با المنتور پرو

در ادامه به ارائه آموزش تصویری گام به گام ساخت هدر با المنتور میپردازیم.

آموزش تصویری گام به گام ساخت هدر با المنتور پرو

در ادامه به ارائه آموزش تصویری گام به گام ساخت هدر با المنتور میپردازیم.

آموزش مرحله به مرحله ساخت هدر با المنتور پرو

اگر Elementor Pro در سایت شما فعال باشد، می توانید هدر را به صورت یک قالب سراسری با Theme Builder ایجاد کنید. این روش، استانداردترین روش برای طراحی هدر اختصاصی در وردپرس با المنتور است. در نسخه های فعلی Elementor، Theme Builder برای ساخت و مدیریت بخش هایی مانند Header و Footer استفاده می شود. مسیر دسترسی نیز از بخش Theme Builder در پیشخوان وردپرس یا محیط Elementor امکان پذیر است.

اما تنها داشتن المنتور پرو برای طراحی هدر در حال حاضر برای بسیاری طراحان کافی نیست چرا که طراحان حرفه ای وبسایت های وردپرسی با داشتن نسخه ای ویژه از افزونه المنتور به نام المنتور پرو حرفه ای به طراحی های بسیار متمایز وبسایت های خود دست پیدا میکنند. شما نیز می تواندی با خرید المنتور حرفه ای به دنیایی از ویژگی های متمایز و منحصر به فرد نسبت به نسخه المنتور پرو اورجینال در طراحی انواع بخش های سایت به ویژه هدر سایت دست پیدا کنید.

مرحله اول: آماده سازی لوگو و تصاویر

قبل از ورود به طراحی، بهتر است فایل های موردنیاز هدر را آماده کنید. اگر لوگو، آیکون جستجو، آیکون حساب کاربری یا سایر تصاویر را از قبل آماده داشته باشید، هنگام طراحی سریع تر پیش می روید. برای لوگو بهتر است فایل باکیفیت و متناسب با ابعاد واقعی هدر انتخاب شود. اگر لوگو به صورت SVG در اختیار دارید، می توانید از آن استفاده کنید؛ Elementor نیز امکان استفاده از لوگوی سایت و فایل های تصویری را در بخش های مختلف فراهم می کند. همچنین پیشنهاد می کنیم اگر هنوز فونت فارسی سایت را تنظیم نکرده اید، ابتدا سراغ افزودن فونت به المنتور بروید تا هنگام طراحی هدر، اندازه و وزن فونت ها را بر اساس فونت واقعی سایت تنظیم کنید.

مرحله دوم: ورود به Theme Builder

در مرحله دوم ساخت هدر با المنتور مراحل زیر را به دقت یکی پس از دیگری انجام دهید.

1. وارد پیشخوان وردپرس شوید.
2. از بخش Elementor > Theme Builder وارد سازنده قالب شوید.
3. بخش Header را انتخاب کنید.
4. روی گزینه ایجاد Header جدید کلیک کنید.
5. یک نام مشخص مانند هدر اصلی سایت برای قالب انتخاب کنید.
6. قالب را برای طراحی از صفر باز کنید.

Elementor امکان انتخاب قالب های آماده Header را نیز در اختیار شما قرار می دهد، اما برای یادگیری اصول طراحی بهتر است در این آموزش هدر را از صفر بسازیم.

مرحله سوم: ساخت ساختار اصلی هدر

در نسخه های جدید Elementor، پیشنهاد منطقی برای طراحی هدر استفاده از Container و ساختار Flexbox است. کانتینرها اجازه می دهند جهت، عرض، فاصله و نحوه قرارگیری عناصر را بدون ساخت تعداد زیادی بخش اضافی کنترل کنید. به جای اینکه برای هر عنصر یک ستون یا کانتینر مجزا بسازید، ابتدا یک کانتینر اصلی برای هدر در نظر بگیرید و سپس درون آن، فقط به تعداد لازم کانتینر داخلی ایجاد کنید. برای نمونه، ساختار هدر می تواند به این شکل باشد:

• کانتینر اصلی هدر
• کانتینر سمت راست: لوگو + منو
• کانتینر سمت چپ: جستجو + دکمه

این ساختار نسبت به ساخت چهار یا پنج کانتینر جداگانه، کنترل بیشتری روی فاصله ها و واکنش گرایی به شما می دهد. برای تسلط بیشتر روی همین ساختار می توانید آموزش کار با کانتینرها در المنتور و آموزش فلکس باکس در المنتور را هم مطالعه کنید.

مرحله چهارم: تنظیم عرض محتوای هدر

یکی از اشتباهات رایج این است که طراحی هدر را بدون توجه به عرض محتوای اصلی سایت انجام دهیم. اگر محتوای سایت مثلاً در یک عرض مشخص قرار می گیرد، بهتر است هدر نیز از همان منطق پیروی کند یا با اختلاف جزئی و هدفمند طراحی شود. در کانتینر اصلی می توانید حداکثر عرض، عرض محتوا، هم ترازی عمودی و جهت عناصر را مشخص کنید. اگر در طراحی شما هدر به شکل یک باکس جدا و گرد دیده می شود، می توانید پس زمینه را به کانتینر داخلی بدهید، نه کل فضای بیرونی. سپس با تنظیم Border Radius و فاصله داخلی، ظاهر کارت مانند موردنظر را ایجاد کنید.

مرحله پنجم: ایجاد منوی وردپرس

خود منوی سایت در اصل یک قابلیت وردپرس است و باید ابتدا در بخش مدیریت منوهای وردپرس ساخته شود. Elementor بعداً این منو را در هدر نمایش و استایل دهی می کند.

1. در پیشخوان وردپرس وارد بخش نمایش > فهرست ها شوید.
2. یک فهرست جدید ایجاد کنید.
3. صفحات اصلی سایت را به منو اضافه کنید.
4. در صورت نیاز زیرمنوها را با Drag & Drop ایجاد کنید.
5. منو را ذخیره کنید.

برای یک سایت آموزشی مانند «المنتور ایران» ساختار منو می تواند شامل صفحاتی مانند آموزش ها، افزونه ها، قالب ها، خدمات و تماس با ما باشد؛ البته ساختار واقعی باید بر اساس معماری اطلاعات خود سایت تعیین شود.

مرحله ششم: قرار دادن لوگو

اکنون به محیط Elementor برگردید و ویجت Site Logo یا ابزار تصویر مناسب را داخل کانتینر هدر قرار دهید. ویجت Site Logo می تواند لوگوی ثبت شده در تنظیمات هویت سایت را دریافت کند و همچنین امکان تنظیم اندازه، لینک و ویژگی های ظاهری آن را در اختیار شما می گذارد. برای لینک لوگو بهتر است مقصد صفحه اصلی باشد؛ بنابراین کاربر با کلیک روی لوگو بتواند در هر صفحه به Home بازگردد. در بخش Style نیز اندازه لوگو را به صورت دقیق تعیین کنید. قرار نیست لوگو تا جایی بزرگ شود که بخش عمده عرض هدر را مصرف کند. هدر باید تعادل بصری داشته باشد.

مرحله هفتم: قرار دادن منوی سایت

اکنون ویجت منوی وردپرس یا WordPress Menu را در کنار لوگو قرار دهید و فهرستی که در وردپرس ساخته اید انتخاب کنید. در این قسمت می توانید مواردی مانند:

• جهت نمایش منو
• تراز افقی
• فونت
• وزن فونت
• رنگ متن
• فاصله بین آیتم ها
• حالت Hover
• نشانگر زیرمنو
• فاصله داخلی
• حاشیه و Radius

را کنترل کنید. Elementor برای WordPress Menu امکاناتی مانند تنظیم رنگ، تایپوگرافی، Padding، فاصله بین آیتم ها، نشانگر، منوی بازشونده و حالت منوی موبایل را در اختیار طراح قرار می دهد. برای مثال می توانید رنگ عادی منو را مشکی یا خاکستری تیره قرار دهید و در حالت Hover از رنگ اصلی برند استفاده کنید. نتیجه این کار باید به وضوح قابل تشخیص باشد، اما نباید آن قدر شدید باشد که هدر شلوغ به نظر برسد.

مرحله هشتم: تنظیم حالت Hover و Active

فقط ظاهر عادی منو را طراحی نکنید. در طراحی حرفه ای باید برای وضعیت های مختلف عناصر نیز تصمیم بگیرید. Hover زمانی است که کاربر ماوس را روی یک آیتم قرار می دهد. Active یا حالت جاری نیز برای زمانی کاربرد دارد که کاربر در همان صفحه یا مسیر قرار گرفته است. برای این وضعیت ها می توانید رنگ، نشانگر، پس زمینه و برخی تنظیمات ظاهری را متفاوت کنید. وجود این وضعیت ها به کاربر کمک می کند بفهمد چه چیزی قابل کلیک است و در کجای ساختار سایت قرار دارد.

مرحله نهم: طراحی دکمه CTA

در سمت دیگر هدر می توانید یک دکمه مانند «مشاوره رایگان»، «شروع کنید»، «خرید» یا «تماس با ما» قرار دهید. برای ساخت این بخش معمولاً Widget دکمه گزینه مناسبی است. اگر با امکانات این ویجت آشنا نیستید، آموزش ویجت دکمه در المنتور می تواند جزئیات بیشتری درباره ساخت و استایل دهی آن در اختیارتان قرار دهد. برای دکمه موارد زیر را تنظیم کنید:

• متن دکمه
• لینک
• اندازه فونت
• وزن فونت
• رنگ متن
• رنگ پس زمینه
• Padding
• Border Radius
• حالت Hover

نکته مهم این است که فاصله دکمه از سایر عناصر هدر به صورت دستی و منطقی تنظیم شود. اگر دکمه یک یا دو پیکسل بالاتر یا پایین تر از منو قرار گرفته باشد، کل هدر از نظر بصری نامرتب دیده می شود.

مرحله دهم: اضافه کردن جستجوی سایت

جستجو یکی از اجزایی است که در هدر بسیاری از سایت های بزرگ استفاده می شود. در نسخه های جدید Elementor، ویجت Search جایگزین Search Form شده و امکانات گسترده تری برای فرم جستجو و حتی نمایش نتایج زنده دارد. در حالت ساده می توانید Search Widget را مستقیماً داخل هدر قرار دهید و عرض و ظاهر آن را تنظیم کنید. اما در برخی طراحی ها، قرار دادن کادر جستجو به صورت دائمی باعث شلوغ شدن هدر می شود. در این حالت می توان فقط یک آیکون جستجو در هدر داشت و با کلیک روی آن فرم جستجو را باز کرد.

مرحله یازدهم: تنظیم جستجوی زنده

اگر Search Widget سایت شما از قابلیت نتایج زنده پشتیبانی کند، می توانید نحوه نمایش نتایج را نیز تنظیم کنید. Elementor برای Search Widget گزینه هایی مانند Live Results و انتخاب قالب نتایج را ارائه می دهد. با این حال، برای فعال سازی چنین قابلیتی حتماً تجربه کاربری را در موبایل نیز آزمایش کنید. چیزی که روی دسکتاپ عالی دیده می شود ممکن است در عرض صفحه موبایل به پنل بزرگی تبدیل شود.

مرحله دوازدهم: تنظیم فاصله داخلی و شکاف ها

یکی از بخش های مهم طراحی هدر، فاصله هاست. بسیاری از هدرهایی که از نظر اجزای بصری درست ساخته شده اند، فقط به دلیل Padding و Gap نامناسب آماتور به نظر می رسند. در صورت نیاز اتصال چهار طرف Padding را بردارید تا بتوانید برای هر جهت مقدار جداگانه وارد کنید. برای درک دقیق تر تفاوت و کاربرد این فاصله ها، آموزش مارجین و پدینگ در المنتور را ببینید. در کانتینر اصلی می توانید موارد زیر را بررسی کنید:

• Padding بالا
• Padding پایین
• Padding چپ
• Padding راست
• Gap بین عناصر
• Margin عناصر داخلی

مرحله سیزدهم: تنظیم تراز عمودی

در بسیاری از هدرها همه عناصر در یک خط افقی قرار دارند، اما ارتفاع عناصر یکسان نیست. مثلاً ارتفاع دکمه بیشتر از متن منو است یا لوگو از آیکون جستجو بزرگ تر است. در چنین شرایطی باید Alignment عمودی کانتینر را بررسی کنید و عناصر را در مرکز محور عمودی قرار دهید. اگر هنوز یک عنصر چند پیکسل بالاتر یا پایین تر دیده می شود، ابتدا Margin و Padding همان عنصر را بررسی کنید و سراغ راه حل های پیچیده تر نروید.

مرحله چهاردهم: استفاده از تگ Header

وقتی ساختار بصری هدر کامل شد، بهتر است از نظر HTML نیز عنصر اصلی آن با تگ معنایی <header> مشخص شود. استفاده از تگ های معنایی فقط جنبه ظاهری ندارد؛ ساختار HTML تمیز، به درک بهتر بخش های مختلف صفحه توسط مرورگرها، ابزارهای دسترسی و موتورهای جستجو کمک می کند. در Elementor بسته به نسخه و رابط کاربری ممکن است تنظیم HTML Tag را از بخش Advanced یا تنظیمات مربوط به ساختار کانتینر پیدا کنید. برای کانتینر اصلی هدر، Header را به عنوان تگ مناسب انتخاب کنید.

مرحله پانزدهم: انتشار و تعیین Display Conditions

ساختن هدر در Theme Builder به تنهایی کافی نیست. باید مشخص شود این قالب در کجا نمایش داده شود. پس از انتشار قالب، Elementor از شما می خواهد Display Conditions را مشخص کنید. اگر هدر قرار است هدر اصلی کل سایت باشد، معمولاً شرط نمایش باید برای تمام سایت در نظر گرفته شود. یکی از مشکلات رایج نیز این است که هدر در ویرایشگر دیده می شود اما در سایت واقعی نمایش داده نمی شود. طبق مستندات Elementor، در این حالت Display Conditions، وضعیت انتشار، Page Layout و کش Elementor باید بررسی شوند.

ساخت هدر با المنتور رایگان

اینجا یک تفاوت مهم وجود دارد که خیلی از کاربران هنگام جستجوی «ساخت هدر با المنتور رایگان» متوجه آن نمی شوند. Elementor Free و Elementor Pro از نظر ساخت هدر سراسری با Theme Builder یکسان نیستند. Theme Builder قابلیت ساخت Site Partهایی مانند Header را در نسخه Pro در اختیار شما قرار می دهد؛ در محیط Theme Builder، کاربران Free می توانند قابلیت هایی را که با Pro در دسترس قرار می گیرند مشاهده کنند.

بنابراین اگر منظورتان از ساخت هدر رایگان این است که یک Header سراسری و اختصاصی برای کل سایت را مستقیماً با Theme Builder بسازید، مسیر اصلی Elementor برای این کار Pro است. اما این به معنی آن نیست که با Elementor Free هیچ کاری درباره هدر نمی توانید انجام دهید. برای داشتن نسخه المنتور پرو اورجینال به صورت کاملا رایگان، دانلود رایگان المنتور پرو اورجینال را دنبال و به سریع ترین حالت ممکن به روز ترین ورژن آن را دانلود و استفاده کنید.

روش اول: طراحی هدر داخل یک صفحه

در نسخه رایگان می توانید یک Container یا Section را در ابتدای یک صفحه ایجاد کنید و لوگو، متن، تصویر، دکمه و سایر ویجت های رایگان را داخل آن قرار دهید. اما این بخش الزاماً یک Header سراسری Theme Builder نیست. اگر همان طراحی را بخواهید در چندین صفحه تکرار کنید، ممکن است نیاز به روش های دیگری برای مدیریت و هماهنگ نگه داشتن آن داشته باشید.

روش دوم: استفاده از امکانات قالب

در نسخه رایگان می توانید از قابلیت های خود قالب وردپرس برای ساخت یا مدیریت Header و Menu استفاده کنید و سپس Elementor را برای طراحی محتوای صفحات به کار ببرید. به عنوان نمونه، در قالب Hello Elementor می توان از تنظیمات مربوط به WordPress و Customizer برای ایجاد منو استفاده کرد. مستندات Elementor نیز توضیح می دهد که منوی سایت یک قابلیت وردپرس است و بسته به قالب می توان آن را از طریق تنظیمات قالب مدیریت کرد.

روش سوم: استفاده از افزونه های جانبی

برخی افزونه های جانبی برای Elementor امکانات Header و Footer یا امکانات مکمل را به نسخه رایگان اضافه می کنند. البته در چنین شرایطی باید سازگاری افزونه با قالب، نسخه Elementor و سایر افزونه های سایت بررسی شود.

تفاوت مراحل طراحی هدر در المنتور پرو و رایگان چیست؟

در حدول زیر به صورت کامل به ارائه و بررسی تمامی تفاوت های طراحی و ساخت هدر در المنتور پرو و رایگان می پردازیم.

پس بهتر است عبارت «ساخت هدر با المنتور رایگان» را دقیق تر تعریف کنیم. اگر هدفتان صرفاً طراحی ظاهری یک بخش بالای صفحه است، امکانات رایگان Elementor قابل استفاده اند؛ اما اگر دنبال یک هدر حرفه ای، سراسری و قابل مدیریت از Theme Builder هستید، Elementor Pro مسیر اصلی است. برای مقایسه کامل تر قابلیت ها می توانید المنتور پرو یا رایگان؟ را مطالعه کنید. همچنین اگر در جستجوی نسخه مناسب Elementor هستید، صفحه خرید افزونه المنتور پرو و اطلاعات نسخه های موجود در المنتور ایران را بررسی کنید.

ساخت هدر ریسپانسیو با المنتور

ساخت هدر روی دسکتاپ فقط نیمی از کار است. هدر حرفه ای باید در اندازه های مختلف صفحه نیز بدون شکستن چیدمان کار کند. Elementor ابزارهای Responsive Editing دارد و می توان بسیاری از تنظیمات طراحی را برای دستگاه های مختلف به صورت جداگانه تغییر داد. مستندات فعلی Elementor نیز برای طراحی ریسپانسیو، حالت های جداگانه دسکتاپ، تبلت و موبایل را در اختیار کاربر قرار می دهد.

اصل اول: همه چیز را در دسکتاپ تنظیم نکنید. وقتی هدر را در دسکتاپ می سازید، نباید تصور کنید همان مقادیر دقیق برای موبایل هم مناسب هستند. اندازه لوگو، فاصله منو، عرض دکمه و حتی نوع نمایش منو ممکن است در موبایل کاملاً متفاوت باشد.

اصل دوم: از Breakpoint برای تغییر رفتار استفاده کنید, برای مثال، در دسکتاپ می توانید منو را به صورت افقی نمایش دهید، اما در موبایل به یک منوی همبرگری یا Dropdown تبدیل کنید. Elementor اجازه می دهد جهت Container، عرض و ترتیب عناصر را در Breakpointهای مختلف کنترل کنید. همین ویژگی باعث می شود برای ساخت نسخه موبایل مجبور نباشید چند نسخه کاملاً جدا از Header ایجاد کنید.

اصل سوم: اندازه ها را با واحد مناسب تنظیم کنید. برای برخی عناصر می توانید از PX و برای برخی عرض ها از درصد یا واحدهای نسبی استفاده کنید. نکته مهم این است که یک عدد ثابت برای یک عنصر بزرگ همیشه بهترین انتخاب نیست. مثلاً اگر عرض یک دکمه روی دسکتاپ ۱۸۰px باشد، ممکن است روی موبایل همان مقدار فضای زیادی اشغال کند. در موبایل می توانید عرض، Padding یا حتی نحوه نمایش آن را تغییر دهید.

اصل چهارم: فاصله ها را در موبایل بازبینی کنید. یکی از اولین چیزهایی که در موبایل باید بررسی شود، فاصله داخلی و Gap است. فاصله ۳۰ یا ۴۰ پیکسلی که روی دسکتاپ زیبا است ممکن است در یک صفحه ۳۶۰ یا ۳۹۰ پیکسلی بسیار زیاد باشد. بنابراین در حالت Responsive Editing وارد موبایل شوید و مواردی مانند:

• Padding
• Margin
• Gap
• عرض لوگو
• اندازه فونت
• عرض دکمه
• ارتفاع هدر

را بررسی کنید.

اصل پنجم: عناصر را در صورت نیاز Reorder کنید. Flexbox و تنظیمات Responsive Elementor اجازه می دهند ترتیب برخی عناصر در Breakpointهای مختلف تغییر کند. بنابراین اگر در دسکتاپ ترتیب «لوگو ← منو ← دکمه» دارید، می توانید در موبایل ساختار دیگری تعریف کنید تا تجربه کاربری بهتر شود.

ساخت هدر موبایل با المنتور

هدر موبایل نباید صرفاً نسخه کوچک شده هدر دسکتاپ باشد. صفحه موبایل فضای بسیار محدودتری دارد و اولویت های کاربر نیز با دسکتاپ متفاوت است. در بسیاری از سایت ها، هدر موبایل از سه عنصر اصلی تشکیل می شود:

• لوگو
• دکمه منوی همبرگری
• یک عنصر کاربردی مانند جستجو یا حساب کاربری

یک ساختار پیشنهادی برای هدر موبایل

یک Container افقی ایجاد کنید و سه ناحیه برای Logo، Menu Toggle و Search در نظر بگیرید. اگر جستجو فضای زیادی می گیرد، می توانید آن را به صورت Off-Canvas باز کنید. برای منوی موبایل نیز بهتر است تعداد آیتم ها و ساختار زیرمنوها را بررسی کنید. منوی دسکتاپی که ۷ یا ۸ آیتم دارد، الزاماً نباید با همان ظاهر در موبایل نمایش داده شود.

استفاده از حالت Dropdown یا Hamburger

در ویجت های منو می توانید رفتار نمایش منو را برای دستگاه های کوچک تغییر دهید. Elementor برای WordPress Menu نیز امکاناتی برای نمایش منوی موبایل و کنترل آیکون Toggle در اختیار شما قرار می دهد.

طراحی منوی موبایل با Off-Canvas

یک روش حرفه ای این است که آیکون همبرگری فقط نقش Trigger را داشته باشد و با کلیک روی آن یک پنل Off-Canvas باز شود. Off-Canvas دقیقاً برای محتوایی طراحی شده که در حالت عادی مخفی است و بعد از اقدام کاربر نمایش داده می شود. داخل این پنل می توانید موارد زیر را قرار دهید:

• لوگو
• منوی اصلی
• دکمه تماس
• لینک شبکه های اجتماعی
• جستجو

کلام آخر

ساخت هدر با المنتور در ظاهر کار ساده ای است؛ چند Container می سازید، لوگو و منو را قرار می دهید و طراحی را تمام می کنید. اما هدر حرفه ای از جایی شکل می گیرد که به جز ظاهر، ساختار، تجربه کاربری، فاصله ها، Responsive Design، رفتار منو، جستجو و نسخه موبایل را همزمان در نظر بگیرید. اگر Elementor Pro دارید، بهترین مسیر برای یک هدر سراسری استفاده از Theme Builder است. در این حالت می توانید Header را به عنوان بخشی از ساختار قالب سایت بسازید و مشخص کنید در کدام قسمت های سایت نمایش داده شود.

اگر Elementor Free استفاده می کنید، باید ابتدا مشخص کنید هدفتان فقط طراحی ظاهری یک بخش بالای صفحه است یا یک Header سراسری با کنترل کامل. برای حالت دوم، امکانات قالب وردپرس یا راهکارهای جانبی وارد بازی می شوند. از طرف دیگر، هیچ هدر حرفه ای نباید فقط روی دسکتاپ بررسی شود. یک طراحی خوب باید در موبایل و تبلت نیز به درستی کار کند و اگر لازم است عناصر اضافه را به Dropdown یا Off-Canvas منتقل کند. Elementor نیز برای Responsive Editing و طراحی مبتنی بر Container ابزارهای لازم برای این کار را در اختیار شما قرار داده است.

در نهایت، اگر در حال ساخت یک سایت حرفه ای با Elementor هستید، بهتر است طراحی Header را به عنوان بخشی از معماری کلی سایت ببینید، نه صرفاً یک نوار در بالای صفحه. همین نگاه باعث می شود هدر شما هم از نظر بصری حرفه ای باشد و هم در استفاده روزمره برای کاربر واقعاً کاربردی بماند.

سوالات متداول درباره ساخت هدر با المنتور

آیا ساخت هدر با المنتور رایگان امکان پذیر است؟

بله، اما باید بین طراحی یک بخش هدر داخل صفحات و ساخت هدر سراسری با Theme Builder تفاوت بگذارید. Theme Builder برای ساخت Header به صورت Site Part در مسیر Elementor Pro قرار دارد؛ در نسخه رایگان می توانید از قابلیت های قالب وردپرس یا راهکارهای جانبی استفاده کنید.

برای ساخت هدر حرفه ای المنتور پرو لازم است؟

برای ساخت Header سراسری و مدیریت آن با Theme Builder، Elementor Pro مسیر بومی Elementor است. نسخه رایگان بیشتر برای طراحی محتوای صفحات و استفاده از امکانات قالب مناسب است.

چطور منوی سایت را داخل هدر المنتور قرار دهیم؟

ابتدا منوی سایت را در WordPress ایجاد کنید و سپس در Elementor آن را با WordPress Menu یا ابزار منوی مناسب در Header نمایش دهید. خود منوی سایت یک قابلیت وردپرس است و Elementor وظیفه نمایش و استایل دهی آن را بر عهده می گیرد.

چطور هدر المنتور را در موبایل ریسپانسیو کنیم؟

در Responsive Editing وارد حالت موبایل شوید و اندازه لوگو، فاصله ها، عرض دکمه و نحوه نمایش منو را جداگانه تنظیم کنید. در صورت نیاز می توانید منوی دسکتاپ را به حالت Dropdown یا Hamburger تغییر دهید و برای جستجو یا منوی موبایل از Off-Canvas استفاده کنید.

چرا هدر المنتور روی سایت نمایش داده نمی شود؟

ابتدا Display Conditions، وضعیت Published بودن Header، Layout صفحه و کش Elementor را بررسی کنید. این موارد از دلایل رایج نمایش ندادن Header در سایت واقعی هستند.

آیا می توان برای هدر المنتور جستجوی بازشونده ساخت؟

بله. یکی از روش های مناسب، قرار دادن Search Widget داخل Off-Canvas و اتصال یک آیکون در Header به آن است. به این ترتیب فرم جستجو فقط هنگام کلیک کاربر نمایش داده می شود.

آیا می توان هدر متفاوت برای موبایل طراحی کرد؟

بله. بسیاری از تنظیمات Elementor در Breakpointهای مختلف قابل تغییر هستند و می توانید اندازه، فاصله، ترتیب و نحوه نمایش عناصر را برای موبایل و تبلت جداگانه تنظیم کنید.