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

325 بازدید
سه شنبه ۱۲ مرداد ۱۳۹۵
آموزش ساخت اسلایدر در صفحات وب با WOW SliderReviewed by جواد نبوی on Aug 2Rating: 5.0

ساخت اسلایدر در صفحات وب

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

ساخت اسلایدر در صفحات وب با WOW Slider

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

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

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

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

وقتی وارد صفحه دانلود شدید دو فیلد می بینید. در فیلد اول نام و در فیلد دوم ایمیل خود را وارد کنید. سپس روی دکمه Download Now کلیک کنید.

ساخت اسلایدر با WOW Slider

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

ساخت اسلایدر در صفحات وب

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

ساخت اسلایدر در صفحات وب

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

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

ساخت اسلاید شو در صفحات وب

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

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

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

ساخت اسلایدر با WOW Slider

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

در قسمت Slider size میتوانید اندازه اسلایدر خود را مشخص کنید. در بخش Font باید نوع فونتی که متون درون اسلایدر دارند را تعیین کنید. قسمت Transition effect هم که قبلا تنظیم کرده بودید (همان افکت حرکت اسلایدر). در قسمت Delay between slides باید مدت زمانی که هر عکس به صورت ثابت نمایش داده می شوند را تعیین کنید. در قسمت Effect duration هم میتوانید تعیین کنید که افکت حرکت اسلایدر چه مدت به طول بیانجامد.

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

ساخت اسلایدر با wow slider

در بخش 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 و کادر بزرگ موجود در جلوی آن ها را کامل کنید.

 

ساخت اسلایدر با WOW Slider

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

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

ساخت اسلایدر سایت با WOW Slider

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

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

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

۲- کد زیر را دقیقا بالای تگ <head/> صفحه وب تان قرار دهید (یعنی بین تگ های <head> و <head/>). اگر قالب وردپرس است به ویرایشگر قالب وردپرس بروید و کد زیر را بالای تگ <head/> در فایل header.php قالب قرار دهید.

<!– 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 –>

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

ساخت اسلایدر در صفحات وب

این کد را باید کپی کنید و در محل دلخواه از قالبتان که میخواهید اسلایدر نمایش داده شود قرار دهید. توجه داشته باشید که کد را باید بین تگ های <body> و <body/> بگذارید.

حال با ذخیره صفحه وب یا قالب تان میتوانید اسلایدر را ببینید.

ساخت اسلایدر

حذف واترمارک از اسلایدر

اگر حالت Full width را در تنظیمات نرم افزار انتخاب کنید هیچ گونه واترمارک تبلیغاتی در اسلایدر نمی بینید. اما در غیر اینصورت یک واترمارک به تصاویر اسلایدر اضافه می شود که نوشته WOW Slider را در بر دارد. برای حذف این واترمارک به طریق زیر اقدام کنید:

۱- فتوشاپ را باز کنید.

۲- در فتوشاپ از منوی File روی گزینه Open کلیک کنید. سپس به محل فولدر اسلایدر تان بروید و از پوشه data1 به فولدر images بروید و یکی از تصاویر را باز کنید.

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

۴- تصویر را در همان فولدر images و با همان نام ذخیره کنید تا جایگزین تصویر قبلی شود.

۵- برای همه تصاویر اسلایدر این کار را انجام دهید.

خب کار تمام شد. امیدواریم از این آموزش لذت برده باشید. هر گونه سوال یا درخواست آموزشی اگر دارید حتما به ما اعلام کنید.

در زیر می توانید پیش نمایش چیزی که من ساخته ام را ببینید.

لينک دانلود:

تبلیغات

نویسنده (مدیر سایت)

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

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *