ترکیب کردن اسلایدر های مختلف با یکدیگر

 

آموزش ترکیب کردن اسلایدر های مختلف با یکدیگر


 

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

 

خوبی این روش اینه که به شدت سریع هست و در نهایت شما می تونید یک اسلایدر کاملا زیبا و بدون نقص، به عنوان خروجی کار داشته باشید. برای این آموزش ۲ تا از اسلایدر های سایت رو انتخاب کردم که مشاهده می کنید. در اینجا قصد داریم ترکیبی از آیپد و آیفون در این اسلایدر رو پیاده سازی کنیم. برای این که سرعت کار بالا بره، من از قبل این ۲ تا دمو رو توی یک سایت تستی بارگذاری کردم و قصد داریم اون ها رو به شما نمایش بدیم.

 

خب دموی اول و دوم رو در اینجا مشاهده می کنید، قصد داریم این ۲ تا تصویر رو توی این اسلایدر داشته باشیم. پس پایه کار ما مشخصه، ما میخواهیم روی این اسلایدر کار بکنیم پس به قسمت اصلی اسلایدر وارد می شویم و در اینجا با کلیک بر روی Add Layer و آخرین گزینه یعنی Import Layer را انتخاب می کنیم. در منوی باز شده ما باید اسلایدری که می خواهیم از آن Import کنیم را انتخاب کنیم که در اینجا ما دمو Agency Website Header را انتخاب می کنیم، و همچنین باید اسلایدی را از این دمو انتخاب کنیم و Type آن را هم باید انتخاب کنیم.

 

ما میخواهیم که تصویر Ipad رو اضافه کنیم که کافیه روی علامت + کلیک کنیم و سپس با زدن دکمه OK تصویر اضافه می شود. حالا باید اسلایدر رو Save کنیم و صفحه رو مجدد رفرش کنیم. همونطور که می بینید، تغییرات اعمال شده اما مکان آن ها مناسب نیست و حالا می خواهیم که جابجایی ها رو هم درست کنیم و خواهید دید که چقدر راحت و سریع می تونیم یک اسلایدر حرفه ای رو طراحی کنیم. بخش هایی که مورد نیاز نیستند را می بندیم تا کار را ادامه دهیم.

 

ابتدا باید مقداری آن را بالاتر ببریم، که ما مقدار ۱۰۰ پیکسل رو انتخاب می کنیم. عکس پشتی چون کامل مشخص نیست از پایین این کار را انجام می دهیم، که مقدار آن را روی ۹۵ پیکسل قرار داده و حالا به سراغ آیفون می رویم و باید همه آن ها را ۱۰۰ پیکسل بالاتر ببریم، عملیات را Save کرده و صفحه را بروزرسانی می کنیم. همانطور که می بینیم این اختلاف کمتر شده و حالا میخوایم نوشته هایی که پشت هستند را جابجا کنیم.

 

باید این نوشته ها را ۱۵۰ پیکسل پایین بیاوریم و می بینیم که باز هم جا داره پس مقدار تقریبی ۲۴۰ پیکسل را انتخاب می کنیم، و در نهایت مقدار ۲۳۰ پیکسل رو انتخاب می کنیم. برای لایه های پشتی نیز به اندازه ۲۳۰ پیکسل به جلو می آوریم و یک بار دیگر رفرش می کنیم تا تعییرات اعمال شوند. می بینیم که مکان آن مناسب است و حالا یک دکمه در پشت واقع شده که به کار ما نمیاد، پس میتونیم اون رو پاک کنیم. یک بخش Subtitle هم وجود دارد که ارتفاع آن را روی ۳۰۰ پیکسل قرار می دهیم و صفحه را به روز رسانی می کنیم.

 

همانطور که مشاهده می کنید، همه چیز در جای مناسبی قرار گرفته است و فکر می کنم که فقط کافیه که نوشته ها فارسی سازی شوند. حالا باید روی تک تک آن ها کلیک کرده و متن فارسی یا معادل فارسی آن را وارد کنیم. همونطوری که قبلا آموزش دادیم برای این که فونت Default سایت رو برای آن ها اعمال کنیم از این روشی که می بینید استفاده می کنیم.

 

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

 

امیدوارم که این آموزش واقعا کاربردی براتون مفید واقع شده باشه و بتونید از این آموزش نهایت استفاده را ببرید.
ممنون از همراهیتون، روز خوش و خدانگهدار.