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

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

در این آموزش قصد داریم تا با استفاده از المنتور پرو و کمی 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 در المنتور

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

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

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

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

دانلود