آموزش المنتور 2024

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

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

فهرست مطالب

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

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

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

ساخت هدر

ابتدا روی دکمه “+” کلیک کرده و یک کانتینر با ساختار سه‌ستونه ایجاد می‌کنیم. ستون‌های راست و چپ دارای عرض ۲۰ درصد و ستون میانی ۶۰ درصد خواهند بود. رنگ پس‌زمینه کانتینر اصلی را سفید انتخاب کرده و برای ایجاد جلوه، سایه‌ای با مقدار تیرگی ۱۵ درصد اضافه می‌کنیم.

  • ستون راست: ابزارک “لوگوی سایت” اضافه شده و تنظیماتی نظیر تایپوگرافی، رنگ و ترازبندی برای آن اعمال می‌شود.
  • ستون میانی: ابزارک “فهرست وردپرس” قرار می‌گیرد. تنظیمات مربوط به چیدمان، رنگ متن، استایل جداکننده، و ارتفاع منو انجام می‌شود.
  • ستون چپ: دکمه‌های “ثبت‌نام” و “ورود” قرار داده می‌شوند که با تنظیمات رنگ، فونت و اندازه بهینه شده‌اند.

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

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

51 پاسخ

  1. سلام وقتتون بخیر. قبل از اینکه سؤالم رو مطرح کنم، لازم می‌دونم بسیار تشکر کنم از آموزش بسیار حرفه‌ای و تخصصی جنابعالی. به جرأت میتونم بگم جزء بهترین آموزشهایی هست که تا به امروز دریافت کردم.
    سؤالم این هست که من گام به گام با آموزش شما پیش رفتم برای طراحی هدر. اما زمانی که بخش داخلی رو اضافه می‌کنم ، قسمت ویرایش هر دو سکشن روی هم قرار می‌گیره و عملا باکس ویرایش سکشن اصلی زیر سکشن داخلی پنهان میشه. و همچنین ستون‌های سکشن داخلی از کناره های ستون اصلی کلی فاصله داره. من تمام تنظیمات رو دقیقا مثل شما انجام دادم و نمیدونم مشکل کجاست!

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

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

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

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

  4. سلام . وقتتون به خیر

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

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

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

  6. سلام و تشکر از زحماتتون
    امکانش هست فایل json این هدر رو در اختیار قرار بدین؟

  7. سلام . تشکر از آموزش خوبتون.
    یه سوال مگامنو ها رو چطور باید تنظیم کرد؟

  8. سلام وقتتون بخیر
    واقعا ممنون اولین سایتی بودین که از قالب های آماده استفاده نکردین و از پایه آموزش دادین… برای منی که از المنتور سر در نمی آوردم واقعا عالی بود
    بازم ممنون

    1. سلام وقت شما بخیر
      ممنون از شما، رضایت شما باعث اقتخار ماست

  9. سلام و عرض ادب، ممنون از آموزش های عالیتون، خدا قوت، یک سوال، منظور از بحث ایندکس z که در قسمت پیشرفته هست چیه؟ هر عددی میزنم تغییری نشون نمیده 🙂
    ممنون میشم راهنمایی فرمایید.

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

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دریافت راهنمای تخصصی برای بهبود کار با المنتور
دریافت راهنمای تخصصی برای بهبود کار با المنتور