در این آموزش به کمک CSS به شما یاد دادم که چجوری باکس هایی مشابه تصویر زیر ایجاد کنید .
نحوه کار باکس حرفه ای
با قراردادن موس روی هر قسمت نمای پس زمینه آن تغییر میکند . این کار باعث میشود با جلوه ویژه ای به محصولات یا نوشته های بدهد.
کد CSS مربوط به پس زمینه
:root{
--color: #ffffff;
}
selector{
position: relative;
z-index: 9;
}
selector .elementor-inner-column{
overflow: hidden;
}
selector:before,
selector:after
{
content:"";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 10px;
background: var(--color);
transition: 0.5s;
z-index: -1;
}transform: rotate(20deg);
box-shadow: 0 2px 20px rgba(0,0,0,.2);
}
selector:hover:after{
transform: rotate(10deg);
box-shadow: 0 2px 20px rgba(0,0,0,.2);
}
نکته مهم : با تغییر کد رنگ در کد بالا در قسمت root میتوانید به رنگ مورد نظرتان تغییر دهید .
کد CSS مربوط به نوشته و یا همان تیتر
.y-content {
position: absolute;
bottom: -12vh;
transition: all 0.4s ease-in-out;
}
selector:hover .y-content{
bottom: 0vh;
}
7 پاسخ
سلام.بدرستی اجرا شد.دستتون درد نکنه.یک همچین کاری رو اگر میخواستیم قبلا انجام بدیم باید یک پلاگین ویرایشی نصب می کردیم.ضمنا تست کردم نیاز نیست برای اجراش ،همیشه کانتینر فلکس باکس غیر فعال باشه بعد از درست کردن این باکس باز می تونیم کانتینر فلکس باکس رو فعال کنیم.
من چرااالمنتورم ویجت قسمت داخلی رو نداره
سلام در نسخه جدید کانتینر جایگزین شده برای فعال سازی باید از پیشخوان > المنتور > تنظیمات وارد تب ویژگی شوید و کانتینر فلکس باکس را غیر فعال نمایید .
با سلام
ممنون از اموزش خوبتون
جناب بنده باکس محصولی در بخش حلقه ele custom ساختم
ولی وقتی میخوام در بخشی از سایت نمایش داده بشه ( از بخش سفارسی ویجت پست ها استفاده میکنم) از کادر بیرون زده میشه و عرضی که برای بخش داخلی ام تعیین کردم عملا بی توجه به اون عرض کاملا از کادر خارج و تمام عرض میشه
فرموده بودید از کانتینر استفاده کنم ولی این مشکل همچنان وجود داشت
درود بر شما
ممنونیم ، ممکن از باگ از سمت ویجت باشد در حال طبیعی این مشکل را ندارد اگر که از لوپ های خوده المنتور استفاده کنید
سلام استاد باکس دانلود بخوایم درست کنیم کلیک میکنن یکی اضافه میشه المنتور یا افزونهاش چنین امکانی میدن?
سلام خدمت شما
شما میتوانید با فیلد های سفارشی باکس دانلود درست کنید