هاور باکس جذاب با افکت زاویه دار در المنتور

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

هاور باکس جذاب با افکت زاویه دار در المنتور پرو :

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

المنتور پرو:

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

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

کد های CSS مربوط به ویجت ایمیج باکس :

selector{
    transform: translateY(-50%);
}

selector{

transform: translateY(-50%);

}

کد های CSS مربوط به سکشن اصلی طرح :

selector{
    --width: 2px;
    --color: #FFB400;
    --angle: -7deg;
}

selector .elementor-widget-divider .elementor-widget-container{
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}
selector .elementor-widget-divider .elementor-divider,
selector .elementor-widget-divider .elementor-widget-container{
    position: relative;
}
selector .elementor-widget-divider .elementor-widget-container:before,
selector .elementor-widget-divider .elementor-widget-container:after,
selector .elementor-widget-divider .elementor-divider:before,
selector .elementor-widget-divider .elementor-divider:after{
    content: "";
    position: absolute;
    background: var(--color);
}
selector .elementor-widget-divider .elementor-widget-container:before,
selector .elementor-widget-divider .elementor-widget-container:after{
    height: var(--width);
    width: 100%;
    transform: scaleX(0);
}
selector .elementor-widget-divider .elementor-widget-container:before{
    top: 0;
    transform-origin: right;
}
selector .elementor-widget-divider .elementor-widget-container:after{
    bottom: 0;
    transform-origin: left;
}
selector .elementor-widget-divider .elementor-divider:before,
selector .elementor-widget-divider .elementor-divider:after{
    height: 100%;
    width: var(--width);
    transform: scaleY(0);
}
selector .elementor-widget-divider .elementor-divider:before{
    left: 0;
    transform-origin: top;
}
selector .elementor-widget-divider .elementor-divider:after{
    right: 0;
    transform-origin: bottom;
}
selector .elementor-column{
    transition: all 0.3s ease-in-out;
}
selector .elementor-column:hover{
    transform: translateY(-15px);
}
selector .elementor-column img{
    transition: all 0.3s ease-in-out;
}
selector .elementor-column:hover img{
    box-shadow: 0px 20px 20px 0px rgb(0 0 0 / 40%);    
}
selector .elementor-widget-image-box .elementor-widget-container{
    opacity: 0;
    transition: all 0.3s ease-in-out;
    transform: translateY(10px);
}
selector .elementor-column:hover .elementor-widget-image-box .elementor-widget-container{
    opacity: 1;
    transform: none;
    transition-delay: 0.3s;
}

selector .elementor-column:hover .elementor-widget-divider .elementor-widget-container{
    background: var(--color);
    transform: rotate(var(--angle));
    transition-delay: 0.3s;
}
selector .elementor-column:hover .elementor-widget-divider .elementor-widget-container:before,
selector .elementor-column:hover .elementor-widget-divider .elementor-widget-container:after{
    transform: scaleX(100%);
    transition: all 0.5s ease-in-out;
}
selector .elementor-column:hover .elementor-widget-divider .elementor-divider:before,
selector .elementor-column:hover .elementor-widget-divider .elementor-divider:after{
    transform: scaleY(100%);
    transition: all 0.5s ease-in-out;
}

@media(max-width: 1024px){
selector .elementor-widget-wrap{
    width: 360px;
    margin-left: auto !important;
    margin-right: auto !important;
}
selector .elementor-column:hover{
    transform: none;
}
}
@media(max-width: 767px){
selector .elementor-widget-divider .elementor-divider-separator{
    border-top-width: 350px;
}
}

100

101

102

103

104

selector{

--width: 2px;

--color: #FFB400;

--angle: -7deg;

}

selector .elementor-widget-divider .elementor-widget-container{

overflow: hidden;

transition: all 0.3s ease-in-out;

}

selector .elementor-widget-divider .elementor-divider,

selector .elementor-widget-divider .elementor-widget-container{

position: relative;

}

selector .elementor-widget-divider .elementor-widget-container:before,

selector .elementor-widget-divider .elementor-widget-container:after,

selector .elementor-widget-divider .elementor-divider:before,

selector .elementor-widget-divider .elementor-divider:after{

content: "";

position: absolute;

background: var(--color);

}

selector .elementor-widget-divider .elementor-widget-container:before,

selector .elementor-widget-divider .elementor-widget-container:after{

height: var(--width);

width: 100%;

transform: scaleX(0);

}

selector .elementor-widget-divider .elementor-widget-container:before{

top: 0;

transform-origin: right;

}

selector .elementor-widget-divider .elementor-widget-container:after{

bottom: 0;

transform-origin: left;

}

selector .elementor-widget-divider .elementor-divider:before,

selector .elementor-widget-divider .elementor-divider:after{

height: 100%;

width: var(--width);

transform: scaleY(0);

}

selector .elementor-widget-divider .elementor-divider:before{

left: 0;

transform-origin: top;

}

selector .elementor-widget-divider .elementor-divider:after{

right: 0;

transform-origin: bottom;

}

selector .elementor-column{

transition: all 0.3s ease-in-out;

}

selector .elementor-column:hover{

transform: translateY(-15px);

}

selector .elementor-column img{

transition: all 0.3s ease-in-out;

}

selector .elementor-column:hover img{

box-shadow: 0px 20px 20px 0px rgb(0 0 0 / 40%);

}

selector .elementor-widget-image-box .elementor-widget-container{

opacity: 0;

transition: all 0.3s ease-in-out;

transform: translateY(10px);

}

selector .elementor-column:hover .elementor-widget-image-box .elementor-widget-container{

opacity: 1;

transform: none;

transition-delay: 0.3s;

}

selector .elementor-column:hover .elementor-widget-divider .elementor-widget-container{

background: var(--color);

transform: rotate(var(--angle));

transition-delay: 0.3s;

}

selector .elementor-column:hover .elementor-widget-divider .elementor-widget-container:before,

selector .elementor-column:hover .elementor-widget-divider .elementor-widget-container:after{

transform: scaleX(100%);

transition: all 0.5s ease-in-out;

}

selector .elementor-column:hover .elementor-widget-divider .elementor-divider:before,

selector .elementor-column:hover .elementor-widget-divider .elementor-divider:after{

transform: scaleY(100%);

transition: all 0.5s ease-in-out;

}

@media(max-width: 1024px){

selector .elementor-widget-wrap{

width: 360px;

margin-left: auto !important;

margin-right: auto !important;

}

selector .elementor-column:hover{

transform: none;

}

@media(max-width: 767px){

selector .elementor-widget-divider .elementor-divider-separator{

border-top-width: 350px;

}

هاور باکس جذاب با افکت زاویه دار در المنتور

هاور باکس جذاب با افکت زاویه دار در المنتور پرو :

المنتور پرو:

کد های CSS مربوط به ویجت ایمیج باکس :

کد های CSS مربوط به سکشن اصلی طرح :

دیدگاهتان را بنویسید لغو پاسخ

شماره تماس :

ارتباط از طریق WhatsApp

نشانی الکترونیکی ما :

ارتباط از طریق Telegram