آموزش ساخت اسلایدر در صفحات وب با WOW Slider

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

ساخت اسلایدر

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

در ادامه بخوانید:
افزونه عضویت ویژه در وردپرس

نحوه ی ساخت اسلایدر با نرم افزار WOW Slider

با این نرم افزار میتوانید انواع مختلف اسلایدر یا اسلایدشو را در صفحات سایت خود بسازید. امکانات فوق العاده ای همچون افکت های متنوع و فراوان، ریسپانسیو (واکنشگرا) بودن اسلایدر، قرار دادن توضیحات و لینک برای هر عکس، دکمه های ناوبری متنوع و … همه و همه باعث بی نیاز شدن طراحان وب از کد نویسی اسلایدر می شود. حال که با ویژگی های فوق العاده ی این ابزار آشنا شدید، وقت آن رسیده است که به آموزش ساخت اسلایدر با WOW Slider بپردازیم.

دانلود و نصب نرم افزار WOW Slider 

ابتدا نرم افزار را از لینک زیر دانلود و نصب کنید.

هنگامی که وارد صفحه دانلود می شوید، دو فیلد را در آن جا مشاهده می کنید. در فیلد اول نام و در فیلد دوم ایمیل خود را وارد کنید. سپس روی دکمه Download Now کلیک کنید.

ساخت اسلایدر

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

ساخت اسلایدر

پس از نصب، نرم افزار را اجرا کنید. در هنگام اجرای نرم افزار صفحه ای مانند تصویر زیر می بینید:

ساخت اسلایدر

انتخاب تصاویر موجود در اسلایدر

تصاویری که میخواهید درون اسلایدر قرار بگیرند را با دراگ و دراپ به درون صفحه نرم افزار بکشید. همچنین میتوانید برای اضافه کردن تصویر روی دکمه Add Images and Videos کلیک کنید. سپس در زیر منوی باز شده روی گزینه Add images… کلیک کنید. پس از انجام این کار تصاویر مورد نظرتان را از درون سیستم خود پیدا کرده و باز کنید.

در این جا مشاهده می کنید که یک اسلایدر با طرح پیشفرض ایجاد شده است. بهتر است نرم افزار در حالت فول اسکرین قرار دهید. با این کار  پیش نمایش اسلایدر را بهتر می توانید ببینید. شما می توانید در این قسمت طرح اسلایدر را طبق سلیقه خودتان تغییر دهید.

ساخت اسلایدر

انتخاب قالب برای ساخت اسلایدر

در سمت راست نرم افزار قسمت بالا، یک بخش با نام Template  وجود دارد. روی هر کدام از قالب ها که توجه شما را جلب می کند، کلیک کنید تا نتیجه اش را در بخش پیش نمایش نرم افزار ببینید. این قالب ها مربوط به شکل ظاهری اجزاء موجود در اسلایدر می باشد. مثلا شکل دکمه های ناوبری و کادر اسلایدر و … .

افکت خود را انتخاب کنید

در زیر این بخش، یک قسمت دیگر با نام Transition effects می بینید. در این بخش می توانید نوع افکتی که تصاویر در هنگام جا به جایی دارند را تعیین کنید. می توانید هر کدام از افکت ها را امتحان کنید تا در نهایت افکت مورد نظر خود را پیدا و انتخاب کنید.

تنظیمات شخصی سازی اسلایدر

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

ساخت اسلایدر

در ادامه مهمترین تنظیمات موجود در این بخش را توضیح می دهیم:

در قسمت Slider size میتوانید اندازه اسلایدر خود را مشخص کنید..

در بخش Font باید نوع فونتی که متون درون اسلایدر دارند را تعیین کنید.

قسمت Transition effect را  قبلا تنظیم کرده بودید (همان افکت حرکت اسلایدر است).

در قسمت Delay between slides باید مدت زمانی که هر عکس به صورت ثابت نمایش داده می شوند را تعیین کنید.

در قسمت Effect duration هم میتوانید تعیین کنید که افکت حرکت اسلایدر چه مدت به طول بیانجامد.

بعد از انجام تنظیمات این تب، به تب General موجود در بالای پنجره بروید. در این تب هم نتظیمات بسیار مهمی وجود دارد.

ساخت اسلایدر

در بخش slider title باید عنوان اسلایدر را تعیین کنید. البته این قسمت در ساخت اسلایدر اهمیت چندانی ندارد. اگر تیک گزینه Auto play Slide Show را زده باشد، تصاویر اسلایدر به صورت خودکار و بعد از مدت زمانی معین جا به جا می شوند. اگر تیک گزینه Pause on mouseover را بزنید، در هنگام آوردن موس روی اسلایدر، حرکت آن متوقف می شود. سپس زمانی که موس را از روی اسلایدر بردارید دوباره به حرکتش ادامه می دهد. اگر حالت Random order را انتخاب کنید در این صورت، نرم افزار ترتیب تصاویر موجود در اسلایدر را به صورت تصادفی تعیین می کند. اگر میخواهید دکمه حرکت/توقف موجود در وسط اسلایدر را بردارید باید تیک گزینه Pause/play button را بردارید.

در بخش پایین تر این پنجره در سمت چپ، بخشی با عنوان Slider layout قرار دارد. در این بخش می توانید نوع اسلایدر را تعیین کنید. مثلا به صورت جعبه ای (Box) باشد یا تمام عرض (Full width) و یا تمام صفحه (Full screen).

حال مهم ترین گزینه های موجود در سمت راست این پنجره را تک به تک مورد بررسی قرار می دهیم:

Show controls on mouseover: اگر این گزینه را تیک دار کنید، وقتی که موس را روی اسلایدر می آورید، دکمه های ناوبری اسلایدر (بعدی و قبلی) به نمایش در می آیند.

Show prev/next buttons: اگر این گزینه فعال شود، دکمه های بعدی و قبلی نمایش داده می شوند.

show descriptions: در صورتی که این گزینه را انتخاب کنید، توضیحات هر تصویر در اسلایدر نمایش داده می شود. همچنین در قسمت Description effect می توانید نوع افکت توضیحات را نیز مشخص کنید.

Show bullet navigarion/filmstrip: اگر تیک این حالت را در اسلایدر خود فعال کنید، دکمه های دایره ای در پایین اسلایدر نمایش داده می شوند که با کلیک روی آن ها میتوانید تصویر دلخواه را به درون اسلایدر بکشانید. یا به عبارت بهتر تصاویر را به صورت دلخواه جا به جا کنید.

پس از انجام تنظیمات، روی دکمه Apply کلیک کنید تا تغییراتی که اعمال کردید ذخیره شوند.

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

ساخت اسلایدر

رندرگیری از اسلایدر 

پس از ساخت اسلایدر با ویژگی های مورد نظرتان، باید از آن خروجی بگیرید.

بدین منظور روی دکمه Publish در بالای پنجره کلیک کنید. در پنجره باز شده گزینه Publish to folder را انتخاب کرده و فولدر مقصد را انتخاب کنید. پیشنهاد می شود یک فولدر با نام slider در جایی (مثلا دسکتاپ) بسازید. سپس در این قسمت آن فولدر را به عنوان مقصد انتخاب کنید. در نهایت روی دکمه Publish موجود در پایین پنجره کلیک کنید.

ساخت اسلایدر

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

قرار دادن اسلایدر در صفحه ی وب

برای اینکه پس از اتمام ساخت اسلایدر آن را در صفحه وب خود قرار دهید مراحل زیر را انجام دهید:

۱- به فولدری که اسلایدر را در آن ساختید بروید و پوشه های data1/ و engine1/ را کپی کنید. سپس این پوشه ها را در فولدر محل صفحه وب خود قرار دهید. منظور از این فولدر جایی است که فایل index.html صفحه وب شما قرار گرفته است. همچنین اگر میخواهید به یک قالب وردپرس اسلایدر را اضافه کنید، باید این دو پوشه را درون فولدر قالب تان قرار دهید.

۲- کد زیر را دقیقا بالای تگ صفحه وب خود قرار دهید.

<!– Start WOWSlider.com HEAD section –>

<link rel=”stylesheet” type=”text/css” href=”engine1/style.css” />
<script type=”text/javascript” src=”engine1/jquery.js”></script>

<!– End WOWSlider.com HEAD section –>

۳- به همان صفحه ای بروید که نرم افزار پس از ساخته شدن اسلایدر برای تان ساخته بود و در آن اسلایدر و راهنمای آن قرار داشت. در این صفحه در مرحله ۳ یک کد برای شما گذاشته است. به تصویر زیر دقت کنید:

جمع بندی

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

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

نرم افزار باشگاه مشتریان, طراحی سایت اختصاصی، نرم افزار مالی سپیدار

۵۶ ۲۸۴ ۲۸۴ (۰۲۱)