جلسه ۸۶

ساخت باکس با افکت زوم در المنتور با CSS

مسعود قربان خانی

مدرس : مسعود قربان خانی

فایل های ضروری و مورد نیاز

پخش ویدیو
تخفیف ویژه دانشجویان دوره رایگان المنتور

علاوه بر تخفیف همیشگی المنتور پرو 20% بیشتر تخفیف بگیرید

کد تخفیف : off-elementor

در این نوشته شما می خوانید

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

کدهای CSS مربوط به آموزش :


/*برای زوم بکگراند*/
selector{
overflow: hidden !important;
}
selector .elementor-background-overlay{
-webkit-transition: all 0.5s !important;
transition: all 0.5s !important;
-webkit-transform-origin: left;
transform-origin: left;
}
selector:hover .elementor-background-overlay{
-webkit-transform: scale(2);
transform: scale(2);
}
/*برای مخفی سازی*/
selector .elementor-column{
opacity: 0;
-webkit-transition: all 0.75s !important;
transition: all 0.75s !important;
}
selector:hover .elementor-column{
opacity: 1;
}

سوالات و مشکلات شما در این جلسه

اگر در این جلسه سوال و مشکلی داری می توانید در این قسمت بپرسید 

11 پاسخ

    1. سلام درود بر شما
      میتوانید وارد پیشخوان > المنتور > تنظیمات شوید سپس وارد قسمت تب پیشرفته شوید و گزینه کانتینر فلکس باکس را غیرفعال کنید و از بخش داخلی استفاده کنید

  1. سلام وقتتون بخیر ی سوالی داشتم من وقتی کد رو قرار میدم توی المنتور همه چی اوکیه( توی المنتور هر سه تا زوم میشن) ولی روی سایتم فقط یدونه از سه تا زوم میشه اون دوتای دیگه هیچ تغییری نمیکنند چیکار باید بکنم؟؟؟؟؟

    1. سلام
      ما در کد از selector استفاده کردیم و css رو به ستون بدید فقط در ستون اعمال میشود و باید به بخش اصلی دهید .

      1. من کد رو به بخش اصلی داده بودم ولی الانم باز امتحان کردم نشد، توی المنتورم زوم میشه و همه چی اوکیه ولی توی سایتم زوم نمیشه(واقعا باید چیکار کنم درست شه)

        1. سلام به جای selector یک کلاسی تعیین کنید برای بخش خود و از آن کلاس به جای selector استفاده کنید و تست نمایید .

  2. آموزش عالی و با کیفیت بود
    فقط اگر بخواهیم که کل اون بخش داخلی و محتویاتش لینک هم داشته باشه امکان پذیر ؟
    منظورم اینه که موس روی هر قسمت از بخش داخلی کلیک کرد به یک لینک یا صفحه هدایت بشود

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

آپدیت های جدید محصولات

جدیدترین محصولات آپدیت شده