آموزش ساخت هدر با المنتور؛ ۰ تا ۱۰۰ طراحی سربرگ سایت با وردپرس
برای ساخت هدر با استفاده از Theme Builder المنتور، مراحل زیر را دنبال کنید قبل شروع کار آن در نظر داشته باشید. در فرآیند طراحی هدر سفارشی با المنتور، بروز خطاهایی مثل باز نشدن ادیتور یا گیر کردن روی حالت بارگذاری ممکن است رخ دهد؛ در چنین شرایطی، ارزیابی دلایل لود نشدن المنتور میتواند مانع اتلاف زمان شما شود.
بسیاری از مشکلاتی که هنگام ساخت هدر با المنتور تجربه میشود، مستقیماً به کیفیت میزبانی سایت مربوط است؛ با تهیه هاست حرفهای، میتوانید خیالتان را از بابت پایداری، سرعت و اجرای صحیح طراحیها راحت کنید.
شما میتوانید هدر سایت را با استفاده از Theme Builder المنتور ادیت یا همان ویرایش کنید. برای این کار مراحل زیر را انجام دهید:
توجه داشته باشید در ویرایش مجانی المنتور، ویرایش گسترده هدر بسیار سخت یا بهعبارتی غیرقابل انجام است. ازاینرو اگر قصد ساخت هدر با المنتور وردپرس را دارید بهتر است ادیشن پرو المنتور را دریافت کنید. در ادامه نحوه طراحی هدر سایت وردپرسی با المنتور پرو را آموزش دادیم.
با هاست وردپرس ایرانسرور، سرعت فوقالعاده و امنیت پولادین را تجربه کنید.
خریداری هاست وردپرس
در این روش، میتوانید هدر سایت خود را از ابتدا و بهصورت جامعاً سفارشی طراحی کنید. برای ساخت هدر با المنتور پرو سه مرحله کلی وجود دارد که شامل اضافه کردن ویجت لوگوی سایت، منوی ناوبری (Nav Menu) و فرم جستجو یا دکمه اشتراک شبکههای اجتماعی میشود. بیایید مراحل را آغاز کنیم.
در صفحه موردنظر سایت به حالت ویرایش با المنتور بروید. در ابتدای بالای صفحه، سه ردیف ستون قرار دهید. معمولاً به لوگوی سایت، نوار جستجو و دکمههای شبکههای اجتماعی در هدر سایت نیاز دارید که هر ستون مختص به یکی از این موارد خواهد بود. این عناصر در گالری ویجتهای المنتور موجود هستند.
برای اضافه کردن لوگو، ویجت لوگوی سایت را انتخاب کرده و آن را در باکس موردنظر خود قرار دهید.
حال میتوانید لوگو را مطابق سلیقه خود سفارشیسازی کنید؛ برای مثال اندازه آن را تغییر دهید، تراز کنید، کپشن اضافه کنید یا لینک دلخواهی به آن اضافه کنید.
برای اعمال استایلهای مختلف به ویجت لوگو، روی گزینه Style کلیک کنید. اینجا میتوانید تنظیماتی مانند عرض، ارتفاع، شفافیت، فیلترهای CSS، نوع حاشیه و موارد دیگر را تغییر دهید.
المنتور روی وردپرس بهترین بازده را زمانی دارد که سایت روی میزبانی بهینه اجرا شود؛ اگر نمیدانید دقیقاً هاست وردپرس چیست؟ و چه تفاوتی با هاستهای معمولی دارد، این مقاله دید شفافی به شما میدهد.
در این مرحله از ساخت هدر با المنتور پرو باید ویجت Nav 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)، توانایی ثابت ماندن منو با اسکرول صفحه در وردپرس را فراهم میکند؛ ازاینرو هدر یا منوی سایت همیشه در بالای صفحه قابلمشاهده است. برای ایجاد هدر چسبان مراحل زیر را دنبال کنید:
توجه داشته باشید برای سکشنها، لازم است مشخصه «Stretch Section» را غیرفعال کنید تا بتوانید از «Scrolling Effect» استفاده کنید. در آخر هم برای اعمال اصلاحات هدر چسبان در المنتور روی گزینه انتشار «Publish» کلیک کنید.
خریداری هاست ایران سرور
میزبانی پایدار، سریعتر و حرفهای برای راهاندازی و رشد وبسایت شما در دیتاسنترهای معتبر ایران و اروپا.
تهیه هاست
بسیاری از سایتهای وردپرسی بعد از بهینهسازی رابط کاربری با المنتور، به دنبال تبدیل سایت به اپلیکیشن هستند؛ اگر شما هم چنین هدفی دارید، مقاله ساخت اپلیکیشن اندروید برای وردپرس را حتماً مرور کنید.
ساخت هدر با المنتور، به کاربران وردپرس این قابلیت را میدهد که بدون نیاز به دانش کدنویسی، هدرهایی جذاب و سفارشی ایجاد کنند. المنتور با ارائه ویجتهای مختلف مانند لوگو، منوی ناوبری و فرم جستجو، یک طراحی کاربرپسند را برای هدری باکیفیت فراهم میکند. با استفاده از این ابزار میتوانید یک هدر ثابت و ریسپانسیو طراحی کنید که در کلیه صفحات وبسایت قابل مشاهده باشد.
علاوه بر این، رفع مشکلات رایج در ساخت هدر با المنتور نظیر ناپدید شدن لوگو یا عدم تطبیق رنگها، به بهبود تجربه کاربری کمک شایانی میکند. با اجرای این آموزش، میتوانید هدر سایت خود را با کارایی و استایلی بینظیر طراحی کنید. اگر تجربهای در این زمینه دارید یا سوالی هنگام ساخت هدر با المنتور برای شما پیش آمده است، در بخش نظرات پایین مقاله با ما و سایر کاربران به اشتراک بگذارید.
۱. آیا المنتور در ادیشن بدون هزینه قابلیت ساخت هدر را دارد؟
بله؛ اما با محدودیتهای بسیاری مواجه است. درصورتیکه قصد ساخت هدر سایت وردپرس با المنتور را از صفر تا صد دارید، باید از نسخه جدید پرو المنتور استفاده کنید.
۲. چگونه هدر ساخته شده را ریسپانسیو کنیم؟
در المنتور، به بخش Responsive Mode بروید و تنظیمات هدر را برای دستگاههای مختلف مانند موبایل و تبلت بهینه کنید. میتوانید اندازهها و چینش را برای هر دستگاه بهطورجداگانه تنظیم کنید.
۳. آیا توانایی استفاده از هدرهای پیشفرض در المنتور وجود دارد؟
بله؛ در المنتور وردپرس میتوانید از Template Library، هدرهای آماده را انتخاب و مطابق سلیقه خود ویرایش کنید.
۴. چگونه میتوانم هدر چسبنده (Sticky) بسازم؟
برای ساخت هدر چسبنده، هدر را در ویرایشگر المنتور باز کرده و از تنظیمات Motion Effects گزینه Sticky را به «Top» تنظیم کنید تا هنگام اسکرول، هدر در بالای صفحه ثابت بماند.
۵. چطور میتوانم رنگ و فونت هدر را تغییر دهم؟
برای تغییر رنگ و فونت هدر، به تنظیمات Style در ویرایشگر المنتور بروید و بخشهای مربوط به Typography و Colors را سفارشیسازی کنید.
۶. چگونه جایگاه نمایش هدر را در صفحات مختلف تغییر دهم؟
پس از طراحی هدر، از طریق گزینه Display Conditions در Theme Builder، میتوانید مشخص کنید که هدر در کدام صفحات نمایش داده شود.
۷. آیا المنتور با همه قالبهای وردپرس سازگار است؟
بیشتر قالبهای وردپرس با المنتور سازگارند، اما پیشنهاد میشود از قالبهایی استفاده کنید که بهطورخاص برای کار با المنتور بهینه شدهاند.
۸. چرا هدر من در برخی صفحات نمایش داده نمیشود؟
احتمالاً در مورد عدم نمایش هدر در المنتور Display Conditions بهدرستی تنظیم نشده است. دوباره به تنظیمات Display Conditions در Theme Builder مراجعه کرده و مرور کنید که هدر برای صفحات موردنظر فعال باشد.
منابع:
elementor
happyaddons
