آیلین وب

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

نکته بسیار مهم : 

دوستان دقت داشته باشید که اگر میخواهید این آموزش های المنتور را بدون هیچ مشکلی اجرا بکنید و توی صفحات و سایت‌های خودتون استفاده کنید، حتماً پیشنهاد میشه که دوره آموزش رایگان المنتور رو مشاهده کنید تا از مشکلات احتمالی جلوگیری با کنید و بتونید این آموزش ها رو بدون مشکل اجرا بکنید. چون شاید از برخی بخش ها همانند ساخت سکشن ساخت ستون و غیره اجتناب کردیم چون توی هر مقاله ما اینها رو یکبار بازگو کردیم پس حتماً دوره آموزش Elementor مشاهده بکنید یکبار برای همیشه!

 ساخت سربرگ مورب در المنتور

در تصویر زیر پیش نمایش این رو مشاهده کنید که با اضافه کردن چند خط کد ساده میتونیم هدر سایتمون رو به این شکل حرفه ای و زیبا بکنیم. این هدر به شکلی هستش که به صورت دو رنگ ایجاد میشه و  المان های هدر و منو توی یک بخش رنگی قرار می گیرند و بخش لوگو که یک بخش سفید، البته ما برای این کار از یک خط کد سی اس اس هم استفاده کردیم که در زیر این کدها را قرار دادیم تا شما هم برویم بتونید این کدها رو کپی کنید. (میتونید ازآموزش رایگان HTML و CSS هم اتفده بکنید.)

How to Create Diagonal Headers in Elementor5 -  ساخت سربرگ مورب و خلاقانه در المنتور 
ساخت سربرگ مورب و خلاقانه در المنتور

پس آماده باشید تا بریم سراغ طراحی سرور در المنتور!

 مرحله ۱:  در اولین مرحله شما هدر سایتتون رو ویرایش کنید و یا همانند تصویر زیر یک سکشن جدید در یک برگه ایجاد بکنید.

Custom Elementor Mega Menu5 min -  ساخت سربرگ مورب و خلاقانه در المنتور 
بخش جدید المنتور

 مرحله ۲:  از صفحه باز شده یک ستون یا یک ردیف تک ستون ایجاد بکنید همانند تصویر زیر.

Creating Dynamic Content Using Elementor7 min -  ساخت سربرگ مورب و خلاقانه در المنتور 
ستون در المنتور

 مرحله ۳:  توی این مرحله از بخش ابزارک های المنتور در سمت راست صفحه، ابزارک منوی ناوبری رو توی صفحه مورد نظر یا توی ستون مورد نظر که ایجاد کردید بکشید و رها کنید.

How to Create Diagonal Headers in Elementor3 -  ساخت سربرگ مورب و خلاقانه در المنتور 
منوی ناوبری المنتور

مرحله ۴:  توی این مرحله به تنظیمات ستونی بریدکه ابزارک منوی ناوبری توش هستش. سپس به تب پیشرفته برید در پایین بخش کلاس سی اس اس رو عبارت “gc-diagonal-header”  قرار بدید همانند تصویر زیر.( ما در این آموزش از این کلاس استفاده کردیم و شما میتونید یک کلاس دلخواه ای رو انتخاب کنید ).

How to Create Diagonal Headers in Elementor4 -  ساخت سربرگ مورب و خلاقانه در المنتور 
css سفارشی المنتور

 مرحله ۵: توی این مرحله کد هایی رو که در زیر قرار دادیم رو توی بخش سی اس اس سفارشی صفحه قرار بدید. (برای این کار به تنظیمات صفحه برید. در تنظیمات المنتور سمت پایین و راست یک آیکون چرخ دنده هستش و روی این آیکون کلیک کنید و به تب پیشرفته برید و توی CSS سفارشی و کدهای زیر رو قرار بدید).

.gc-diagonal-header{
background-image: linear-gradient(150deg,rgba(255,255,255,0) 20%,#00A792 15%);
}

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

How to Create Diagonal Headers in Elementor5 1 -  ساخت سربرگ مورب و خلاقانه در المنتور 
ساخت سربرگ مورب و خلاقانه در المنتور

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

جمع بندی

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

آموزش های بعدی خدانگهدار.

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

پیشنهاد میکنیم این مقالات را هم بخوانید
ساخت استایل منوی اپلیکیشن موبایل با المنتور

ساخت استایل منوی اپلیکیشن موبایل

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

قالب Unik | قالب وردپرس شرکتی و خلاقانه (رایگان!)

قالب Unik | قالب وردپرس

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

قالب Alaska | قالب وردپرس هاستینگ (اورجینال و فارسی)

قالب Alaska | قالب وردپرس

یکی دیگر از محصولات پرکاربرد وردپرس می توان به قالب آلاسکا اشاره نمود

قالب Amax | قالب وردپرس چندمنظوره خلاقانه (رایگان!)

قالب Amax | قالب وردپرس

از دیگر قالب های وردپرس که امروز قصد معرفی آن را برای

مطالب داغ
اسکرول به بالا
طراحی انواع سایت
طراحی انواع سایت با قیمت بسیار ارزان!