How to use the PlusPack Image Slider element
Please note: You must be using OptimizePress version 2.5.7 or above for PlusPack features to function correctly
In this tutorial you will learn how we use the OptimizePress Plus Pack Slider element.
- To get started, you will firstly need to open a page with the LiveEditor. Once launched, click on the 'Add Element' button.
- Next, click on the Search box and begin typing in the word 'Slider'. OptimizePress will go ahead and list all the elements containing the word Slider. From this list, select the 'Slider' element.
- Once you've clicked on the element, you will have 3 slider styles to choose from. In our example, we've selected the first style from the list of available styles.
- Select the style you want, then click on the 'Add New' button in the next step.
- You will be shown a list of options to add a new image, set the 'Background Colour' and give the image a 'Title' and 'Content'. Click on the 'Select File' button to go ahead and add a new image to your slider.
Note: Every slider style will have it's own recommended image size. Please ensure that your images fit the recommended dimensions, else the slider will fill the spaces with the background colour, which you will have set in the slider setup.
- You can add as many images as you want to your slider by simply clicking on the 'Add New' button.
- Your slider will now be ready to be published. Scroll down to the bottom and click the 'Insert' button to add the slider to your page in the LiveEditor.
- If you later decide you would like to change the style of your slider. You will be able to do so by going to the settings, clicking on the 'Back Arrow' button and choosing another style. All of your images and settings will stay the same.
- For more advanced options, click on the 'Advanced Options' button. This will take you to a list of all the available options to further customise your slider. The list of options are explained below:
Animation Type (Slide, Fade) - How your images in the slider are shown between transitions.
Loop Animation (Yes, No) - Set whether or not the animation of your images will loop to the beginning.
Slideshow Sizing (Normal, Stretch) - Set whether the image will be shown in it's native size or stretched to fit the slider dimension.
Speed of Slideshow Cycling (In Milliseconds) - Set the speed of your animation between images.
Speed of Animation (In Milliseconds) - Set the speed of the overall animation.
- In our example, we've selected the 'Stretch' option under 'Slideshow Sizing', which will stretch the image to fit the recommended dimensions of the slider.