آموزش تصویری تنظیمات Behavior رسپانسیو اسلاید ها در اسلایدر رولوشن

بخش اول – تنظیمات تغییر سایز

 

تنظیمات اسلایدر رولوشن واکنش گرا

 

Auto Responsive. 1:

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

۲٫ Child Elements Responsive:

اگر اسلاید شما دارای محتواهای اضافی باشد( مانند کد های html و یا انواع پلاگین ها و غیره)، با تغییر سایز صفحه آن ها نیز به تبع، تغییر می یابند.

 

بخش دوم – Boxed (Grid Based) vs. Full-Width (Slide Based) Alignment

 

تنظیمات align کردن اسلایدر رولوشن

 

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

در مثال زیر، اسلاید یک قید “Top Left” دارد، با فاصله X تعیین شده ی ۱۱۵ پیکس و فاصله Y تعیین شده ی ۶۵ پیکسل.

 

تنظیمات قیدبندی اسلایدر رولوشن رسپانسیو

 

اسلایدری که در زیر برای مثال آورده ایم، یک اسلایدر Full Width Layout است و Layers Grid آن ۴۰۰*۶۰۰ است. در زمانی که اسکرین شات آن را گرفتیم، سایز عرض اسکرین ۹۰۰ پیکسل بود، پس اسلایدر نیز به این عرض پاسخ داده است.

(Align -> Grid Based (boxed

با این گزینه اسلاید همیشه بر اساس سایز grid اسلایدر مکان و قیدبندی خواهد شد. ( که ۱۱۵ پیکسل از سمت چپ مزر های Layers Grid فاصله دارد)

 

قید بندی و مکان بندی اسلایدر رولوشن

 

(Align -> Slide Based (full-width

با این گزینه مکان و قید بندی اسلاید ها بر اساس سایز حقیقی اسلایدر تعیین می شود. (که ۱۱۵ پیکسل از سمت چپ اسکرین فاصله دارد)

 

بخش سوم – Respnsive Offset / Positioning

 

تنظیمات offset اسلایدر رولوشن

 

در مثال زیر اسلاید یک قید top left دارد، که فاصله آن را تا ۵۰ پیکسل از سمت بالا و چپ، تنظیم می کند.

 

آموزش تصویری تنظیمات قیدبندی اسلایدر رولوشن

 

Responsive Offset: ON

در صورت فعال بودن این گزینه، زمانی که سایز اسلایدر ۵۰ درصد کوچک شود، فاصله اصلی اسلاید و قید بندی ها نیز ۵۰ درصد کم می شود، در مثال بالا فاصله ۵۰ پیکسلی داشتیم که حالا به ۲۵ پیکسل کاهش می یابد.

 

تنظیمات تغییر سایز واکنش گرا رولوشن اسلایدر

 

Responsive Offset: OFF

در این صورت با تغییر سایز، قید بندی ها تغییری نخواهد کرد، در مثال بالا ۵۰ پیکسل فاصله، همان ۵۰ باقی خواهد ماند.

 

تنظیمات رسپانسیو رولوشن اسلایدر

 

بخش چهارم – Image Layers: Lazy Load Settings & Source Type

 

Image layers Slider Revolion

 

۱٫ Lazy Loading: 

Default Settings:

تصاویر اسلاید ها با توجه به تنظیمات global Lazy Load لود خواهند شد.

Force Lazy Loading:

تصاویر اسلاید بدون توجه به تنظیمات global Lazy Load لود خواهند شد.

Ignore Lazy Loading:

تصاویر بدون توجه به تنظیمات global Lazy Load لود نخواهند شد.

۲٫ Source Type:

با این گزینه تعیین می کنید که چه ورژنی از تصاویر را میخواهید لود شوند. معمولا با انتخاب Original تصاویر بزرگی برای شما خواهند بود پس انتخاب Large یا Medium گزینه خوبی می تواند برای عملکرد بهینه آن باشد.

آموزش تکمیلی و جامع این قسمت را می توانید در دو قسمت ویدیویی دنبال کنید:
آموزش رسپانسیو کردن اسلایدر رولوشن قسمت ۱
آموزش رسپانسیو کردن اسلایدر رولوشن قسمت ۲