HOW TO ADD A PHOTO SLIDER
The photo slider is a combination of images, titles and short texts that are shown with animated effects. Usually it is placed on the home page of the website. Before we start explaining how to set up a slider on your website, we want to explain an important characteristic regarding the images that are placed on it. The images in the slider can be set as background images or they can be set as so-called "internal" images. If an image is set as background image, then it will be always displayed from the end to the end of the website. In contrast, internal images are displayed on the position of which they were placed.
To add a photo slider on your website, you should do the following:
1. Click on the "Add element" link.
2. Select the "Slider" element from the opened window.
3. This will open the window with the slider options. At the top of this window you can set the options for the slider such as the effects of animation, speed or transition etc.
We would like to explain a little bit more about the setting "Maintain aspect ratio" which is very important for the work of the slider and which refers to the background image of the slider. If this feature is set to "Yes", then the background image should have proportions 32: 9 (size 1920x540, 1280x360, 1024x288, etc). If this option is selected to "No", then the background image will be distorted and the image that will be set as background may be in any proportions or dimensions. The slider has these settings in order to control the behavior of the background image. If the setting "Maintain aspect ratio" is set to "Yes", the image will always retain its proportions, without any distortion. This is recommended for background images showing people or objects for which we do not want them to be distorted. In the case where the background image represents some abstract photography or photography with greater blur, which does not matter if it is distorted or not, then in the setting "Keep aspect ratio" you may choose "No" and use the background image as an image with any size/proportions.
4. In the "Slider" window, just below the “Options” section, there is a box named "Slides" which gives an overview of all the slides that the slider contains.
- To add a slide, click on the "Add slide" button. This will create an empty slide. We recommend that you create at least two slides. With double click on the empty slide the "Slide details" window will be opened. From here you can edit the slide according to your needs.
5. In the "Slide details" window you can insert a background image via the "Add a background image" button. If you do not want to set a background image, then you can select a background color through the "Background color" option.
6. Also, from the "Slide details” window, you can add additional images, texts and buttons.
7. Enter your text via the "Add text" button. After clicking on this button, a text field with predefined content will appear on the slide. With a double click on it, a window for editing the text will be shown. In this window you can set the color, the size and the text content. If you need more than one text in the slide, then you can enter additional labels via the "Add text" button. You can change the position of the text with drag and drop.
8. To add a button that will open a new page, an internal page or a page from another website, click on the "Add button" button.
9. Hover the mouse over the added button and click on the settings icon on the right.This will open the window for the button’s options.
10. In the "Edit" window, using the option for the color, you can change the color of the text that is shown on the button. With the background color option, you can change the background color of the button. With the text box for the title you can set the text that will appear on the button. The option "Link" offers two possibilities: to open a web page from your website or to open a page from another website. The last option "Open in" gives you the opportunity to choose whether the new page will be opened in the same or in a new window (tab).
11. The "Add image" option gives you the opportunity, besides the background image, to add another image - so called “internal” image. To add an internal image, after clicking on the “Add image” button, double click on the added box for the image. You'll get a window through which you can add a photo from your computer or you can choose from some of the previously added images to the media gallery. You can read more about how to add an image from the tutorial "How to add an image to your website".
12. The size of the internal image can be controlled by simply resizing it via the handles that can be found on the edges of the image. Also you can change the position of the image with simple drag and drop.
13. Click the "OK" button after you are finished with editing the slides. This will return you to the first window "Slider". Repeat the steps from 4 to 12 to create more slides.
14. Click "OK" on the "Slider" window when you're done and the slider will be placed on your website.