Here you can find documentation how to use slider editor.
On the bottom left of the editing page you can manage the slides and change their settings.
To add a new slide you have two options. By clicking on the Empty button (position 1) a new empty (without background) will be added in the last position, while the Images button (position 2) allows you to select one image from a file manager. You can change the slide positions by dragging and dropping them. The two icons on the righe of each line allows you to duplicate a slide with all its settings and elements (position 3) and to delete it (position 4).
The panels below allows you to edit the slide settings as described below.
This panel allows you to change the general settings of the slide.
Since the element time on screen and their effect speeds depends on the slide duration, when you change it the element speeds are re-computed base on the new value (see the Elements paragraph for more details about element speed). The button Change duration preserving speeds allows you to change the slide duration without affecting the element speeds.
This panel allows you to specify how the slider will be shown. You can choose one of the ready-to-use effects and its duration (you can also enter decimal values separated by comma). A realtime preview will be shown below.
If you choose the none effect or if you specify a zero duration, no effect will be appied to the slide.
In this panel you can find the background settings of the slide. You can choose between a transparent background, a solid color, an image (you will be prompted to select an image in a file manager folder) or an image loaded from an external url.
If you choose the Image or External Url options some settings will be shown. They allow you to specify how the background image will be placed and resized. The first property is Fit with the following available values:
The Overlay setting could be very useful if you have low quality or small size image. In this case, if your slider is responsive your image could be stretched to higher dimensions and shown with poor quality. If you enable this property a pixelated overlay is placed over the background image reducing that effect. You can also choose to show the overlay when the slide width exceeds a certain value. Leave it blank if you wish it to be always visible.
This panel allows you to enable the Ken Burns Effect (open Wikipedia) on your background image (if you select a transparent or solid color background you won't see this settings). It applies a smooth and continuous effect (pan, zoom, rotation) to your image creating a very impactful experience.
On the bottom right of the editing page you can manage the elements of the current selected slide.
By clicking the Add Element button you will be prompted to select the element type, as show in the picture below.
After adding some elements they are shown in the main timeline as show below.
The icon number 1 allows you to sort the element as you prefer by dragging them to another position. The element positions reflect how thei are positioned in the slide. This means that an element with a higher position will be placed over the ones with a lower position.
By clicking the icon number 2 you can show/hide an element on screen, while icon numer 3 allow you to lock it, avoiding it to be dragged ed edited.
Icons number 4, 5 and 6 can be used to duplicate an element, copy an element to another slide (a popup will ask you to select the destination slide) and to delete it.
By dragging the orange pins on the sides of the yellow bar you can control when the element will be shown and how long it will stay on the scene before being hided. You can see the details (in seconds) in the Element panel described below. These times are base on the slide duration. If, for example, the current slider has a 10 second duration and your yellow bar has a full width, the element will be shown as soon as the slide appears and it will stay on the scene for the entire slide duration. If instead you drag the left pin to the middle, the element will appear after 5 seconds (50% of the slide duration).
As show in the above picture, below the main timeline you can find some panels that allow you to control the element settings. Some of them are common to all types of elements, while others are specific for each type.
Common Panels: Specific Panels:
Inside this panel you can find some basic settings. The element name is used only inside the element list and it could be useful to identify them. Start, End and Duration are the linked to the yellow bar and show you when the element comes into the scene and when it leaves it. In the second line you can find the element position inside the slide. You can change those values manually or dragging the element in the editor. We've also provided you with two useful buttons to quickly center the element horizontally and vertically. The Class Name input allows you to specify a custom class name to be added to the element.
Each element has its container that is a standard div element with its own settings.
The extension already comes with a lot of ready-to-use animations that allows you to create stunning sliders.
On top of the panel you can see the loop effects (position 1) that can be applied to elements and they are always in play. The Speed parameter specify the effect velocity.
Below you can find a new timeline where you can specify how the element appers into the scene, what happens during the slide execution and how it leaves the slide. As you can see, when you add a new element to a slide, three default effects are already there. The first one is the enter effect that can be used to make the element enter the scene with an animation. For this effect you can only change its duration by dragging the right pin.
The last one is the opposite, i.e. the exit effect. Its duration can be changed dragging the left pin.
In the middle you can place as many effects as you wish. This kind of effects allows the element to move, pulse, rotate, flash, etc. (try changing effect and see the result inside the preview box) during the slide execution. For these effects you can specify the start and end points.
An example
To better understand how these effects work, let's consider a simple example. Suppose that the current slide has a 20 seconds duration and that the current element enters after 5 seconds and exits 10 seconds later (5 seconds before the slide exits). Now on the top right of the effect timeline (poistion 4) you'll see 10 seconds. This means that the element time on screen is 10 seconds. So, for example, if we drag the right pin of the enter effect to the middle of the timeline the enter effects duration is set to 5 seconds (half the element time on screen). And the same for the other effects.
Moving elements from a point to another
The slider allows you to move elements from a point to another. If you open the effects select of one of the effects in the middle, you can see that some of them starts with the move keyword. If you select one of them a new button containing a terget icon will be show (position 1) as you can see in the picture below.
If you click on that button, a new div containing the text "MOVE" will be placed over you element. Move it to your desired end position and the element will be move along that path.
Step 1 - before clicking on the target button
Step 2 - by clicking on the target button a new div is shown
Step 3 - drag the div to the end position
You can repeat this process as many times as you want, chaining more than one move animations.
Text Splitting
If you are editing the animations of a text element the option at position 3 is shown. It allows you to specify if all the timeline effects have to be applied to the entire text (the default option), to letters, words or lines. In the last three cases the text is splitted into letters, words or lines and the animations are applied to each text part with a delay between them. This delay can be set filling in the field at position 2 with a value between 0 and 100 (the greater the value the longer the delay).
OVERLAPPING EFFECTS & PERFORMANCES
You are free to overlap animations to create even more complex effects. But be awere that introducing many effects can be stress the cpu and some old pc could perform them slowly and jerky. Please also note that if the text is splitted into parts the overlapped effects couldn't work as expected.
We've developed a parallax engine that allows elements to move at different speeds according to the mouse movements. To enable this feature you have only to set a parallax level to each element you wish to be moved (and of course the main parallax setting has to be on yes). Since the greater the value you specify the stronger is the element movement, to create a realistic effect you should set smaller values to far elements and greater values to the near ones.
The last panel allows you to add interactivity to each element. You can set a specific effect to be executed on mouse over and its durations. Going with the mouse pointer over the black box on the left you can then see a preview of the effect.
You can also specify what has to be done when the user clicks on the element, choosing one of the following options:
This panel allows you to set the text element properties. Here you can find a description of the settings displayed in this panel:
This panel allows you to set the image element properties. Here you can find a description of the settings displayed in this panel:
This panel allows you to set the font icon element properties. Here you can find a description of the settings displayed in this panel:
This panel allows you to set the Youtube element properties. Here you can find a description of the settings displayed in this panel:
This panel allows you to set the Vimeo element properties. Here you can find a description of the settings displayed in this panel:
This panel allows you to set the Html5 video element properties. Here you can find a description of the settings displayed in this panel:
An empty element consists only in the container element. To change its dimensions you can both manually set width and height or resize it with the mouse. To style the element please refer to the container panel.
A custom element allows you to add your own html, css ans javascript code. Please note that since they are placed on the scene and shown dynamically we can't grant that every javascript code will work correctly.
The Working Area allows you to have a look at where the elements of the current slide are placed and to move and resize them using the mouse or the keyboard arrows.
When you add a new element to the current slide, it has shown in working area and can be dragged with the mouse. Some elements (images, empty, etc.) can also be resized by dragging the white handle icon placed on the bottom right of the element.
To allow you to easily align elements with each other we've introduced the grid (enable it in position 1) feature that shows horizontal and vertical lines over the working area. The line distance and color can be set by changing the values in position 2 and 3, while enabling the Snap option (position 4) the grid almost seems magnetic and when you move an element it will be aligned with the nearest line.
The options in position 5 and 6 show/hide arrows and bullets in the working area. The Move with keyboard option allows you to move the current selected element using the keyboard arrows. The two buttons PLAY SLIDE and PLAY ALL open a popup preview of the current slide or of the entire slider.
On the top of the page you can find the Project Settings button. If you click on it some panel will be show. Each one of them allows you to control a specific group of settings.
Here is a brief description of what they deal with:
With this panel you can manage the Google Fonts used by your sliders. To add a new one go to the Google Fonts website, choose the font to add, click on the "quick use icon" (the second one), choose the styles you prefer and then copy&paste the entire link inclusion (for example: <link href='http://fonts.googleapis.com/css?family=Open+Sans:700italic,400,700' rel='stylesheet' type='text/css'>) and click on the Add button.
Now in the font list of your Text Element Panels you will see the added fonts. To delete a font just click on the trash icon on the left.
In this panel you can set the width and height of the slider and choose how its components have to be resized. The slider has composed by three main divs: the main container and the background and content of each slide. For each one of these three components you can choose how they are resized according to the browser window size. You can choose between a fixed size (this means that the component won't be resized anyhow) or responsive (you can also set a minimum and maximum width). The preview box on the left shows you how they work.
If you choose the full width option, width and height of the slider will be the same as the browser window dimensions. As you can see, choosing this option, some new parameters will be shown. The Subtract from Width and Subtract from Height parameters allow you to subtract some pixels from the slider dimensions. This could be useful if your website has fixed elements i.e. header, footer, sidebar, etc.. You can also specify if the slide background has to be resized covering the whole available space or contained maintaining its original ratio.
NOTE: in the main editor, the slide content is always fixed. If you need to see a real preview you can click on the PLAY SLIDE or PLAY ALL buttons.
Here you can specify some general settings:
This panel allows you to set some specific settings for mobile and tablet devices. You can enable or disable the entire slide or some of its elements and enable/disable the touch feature (and you can also specify a pixel threshold and a maximum time for swipe detection).
With the Page Scroll on Swipe property you can specify if and how the page scrolls when you do a swipe over the slider. You can also choose to detect or not swipes made by the mouse.
You can change the main background of the slider choosing between a solid color, an image selected from a file manager or from an url, or a transparent background. If you choose an images you can then specify how it has to be resized and repeated. This could be very useful for repeatable textures.
This panel allows you to change the aspect of the navigation arrows. The first property is the type of arrows (images, font icons - for fully responsiveness, or no arrows). If you want to use font icons, you can then choose one of the ready-to-use icons (the extension uses FontAwesome 4) and set their size, color, styles and the hover effect time. A realtime preview allows you to see the result. If the Auto Responsive property is set to yes the arrows are fully responsive and automatically scaled according to the slider dimensions, while if it's set to no they will have always the size you select.
If you choose image arrows, you are then prompted to select the left and right arrow images to load. Also for this type of arrows you can set the style.
In both cases the arrows have a container that can be skinned changing its background color (and how it changes on mouse over), padding, border and shadow. If you leave these setting blank your arrows will be shown without any background.
The navigation arrows can be places in different positions. You can specify where they have to be shown by selecting one of the predefined values and the border distance. While in the small preview window you can see how the arrows will look, inside the main editor you can see where they will be positioned.
If the Always Visible property is set to yes, the arrows are always visible, while if it's set to no they are visible only when the mouse goes over the slider. In this case you can specify the duration of the fade effect.
The bullets can be change in the same way as arrows. You can choose between font icons, images or to not show bullets. You can choose a ready-to-use font icon, set its size and specify if it has to be responsive. In such a case, you can also choose a minimum and maximum size. Some style settings allows you to give your preferred style to the bullets, choose the hover color and effect time and shadows.
The position select allows you to set the bullets position inside the slider and the distance between them. As for the arrows, a realtime preview of the bullets aspect will be shown inside the small window, while you can see their position insider the main editor below.
This panel allows you to change the aspect of the preload. You can choose your preferred font and its size, spacing, weight, color and styles of the percentage text, you can add a shadow to that text and choose a background color. You can then specify the position of the progress bar and the percentage text. If you want you can also add an image and specify its position.