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

 

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



شما نمی توانید این آموزش را ببینید چون عضو الماسی سایت نشده اید...!

این محتوا برای مشترکان محدود

 

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

 

پیش از هر چیز ما به قسمت Slider Setting میرویم تا این صفحه برای ما باز بشه. من قبلا توی یکی از آموزش ها خدمتتون گفته بودم که توی قسمت Slider type and Layout خیلی کار داریم و حالا امروز فرصت شد و این افتخار رو دارم که یک قسمت کوچکی از این ۲ مورد رو با هم بررسی کنیم.

 

در مرحله اول با Slider type کاری ندارم و به سراغ slider layout میریم. ببینید اینجا یک سری سایزها رو مشاهده می کنید که این سایز ها یک سری اسکرین های مختلف دارند، که حالا میتونه دسکتاپ یا لپتاپ و یا موبایل باشد، و یک سری عدد پایین این ها هست. من قصد دارم یه تغییری توی این عدد ها بدم تا متوجه بشید که فعلا این عدد ها به چه صورت توی سایت قرار میگیرند. اول از همه توجه کنید که در اینجا نوشته Full Screen و این عدد رو به ۱۰۰۰ تغییر می دهیم و بروزرسانی میکنیم و با رفرش کردن نتیجه رو مشاهده می کنیم، دوباره آن را به ۱۰۰۰ تغییر می دهیم و حالا مجدد با کپی گرفتن از صفحه آن را ذخیره می کنیم.

 

حالا بررسی می کنیم و می بینیم که هنوز هم گوشه صفحه علامت اسکرول وحود ندارد، و به این معنی است که این اسلایدر چون دارای Type متفاونی است و روی Full screen است و عدد ها رو که کوچک می کنیم، یک مقدار جایگاه قرارگیری عناصر رو داریم تغییرات ایجاد میکنیم. حالا ۸۰۰ رو به ۵۰۰ تغییر می دهیم، احتمالا این نوشته ها خیلی نزدیک تر هستند. همانطور که می بینید باز هم صفحه فول سایت هست و علامت اسکرول نیست، اما نوشته ها خیلی نزدیک تر و بزرگ تر شده اند.

 

اجازه بدید این مقدار رو به ۷۰۰ تغییر بدیم و ۵۰۰ هم به نظر کافی است، می بینید که ما در حال تغییر اسلایدر هستیم و باز هم اسلایدر ما فول اسکرین هست و فقط توی جای نوشته ها و در واقع عناصر سایت و اسلایدر در حال تغییر می باشند. حالا این سوال ایجاد میشه که اگر بخاهیم اسلایدر فول اسکرین نباشه چیکار کنیم؟

 

بهترین راه اینه که آن را روی Full wide یا Auto قرار بدیم، که تفاوت چندانی ندارد اما ما روی Full wide قرار می دیم. حال روی Save Setting قرار میدهیم و صفحه را رفرش میکنیم، نتیجه این است که صفحه کوچک می شود و اون قسمتی که در پایین بود دیگر نیست و در واقع حذف شده. پس ما میایم مقدار عدد هایی که اینجا هست رو بهشون اضافه می کنیم تا تغییرات رو ببینیم.

 

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

 

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

 

خیلی از دوستان پیام می دادند که ما چطوری می تونیم کاری کنیم که اسلاید ها اتوماتیک بروند بعدی و نیاز به تنظیم دستی آن نباشد، برای اون کسایی که نیازمند این آموزش هستند، فقط نیازه به این نکته توجه کنند که شما برای اتوماتیک کردن این بخش باید Stop Slide After را غیر فعال کنید. حالا با save کردن آن تغییری دیده نمی شود، قصد ما از این کار این بود که شما این ۲ موردی که این پایین هست رو ببینید و اینجا نوشته مقدار loop ها که به معنی مقدار چرخش ها است که بر روی صفر قرار دارد. حالا ما اگر میخواهیم که ۲ بار اسلاید های سایت ها عوض شوند، بخش Amount of loops رو بر روی ۲ قرارد می دهیم. حالا سوال اینجاس که مقدار زمانی که اسلاید ها عوض می شود رو از کجا تغییر بدهیم، برای این کار باید Default Slide Duration رو تغییر بدیم که ما در اینجا روی ۳۰۰۰ms قرار می دهیم.

 

مجدد با Save کردن آن و بازگشت به صفحه بعد از گذشت ۳ ثانیه اسلاید ها عوض می شوند. یک نکته ای هم هست که خیلی از دوستان علاقه مند بودند که در موردش بدونند، و قصد داریم اون رو هم توضیح بدیم. خب شما متوجه شدید که اگر بخواهید یک اسلایدر رو اتوماتیک حرکت بدید چکار باید بکنید و تنظیماتش به چه صورت هست، و توضیح دادیم برای تنظیم ثانیه اش از کجا اقدام کنید.

 

یک قسمت خیلی خیلی مهم که بعضی از اسلاید های سایت ما دارند و کاربرها سوال می کنند از کجا ما میتونیم اون ها رو فعال بکنیم، بخش Progress Bar هست که اون رو میتونید از این جا فعال کنید، که با قرار دادن آن روی On می توانید آن را فعال کنید. این جا گفته که میخواهید Progress bar شما کجا باشه که معمولا بالا باشه بهتره و همین طور شما می توانید ارتفاع آن را تنظیم کنید.با کلیک بر روی Save میتوانیم تغییرات رو مشاهده کنیم.

 

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

 

نکات دیگه ای هم که قصد دارم بهش اشاره بکنم اینه که چطور میشه این بک گرند رو عوض کنیم، که خیلی سریع بهشون اشاره می کنم، چون قبلا بهشون اشاره شده. چون تکرار موجب یادگیری بیشتر هست، به آن اشاره می کنیم.

کافیه توی اسلاید مورد نظر خود روی Media library کلیک کرده و عکس مورد نظر خود رو Drop بکیند و در نهایت روی گزینه save کلیک کرده و آن را Insert بکنیم. و به این ترتیب صفحه بک گرند رو عوض میکنیم برای تغییر نوشته ها هم روی لایه مورد نظر کلیک کرده و متن آن را تغییر می دهیم، در اینجا ما یک متن ساختگی قرار می دهیم و سپس روی گزینه Save کلیک کرده و صفحه را فرخوانی می کنیم و تغییرات رو مشاهده می کنیم. که کار بسیار راحتی است.

 

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

 

ممنون که با ما همراه بودید، روز خوش و خدانگهدار.