Slider Tool

To add a slider, select the Slider tool from the toolbar or press S, then click anywhere in the page or canvas or click and drag until reaches the perfect size.

Slider options

There are several options and properties in the Inspector panel. This includes options for: positioning, changing the width and height, stretch to width, opacity, adjusting rotation and corner radius, adding or removing slider image/video, enabling or disabling autoplay options, play around with slider arrow style and/or dots.

Refer to the image above to identify slider properties panels.

1. Width and height
2. Stretch To Width
3. Opacity
4. Rotation, corner radius
5. Slides
6. Autoplay
7. Arrows
8. Dots

Learn more about how to use slider properties below.

Width and height

Those properties allow changing the size of the slider, once hovering on the letter W (width) or H (height) should appear a left-right arrow which allows dragging to the desired size, click and drag, and release after the perfect size is reached.

Alternatively pressing on the number close to W or H letters will allow entering the desired size in px (pixel).

Once the lock icon is pressed it will change to a locked one, this means that when the slider will change size it will change proportionally.

Stretch to Width

Clicking this property will set the slider to 100% which is equal to the width of the browser window.

Opacity

Once dragging or typing another value, slider transparency will change accordingly, it could be from 0 to 100.

Rotation, corner radius

Once hovering on the angle icon should appear a left-right arrow that allows dragging to the desired radius, click and drag, and release after the ideal angle was reached.

Right drag - slider will rotate in the right (positive value) direction, left drag - it will rotate to the left (negative value).

Alternatively pressing on the number will allow typing the exact degree amount.

The corner radius works in the same way as the angle, but once the action performs it will change the radius.

A  corner radius with 0 (zero) px will make the slider have sharp corners.

It could be combined with rotation.

Pressing the  icon that indicates corners on the right side just close to the corner radius will allow changing the radius per corner.

The order is:

• Top right corner

• Bottom right corner

• Bottom left corner

• Top left corner

Slides

This property allows changing default slider images and/or adding images or videos or removing slides.

For adding a new slide press on the plus icon.

For hiding slide image/video press on the eye icon, for removing press on the minus icon.

For changing the slide image, press on the slide thumbnail and after pressing on the black circle with the arrow and upload the desired image from the device or press on the Unsplash button to choose a free-to-use image.

Clicking on the Video title button will switch to the video tab.

By default there will be a Youtube video sample, to change it insert copied already Youtube link in the designated field and the video will change instantly.

Enable or disable any additional Youtube video options:

• Autoplay - video will start playing instantly without the need to press the play button
• 
Mute - video will play without any audio

• Loop - once the video ends it will start from the beginning, for an unlimited time

Video tab also allows choosing the desired image for the video preview, it could be any image from the device or any Unsplash – free-to-use image.

Drag and drop to the gray designated space or press Choose File for uploading the right image.

Once the preview image was uploaded, there will appear a hidden menu that contains additional properties such as Icon and Overlay color.

Choose any icon instead of the default play icon, play with icon color and/or opacity or icon size.

Overlay color will add a layer of additional color, this usually works perfectly when a video needs to be faded.

Reduce opacity to obtain a perfect overlay.

Clicking on the Youtube field will appear a drop-down menu with options to switch Youtube to Own Video.

After choosing Own Video select a video file from the device.

Press on Choose File and upload the desired video, it allows uploading a video from the device up to 10MB, .mp4 or .mov format.

Currently for paid accounts only.

Enable or disable any video options, disabling Controls will show video without any clickable options, like an animated image, it fits perfectly when the video is supposed to be as a background.

Preview works in the same way as for Youtube videos.

Autoplay

Toggle on Autoplay for enabling an infinite loop that swaps slides after a predefined amount of time, by default it’s 3 seconds.

Stop on user interaction - this means that if a user will interact (on click) on the slider with the arrows or dots it will stop playing, it could be switched off.

The slider will autoplay again after another session or refresh the page.

Arrows

Arrows it’s the elements that allow swapping slides in the right direction for the next ones or in the left direction to access previous slides.

There are two types of arrows position, Near the Image and In the Image.

In the Image, the default arrows color will be #FFFFFF (White)

Play around with types of states, change arrow icon style to something more unique, set different arrow size or adjust the distance from the image.

Dots

Dots it’s the elements that allow navigating through slides plus showing the total quantity of the slides and an additional Active state showing exactly the selected slide.

Default dots its positioning Near the Image, but it could be changed to In the Image mode.

In the Image enable an additional option called Background Color, it’s the color of the element under the dots.

Note: Arrows and dots could be deactivated (switched off)

But don’t forget to switch the Autoplay option to active and preferably turn off the toggle Stop on user interaction, but do not limit yourself, play around with different options until happy.

Check the result on the preview mode, press on the top right eye icon for it.