طراحی تایم لاین جذاب با المنتور

تایم لاین یه المان جذابه که برای نمایش مراحل انجام یک فرآیند، سوابق کاری، تاریخچه شرکت، مسیر یادگیری یا هر نوع محتوای زمان‌بندی‌شده استفاده میشه👌 تو این آموزش یاد می‌گیرین چطوری بدون نصب هیچ افزونه‌ جانبی و فقط با استفاده از المنتور و چند خط کد CSS، یک تایم لاین حرفه‌ای و کاملاً ریسپانسیو طراحی کنین😍 همچنین با تکنیک‌های شخصی‌سازی ظاهر تایم لاین، تغییر رنگ‌ها، آیکون‌ها و فاصله‌گذاری بخش‌ها آشنا میشین تا بتونین این المان رو متناسب با سایت وردپرسی خودتون پیاده‌سازی کنین

کدهای CSS:

/*بک گراند متن*/
selector .section:hover .text .elementor-widget-container{
background-color:#033431;
border-color:#033431;
}
selector .text .elementor-widget-container{
 transition-duration: 0.2s;
}

/*رنگ متن*/
selector .section:hover .text  .elementor-image-box-title,  selector .section:hover .text  .elementor-image-box-description{
color:#fff!important
}
selector  .text  .elementor-image-box-title,  selector .text  .elementor-image-box-description{
 transition-duration: 0.2s;
}

/*رنگ جداکننده*/
selector .section:hover .line .elementor-divider-separator{
border-color:#033431;
}
selector .line .elementor-divider-separator{
 transition-duration: 0.2s;
}

/*رنگ آیکن*/
selector .section:hover .icon .elementor-icon{
color:#033431!important;
border-color: #033431!important;
fill: #033431!important;
}
selector .icon .elementor-icon{
 transition-duration: 0.2s;
}

/*تصویر لوگو*/
selector .logo .elementor-image-box-img{
background-color:#c09562;
padding:8px;
border-radius:16px;
min-width: 110px;
    height: 110px;
}
selector .logo .elementor-image-box-img  img{
justify-self: center;
object-fit:contain;
width:90px;
height:90px;
}


/*حالت افقی موبایل*/
@media screen and (min-width: 601px) and (max-width: 880px){

selector .logo .elementor-image-box-img{
padding:6px;
border-radius:10px;
min-width: 70px;
    height: 70px;
}
selector .logo .elementor-image-box-img img{
justify-self: center;
object-fit:contain;
width:55px;
height:55px;
}
}



/*حالت عمودی موبایل*/
@media screen and (max-width: 600px){

selector .logo .elementor-image-box-wrapper {
    display: flex;
}
selector .logo .elementor-image-box-content{
margin-right:15px
}
selector .logo .elementor-image-box-img{
padding:5px;
border-radius:8px;
min-width: 60px;
    height: 60px;
}
selector .logo .elementor-image-box-img  img{
justify-self: center;
object-fit:contain;
width:50px;
height:50px;
}
}