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

اشتراک گذاری در telegram
اشتراک گذاری در whatsapp
اشتراک گذاری در facebook
اشتراک گذاری در twitter
اشتراک گذاری در linkedin
اشتراک گذاری در email
اشتراک گذاری در print
طراحی هدر عمودی با المنتور
پخش ویدیو

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

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

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

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

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

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

دانلود

045-microphone

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

013-globe

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

035-essay

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

امتیاز دهید

اشتراک گذاری

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

آخرین مقالات

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

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

برچسب ها

لینک کوتاه

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

فهرست مطالب

pedram amanzadeh در 22:39

من مراحل رو دقیق رفتم همه چیز اکیه …این کد رو هم در بخش css قرار دادم
.page-content, .elementor-location-footer {
margin-right: 250px;
}

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

پاسخ
شهرام در 12:59

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

ممنون میشم راهنمایی بفرمایید.

پاسخ
amir faa در 15:47

سلام میشه سایت منو یه بررسی کنین، از قالب هدر آماده سایتتون استفاده کردم. تو قسمت منو سایت وقتی میرم و کشویی که باز میشه میره زیر پست و ناپدید میشه…ممنون
http://www.motored.ir

پاسخ
المنتور فارسی در 17:46

با سلام
کافیه مقدار ایندکس Z هدر را روی مقدار 999 قرار بدید.

پاسخ
amir faa در 19:04

سلام درست نشد. مشکل رو فهمیدم توی صفحه اول همه چیزش ok هست اما به قسمت فروشگاه و آرشیو و نوشته های تکی که میرم سربرگ کلا تغییر میکنه. میشه یه نگاه دیگه به قسمت های دیگه سایت بندازید
شاید مشکل از قالبه… ممنون میشم کمکم کنید.
یه نکته دیگه تنظیماتش رو روی entire site قرار دادم

پاسخ
المنتور فارسی در 12:46

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

پاسخ
امیر حسین در 09:40

سلام خداقوت

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

پاسخ
ابوالفضل در 23:06

واقا که عالی بود خیلی ممنون المنتور بهترین افزونه است

پاسخ
mori در 21:48

اگه بخوایم به سمت چپ منتقلش کنیم باید چه کنیم؟!

پاسخ
المنتور فارسی در 23:33

با سلام
کافیه در قسمت کد ها، در کلاس vertical یک left:0; اضافه کنید. به این صورت در سمت چپ قرار میگیرد.

پاسخ
سعید در 17:05

سلام چیکار کنم این هدر عمودی جمع بشه یعنی وقتی دکمه را زدنند باز و بسته بشهع

پاسخ
المنتور فارسی در 17:12

با سلام
بررای اینکار باید از افزونه های جانبی المنتور مانند Elementor Extras و یا افزونه Element Pack استفاده کنید. ویجت Offcanvas و ویجت نوار کناری این کار رو انجام میده.

پاسخ
سجاد در 22:20

سلام
منویی که این طوری طراحی میشه، واکنش گرا نیست و در تبلت و موبایل هم همون 250 پیکسل نمایش داده میشه
چطور میشه این منو رو واکنش گرا کرد؟
در Css کدی باید وارد کنیم؟
ممنونم

پاسخ
المنتور فارسی در 22:32

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

/* Mobile */
@media (max-width: 360px) {
.page-content, .elementor-location-footer {
margin-right: 250px;
}
}
/* Tablet */
@media (max-width: 768px) {
.page-content, .elementor-location-footer {
margin-right: 250px;
}
}

پاسخ
NS در 09:44

این کد را باید در قسمت css سفارشی ستون با کلاس vertical گذاشت یا ستون داخلی؟ یا صفحه مورد نظر؟

پاسخ
المنتور فارسی در 11:18

با سلام
تفاوتی ندارد، در بخش CSS سفارشی ستون قرار دهید.

پاسخ
NS در 11:54

تشکر بابت آموزش خوب و پاسخ دهی سریع

المنتور فارسی در 11:55

خواهش میکنم. موفق باشید

NS در 17:21

من این کد را داخل css ستون اصلی گذاشتم ولی بازم توی حالت موبایل و تبلت بجای اینکه جمع بشه و به حالت همبرگری در بیاد همون جور ثابت با اندازه ای که دادم میمونه و فقط فهرست داخلش جمع میشه! چیکار باید انجام بدم؟

المنتور فارسی در 22:00

امکان جمع شدن و همبرگری آموزش داده نشده و فقط به صورت ثابت است.

مصطفی شیری زاده در 14:53

پشتیبانی تون فوق العاده است
به خصوص چت آنلاین و پاسخگویی به مشکلات

بیگ لایک …. خدایی

پاسخ
المنتور فارسی در 14:57

خواهش میکنم سلامت باشد.

پاسخ

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

نیاز به کمک دارید؟ پیام دهید