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

Share

اشتراک گذاری در telegram
اشتراک گذاری در whatsapp
اشتراک گذاری در facebook
اشتراک گذاری در twitter
اشتراک گذاری در linkedin
اشتراک گذاری در email
پخش ویدیو

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

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

بیاید شروع کنیم.

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

بخوانید : چگونه یک سربرگ سفارشی با المنتور بسازیم ؟

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

روی آیکون + کلیک کنید و یک بخش ایجاد کنید.

سفارشی سازی بخش (Section)

ابتدا روی بخش اصلی کلیک می کنیم.

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

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

تب طرح بندی :

عرض محتوا را روی گزینه تمام عرض قرار هید.

ارتفاع را روی گزینه کمترین ارتفاع انتخاب کرده و واحد را روی گزینه VH قرار دهید. مقدار کمترین ارتفاع را 100 قرار دهید.

همچنین موقعیت ستون را روی بالا قرار دهید.

تب پیشرفته :

مقدار ایندکس Z را روی 1000 قرار دهید.

در بخش کلاس های CSS مقدار vertical را وارد کنید.

مطابق تصویر زیر :

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

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

توجه: حتما برای پس زمینه بخش (Section) یک رنگ قرار بدید تا ناحیه سربرگ مشخص شود.

سفارشی سازی ستون (column)

حالا باید ستون داخلی بخش را انتخاب کنیم و تنظیمات ستون را انجام دهیم.

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

بعد از کلیک روی ستون در بخش پیشرفته ستون، تنها چیزی که نیاز هست اضافه کردن یک کلاس با نام full_height می باشد. در مرحله بعد به آن نیاز داریم.

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

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

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

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

سربرگ سفارشی با المنتور

اضافه کردن کد های CSS

حالا وقت اضافه کردن کد های CSS برای تعیین هدر عمودی می باشد. روی بخش اصلی (Section) کلیک کرده و در تب پیشرفته تب CSS سفارشی را باز کرده و کد زیر را در آن قرار دهید.

/* Vertical Header CSS

 /* Vertical Header CSS
 * 
 *  */
.vertical{
	position: fixed;
	width: 250px;
	top: 0;
}
/* end vertical css
 * 
 * */
/* Column CSS*/
.full_height {
	height: 100vh;
}
/*end column css*/

تغییرات باید به صورت آنی انجام شود و چیزی شبیه به تصویر زیر را در سایت خود مشاهده کنید.

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

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

.page-content, .elementor-location-footer {
    margin-right: 250px;
}

میزان فاصله محتوا از هدر دقیقا همان مقدار عرض هدر می باشد. اگر عرض هدر را روی 200 قرار داده باشید، باید مقدار فاصله را نیز 200px قرار دهید.

استایل دهی به هد عمودی المنتور

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

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

بخوانید : آشنایی با ویژگی Custom Positioning در المنتور

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

صحبت پایانی و دانلود فایل اجرایی

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

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

دانلود

مدرس :
محمدرضا احمدزاده

سطح آموزش :
متوسط

زمان آموزش :
4 دقیقه

امتیاز دهید

اشتراک گذاری

اشتراک گذاری در telegram
اشتراک گذاری در whatsapp
اشتراک گذاری در facebook
اشتراک گذاری در twitter
اشتراک گذاری در linkedin
اشتراک گذاری در email

آخرین مقالات

آخرین محصولات

آخرین محصولات

برچسب ها

لینک کوتاه

https://elementorfa.ir/?p=14499

نظرات ارزشمند خود را به اشتراک بگذارید

سه × چهار =

نیاز به کمک دارید؟ پیام دهید
  • بازگشت به کتابخانه