طراحی هیروسکشن جذاب با المنتور

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

تصاویر و کدهای CSS:

/*هدر شفاف*/
selector#header_stick.elementor-sticky--effects{
background-color: #dff9e6e0;
min-height: 90px;
}
selector {
    transition: all 0.3s ease;
}

/*انیمیشن تصویر*/
@keyframes floatUpDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
selector{
  animation: 
    fadeIn 1s ease forwards,
    floatUpDown 3s ease-in-out 1s infinite;
}

/*عرض سبد خرید در موبایل*/
@media screen and (max-width: 767px){
.elementor-menu-cart__main{
width: 80%
}
}

/*غیرفعال کردن افکت ماوس در موبایل*/
@media screen and (max-width: 1200px){
selector .elementor-motion-effects-element{
    transform: none!important;
}
}