شروع ساخت اسلایدر زیبا با روولوشن

آموزش طراحی اسلایدر جذاب

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

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

freepik

بر اساس طراحی و موضوع سایتتان، به ساخت اسلایدر فکر کنید. یک نمای کلی از اسلایدر در ذهنتان ترسیم کنید. می­توانید از اینترنت برای دانلود تصاویر مناسب برای اسلایدر کمک بگیرید. همچنین در وب­سایت freepik.com نیز تصاویر زیبا و با کیفیت وجود دارد. فقط کافیست موضوع تصویری که به دنبال آن هستید را در سایت freepik جستجو کنید تا با تصاویر بسیار زیادی روبرو شوید. تصاویر و وکتورهای موجود در سایت freepik گرافیکی و لایه باز هستند. دست شما برای استفاده از تصاویر باز است و می­توانید هر قسمتی از تصویر که خواستید را جدا کرده و استفاده کنید. به این نکته توجه داشته باشید که سایت freepik محدود بوده و برای استفاده می­بایست از نرم­ افزارهای رفع فیلتر استفاده کنید. این سایت دارای تصاویر بسیار زیادی است. بیشتر آن ­ها رایگان است و فقط تصاویری که دارای آیکون تاج هستند، غیر رایگان هستند.

پس از جستجو و پیدا کردن تصویر دلخواه‌تان آن را دانلود کنید. پس از دانلود تصویر، یک فایل فشرده با فرمت .zip در اختیار شما قرار می­گیرد. روی آن کلیک کنید. این فایل خود حاوی چند فایل است که در آن فایل­ های متنی و با فرمت .jpg کاربرد ندارند. و فایل­ هایی با فرمت .eps و .ai مورد استفاده قرار می­گیرند.

نرم ­افزار Illustrator

با کلیک بر روی هر کدام از این دو فایل گفته شده (فایل ­هایی با فرمت .eps و .ai)، تصویر در نرم­ افزار Illustrator باز می­شود. توجه داشته باشید که این نرم ­افزار بر روی سیستم نصب باشد. پس از باز شدن تصویر در نرم­ افزار، بهتر است آن را کمی بزرگ کرده تا راحت­ تر بتوانید جزییات آن را ویرایش کنید. با کمک انتخاب­ گر­ها و ابزارهای نرم افزار Illustrator تصویر را ویرایش کرده و تغییراتی که می­خواهید در آن ایجاد کنید.

سپس در نرم ­افزار Photoshop، از گزینه”New < File” ابعاد دلخواهی برای تصویر انتخاب کنید. یک سند جدید ایجاد کنید. حال تصویر پس ­زمینه را با درگ و دراپ (Drag&Drop) از نرم­ افزار Illustrator به نرم‌­افزار Photoshop منتقل و تصویر را ذخیره کنید. (تصویری که می­خواهید برای پس­ زمینه اسلایدر  استفاده کنید را با فرمت .jpgو تصاویر دیگر را با فرمت .pngذخیره کنید.)

توجه داشته باشید برای نمایش بهتر اسلایدر و لود تصاویر در سایت، ابتدا تصویر را فشرده کنید. سپس در سایت آپلود و استفاده کنید. برای فشرده ­سازی و کم کردن حجم تصاویر، از سایت compresspng.com استفاده کنید. این سایت حجم تصاویر را بدون افت کیفیت تصویر، کم می­کند.

Slider Revolution

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

تصاویر دیگری که می­خواهید به اسلایدر اضافه کنید را مانند بالا دانلود و پس از ویرایش و فشرده ­سازی در سایت آپلود کنید. می­توانید از لایه های دیگر برای اضافه کردن به اسلایدر استفاده کنید. مثلاً با اضافه کردن لایه متنی، متنی را در اسلایدر قرار دهید.

پس از طراحی اسلایدر، با استفاده از کد کوتاه (Short Code) و یا با اضافه کردن المان slider Revolution در صفحه­ ساز ویژوال کامپوزر، اسلایدر را به صفحه سایت اضافه کنید.سپس با باز کردن سایت در مرورگر، اسلایدر را مشاهده نمایید.