یلدای ایران المتنور

30 %
تخفیف ویژه
تا 7ر وز
آموزش المنتور 2024

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

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

فهرست مطالب

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

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

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

ساخت هدر

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

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

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

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

50 پاسخ

  1. سلام
    قبل از هر چیز وظیفه خودم می دونم حسابی ازتون بابت آموزشهای خوبتون تشکر کنم.
    در اون قسمتی که سکشن در المنتور تعریف کردید متوجه نشدم برای آیکون پنل کاربری، چه زیر مجموعه ای را برای داینامیک شدن باید انتخاب کرد؟(برای home و contact را کاملا متوجه شدم ولی برای آیکون کاربری نفهمیدم چه محتوای داینامیکی باید انتخاب کرد.)
    ممنون میشم در این خصوص راهنمایی کنید.

    1. سلام، تشکر از محبت شما
      برای حساب کاربری از داینامیکی user info استفاده شده است.

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

    1. سلام
      فکر کنم یه جای کار دارید خطا میکنید. دقت کنید هنگام چسبنده کردن هدر مقدار آفست را صفر کرده باشید

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

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

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

    1. سلام
      باید زبان وردپرستون را به انگلیسی تغییر دهید.

  5. با سلام و درود
    ممنون بابت آموزش های شما
    ممنون می‌شوم اگر راهنمایی کنید که چگونه هدر را در المنتور به طور مجزا ویرایش و عوض کنیم
    (به طوری که هربرگه هدر متفاوت با سایر برگه ها داشته باشد)
    با تشکر

    1. سلام
      نیازی به ساخت قالب هدر نیست. در داخل هر برگه یک هدر مچزا طراحی کنید 🙂

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

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

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

    1. سلام
      آموزش صرفا مربوط به المنتور بوده و ربطی به وردپرس ندارد. برای ساخت منو، از بخش پیشخوان > نمایش > فهرست ها میتوانید منو خود را ایجاد نمایید

  8. سلام. وقتتون بخیر . از داخل وردپرس منو درست کردم. ناو منو رو که اضافه میکنم ٰ‌ منوی سایت رو نمایش نمیده. دلیل نیومدنش چی هست؟

    1. سلام
      دلایل زیادی میتونه داشته باشه، مطمئن باشید که هسته وردپرس و المنتور به آخرین نسخه خود بروز باشند

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

  10. سلام و خسته نباشید
    منو در ورژن موبایل من به زیر سلادیری که گذاشتم می ره و معلوم نیست
    چه کاری باید انجام بدم؟

    1. سلام
      z-index ابزارک و یا سکشن هدرتونو بر روی عدد 999 بذارید

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

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

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