Knowledgebase

How to set up Slideshow

1. Go to Web Content > Slideshow
2. Click New

You will then be shown the following page.

Descriptions :

1. Slider Name
   • Give a name for this Slideshow
2. Slider Width
   • Refer here for the banner width before creating any new banners so that the banners fit properly
3. Slider Height
   • Refer here for the banner height before creating any new banners so that the banners fit properly
4. Flat Slider
   • Choose yes for flat styled slider 
5. Show Bullet
   • Select either Bullet, Thumbnails or None. This will be shown at the centre bottom of the Slideshow.
     • Bullet
       • 
         
     • Thumbnails
       • 
         
6. Show Nav. Arrow
   • Select Yes if you want to display the navigation arrow on the Slideshow
   • 
7. Slideshow Speed (ms)
   • Adjust the Slideshow presentation speed here
8. Layout Type
   • Determine whether the horizontal length of this Slideshow (Fixed or Full Width)
     • Fixed
       • 
         
     • Full Width
       • 
         
9. Save
   • Click to save and continue
10. Add Slide
    • Click here to add banners to this Slideshow

Upon clicking Add Slide, the following page will be displayed.

Descriptions :

1. Status
   • Turn the Status to On when you want to display this banner in the slideshow
2. Image Display
   • Browse and select the intended banner from the Image Manager
3. Transition Slider Effect
   • Determine the animation effect on how this banner is going to be presented in the Slideshow
4. Sort Order
   • Arrange the display sequence of banners in the Slideshow by assigning numbers in ascending order
5. URL Link
   • Enter the last part of the website link here (e.g. www.storename.com/men, you just key in "men" in the field), if applicable
   • Check the box if you want to open the link in a new window
6. Add Elements To The Slider (This is optional, see image and description below)
7. Click Save

Descriptions :

1. Click (+) to add a new elements to this banner
2. Turn the Element Status to On to enable this element on the banner
3. Select the desired Element Type (Text/HTML or Image)
4. Input the content according to the selected Element Type
5. Define the horizontal position of the element in Position X
6. Define the vertical position of the element in Position Y
7. Determine the type of Animation Class 
   • This will determine the moving direction and length of movement for this element.
   • For example, if you choose Long From Right or Short From Right
     • 
     • For other type of classes, be it left, top or bottom, it will work the same way (just from different direction).
8.  Determine the type of Animation Easing. 
   • This will determine how the element will move in the first half of its journey.
   • Preview and compare different type of Easing : Reference 1 and Reference 2
9. Determine the type of Animation EndEasing
   • This will determine how the element will move and stop in the second half of its journey.
10. Define the Animation Speed in ms
11. Define the Animation Delay in ms
12. Advanced Element Styling is only for those who are familiar with CSS coding. This is used to further enhance the style of the element.
13. Click Save to save all the changes
14. Repeat the steps above to add more banners to the Slideshow

Then click Slideshow positions to configure the slider position

Upon clicking Slideshow positions, the following page will be displayed.



Description:

1. Slider
   • Choose which slider to configure its position
2. Layout
   • Choose which page to display the slider
3. Position
   • Determine the position of the slider in the chosen page
4. Sort Order
   • Arrange the display sequence of banners in the Slideshow by assigning numbers in ascending order
5. Status
   • Turn the Status to On when you want to display this banner in the slideshow
6. Delete
   • Click to delete
7. Add Item
   • Click to add more sliders to configure their position 
8. Manage Slideshow
   • Click to go back to Slideshow setting page
9. Click Save

 
Sample Screenshot of Slideshow Banners in the store

Also Read

Powered by WHMCompleteSolution