طراحی هدر وبسایت
با طی مراحل زیر، می توانید اقدام به شخصی سازی و طراحی هدر وبسایت خود داشته باشید.
- از مسیر پیشخوان>قالب ها> theme builder وارد پوسته ساز افزونه المنتور پرو شوید
- با کلیک بر روی دکمه افزودن جدید، وارد صفحه قالب ها شوید
- بر روی دکمه + در بخش هدر، کلیک کنید.
با ورود به این بخش، می توانید از قالب های آماده استفاده کنید و یا به صورت دستی، طراحی هدر را ادامه دهید.
ایجاد اجزای هدر
برای ایجاد هدر، ابتدا یک سکشن ایجاد می کنیم. رنگ این سکشن را از تب استایل، برابر رنگ سفید قرار دهید. در غیر این صورت، با تغییر رنگ زمینه، رنگ هدر نیز تغییر خواهد کرد. مقدار پدینگ نیز برابر 0 قرار می گیرد.
در ادامه شما می توانید ستون های مختلف را ایجاد کنید. غالبا اجزایی مانند لگو، منو، اطلاعات کابری و.. در این بخش قرار می گیرد. در این بخش شما می توانید تنظیمات مختلف را بر روی ابزارک های مورد استفاده خود مانند سایه، حاشیه، رنگ، سایز و…اعمال کنید.
شما می توانید با استفاده از ابزار های مختلف، موقعیت و نحوه نمایش این ابزارک ها را شخصی سازی کنید.
در طراحی این هدر، لوگو، منو، شماره تماس و حساب کاربری استفاده شده است که هر کدام را می توانید با ابزارک ها ایجاد و شخصی سازی کنید.
طراحی و شخصی سازی هدر در نمایشگر موبایل
پس از انجام تنظیمات بر روی نمایشگر دسکتاپ، لازم است بر روی نمایشگر موبایل نیز تغییراتی اعمال کنید.
برای بهینه سازی هر بخش در حالت موبایل، تنظیمات زیر را انجام دهید
نمایش لوگو در ویرایشگر موبایل
در نمایشگر موبایل، میتوانید سایز لوگو را تغییر داده تا در کنار منو، به صورت نواری نشان داده شود. مقدار 80 درصد برای لگو مناسب است.
نمایش منو در ویرایشگر موبایل
در نمایشگر دسکتاپ، کافیست آیکون منو در کنار لوگو نمایش داده شود. از این رو سایز منو کوچک و مقدار 20 درصد را به آن اختصاص می دهیم.
برای نمایش منو به صورت تمام صفحه و کامل در موبایل، از بخش محتوا، گزینه full width را فعال کنید.
از تب استایل و بخش دراپ دان، distance جایگاه فاصله اجزا با ستون منو را مشخص کنید.
در بخش تنظیمات آیکون منو، toggle button تنظیمات آیکون منو را انجام دهید
سایر اجزا را نیز می توانید شخصی سازی کنید.
نمایش اطلاعات تماس و حساب کاربری در موبایل
بهتر است در نمایشگر موبایل، ستون مربوط به اطلاعات تماس و حساب کاربری در هدر را مخفی، و به صورت زیر نمایش دهید:
از مسیر پیشخوان>قالب ها و با کلیک بر روی افزودن جدید، قالب خود را روی سکشن قرار داده و بر روی نمایشگر موبایل، یک سکشن سه ستونه، ایجاد می کنیم. عرض سکشن ها را به نحوی قرار دهید که در امتداد هم در یک ردیف قرار بگیرند.
در سه ستون، ابزارک آیکون را فعال می کنیم و برای هر یک، تنظیمات زیر را اجرا می کنیم:
- پیوند به صفحه home: آیکون هوم، پیوند داینامیک site URL قرار می دهیم. سایز و رنگ را نیز میتوانید تغییر دهید.
- پیوند به حساب کاربری: آیکون یوزر و پیوند را صفحه حساب کاربری قرار می دهیم
- پیوند به شماره تماس: آیکون تماس و پیوند را بر روی حالت content URL قرار می دهیم. با استفاده از ابزار تنظیمات در همین قسمت، type را بر روی حالت Tel قرار اده و شماره تماس را وارد می کنیم
با استفاده از این قسمت، کاربر با کلیک بر روی آیکون تماس، به صورت خودکار به شماره گیر موبایل با شماره تماس شما وارد خواهد شد.
50 پاسخ
سلام وقت به
منوهای پیش فرض خود قالب وقتی اسکرول میکنیم به سمت پایین به بالا میره و دیده نمیشه و با اسکرول به سمت بالا ظارهر میشه میشن
ولی این منو با المنتور این فرایند رو نداره برای این که این قابلیت رو پیدا کنه باید چی کار کنیم ؟
با استفاده از کدنویسی چنین امکانی وجود دارد. لینک ارسالی میتواند به شما کمک کند.
https://elementor.com/blog/shrinking-sticky-header/#:~:text=To%20make%20sure%20your%20header%20sticks%20to%20the%20top%20as,drop%2Ddown%20equal%20to%20Top.
در تب پیشرفته المنتور گزینه موقعیت یابی نیست.
در نسخه جدید المنتور، این بخش به ابتدای تب پیشرفته در زیر مارجین و پدینگ منتقل شده است.
در تب پیشرفته المنتور گزینه موقعیت یابی نیست. لطفا راهنمایی میکنید از کجا باید این تنظیمات انجام بدم؟
سلام
این بخش به ابتدا و بالای تنظیمات منتقل شده است.
سلام هدر برای من قفله و از من میخاد خریداری کنم. باد چیکار کنم ؟ همچنین خیلی ابزارهای دیگه مثل لوگو سایت
سلام و عرض احترام
شما میبایست علاوه بر نسخه رایگان، نسخه حرفه ای را نیز تهیه بفرمایید.
افزونه المنتور پرو
سلام وقت بخیر
آموزش خیلی خوبی بود ولی من بعد از هدر در سایتم عکس های اسلایدی دارم وقتی ناومنو رو باز میکنم زیر منو میره زیر عکس ها چکار باید کنم این مشکل حل بشه؟
سلام
ابزارک منو را انتخاب کنید، و از تب پیشرفته مقدار z-index را برابر 1100 قرار دهید