آموزش رسپانسیو کردن اسلایدر رولوشن

 

آموزش رسپانسیو کردن اسلایدر رولوشن


 

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

 

در این قسمت آموزشی قصد داریم شما رو با نحوه رسپانسیو کردن اسلایدر در اسلایدر رولوشن آشنا بکنیم. به همین منظور ما یکی از دمو های سایت رو، که Particle Effect هست رو انتخاب کردیم و قصد داریم که شما رو با نحوه رسپانسیو کردن این اسلایدر آشنا بکنیم.

 

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

 

حالا این تغییرات را save کرده و صفحه رو رفرش می کنیم. همونطور که می بینید یک مقدار به هم ریختگی دارد که این رو هم ما توی آموزش قبلی توضیح دادیم که چگونه این جدایی کلمه ها رو درست کنیم و به همین منظور به خاطر این که آموزش کامل تر باشد، در این جا دوباره به شما توضیح می دهیم. برای این کار به قسمت Animation می رویم و از روی Char Based به روی No split قرار می دهیم. برای این که متوجه تغییرات بشید این رو save کنید و صفحه رو رفرش کنید.

 

همونطور که مشاهده می کنید مشکل رفع شد، حالا قصد داریم که رسپانسیو بودن این نوشته ای که الآن اضافه شده رو با هم بررسی کنیم برای این منظور با زدن دکمه های ترکیبی Ctrl+Shift+M در مرورگر فایرفاکس، میتونم صفحه رو به صورت رسپانسیو در بیارم و بتونم تغییراتی که میخوام رو اعمال کنم، وقتی که ما با نمایشگر کوچک داریم می بینیم، یا در واقع با موبایل صفحه رو می بینیم، نوشته به طور کامل نمایش داده نمی شه و وقتی اسکرین ما بزرگتر می شه، نمایش داده می شه و مشکلی نداره. ولی وقتی نمایشگر کوچک تر شود این نوشته به صورت نامیزان در می آید که با حالا این نوشته رو تنظیم خواهیم کرد.

 

نکته مهمی که شما باید بهش توجه بکنید این است که توی این قسمت ما ۴ تا صفحه نمایش داریم که باید بر اساس این ها با اسلایدر رولوشن بازی بکنیم. مانتیور هایی که در این صفحه می بینید، را می توانید با کلیک کردن بر روی اون، صفحه ای که ما داریم کوچک و بزرگ می شود و به اندازه آن در می آید. ما احتمالا توی PC مشکلی نداریم، چون به اندازه کافی صفحه نمایش بزرگ است اما مشکل اصلی ما توی مانیتور های کوچک تر است که نوشته ها دچار مشکل می شوند به همین منظور ما سایز اون رو توی این اسکرین روی ۷۰ پیکسل و ارتفاع ۷۰ پیکسل قرار می دهم و اون رو توی تبلت به ۶۰ پیکسل در ۶۰ پیکسل تغییر می دهم، و اون رو توی موبایل روی ۵۰ در ۵۰ پیکسل قرار می دهم که این سایز بزرگی است که با قرار دادن روی ۴۵ سایز مناسبی پیدا می کند.

 

مجدد صفحه را save می کنیم تا تغییرات را مشاهده کنیم. برای این منظور Ctrl+Shift+M را می زنیم تا صفحه جدید رو مشاهده کنیم. همانطور که می بینید توی سایز بزرگ تغییری نداشت و به ۸۰ پیکسل نوشته ما اینجا هست، اما با کوچک کردن صفحه می بینیم که نوشته ما هم با اون کوچک و کوچک تر می شود و با بزرگ کردن نیز عکس این قضیه رح می دهد.

حالت اول رو مشاهده می کنید که رسپانسیو نبود و ما بهتون یاد دادیم که چطوری توی اسلایدر رولوشن می تونید این سایز ها رو تنظیم بکنید، حالا این صرفا برای یک نوشته بود اگر شما تصویری توی سایت داشته باشید باید چکار کنید؟

 

در اینجا ما یک تصویر در اسلاید قرار می دهیم، و حالا کلید های ترکیبی Ctrl+Shift+M را می زنیم تا در سایز های مختلف تغییرات را مشاهده کنیم. حالا مثلا میخوایم این تصویر عینک رو در اسکرین های مختلف تنظیم کنیم به همین منظور، اگر ما بخواهیم این تصویر در تبلت بالای نوشته باشد و در بقیه هم به همین صورت، با تنظیم کردن مکان آن و با به روز رسانی کردن صفحه تغییرات را می بینیم و بررسی می کنیم که ببینیم دقیقا چطوری ظاهر شده.حالا می بینیم که این عینک جای درست خودش رو داره و در وسط واقع شده، و با کوچک کردن صفحه جای آن تغییر نمی کند.

 

خیلی ممنونم که به این آموزش توجه کردید، امیدوارم که آموزش نحوه رسپانسیو کردن اسلایدر رولوشن هم به کار شما بیاد.