Website Builder Image Slider

Add a sliding horizontal panel to your website to feature important pages on your website using WOW Slider.
* These add-ons are from a 3rd party therefore we are not responsible for how they will work. We are also not able to provide technical support for them.

You can add text on your banner and hyperlink it if you want to

There are many transition effects you can choose from

There are many template styles you can choose from

Step 1:

Download and install WOW Slider on your computer.
Add the images you want to use into the tool by following their instructions. For best results, make the images all the same size (width and height) so that the tool doesn't stretch or distort your images.
In the Settings > Images screen, specify the width and height of your images. Configure other settings you wish to have.
In WOW Slider, on the Publish screen, select Publish to folder so that the files and folders are generated onto your computer.
Select where the files are to be generated so you can remember where to find them because you will need to upload them to your web hosting server.
Click the Publish button in WOW Slider and a page should open with the image slider showing and working.

Step 2:

After you have seen it working on the previewed page the way you like then you will need to upload the WOW Slider generated files and folders up to your web hosting server.
Sign into your web hosting control panel and navigate to the File Manager where you can upload files. Another method to upload your files is by using an ftp program like FileZilla which you can download for free from FileZilla's website.
Upload the 2 folders that WOW Slider generated called data and engine to your web hosting server's website folder.

Step 3:

On your previewed page from WOW Slider, select in your browser to View Source so that you can copy the codes for the head section.
In Ewisoft, right click (left windowpane) the page you want to put the image slider and select Properties > Script.
Paste the code before </head> tag and change where it is marked in red for where you uploaded your files to.


<link rel="stylesheet" type="text/css" href="http://www.yoursite.com/engine1/style.css" />
<style type="text/css">a#vlb{display:none}</style>
<script type="text/javascript" src="http://www.yoursite.com/engine1/jquery.js"></script>
<script type="text/javascript" src="http://www.yoursite.com/engine1/wowslider.js"></script>


Step 4:

On your previewed page from WOW Slider, select in your browser to View Source so that you can copy the codes for the body section.
In Ewisoft, click to edit your page where you want the image slider to appear.
Select the HTML tab and paste the code and change where it is marked in red for where you uploaded your files to.


<div id="wowslider-container1">
<div class="ws_images">
<span><img src="http://www.yoursite.com/data1/images/social1.jpg" alt="" title="" id="wows0"/>You can add text on your banner and hyperlink it if you want to</span>
<span><img src="http://www.yoursite.com/data1/images/social2.jpg" alt="" title="" id="wows1"/>There are many transition effects you can choose from</span>
<span><img src="http://www.yoursite.com/data1/images/social3.jpg" alt="" title="" id="wows2"/>There are many template styles you can choose from</span>
</div>
<div class="ws_bullets"><div>
<a href="#wows0" title=""><img src="http://www.yoursite.com/data1/tooltips/social1.jpg" alt=""/>1</a>
<a href="#wows1" title=""><img src="http://www.yoursite.com/data1/tooltips/social2.jpg" alt=""/>2</a>
<a href="#wows2" title=""><img src="http://www.yoursite.com/data1/tooltips/social3.jpg" alt=""/>3</a>
</div></div>
<a style="display:none" href="http://wowslider.com"> Ui Slider jQuery by WOWSlider.com v1.9.4</a>
</div>
<script type="text/javascript" src="http://www.yoursite.com/engine1/script.js"></script>


In Ewisoft, click Preview to view your pages.