ساخت اسلایدر خلاقانه در روولوشن اسلایدر

در آموزش ­های قبل با ساخت اسلایدر خام در روولوشن اسلایدر و ساخت تصاویر جذاب برای سایت آشنا شدید. در این قسمت یک اسلایدر جذاب را با آموخته ­های قبل طراحی می­ کنیم.

اسلایدر خام

در شروع طراحی می­بایست یک اسلایدر خام ایجاد کنیم. برای این کار در پیشخوان وردپرس، منو Slider Revolution  را انتخاب کرده و سپس گزینه “ساخت اسلایدر جدید” را کلیک کنید.

صفحه پیش­رو، صفحه ساخت اسلایدر خام است. از منو “تنظیمات عمومی ماژول”، برای اسلایدر “عنوان” و “نام مستعار” در نظر گرفته و ذخیره کنید.(بهتر است نام­ گذاری ماژول اسلایدر با حروف انگلیسی انجام شود.)

حال برای انتخاب تصویر برای اسلاید، از سایت freepik.com استفاده می ­کنیم. موضوع تصویر را جستجو کنید. از بین تصاویری که مشاهده می­ کنید، تصویر دلخواه را دانلود کنید. در فایل تصویر که با فرمت .zipدانلود شده است، فایل­ هایی با فرمت .eps یا .ai را کلیک کنید تا فایل در نرم افزار Illustrator باز شود.

با استفاده از انتخاب­ گرهای نرم ­افزار Illustrator ، هر کدام از لایه ­های تصویر که برای طراحی اسلایدر نیاز دارید را انتخاب کنید.

 در نرم ­افزار Photoshop یک سند با ابعاد دلخواه ایجادکنید. لایه­ های تصویر را با دراگ و دراپ(Drog&Drop) از نرم ­افزار Illustrator به نرم­ افزار Photoshop منتقل کرده و ابعاد آن را تنظیم نمایید.

به یاد داشته باشید از نوار سمت راست، لایه Background سفید را حذف کرده تا پس ­زمینه تصویر شفاف باشد. لایه ­ای که در نرم­  افزار Photoshop ایجاد کردید را با فرمت .png ذخیره کنید.

کم کردن حجم تصاویر 

بهتر است برای زمان لود مناسب اسلایدر در سایت، حجم تصاویر کم شود. سایت tinypng.com به طور آنلاین با فشرده کردن تصویر باعث کم شدن حجم تصویر می­ شود. تصویری که با فرمت .png ذخیره کردید را در سایت tinypng  آپلود کرده و پس از فشره شدن دوباره آن را دانلود کنید.

پس از فشرده­ سازی تصویر، در افزونه روولوشن اسلایدر، منو “تنظیمات اسلاید ß پس ­زمینه” را انتخاب کرده و نوع پس ­زمینه را تصویر قرار داده و سپس از کتابخانه رسانه تصویر فشرده را که بارگذاری و انتخاب کنید.

برای تنظیم ارتفاع اسلایدر، از منو “تنظیمات عمومیßطرح­ بندی”، ارتفاع مناسب اسلایدر را برای دستگاه­ های مختلف(مانیتور، لپ­تاپ، موبایل و…) تنظیم کنید.

تا اینجا پس ­زمینه اسلایدر ایجاد شده است.

هر کدام از لایه­ های دیگر تصویر که می­خواهید در اسلایدر نمایش داده شود را از نرم افزار Illustrator انتخاب کرده و پس از انتقال به Photoshop و حذف لایه ­های اضافی آن با فرمت .png ذخیره کنید. یادآوری می­ شود از سایت tinypng برای فشرده­ سازی تصویر اقدام کنید.

برای اضافه کردن تصویر به اسلاید، از منو بالایی افزونه روولوشن اسلایدر “افزودن لایهßتصویر” را انتخاب کنید. با کلیک روی لایه تصویر اضافه شده، تصویر مورد نظر را در کتابخانه پرونده ­های چند رسانه ­ای وردپرس بارگذاری و انتخاب کنید.

درصورت لزوم ابعاد تصویر را تغییر داده و در اسلایدر جایگذاری نمایید.

لایه­ های دیگر اسلایدر را نیز با روش گفته شده در بالا ایجاد کنید.

همچنین می­توانید برای هر کدام از لایه ­های اسلایدر افکت اضافه کنید. برای این کار پس از انتخاب لایه، از منو “تنظیمات لایهßحلقه لایه” را انتخاب کنید. سپس قسمت افکت را فعال کرده و از جعبه باز شونده “بارگذاری قالب حلقه”، افکت دلخواه را به لایه اضافه کنید. همچنین می­توانید سرعت حرکت افکت را نیز تنظیم نمایید..

محتوای لایه های متن

برای اضافه کردن متن به اسلایدر، از منو بالایی افزونه روولوشن اسلایدر “افزودن لایهßمتن” را انتخاب کنید. در جعبه “محتوای لایه­  های متن”، متن دلخواه را بنویسید. همچنین می­توانید از منو “تنظیمات لایهßاستایل”، رنگ متن، فونت، اندازه و… را تغییر دهید.

اگر بخواهید متن با انیمیشن نمایش داده شود پس از انتخاب لایه متنی، از منو “تنظیمات لایهß انیمیشن” و جعبه باز شونده “IN” مدل دلخواه برای انیمیشن متن را کلیک کنید.

اضافه کردن متن،تصویر

برای هر یک از لایه ­های دیگر مثل متن، تصویر ، دکمه و… نیز می­توانید انیمیشن اضافه کنید.

در صورتی­ که بخواهید به اسلاید دکمه اضافه کنید، از منو بالایی گزینه “افزودن لایهßدکمه” را کلیک و مدل دکمه دلخواهتان را انتخاب کرده و متن دکمه را نیز تغییر دهید. همچنین مانند متن می­توانید فونت، رنگ پس­زمینه و… دکمه را نیز تغییر دهید.

 

بخش فراخوانی

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

اگر از صفحه ­ساز ویژوال کامپوزر استفاده می­کنید، المان “Slider Revolution ” را به ردیف صفحه­ ساز اضافه کنید.  از بین اسلایدرهایی که وجود دارد، اسلایدی که طراحی کرده­ اید را انتخاب کرده تا اسلایدر در برگه قرار گرفته و در وب­سایت نمایش داده شود. همچنین برای نمایش اسلایدر می­توانید “کد کوتاه” آن را از قسمت “تنظیمات عمومی” اسلایدر کپی کرده و در هر پست­ تایپی که می­  خواهید قرار دهید.

آموزش نمایش اسلاید و شروع مقدماتی

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