آموزش ساخت هدر شیشه ای و لوگوی کوچک شونده در المنتور (ویدیوی آموزشی)

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

هدر شیشه ای و لوگوی کوچک شونده چه کاربردی دارد؟

این نوع هدر به‌گونه‌ای طراحی می‌شود که هنگام اسکرول کاربر، ارتفاع آن کاهش یابد و پس‌زمینه شیشه‌ای به خود بگیرد. این ویژگی نه‌تنها به وب‌سایت شما ظاهری مدرن می‌بخشد، بلکه فضای بیشتری برای نمایش محتوای اصلی فراهم می‌کند.

مزایای استفاده از هدر شیشه ای و کوچک شونده

1. افزایش فضای محتوا: با کوچک شدن هدر، محتوای اصلی فضای بیشتری برای نمایش پیدا می‌کند.
2. طراحی حرفه‌ای: ظاهر مدرن این هدر تجربه کاربری را بهبود می‌بخشد.
3. دسترسی دائمی به منو: حتی هنگام اسکرول، کاربران همچنان می‌توانند به منو و لوگوی سایت دسترسی داشته باشند.

مراحل ساخت هدر شیشه ای و کوچک‌شونده

1. طراحی اولیه هدر یا ویرایش قالب در المنتور

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

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

2. تنظیمات اولیه CSS

برای آماده‌سازی هدر :

• تنظیمات سکشن هدر را باز کنید و در تب طرح بندی :
  • تگ HTML را روی header بگذارید.
  • ترازبندی عمودی را روی وسط تنظیم کنید.
  • فاصله ستون‌ها را روی بدون فاصله قرار دهید.
• در تب پیشرفته، مقدار کلاس های css کانتینر اصلی هدر را sticky-header تنظیم کنید.
• در تب پیشرفته ، مقدار کلاس های css لوگو را logo تنظیم کنید. (دقیقا مطابق توضیحات در فیلم)

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

3. ایجاد افکت چسبان برای هدر

• در تنظیمات سکشن هدر، به تب پیشرفته بروید.
• در بخش موشن افکت:
  • چسبان را روی بالا تنظیم کنید.
  • گزینه فعال روی را فقط برای دسکتاپ فعال کنید.
  • مقدار آفست را برابر با ارتفاع هدر (مثلاً 90) قرار دهید.

اگر با تنظیمات این بخش آشنا نیستید حتما ابتدا فیلم آموزش ساخت هدر چسبان با المنتور را ببینید.

4. افزودن CSS سفارشی

برای ساخت هدر کوچک شونده ، کد زیر را به قسمت css سفارشی اضافه کنید:

/***
* class: .sticky-header
*/
header.sticky-header {
	--header-height: 100px;
	--shrink-header-to: 0.6;
	--transition: .45s cubic-bezier(.4, 0, .2, 1);
	background-color: rgba(244, 245, 248, 1);
	transition: background-color var(--transition),
				backdrop-filter var(--transition),
				box-shadow var(--transition);
}

/***
* Sticky header activated
*/
header.sticky-header.elementor-sticky--effects {
	background-color: rgba(244, 245, 248, .8);
	box-shadow: 0px 4px 33px 1px rgba(0, 0, 0, .07);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
}
header.sticky-header > .elementor-container {
	min-height: var(--header-height);
	transition: min-height var(--transition);
}
header.sticky-header.elementor-sticky--effects > .elementor-container {
	min-height: calc( var(--header-height) * var(--shrink-header-to) );
}

/***
* Shorter header on mobile (70px instead of 100px)
*/
@media only screen and (max-width: 767px) {
	header.sticky-header {
		--header-height: 70px;
	}
}

/***
* class: .logo
*/
header.sticky-header .logo img {
	transition: transform var(--transition);
}
header.sticky-header.elementor-sticky--effects .logo img {
	transform: scale(.8);
}

سوالات متداول

چگونه میتوانم به المان ها Css سفارشی اضافه کنم؟

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