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

زمان مطالعه: 7 دقیقه

بهتر است بدانیم که هیچ طراحی وب سایتی بدون هدر و فوتر کامل نمی شود. هدر و فوتر نقش مهمی در ارائه یک تجربه کاربری عالی با دسترسی به ناوبری بهتر در سراسر وب سایت دارند.

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

چرا طراحی هدر اهمیت بالایی دارد؟

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

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

همچنین هدر می تواند نقش مهمی در ارتقاء هویت برند تجاری شما داشته باشد، بسیاری از مجموعه های طراحی سایت یکی از فاکتور های تاثیر گذار بر تعرفه طراحی سایت را هدر می دانند.

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

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

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

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

  1. طراحی هدر توسط المنتور با قالب های آماده
  2. طراحی هدر توسط المنتور به صورت سفارشی ساز

برای طراحی هدر توسط المنتور ابتدا از پیشخوان وردپرس، تب قالب ها بر روی قالب های ذخیره شده و سپس افزودن کلیک کنید.

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

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

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

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

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

تمپلیت های آماده در المنتور

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

همچنین باید منو خود را از قسمت فهرست ها آماده کرده و در این قسمت درج کنید.

آموزش طراحی هدر با المنتور 1

 

آموزش طراحی هدر با المنتور 2

زمانی که تغییرات لوگو و منو برای طراحی هدر سایت شما به اتمام رسید بر روی دکمه انتشار کلیک کنید. در این هنگام پنجره ای به عنوان تنظیمات انتشار برای شما باز می شود، بر روی دکمه اضافه کردن شرط کلیک کنید.

مکان نمایش هدر

حال چندین گزینه مشاهده می شوند.

  1. ورودی سایت: با فعال کردن این گزینه در تمام صفحات سایت این سربرگ نمایش داده میشود.
  2. آرشیو یا بایگانی: اگر گزینه آرشیو یا بایگانی را انتخاب کنید فقط برای آرشیوها، نتایج جستجو، دسته بندی ها و در واقع تمام آرشیو ها نمایش داده میشود.
  3. منحصر به فرد یا تکی: برای گزینه منحصر به فرد می توانید داخل یک صفحه خاص مثلا صفحه اصلی فقط نمایش داده شود یا در نوشته های خاص یا در دسته خاصی نشان داده شود.

مکان نمایش هدر 2

 

مکان نمایش هدر 3

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

مکان نمایش هدر 4

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

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

برای طراحی هدر به صورت سفارشی مجدد وارد پنل پیشخوان وردپرسی وب سایت خود شوید.

اگر فهرست یا منو ندارید در ابتدا بهتر است یک فهرست یا منو برای سایت خود تنظیم کنید.

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

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

به این نکته توجه داشته باشید که در طراحی هدر سایت پس زمینه هدر یا سربرگ می تواند شامل تصویر یا حتی ویدئو باشد. بعد از اینکه بر روی دکمه Edit Header کلیک کردید میتوانید کل هدر را پاک کنید و هدر جدید بسازید یا می توانید هدر موجود در سایت خود را ویرایش نمایید.

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

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

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

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

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

در صفحه ایجاد شده برای طراحی هدر سایت باید بر روی علامت + کلیک کنید و مشخص کنید قصد دارید هدر را به چند بخش تبدیل کنید. بهتر است هدر بین 3 الی 4 بخش باشد.

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

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

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

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

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

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

همچنین منویی که در قسمت فهرست ها ایجاد کرده اید را می توانید در قسمت دلخواه در هدر سایت خود بارگذاری کنید.

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

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

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

بخش کشیده را بر روی on قرار دهید.

ارتفاع را بر روی کمترین ارتفاع و واحد آن را بر روی VH قرار دهید.

VH: در واقع بر اساس مرورگرتان ارتفاع را کم یا زیاد میکند. مقدار آن را بر اساس طراحی که در نظر گرفته اید کم یا زیاد کنید.

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

در آخرین مرحله از طراحی هدر پس از انجام تغییرات روی دکمه ذخیره و بستن یا همان UPDATE کلیک کنید.

موفق شدید، شما توانستید یک هدر سفارشی با طرح خودتان ایجاد کنید.

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

5/5 (3 نظر)
این مطالب را از دست ندهید
اشتراک در
اطلاع از
guest
20 نظرات
قدیمی‌ترین
تازه‌ترین بیشترین رأی
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها
مهدی
مهدی
2 ماه قبل

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

alireza behzadifar
مدیر
alireza behzadifar
2 ماه قبل
پاسخ به  مهدی

سلام مهدی جان
روزت بخیر
اول از همه بگم بهت که اگه بخوای از هدر های پیشفرض استفاده کنی باید از نسخه پولی المنتور (المنتور پرو) رو داشته باشی.

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

این توضیح به صورت کامل ترش همراه با عکس داخل محتوا مقاله هست.

سارا
سارا
2 ماه قبل

در طول این مقاله یه جا در مورد Vh صحبت شد.
من متوجه نشدم
Vh چیه؟

alireza behzadifar
مدیر
alireza behzadifar
2 ماه قبل
پاسخ به  سارا

سلام، روزتون بخیر
الان واضح تر توضیح می دم که متوجه شید
VH مخفف “viewport height” است که ارتفاع صفحه نمایش قابل مشاهده است. ۱۰۰VH نشان دهنده ۱۰۰٪ ارتفاع قسمتی که میبینیم یا ارتفاع کامل صفحه است.

محمد
محمد
2 ماه قبل

سلام
مسیری که باید بریم تا به ساخت هدر جدید برسیم رو لطف می کنید بگید؟

alireza behzadifar
مدیر
alireza behzadifar
2 ماه قبل
پاسخ به  محمد

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

یاسر
یاسر
2 ماه قبل

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

alireza behzadifar
مدیر
alireza behzadifar
1 ماه قبل
پاسخ به  یاسر

سلام آقا یاسر
قیمت المنتور پرو در این لحظه که من دارم این پیامو به شما می دم ۱۴۹.۰۰۰ تومان است. 🙂
سایت ساز بوم به دلیل اینکه افزونه المنتور پرو کاربردهای زیادی داره و قشر گسترده ای از مخاطبین را داراست. المنتور پرو را به صورت رایگان بر روی وب سایت های آماده ای که ارائه می دهد نصب و فعالسازی کرده است.

معین
معین
1 ماه قبل

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

alireza behzadifar
مدیر
alireza behzadifar
1 ماه قبل
پاسخ به  معین

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

مصطفی
مصطفی
1 ماه قبل

سلام

من هدر سایتمو با استفاده از المنتور سفارشی سازی می کنم تغییرات رو ذخیره هم می کنم با موفقیت هم سیو می شه ولی تغییراتم اعمال نمیشه مشکل از چیه؟

alireza behzadifar
مدیر
alireza behzadifar
1 ماه قبل
پاسخ به  مصطفی

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

صادق
صادق
1 ماه قبل

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

alireza behzadifar
مدیر
alireza behzadifar
1 ماه قبل
پاسخ به  صادق

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

صادق
صادق
1 ماه قبل

سلام
هدر جدیدی که به صورت سفارشی سازی برای سایتم می سازم رو می تونم فونت سفارشی بهش بدم؟

alireza behzadifar
مدیر
alireza behzadifar
1 ماه قبل
پاسخ به  صادق

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

آرش
آرش
24 روز قبل

سلام
سکشن چیه و چه جوری باید ایجادش کنیم؟

alireza behzadifar
مدیر
alireza behzadifar
20 روز قبل
پاسخ به  آرش

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

رضایی
رضایی
18 روز قبل

لینکی که داخل فوتر قرار می گیره تاثیر بیشتری داره یا لینکی که داخل هدر قرار میگیره؟
ممنون می شم جواب بدید.

alireza behzadifar
مدیر
alireza behzadifar
17 روز قبل
پاسخ به  رضایی

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