Slider Element

Slider Pro element allows you to create a beautiful image slide which can be both manual or automatic. This feature makes a site dynamic. It will keep your viewer holding in your site as your viewer would be eager to see what comes next.

Most of the websites use this element to showcase they’re gallery image or pictures of room, lobby etc. If you want you can use it simply by following these steps.

• Select Add New Element from column to open elements list modal
• From there select Slider Pro element

A popup will appear showing three tabs - General, Styles, & Advanced. These tabs will help you to modify the slider in your own way. You can add new fields, custom slider height, provide text in need, set to automatic slider with timer etc. The details are given below.

General Tab

The general tab holds the basic setting of slider. You’ll find the following editing options here.

Fields Group - Fields group holds various slider fields.

One field is given in the fields group so that you can know how to add other images to it and set it your way.

You can duplicate an existed field using this square icon.

You can delete an unnecessary field by clicking this basket icon. You can add a new field under existing field using this red + plus button.

You’ll find a few settings of each field inside the fields group. These settings are described below.

• Title - Title field will help you to add set a title for individual image. It’s optional. You can use it or just avoid it.
• Description - You can provide a description of the image if you want. It will appear above that image.
• Background Image - Background image field will set an image in the background for image slider. Right now you can add images only. Soon video addition will be available.
• Button Text - A button option is available in every image field. You can add a text if you want to provide a button. If you remove the button text it will remove the button too. So, don’t worry if you don’t want any button over your image. Just delete the text and you’re done.
• Link - The link field is open for the button option. If you want to insert any other page via button you can link it up through this field.
• Thumbnail - Thumbnail image is the smaller image set that shows every image embedded in the slideshow. Thumbnail is optional. You can either provide the same image or different image or just no thumbnail image at all.
• Alignment -This field will help you to set the contents over the image in different positions. There are three vertical positions available - top (set the contents on top position above the image), middle (set the contents on middle position above the image), and bottom (set the contents on bottom position above the image). Moreover, there is text alignment available providing three options - left, center and right.
• Display - You can control if your viewer will see a few things or not. Like- title, content and button. You can give title to every slide you want for your record and control if your viewer will see it or not.
• Overlay & Animation - Overlay option will allow you to set a color over the sliding image. This is optional. You can give a color controlling the opacity or just skip it. And animation will help you to set an animation for the sliding image. This of course beats the flat classic sliding version.
• Height - The height option will allow you to set the height of the slider. You can keep the default height or just adjust to your wish. Just enable the ‘custom height’ option and then adjust the slider in pixel.
• Navigation - Navigation option allows you to control all the setting related to navigation arrow and thumbnail including their position, width etc.
• Image Mode - Image mode will allow you to set a fixed view of the image slider. There are a few options (contain, cover, fill, scale down, unset and none) available in the dropdown option. You can choose any of them.
• Behaviour - This field holds a few enabling options. Like- pause on hover, autoplay etc. The autoplay speed counts in milisecond. So make sure you provide the time more than 1000. Or your viewer’s eyes would keep on spinning along with the image sliding. Enabling the infinite loop will allow the images to slide continuously. And disabling will stop the sliding in its last image.

Styles Tab

Styles tab will help you style up the slider in your own way. Here you’ll find five editing fields : Slide, Title, Description, Button and Navigation. The editing options are provided according to each field.

• Padding - Padding of number will set a fix amount of space between content and image. You can provide a fixed amount padding or you can avoid it. And there are other padding options available for button and background setting.
• Color - A few color picker is provided for different operations. You’ll find color setting options for text field, background, border color, button option, navigation etc.
• Font - Font option will help you to change the font of text. There are thousands of google font provided in a dropdown option. You can go for any of them. You can change the font of label and text field.
• Size - You can control the size of text and digits of both label and input field. Just scroll the slider and set the size. Or just provide a digit value for it in the value box situated right next to the slider.
• Line Height - Line height option will help you to set the height of each and every line. This will insert space between the lines.
• Letter Spacing -Letter spacing option will help you to set space between each and every letter. This will help you to avoid the collision between the letters.
• Text Shadow - Text shadow effect will help you to add a shadow under the text to give a 3D look. Or you can blur the effect to show your text clearly.
• Margin - There are a couple of margin options available in case you need to insert some space in accordance with the page. Or you can leave it as it is.
• Border Type - Border type will allow you to choose what type of border you want for button or images of the slider. There are few options available - solid, double, dotted and dashed.
• Border Radius - There is a border radius available. You can control the radius of border by it. If you want a round shaped border then set the value of border radius more than 50.
• Box Shadow - Box shadow option will allow you to set a 3D effect by applying a shadow effect under the button. It will attract the viewer more.
• Custom Arrow - If you enable arrows you can customize them. You can add color to them and adjust the size.
• Custom Dot - If you enable dots you can customize them. You can add color to them, control the width, provide space between each dot and control the margin of dot.

Advanced Tab

The advanced tab has the advanced level of settings. You can edit then if you find it necessary or just leave it they way it is. Here you’ll find six fields : Element styles, Background, Border & Box Shadow, Animation, Custom CSS, and Identifier. These fields are described below in details.

• Element style - Here you’ll find the margin, padding and z-index option. Margin will help you to add space in accordance with page. Padding will help you to add space in accordance with the column. Z-index will work if you have 2 elements overlapping and you want to display the below element on top. Increment the z-index value and the below element will appear on top.
• Background - Background field will allow you to set a background in the column. You can set an image, a solid color or gradient effect of multiple color.
• Border & Box Shadow - You can give a nice designed border and box shadow to your column. Set a border type, border radius if you want a bit of round shape in the corner. And box shadow effect will give your column a floating effect. You can set color to it, spread the color or add blur it.
• Animation - Animation field will allow you to add a transition effect to the element. Select the entrance animation from the given effects, set the delay time and enable the repeat option (this is optional).
• Custom CSS - This field is available only on PRO version If you are a developer then you can add CSS code of your own to the site by using this operation. Just write the code and click the apply button. You’re CSS code will be added to the content and it won't affect the existing css effect..
• Identifier - This field holds the CSS id of every specific content. This will help you to edit the CSS section if you want to bring any changes in css style.