ایکون
قالب اکسترا
120 وبسایت آماده شرکتی و فروشگاهی
فقط با 1,378,000 تومان
مشاهده و خرید
ساخت هدر سایت با المنتور
مجموعه مقالات وردپرس

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

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

2
22 اسفند 1400
آخرین بروزرسانی: 17 آذر 1403

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

برای دسترسی به آموزش‌های کامل‌تر و پروژه‌محور در زمینه وردپرس، پیشنهاد می‌کنیم دوره طراحی سایت با وردپرس را از دست ندهید.

طراحی هدر با المنتور

هدر با ترکیب عناصری مانند لوگوی شرکت، تایپوگرافی، رنگ‌ها و زبان کلی برند می‌تواند نقش مهمی در ارتقای هویت برند تجاری شما داشته باشد. سربرگ برای نمایش گزینه‌ های کاربردی مانند منو سایت، جستجوی سایت، سبد خرید (برای سایت‌های فروش)، دکمه‌های فراخوان برای اقدام (CTA) و سایر عملکردهایی است که نرخ تبدیل را افزایش می‌دهند. در این بخش از آموزش المنتور مراحل ساخت هدر با المنتور پرو (Elementor Pro) را شرح می‌دهیم.

محصول پیشنهادی
بنر
افزونه المنتور، دانلود افزونه Elementor Pro
دسته بندی : افزونه صفحه ساز وردپرس
24315
فروش
88%
رضایت

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

ابتدا با نصب افزونه المنتور کار را شروع کنید بعد از نصب و فعتا سازی المنتور در پیشخوان وردپرس در قسمت قالب > قالب های ذخیره شده افزودن جدید را کلیک کنید و نوع قالب را سربرگ انتخاب کنید.

ایجاد قالب در طراحی هدر با المنتور

اسم قالب را هدر یا سربرگ یا هر نام دیگری قرار دهید و بر روی ایجاد قالب کلیک کنید.

ذخیره نام قالب در طراحی سربرگ با المنتور

افزونه المنتور کتابخانه‌هایی شامل هدر آماده دارد که به راحتی می‌توانید از آنها استفاده کرده و شخصی سازی کنید. ما در این آموزش قصد داریم قالب اختصاصی خود را ایجاد کنیم بنابراین بدون انتخاب قالب آماده پنجره کتابخانه را ببندید.

کتابخانه سربرگ های آماده در طراحی هدر با المنتور

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

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

ایجاد ستون برای طراحی هدر در المنتور

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

در مرحله سوم از طراحی هدر با المنتور، ویجت های لوگو، فهرست، آیکن، فرم جست و جو را از بخش المان‌ها درگ (drag) کنید و به ستون‌ها اضافه کنید. ما در این آموزش ساخت هدر با المنتور از ویجت هایی مانند لوگو، فهرست ناوبری، دکمه ها، آیکن‌ها و فرم جستجو استفاده می‌کنیم. در ادامه نحوه ویرایش هر یک را توضیح می‌دهیم.

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

✔️ طراحی لوگو هدر با المنتور

برای نمایش لوگو در هدر در پیشخوان وردپرس مسیر نمایش > سفارشی سازی > هویت سایت > گزینش نشان را دنبال کنید. سپس لوگو مورد نظر خود را بارگزاری کنید، به ویرایشگر المنتور برگردید و ذخیره را بزنید و با یکبار رفرش تغییرات لوگو را مانند تصویر زیر ببینید.

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

 

✔️ طراحی فهرست هدر با المنتور

برای نمایش فهرست در هدر المنتور به پپیشخوان وردپرس برگردید و در قسمت نمایش > فهرست ها، فهرست مورد نظر خود را ایجاد کنید.

ایجاد فهرست در طراحی هدر با المنتور

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

ویرایش منو در طراحی هدر سایت با المنتور

حتماً بخوانید آموزش المنتور

✔️ طراحی آیکن هدر با المنتور

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

ویرایش آیکن در طراحی هدر

❗️ نکته: اگر بخواهید آیکن دیگری اضافه کنید می‌توانید از آیکن قبلی یک کپی بگیرید و بر روی آیکن جدید کلیک راست و پیست استایل را بزنید، تمام استایل های آیکن قبلی بر روی آن اعمال می‌شود.

اگر می‌خواهید اطلاعات بیشتری درباره وردپرس و طراحی سایت با این سیستم مدیریت محتوا با دست آورید، در وردپرس چیست با آمار و ارقام این CMS محبوب که بیش از 43% از سایت‌های دنیا با آن طراحی شده‌اند آشنا شوید.

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

✔️ طراحی دکمه هدر با المنتور

برای ویرایش دکمه در طراحی هدر با المنتور هم با کلیک بر روی آن محتوا و استایل آن را تغییر دهید.

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

✔️ طراحی فرم جستجو هدر با المنتور

در ستون سوم و در زیر آیکن و دکمه یک ویجت فرم جستجو که معمولا در سربرگ‌ها دیده می‌شود قرار دهید و آن را ویرایش کنید.

 

فرم جست وجو در طراحی هدر با المنتور

اگر بخواهید سربرگ جذاب تری ایجاد کنید  می‌توانید به تنظیمات طرح بندی و استایل المنتور وارد شوید. با استفاده از آموزش کار با المان تب ها در المنتور تراز بندی و فاصله مناسب مورد نظر خود را برای آیکن‌ها و دکمه‌ها ایجاد کنید. گزینه های سفارشی سازی هر قسمت را مرور کنید و بهترین الگوی طراحی مانند طرح‌بندی منو، هم‌ترازی، حاشیه، padding و غیره را که می‌خواهید استفاده کنید.

در نهایت یک هدر مانند تصویر زیر خواهید داشت. بعد از ساخت هدر با المنتور دکمه ذخیره تغییرات یا انتشار را بزنید.

طراحی هدر با المنتور

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

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

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

انتخاب شرایط نمایش هدر در المنتور افزونه المنتور المان‌های جذابی برای ایجاد فوتر سایت نیز دارد. برای طراحی فوتر با المنتور می‌توانید هم از قالب‌های آماده استفاده کنید و هم صفر تا 100 آن را با این صفحه‌ساز محبوب طراحی کنید.

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

داشتن ناوبری ساده در وب سایت موجب می‌شود تا کاربران بتوانند براحتی سایت شما را مرور کنند و در اولین نگاه به امکانات مهم دسترسی پیدا کنند. ساخت هدر با المنتور و ایجاد یک تجربه کاربری عالی می‌تواند عملکرد را افزایش داده و به کاربران کمک کند تا محتوای دلخواه خود را سریعتر پیدا کنند. در نتیجه یک هدر مناسب می‌تواند عملکرد کلی SEO را بهبود بخشد. امیدواریم از آموزش ساخت هدر سایت با المنتور استفاده کرده باشید. سوالات و دیدگاه های خود را در مورد آن با ما در میان بگذارید.

مهسا کاظمی پور
مهسا کاظمی پور
مهسا هستم، عاشق زندگی، نوشتن، نقاشی و صد البته مهارت‌ها و تجربه های جدید :)
مقالات مرتبط
بنر
آموزش قالب وودمارت؛ آموزش صفر تا صد طراحی فروشگاه
قالب وودمارت یک راه حل قدرتمند برای طراحی یک فروشگاه اینترنتی است. این قالب با انعطاف پذیری بالا، مجموعه ویژگی‌های غنی و رابط کاربری بصری، به شما این امکان را می‌دهد تا فروشگاه رویایی خود را به راحتی راه اندازی کنید. در این مقاله، آموزش قالب وودمارت را شروع و شما را با جنبه های مختلف این قالب ...
بنر
آموزش گام به گام بسته نصب آسان در لوکال هاست
اگر در لوکال هاست وب سایت خود را راه اندازی کنید می توانید یکباره وب سایت خود را به هاست منتقل کنید. یعنی بدون آنکه نیاز به هاست و دامنه داشته باشید، سایت را بدون استرس و نگرانی راه اندازی می کنید  و پس از مطمئن شدن از همه تغییرات دلخواهتان، آن را به هاست اصلی انتقال می دهید. همچنین در مصرف ...
بنر
آموزش نصب و فعالسازی ioncube در زمپ
ionCube Loader ماژولی است که برای اجرای فایل های رمزگذاری شده روی سرور نصب می شود. نصب و فعالسازی ioncube به سادگی انجام می شود. در صورت فعال نبودن ionCube شما با خطا مواجه می شوید. اما راهکار ساده رفع این خطا نصب ionCube در کمتر از چند دقیقه است که در ادامه به توضیح آن به صورت ویدئویی می پردازیم.
بنر
آموزش نصب آسان قالب وردپرس در Cpanel
شاید شما هم این جمله را شنیده باشید. در کم تر از 10 دقیقه سایت وردپرس خود را نصب کنید. در نگاه اول به نظرتان این جمله فقط یک تبلیغ برای جذب مخاطب به نظر می‌رسد اما کاملا درست است. کافی است از بسته نصب آسان وردپرس استفاده کنید تا سایت شما در کم تر از 10 دقیقه، روی هاست نصب شود. با هم نصب قالب ...
2 دیدگاه
hamidmohamadzadeh
hamidmohamadzadeh
16 بهمن 1401 19:19

سلام. برای طراحی هدر با ویژوال کامپوزر هم راهی هست؟ قالبی که استفاده میکنم هم امکان طراحی هدر جدید نداره.میشه لطفا راهنماییم کنید؟

آیا مفید بود ؟
0
مهسا کاظمی پور
مهسا کاظمی پور
17 بهمن 1401 09:21

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

آیا مفید بود ؟