چگونه با المنتور در وردپرس هدر بسازیم؟ با استفاده از Theme Builder
برای ساخت هدر با استفاده از Theme Builder المنتور، مراحل زیر را دنبال کنید قبل شروع آن در نظر داشته باشید. در فرآیند طراحی هدر سفارشی با المنتور، بروز خطاهایی مثل باز نشدن ادیتور یا گیر کردن روی حالت بارگذاری ممکن است رخ دهد؛ در چنین شرایطی، بررسی دلایل لود نشدن المنتور میتواند مانع اتلاف زمان شما شود.
- وارد پنل مدیریت وردپرس (WP-Admin) شوید و به مسیر Templates > Theme Builder بروید.
- در صفحه Theme Builder، روی علامت مثبت (+) در کارت «Header» کلیک کنید.
- کتابخانه قالبها (Template Library) باز خواهد شد.
- در این مرحله، برای ساخت هدر در وردپرس میتوانید یک هدر از پیش طراحیشده از کتابخانه قالبها انتخاب کنید. درصورتیکه قصد دارید هدر موردنظرتان را از پایه طراحی کنید، کتابخانه قالبها را ببندید. اگر قصد ادیت هدر از پیشطراحی شدهای را دارید، به بخش بعدی مقاله مراجعه کنید.
- حالا در ویرایشگر المنتور، هدر دلخواه خود را طراحی کنید. پس از اتمام طراحی و ساخت هدر با المنتور، روی انتشار «Publish» کلیک کنید تا ذخیره شود. در مرحله بعد، از شما خواسته میشود صفحات موردنظر برای نمایش هدر را انتخاب کنید. با انتخاب صفحات، هدر شما فقط در آنها نمایش داده میشود.
بسیاری از مشکلاتی که هنگام ساخت هدر با المنتور تجربه میشود، مستقیماً به کیفیت میزبانی سایت مربوط است؛ با خرید هاست حرفهای، میتوانید خیالتان را از بابت پایداری، سرعت و اجرای صحیح طراحیها راحت کنید.
نحوه ادیت هدر با استفاده از Theme Builder المنتور
شما میتوانید هدر سایت را با استفاده از Theme Builder المنتور ادیت یا همان ویرایش کنید. برای این کار مراحل زیر را انجام دهید:
- وارد پنل مدیریت وردپرس (WP-Admin) شوید و به مسیر Templates > Theme Builder بروید.
- در بخش سمت راست، روی کارت هدر موردنظرتان کلیک کنید.
- برای ویرایش محتوای هدر، روی گزینه «Edit» کلیک کنید.
- برای تغییر صفحاتی که هدر در آنها نمایش داده میشود، روی «Edit Conditions» کلیک کنید.
توجه داشته باشید در نسخه رایگان المنتور، ویرایش گسترده هدر بسیار سخت یا بهعبارتی غیرقابل انجام است. ازاینرو اگر قصد ساخت هدر با المنتور وردپرس را دارید بهتر است نسخه پرو المنتور را دریافت کنید. در ادامه نحوه طراحی هدر سایت وردپرسی با المنتور پرو را آموزش دادیم.
هاست وردپرس
با هاست وردپرس ایرانسرور، سرعت فوقالعاده و امنیت پولادین را تجربه کنید.
طراحی هدر در سایت وردپرس با استفاده از المنتور پرو؛ استفاده از ویجتهای المنتور
در این روش، میتوانید هدر سایت خود را از ابتدا و بهصورت کاملاً سفارشی طراحی کنید. برای ساخت هدر با المنتور پرو سه مرحله کلی وجود دارد که شامل اضافه کردن ویجت لوگوی سایت، منوی ناوبری (Nav Menu) و فرم جستجو یا دکمه اشتراک شبکههای اجتماعی میشود. بیایید مراحل را شروع کنیم.
مرحله اول: اضافه کردن ویجت لوگوی سایت
در صفحه موردنظر سایت به حالت ویرایش با المنتور بروید. در ابتدای بالای صفحه، سه ردیف ستون قرار دهید. معمولاً به لوگوی سایت، نوار جستجو و دکمههای شبکههای اجتماعی در هدر سایت نیاز دارید که هر ستون مختص به یکی از این موارد خواهد بود. این عناصر در گالری ویجتهای المنتور موجود هستند.
برای اضافه کردن لوگو، ویجت لوگوی سایت را انتخاب کرده و آن را در باکس موردنظر خود قرار دهید.
حال میتوانید لوگو را مطابق سلیقه خود سفارشیسازی کنید؛ برای مثال اندازه آن را تغییر دهید، تراز کنید، کپشن اضافه کنید یا لینک دلخواهی به آن اضافه کنید.
برای اعمال استایلهای مختلف به ویجت لوگو، روی گزینه Style کلیک کنید. اینجا میتوانید تنظیماتی مانند عرض، ارتفاع، شفافیت، فیلترهای CSS، نوع حاشیه و موارد دیگر را تغییر دهید.
المنتور روی وردپرس بهترین عملکرد را زمانی دارد که سایت روی میزبانی بهینه اجرا شود؛ اگر نمیدانید دقیقاً هاست وردپرس چیست؟ و چه تفاوتی با هاستهای معمولی دارد، این مقاله دید شفافی به شما میدهد.
مرحله دوم: اضافه کردن ویجت منوی ناوبری (Nav Menu)
در این مرحله از ساخت هدر با المنتور پرو باید ویجت Nav Menu را اضافه کنید. برای افزودن ویجت منو، نکات زیر را در نظر بگیرید:
- صفحات اصلی را به سایت خود اضافه کنید.
- از بخش Appearance > Menu یک منو بسازید.
- صفحات موردنظر را به منوی خود اضافه کرده و آن را ذخیره کنید.
پس از آمادهسازی منو، به حالت canvas المنتور بروید و ویجت Nav Menu را از گالری ویجتها انتخاب کرده و آن را در مکان مناسب قرار دهید.
بلافاصله تنظیمات سفارشیسازی محتوا نمایش داده میشوند و شما میتوانید نحوه نمایش منو، تنظیمات تراز، پوینتر، انیمیشن و موارد دیگر را بررسی کنید. همچنین، میتوانید نحوه نمایش منو در موبایل و سایر دستگاهها را تعیین کنید.
این ویجت سه نوع طرحبندی دارد: افقی، عمودی و کشویی. بهترین گزینه را براساس نیاز سایت و سلیقه خود در بخش «Layout» انتخاب کنید.
همچنین، با کلیک روی گزینه Style میتوانید استایل ویجت از جمله تایپوگرافی، رنگ متن و سایر تنظیمات استایل را تغییر دهید.
برای تطبیق رنگها با طراحی سایت، روی گزینههای Text & Pointer Hover Color کلیک کرده و طرحهای مختلف را امتحان کنید.
علاوهبر تنظیمات عمومی، میتوانید از تنظیمات پیشرفته برای تغییراتی مانند حاشیه، Padding ،Z-index، شناسه CSS، انیمیشنها و سایر موارد اینچنینی استفاده کنید.
طراحی هدر حرفهای با المنتور تنها به چیدمان عناصر محدود نمیشود و بهینهسازی محتوا نیز اهمیت دارد؛ برای آشنایی با ابزارهایی که بهصورت هوشمند این فرآیند را سادهتر میکنند، پیشنهاد میکنیم مقاله افزونه هوش مصنوعی وردپرس را مطالعه کنید.
مرحله سوم: اضافه کردن ویجت فرم جستجو یا دکمه اشتراک اجتماعی
بسیاری از سایتها از هر دو ویژگی جستجو و دکمههای شبکههای اجتماعی در هدر استفاده میکنند. برای اضافه کردن هریک از این ویژگیها یا هر دوی آنها در ساخت هدر وردپرسی با المنتور، مراحل زیر را دنبال کنید.
ویجت موردنظر را جستجو کرده و به مکان مناسب بکشید (drag).
میتوانید در بخش محتوای ویجت، تنظیماتی مانند نوع نمایش (Minimal ،Classic یا Full)، جانمایی متنی و اندازه فرم را تغییر دهید.
به بخش Style بروید و تغییرات لازم برای هماهنگسازی فرم با رنگهای هدر را انجام دهید؛ مثل اندازه آیتمها، رنگ متن، رنگ پسزمینه، رنگ حاشیه، سایه باکس، اندازه حاشیه و سایر موارد اینچنینی.
بخش Advanced برای اضافه کردن ویژگیهای پیشرفته از جمله حاشیه، Padding ،Z-index ،CSS و ویژگیهای حرکتی در دسترس است.
بعد از اتمام طراحی، میتوانید واکنشگرا یا همان ریسپانسیو بودن (responsiveness) آن را در دستگاههای تبلت و موبایل بررسی کنید.
پس از اعمال کلیه تنظیمات و ویژگیها، پیشنمایش نهایی هدر المنتور خود را مشاهده کنید. درصورتیکه میخواهید با اسکرول صفحه در وردپرس، هدر در بالای صفحه نمایش ثابت بماند، ادامه مقاله ساخت هدر با المنتور را مطالعه کنید.
ساخت هدر چسبان در المنتور چگونه است؟
هدر چسبان در وردپرس (Sticky Header)، امکان ثابت ماندن منو با اسکرول صفحه در وردپرس را فراهم میکند؛ ازاینرو هدر یا منوی سایت همیشه در بالای صفحه قابلمشاهده است. برای ایجاد هدر چسبان مراحل زیر را دنبال کنید:
- هدر را در ویرایشگر المنتور باز کنید. parent container هدر را با کلیک روی دسته آن یا از طریق بخش Navigator انتخاب کنید. سپس پنل «ویرایش کانتینر» در سمت چپ نمایش داده میشود.
- باز کردن تنظیمات پیشرفته: به برگه Advanced بروید.
- روی بخش Motion Effects کلیک کنید تا زیر مجموعههای آن نمایش داده شوند.
- از منوی کشویی Motion Effects گزینه «Sticky» را انتخاب کرده و یکی از گزینههای زیر را برای نمایش هدر هنگام اسکرول صفحه انتخاب کنید:
- None – برای حذف ویژگی چسبان (اگر میخواهید هدر شما با اسکرول صفحه همچنان نمایش داده شود، این گزینه را انتخاب نکنید).
- Top – برای قرار گرفتن هدر به بالای صفحه هنگام اسکرول کردن.
- Bottom – برای قرار گرفتن هدر به پایین صفحه هنگام اسکرول کردن (این گزینه اغلب برای هدر استفاده نمیشود و بیشتر مناسب برای فوتر سایت است).
- در قسمت Sticky On، دستگاههایی که میخواهید هدر در آنها چسبان باشد را انتخاب کنید:
- Desktop – فعال برای دسکتاپ و لپتاپ.
- Tablet Portrait – فعال برای تبلت.
- Mobile Portrait – فعال برای موبایل.
- تنظیمات زیر را اعمال کنید (این تنظیمات فقط درصورتیکه Sticky روی Top تنظیم شده باشد نمایش داده میشود):
- Offset – برای جابهجایی هدر به میزان پیکسل از بالا یا پایین.
- Effects Offset – تعداد پیکسلی که کاربر باید اسکرول کند تا هدر را در بالای صفحه با اسکرول کردن ببیند.
- Anchor Offset – برای تنظیم موقعیت اسکرول، بهطوریکه محتوای زیر هدر چسبان قابل مشاهده باشد.
- Stay in Column – بهتر است این گزینه را روی «Yes» بگذارید.
توجه داشته باشید برای سکشنها، لازم است ویژگی «Stretch Section» را غیرفعال کنید تا بتوانید از «Scrolling Effect» استفاده کنید. در آخر هم برای اعمال تغییرات هدر چسبان در المنتور روی گزینه انتشار «Publish» کلیک کنید.
خرید هاست ایران سرور
میزبانی پایدار، سریع و حرفهای برای راهاندازی و رشد وبسایت شما در دیتاسنترهای معتبر ایران و اروپا.
بررسی مشکلات رایج ساخت هدر در وردپرس با المنتور
۱. هدر در قسمت بالای صفحه نمایش داده نمیشود
- مشکل: اگر هدر در بالای صفحه یا در مکان موردنظر ظاهر نمیشود، احتمالاً تنظیمات جایگذار یا شرایط نمایش (Display Conditions) بهدرستی اعمال نشدهاند.
- راهحل: در پنل المنتور، به بخش Theme Builder بروید و گزینه Display Conditions را برای هدر بررسی کنید. مطمئن شوید که تنظیمات برای کلیه صفحات یا صفحاتی که نیاز دارید، فعال شده باشند.
۲. ریسپانسیو نبودن هدر در موبایل و تبلت
- مشکل: هدر ممکن است روی دستگاههای کوچکتر مثل تلفن همراه بهخوبی نمایش داده نشود یا بهدرستی سازگار نباشد.
- راهحل: در حالت ویرایشگر المنتور، به تب Responsive Mode بروید و حالتهای مختلف دستگاه (دسکتاپ، تبلت و موبایل) را بررسی کنید. مطمئن شوید که عرض و ارتفاع هدر در هر دستگاه تنظیم شده باشد. همچنین میتوانید عناصر غیرضروری در هدر را برای دستگاههای کوچکتر پنهان کنید.
۳. عدم ثبات رنگبندی و تفاوت در نمایش رنگها
- مشکل: گاهی رنگهای هدر در المنتور بهطوریکسان در همه صفحات اعمال نمیشود یا با رنگبندی اصلی سایت هماهنگ نیست.
- راهحل: به تنظیمات رنگبندی قالب وردپرس و المنتور توجه کنید. برای اطمینان، به بخش Site Settings در المنتور بروید و رنگها را در بخش Colors و Typography بهطورکامل تنظیم کنید. همچنین میتوانید از گزینههای CSS سفارشی استفاده کنید تا هدر بهصورت پایدار در همه صفحات رنگبندی یکسانی داشته باشد.
۴. ناپدید شدن لوگو یا دکمههای ناوبری در هدر
- مشکل: برخی کاربران ممکن است متوجه ناپدید شدن لوگو یا دکمهها شوند، که اغلب به دلیل مشکلات تنظیمات CSS یا Z-index رخ میدهد.
- راهحل: بررسی کنید که Z-index هدر و اجزای آن بهاندازه کافی بالا باشد تا سایر عناصر صفحه آن را نپوشانند. اگر از CSS سفارشی استفاده میکنید، مطمئن شوید که ویژگیهای display و visibility صحیح تنظیم شده باشند.
۵. مشکل در تنظیم اندازه هدر یا اجزای آن
- مشکل: هدر یا اجزای داخل آن ممکن است بیش از حد کوچک یا بزرگ به نظر برسند.
- راهحل: در پنل المنتور، به تنظیمات Padding و Margin برای هر عنصر بروید. برای حفظ تناسب، از تنظیمات VH (View Height) و VW (View Width) استفاده کنید تا اندازهها نسبت به صفحه تطبیق یابند.
بسیاری از سایتهای وردپرسی بعد از بهینهسازی رابط کاربری با المنتور، به دنبال تبدیل سایت به اپلیکیشن هستند؛ اگر شما هم چنین هدفی دارید، مقاله ساخت اپلیکیشن اندروید برای وردپرس را حتماً بررسی کنید.
جمعبندی
ساخت هدر با المنتور، به کاربران وردپرس این امکان را میدهد که بدون نیاز به دانش کدنویسی، هدرهایی جذاب و سفارشی ایجاد کنند. المنتور با ارائه ویجتهای مختلف مانند لوگو، منوی ناوبری و فرم جستجو، یک طراحی کاربرپسند را برای هدری باکیفیت فراهم میکند. با استفاده از این ابزار میتوانید یک هدر ثابت و ریسپانسیو طراحی کنید که در کلیه صفحات وبسایت قابل مشاهده باشد.
همچنین، رفع مشکلات رایج در ساخت هدر با المنتور نظیر ناپدید شدن لوگو یا عدم تطبیق رنگها، به بهبود تجربه کاربری کمک شایانی میکند. با اجرای این آموزش، میتوانید هدر سایت خود را با کارایی و استایلی بینظیر طراحی کنید. اگر تجربهای در این زمینه دارید یا سوالی هنگام ساخت هدر با المنتور برای شما پیش آمده است، در بخش نظرات پایین مقاله با ما و سایر کاربران به اشتراک بگذارید.
سوالات متداولی که شما میپرسید؟
۱. آیا المنتور در نسخه رایگان قابلیت ساخت هدر را دارد؟
بله؛ اما با محدودیتهای بسیاری مواجه است. درصورتیکه قصد ساخت هدر سایت وردپرس با المنتور را از صفر تا صد دارید، باید از نسخه پرو المنتور استفاده کنید.
۲. چگونه هدر ساخته شده را ریسپانسیو کنیم؟
در المنتور، به بخش Responsive Mode بروید و تنظیمات هدر را برای دستگاههای مختلف مانند موبایل و تبلت بهینه کنید. میتوانید اندازهها و چینش را برای هر دستگاه بهطورجداگانه تنظیم کنید.
۳. آیا امکان استفاده از هدرهای پیشفرض در المنتور وجود دارد؟
بله؛ در المنتور وردپرس میتوانید از Template Library، هدرهای آماده را انتخاب و مطابق سلیقه خود ویرایش کنید.
۴. چگونه میتوانم هدر چسبنده (Sticky) بسازم؟
برای ساخت هدر چسبنده، هدر را در ویرایشگر المنتور باز کرده و از تنظیمات Motion Effects گزینه Sticky را به «Top» تنظیم کنید تا هنگام اسکرول، هدر در بالای صفحه ثابت بماند.
۵. چطور میتوانم رنگ و فونت هدر را تغییر دهم؟
برای تغییر رنگ و فونت هدر، به تنظیمات Style در ویرایشگر المنتور بروید و بخشهای مربوط به Typography و Colors را سفارشیسازی کنید.
۶. چگونه جایگاه نمایش هدر را در صفحات مختلف تغییر دهم؟
پس از طراحی هدر، از طریق گزینه Display Conditions در Theme Builder، میتوانید مشخص کنید که هدر در کدام صفحات نمایش داده شود.
۷. آیا المنتور با همه قالبهای وردپرس سازگار است؟
بیشتر قالبهای وردپرس با المنتور سازگارند، اما پیشنهاد میشود از قالبهایی استفاده کنید که بهطورخاص برای کار با المنتور بهینه شدهاند.
۸. چرا هدر من در برخی صفحات نمایش داده نمیشود؟
احتمالاً در مورد عدم نمایش هدر در المنتور Display Conditions بهدرستی تنظیم نشده است. دوباره به تنظیمات Display Conditions در Theme Builder مراجعه کرده و بررسی کنید که هدر برای صفحات موردنظر فعال باشد.
منابع: