ایجاد هدر چسبان و شفاف در المنتور (جلسه 41)

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

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

هدر چسبان باعث زیبایی و جذابیت در سایت می شود و این قسمت را که لینک های مهم در آن قرار می گیرد را در اختیار کاربر قرار می دهد تا به آن دسترسی بیشتری داشته باشد .

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

مواردی مهمی که معولا در هدرچسبان استفاده می‌کنند شامل: عکس یا عکس‌های مناسب با فعالیت سایت، قرار دادن لوگو ، قرار دادن گزینه سرچ ، شعار سایت، معرفی خدمات سایت ، گزینه ثبت ‌نام یا ورود به صفحه خدمات و … است.

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

نحوه ساخت هدر چسبان

برای ساخت هدر چسبان در ابتدا یک هدر را می سازید و در صفحه خود قرار می دهید، سپس به قسمت تنظیمات بخش، تنظیمات پیشرفته می روید، از قسمت موشن افکت شناور را در بالا یا پایین تنظیم می کنید و بقیه تنظیمات این بخش را نیز به دلخواه تغییر می دهید.

در قسمت تنظیمات کدهای css باید یک مقدار css به آن اضافه کنید تا صفحه شما زیبایی بیشتری پیدا کند ، کدهای لازم برای ایجاد css هدر چسبان به صورت زیر است :

selector.elementor-sticky–effects{
background-color: rgba(133,130,255,0.5) !important
}
selector{
transition: background-color 4s ease !important;
}
selector.elementor-sticky–effects >.elementor-container{
min-height: 80px;
}
selector > .elementor-container{
transition: min-height 1s ease !important;
}

حالا همه تنظیمات را ثبت می کنید، می بینید که تنظیمات در صفحه شما ایجاد شده است هدر چسبان شما آماده است.