نحوه ایجاد افکت اسکرول تصویر در المنتور

Besoin d’un moyen de créer un effet de défilement d’image dans Elementor ? Dans cet article, nous vous guiderons pour créer un effet de défilement d’images à l’aide d’Elementor sur vos pages web.

افکت اسکرول تصویر به شما این امکان را می دهد که وقتی کاربر روی تصاویر قرار می گیرد، تصویر کامل را نشان دهید. هنگامی که از وب سایتی بازدید می کنید که قالب های وب سایت را می فروشد، می توانید پیش نمایش کامل الگوها را با ویژگی های جلوه اسکرول تصویر مشاهده کنید.

با این ویژگی ها می توانید به راحتی در فضایی کوچک نمای کامل وب سایت را به کاربران خود نشان دهید. به طور معمول، اگر بخواهید یک تصویر کامل از یک وب سایت نمایش دهید، فضای زیادی از صفحات وب شما را اشغال می کند. علاوه بر این، بر طراحی وب سایت شما تأثیر می گذارد.

اما با افکت اسکرول تصویر، می توانید تصاویر بیشتری را به روشی جذاب اضافه کنید که به راحتی توجه مخاطب را جلب کند.

ایجاد افکت اسکرول تصویر در المنتور

Elementor ویجتی برای افزودن افکت اسکرول تصویر ارائه نمی دهد. بنابراین باید افکت را با استفاده از CSS سفارشی اضافه کنید. ویژگی CSS سفارشی فقط با در دسترس است Elementor حرفه ای. بنابراین مطمئن شوید که به ارتقاء داده اید Elementor نرم افزار.

Maintenant, ouvrez une page avec l’éditeur Elementor et cliquez sur l’icône plus pour ajouter une section.

اکنون باید ستون مربوط به بخش خود را انتخاب کنید. در اینجا بخش تک ستونی را انتخاب می کنیم.

حالا روی آیکون ویرایش بخش کلیک کنید و در تب layout حداقل ارتفاع را 500 قرار دهید.

اکنون از ویجت بلوک، بلوک بخش داخلی را به بخش ایجاد شده خود اضافه کنید و ستون پیش فرض را حذف کنید. روی نماد ویرایش ستون کلیک راست کرده و گزینه delete را بزنید تا ستون اصلی حذف شود.

دوباره به گزینه ویرایش قسمت داخلی رفته و در تب layout حداقل ارتفاع را همانطور که قبلا نشان دادیم روی 500 قرار دهید.

حالا به تب style در قسمت داخلی بروید و پس زمینه را به عنوان کلاسیک از گزینه پس زمینه تنظیم کنید. در مرحله بعد، باید تصویر پس زمینه خود را اضافه کنید. از گزینه image position موقعیت تصویر را با تنظیم کنید مرکز برتر. از گزینه تکرار، گزینه را تنظیم کنید بدون تکرار و اندازه مانند پوشش.

اکنون به تب تغییر دهید پیشرفته برای اضافه کردن CSS سفارشی در قسمت CSS سفارشی، کد زیر را اضافه کنید:

انتخابگر{ -webkit-transition: ease-in-out 3s !important; انتقال: سهولت در خروجی 3s !important; } selector:hover{ background-position: center bottom !important; }

برای تغییر افکت پیمایش تصاویر می توانید مقدار انتقال را تغییر دهید. اگر می خواهید چندین تصویر با یک افکت اضافه کنید، می توانید ستون را کپی کنید و سپس تصویر پس زمینه را تغییر دهید.

نتیجه

با دنبال کردن این فرآیند، می‌توانید افکت اسکرول تصویر را با استفاده از صفحه‌ساز به وب‌سایت خود اضافه کنید Elementor. برای یادگیری می توانید مقالات دیگر ما را بررسی کنید:

امیدواریم این مقاله برای شما مفید باشد. اگر این مقاله را دوست دارید، لطفا صفحه فیس بوک ما را لایک کنید تا در ارتباط باشید.