طراحی هدر وبسایت
با طی مراحل زیر، می توانید اقدام به شخصی سازی و طراحی هدر وبسایت خود داشته باشید.
- از مسیر پیشخوان>قالب ها> theme builder وارد پوسته ساز افزونه المنتور پرو شوید
- با کلیک بر روی دکمه افزودن جدید، وارد صفحه قالب ها شوید
- بر روی دکمه + در بخش هدر، کلیک کنید.
با ورود به این بخش، می توانید از قالب های آماده استفاده کنید و یا به صورت دستی، طراحی هدر را ادامه دهید.
ایجاد اجزای هدر
برای ایجاد هدر، ابتدا یک سکشن ایجاد می کنیم. رنگ این سکشن را از تب استایل، برابر رنگ سفید قرار دهید. در غیر این صورت، با تغییر رنگ زمینه، رنگ هدر نیز تغییر خواهد کرد. مقدار پدینگ نیز برابر 0 قرار می گیرد.
در ادامه شما می توانید ستون های مختلف را ایجاد کنید. غالبا اجزایی مانند لگو، منو، اطلاعات کابری و.. در این بخش قرار می گیرد. در این بخش شما می توانید تنظیمات مختلف را بر روی ابزارک های مورد استفاده خود مانند سایه، حاشیه، رنگ، سایز و…اعمال کنید.
شما می توانید با استفاده از ابزار های مختلف، موقعیت و نحوه نمایش این ابزارک ها را شخصی سازی کنید.
در طراحی این هدر، لوگو، منو، شماره تماس و حساب کاربری استفاده شده است که هر کدام را می توانید با ابزارک ها ایجاد و شخصی سازی کنید.
طراحی و شخصی سازی هدر در نمایشگر موبایل
پس از انجام تنظیمات بر روی نمایشگر دسکتاپ، لازم است بر روی نمایشگر موبایل نیز تغییراتی اعمال کنید.
برای بهینه سازی هر بخش در حالت موبایل، تنظیمات زیر را انجام دهید
نمایش لوگو در ویرایشگر موبایل
در نمایشگر موبایل، میتوانید سایز لوگو را تغییر داده تا در کنار منو، به صورت نواری نشان داده شود. مقدار 80 درصد برای لگو مناسب است.
نمایش منو در ویرایشگر موبایل
در نمایشگر دسکتاپ، کافیست آیکون منو در کنار لوگو نمایش داده شود. از این رو سایز منو کوچک و مقدار 20 درصد را به آن اختصاص می دهیم.
برای نمایش منو به صورت تمام صفحه و کامل در موبایل، از بخش محتوا، گزینه full width را فعال کنید.
از تب استایل و بخش دراپ دان، distance جایگاه فاصله اجزا با ستون منو را مشخص کنید.
در بخش تنظیمات آیکون منو، toggle button تنظیمات آیکون منو را انجام دهید
سایر اجزا را نیز می توانید شخصی سازی کنید.
نمایش اطلاعات تماس و حساب کاربری در موبایل
بهتر است در نمایشگر موبایل، ستون مربوط به اطلاعات تماس و حساب کاربری در هدر را مخفی، و به صورت زیر نمایش دهید:
از مسیر پیشخوان>قالب ها و با کلیک بر روی افزودن جدید، قالب خود را روی سکشن قرار داده و بر روی نمایشگر موبایل، یک سکشن سه ستونه، ایجاد می کنیم. عرض سکشن ها را به نحوی قرار دهید که در امتداد هم در یک ردیف قرار بگیرند.
در سه ستون، ابزارک آیکون را فعال می کنیم و برای هر یک، تنظیمات زیر را اجرا می کنیم:
- پیوند به صفحه home: آیکون هوم، پیوند داینامیک site URL قرار می دهیم. سایز و رنگ را نیز میتوانید تغییر دهید.
- پیوند به حساب کاربری: آیکون یوزر و پیوند را صفحه حساب کاربری قرار می دهیم
- پیوند به شماره تماس: آیکون تماس و پیوند را بر روی حالت content URL قرار می دهیم. با استفاده از ابزار تنظیمات در همین قسمت، type را بر روی حالت Tel قرار اده و شماره تماس را وارد می کنیم
با استفاده از این قسمت، کاربر با کلیک بر روی آیکون تماس، به صورت خودکار به شماره گیر موبایل با شماره تماس شما وارد خواهد شد.
50 پاسخ
سلام
قبل از هر چیز وظیفه خودم می دونم حسابی ازتون بابت آموزشهای خوبتون تشکر کنم.
در اون قسمتی که سکشن در المنتور تعریف کردید متوجه نشدم برای آیکون پنل کاربری، چه زیر مجموعه ای را برای داینامیک شدن باید انتخاب کرد؟(برای home و contact را کاملا متوجه شدم ولی برای آیکون کاربری نفهمیدم چه محتوای داینامیکی باید انتخاب کرد.)
ممنون میشم در این خصوص راهنمایی کنید.
سلام، تشکر از محبت شما
برای حساب کاربری از داینامیکی user info استفاده شده است.
سلام ممنون از آموزش فوق العاده خوبتون
من قدم به قدم با آموزش پیش اومدم اما زمانی هدر موبایل رو تنظیم میکنم هنگام بارگذاری موبایل یه فضای خالی در گوشی ایجاد میشه و به درستی هدر رو چسبیده به تمام صفحه نمایش نمیده و این موضوع روی کل سایت اعمال میشه
سلام
فکر کنم یه جای کار دارید خطا میکنید. دقت کنید هنگام چسبنده کردن هدر مقدار آفست را صفر کرده باشید
سلام من هدر برای سایتم طراحی کردم اما چسبانه چجوری کاری کنم که اون هدر ثابت بالای سایت بمونه
یا چطوری یه هدر چسبان جدا طراحی کنم که وقتی صفحه به سمت بالا کشیده میشه فقط نمایش داده بشه
سلام، این درخواست با استفاده از امکانات پیش فرض المنتور امکان پذیر نیست
سلام. ممنون از آموزش خوبتون. من برای موبایل که منو طراحی کردم، حالت ظاهر شونده اش از سمت چپ به راست شده که خیلی مناسب و خوب نیست. چگونه می توان که حالت ظاهر شونده ی منو رو از سمت راست به چپ کرد؟
سلام
باید زبان وردپرستون را به انگلیسی تغییر دهید.
با سلام و درود
ممنون بابت آموزش های شما
ممنون می‌شوم اگر راهنمایی کنید که چگونه هدر را در المنتور به طور مجزا ویرایش و عوض کنیم
(به طوری که هربرگه هدر متفاوت با سایر برگه ها داشته باشد)
با تشکر
سلام
نیازی به ساخت قالب هدر نیست. در داخل هر برگه یک هدر مچزا طراحی کنید 🙂
سلام استاد عزیز من تازه با سایت شما آشنا شدم اولا میخوام از آموزش های عالی که گذاشتید تشکر کنم.
دوما یک سوال داشتم اینکه من قالب آوادا رئ استفاده میکنم ، میتونم از المنتور روی آوادا استفاده کنم؟محدودیتی برام ایجاد نمیکنه؟
سلام
متشکر از شما بزرگوار، اگر قالب آواداتون همیشه بروزباشه هیچ مشکلی نخواهید داشت.
سلام بسیار ممنونم از آموزش فوق العاده تون.
من آموزش ها را تا اینجا با دقت دیدم. در این جلسه (آموزش ساخت هدر با المنتور)، فرمودید که منو رو در وردپرس بسازید و برای طراحی هدر، منو را فراخوانی کنید. میشه در مورد ساخت منو در وردپرس هم توضیح دهید.
ممنون
سلام
آموزش صرفا مربوط به المنتور بوده و ربطی به وردپرس ندارد. برای ساخت منو، از بخش پیشخوان > نمایش > فهرست ها میتوانید منو خود را ایجاد نمایید
سلام. وقتتون بخیر . از داخل وردپرس منو درست کردم. ناو منو رو که اضافه میکنم ٰ منوی سایت رو نمایش نمیده. دلیل نیومدنش چی هست؟
سلام
دلایل زیادی میتونه داشته باشه، مطمئن باشید که هسته وردپرس و المنتور به آخرین نسخه خود بروز باشند
اول از همه ممنون بابت آموزش های خیلی عالی تون
دوم اینکه یه سوال داشتم چرا وقتی در المنتور حالت واکنش گرا را انتخاب میکنم و مثلا تغییرات در موبایل را اعمال میکنم مثل سایز فونت و … در حالت دسکتاپ هم اعمال میشه؟
سلام ممنون از شما
به خاطر اینکه قوانین واکنشگرایی را به درستی رعایت نمی کنید. آموزش ارسالی میتونه کمکتون کنه
تنظیمات واکنشگرایی و ریسپانسیو کردن صفحات در افزونه المنتور
سلام و خسته نباشید
منو در ورژن موبایل من به زیر سلادیری که گذاشتم می ره و معلوم نیست
چه کاری باید انجام بدم؟
سلام
z-index ابزارک و یا سکشن هدرتونو بر روی عدد 999 بذارید