Avartan Slider WordPress Plugin Help Document

Introduction

We appreciate your decision of using our Avartan Slider Plugin. Thanks you for using an Avartan Slider plugin for WordPress.

This document is written very carefully by keeping the mindset that it should be easy understand for Beginner to Advance user or developers. We have divided this document in 3 main sections.

1) Getting Started : This section will very help full for introduction and understand how the plugin works.
2) Detailed Document : This section explains everything about Avartan Slider plugin with every setting.
3) Other : This section provides information about miscellaneous items like plugin features, support etc.

If you have any query that is beyond the scope of document, please feel free to contact us at support@solwininfotech.com

Avartan Responsive Element WordPress Slider Plugin
  • Created On: 09th August 2015
  • Last Updated: 1st October 2016
  • Created By: Solwin Team
  • Email: info@solwininfotech.com
We offer plugin customization. Get in touch for a quote.
Quick Search Tip: Access your browser search with keyboard shortcut "Crtl+F" (Windows) or "CD+F" (OSX) for instant results.

Installation

1. Installation Via WordPress Admin area

  1. Step 1. Log into your WordPress admin area.
  2. Step 2. Click on the left plugin menu.
  3. Step 3. Now at the top you can see the Add New button, click the button.
  4. Step 4. Again at the top you can see/view Upload Plugin button, click the button.
  5. Step 5. Now upload the plugin zip file (avartan-slider-lite.zip) that you have downloaded from wordpress.org. After upload, install the zip and click on "Activate Plugin".
Plugin Installation
Plugin Upload
Upload Plugin
Install Plugin


2. Installation Via FTP

  1. Step 1. Download Avartan slider plugin zip file (avartan-slider-lite.zip) from wordpress plugin directory
  2. Step 2. Extract Zip file. It will create "avartan-slider-lite" folder with all plugin files & folder inside it. (Remember the extracted folder path)
  3. Step 3. Using your FTP program, upload the non-zipped plugin folder into the "/wp-content/plugins/" folder on your server.
  4. Step 4. Go to Dashboard » Plugins » Installed Plugins and find Avartan Slider Lite plugin from the list.
  5. Step 5. Click on Activate to the active Avartan Slider Lite plugin.

Create a New Slider

  1. Step 1. Go to Dashboard » Avartan Slider
  2. Step 2. Click on "Create New Slider" Button.
  3. Create new slider
  4. Step 3. Add the slider name. Shortcode of the slider will be generated automatically (see image below).
  5. Step 4. Click on 'Save Settings' button at bottom of page. And Enjoy the Slider!
  6. Save Settings

Slider Settings

Slider Settings

1. Slider Name

Enter slider name.

2. Alias

An individual slider name. This name will be embedded in slider shortcode, so do not use special characters.

3. Shortcode

This is the Shortcode that will be embedded into your pages, widgets, etc.

4. PHP Function

This is the PHP function used in page template or in core files.

General

General Settings


1. Layout

  • Full Width: The slider will always stretch across the entire width of the screen.
  • Fixed: The slider will take width and height that are assigned to slider.

2. Force full width PRO!

If yes then it will strech to slider up to window width otherwise not.

3. Width

Set width of slider grids in pixels.

4. Height

Set height of slider grids in pixels.

5. Mobile Custom Size PRO!

If No, then Default Layer Grid Size is the basic of Linear Responsive calculations.

6. Automatic Slide

If yes slider slides are automatically looped.

7. Random Slide PRO!

If yes, then the slide will be visible randomly.

8. Background Color

  • Transparent: Make the slider background transparent.
  • Select Color: Select background color of your choice for slider.
  • Opacity: Select Opacity of background color from 0 to 100 percentage (%).

9. Shadow

Set shadow of slider from shadow library.

10. Pause on Hover

Pause the current slide when hovered.

Loader

Loader

1. Enable PRO!

Enable/Disable loader on slider.

2. Select Loader

Select your favorite loader.

3. Upload Loader Image PRO!

Upload your loader image and enjoy it.

Timer Bar : This feature is available only pro version Click Here to see in details.
Mobile Visibility : This feature is available only pro version Click Here to see in details.
Callbacks : This feature is available only pro version Click Here to see in details.

Slide Settings

Slide General Settings

1. Slide Name PRO!

An update Slide name which you like. Default: Slide

2. Background Color

  • Select 'Transparent' option If Do not want background color.
  • Click On 'Select Color' button and select color from color picker with opacity.

3. Background Image

  • Select 'None' if Don't want to use a background image.
  • Click On 'Select Image' button and select image for background of slide.

4. Background Position

Possible values of Background Position are center top, center right, center bottom, center center, left top, left center, left bottom, right top, right center, right bottom, percentage. Default : center center.

5. Background Repeat

Possible values of Background Repeat are no-repeat, repeat, repeat-x and repeat-y. Default : no-repeat.

6. Background Size

Possible values of Background Size are cover, contain, percentage, normal. Default: cover.

7. Color Overlay PRO!

Click On 'Select Color' button and select color from color picker with opacity of slide background overlay. Default: transparent.

8. Pattern Overlay PRO!

Select a pattern from giving pattern to set overlay on slide background. Default: transparent.

9. In Animation

This animation will be applied when slide In.

10. Out Animation

This animation will be applied when slide Out.

11. Time

The time that the slide will remain on the screen. Default: 3000ms

12. Ease In

The time that the slide will take to get in. Default: 300ms

13. Ease Out

The time that the slide will take to get out. Default: 300ms

14. Custom Css

Apply CSS to the slide.


Slide Operations: PRO!

Slide layer option
  • Slide Visibility : Publish/Unpublish any slide, click on the Eye icon beside Slide name.
  • Delete Slide : To delete a single slide from the slider by one click.
  • Add New Slide : To add a new slide in the slider.
  • Save Settings : Save slide settings.
  • Duplicate Slide : Duplicate slide which save your valuable time to make new slide. PRO!
  • Export Slide : To export slide, click on Export Slide button, that will save all your animation and transition. PRO!
  • Copy & Move Slide : PRO!
  • Element Timing Block : To see all Element Time Line. You can change the delay, ease In/Out, z-index of all elements at the same time from the Element timing block.
  • Preview Slide : See Preview of individual slide with animation, timing and effect.
    Element Settings
  • Delete Element : Click On any element from slide and then click on Delete Icon to delete the element.
  • Duplicate Element : Click On any element from slide and then click on Duplicate Icon to duplicate the element.
  • Delete all Elements : To delete all elements from slide by one click.

Element Settings

Element Option

There are 7 types of Elements available. Text/HTML, Image, Video available in Avartan Slider Lite version, Shortcode, Button, Icon and Shape available in Avartan Slider Pro version.
Each element has different options.

Text/HTML Element

1. General Parameters :

Text General Settings
  • Text : Write. You can also add html here.
  • Left : Left distance in px from a start width of the element. It will be automatically set when you drag and drop any element in the slide.
  • Top : Top distance in px from a start height of the element. It will be automatically set when you drag and drop any element in the slide.
  • Z - index : Enter the top of the element. It will be automatically set when you drag and drop any element in the slide. Element with higher z-index value will overlap element with lower z-index.


2. Animation Parameters :

Animation Settings
  • Delay : How long will the element wait before the entrance. Default: 0ms
  • Time : How long will the element be displayed during the slide execution. Write "all" to set the entire time. Default: all
  • In Animation : The in animation of the element.
  • Out Animation : The out animation of the element.
  • Ease In : How long will the in animation take. Default: 300ms
  • Ease Out : How long will the out animation take. Default: 300ms


3. Advance Parameters :

Advance Settings
  • ID : Add ID attribute to element.
  • Classes : Add Class attribute to element.
  • Title : Add Title attribute to element.
  • Rel : Add Rel attribute to element.
  • Link : Open the link (e.g.: http://www.google.com) on click. Leave it empty if you don't want it.
  • Custom CSS : Style the element.

Image Element

Image Settings
  • Modify Image : Change the image source.
  • Image Alt : Add image alt text. It will be better for seo.
  • Scale Proportional : An element with Scale Proportional will be scaled with respect to slider width and height.

Video Element

Avartan slider provides 3 types of video support.

  1. 1. Youtube
  2. 2. Vimeo
  3. 3. HTML5

1. Youtube Video

Youtube Video

2. Vimeo Video

Vimeo Video

3. HTML5 Video

HTML5 Video
  • Full Width : Check the full width checkbox to get full width, video which will neglect width and height which you have entered. If full width is not checked, then the video will take the width and height from textbox.

Shortcode Element PRO!

Shortcode General Settings
  • Shortcode : Enter any wordpress valid shortcode in textbox then click on the search button and then shortcode will be display on the slide.

Button Element PRO!

Button General Settings
  • Button Style : Select your button style from given option.
  • Button Text : Enter button label or text.
  • Button Settings : Set button idle settings.
    • Label Color : Select Button label or text color by color picker with opacity.
    • Background Color : Select Button background color by color picker with opacity.
    • Border : Set border to Button with various options.
    • Box Shadow Color : Select box shadow color. This option will be available for 3D Button style only.
  • Button Hover Settings : Set all settings of button for hover event.

Icon Element PRO!

Icon Settings
  • Icon : Select any font awesome icon from giving icon.
  • Style Options : Add style to elements like, font size, font weight, border, color, background, padding etc.
  • Left : Left distance in px from a start width of the element. It will be automatically set when you drag and drop any element in the slide.
  • Top : Top distance in px from start height of element. It will be automatically set when you drag and drop any element in the slide.
  • Z - index : Enter the top of the element. It will be automatically set when you drag and drop any element in the slide. Element with higher z-index value will overlap element with lower z-index.

Shape Element PRO!

Shape Settings
  • Style Options : Add style to elements like, width, height, border, background Color, padding etc.
  • Left : Left distance in px from a start width of the element. It will be automatically set when you drag and drop any element in the slide.
  • Top : Top distance in px from start height of element. It will be automatically set when you drag and drop any element in the slide.
  • Z - index : Enter the top of the element. It will be automatically set when you drag and drop any element in the slide. Element with higher z-index value will overlap element with lower z-index.

Add Slider

Add Avartan Slider To Post/Page


1. Add via shortcode

  1. Step 1. Go to Dashboard » Pages » Add New Or Dashboard » Posts » Add New
  2. Step 2: Click on the Add Avartan Slider button as shown in below image.
Add Slider To Page

2. Add via PHP function

Paste
if(function_exists("avartanslider")) avartanslider("alias");
in your php template or in php file where you want to use.



Add Avartan Slider To Widget

  1. Step 1. Go to Dashboard » Appearance » Widgets
  2. Step 2: Drag the "Avartan Slider Widget" to the desired sidebar.
Add Avartan Slider To Widget

Import Export PRO!

NOTE : Import / Export Slider features available only in PRO Version Click Here to see in details.

Other




Plugin Features

Truly Responsive slider

This slider is an effective for Responsive WordPress themes, because it would automatically adjust to its container. This would work out of box, as there is no any need of js or css in your theme. Slider takes care of handling, display on all possible devices by Fully image scaling and element adjustment.

Truly Responsive slider

Touch & Swipe Navigation

Avartan slider is providing touch and swipe navigation, which makes easy your navigation function and leads to Smooth finger navigation by touch on the surface of your mobile.
Experience the same navigation using mouse dragging on desktop device.

Touch & Swipe Navigation

Drag and Drop Builder

  • Avartan Slider is supporting an impressive number of options, even beginners will manage to create beautiful sliders.
  • The user can drag and drop each and every element and create a beautiful slider in minutes.
  • Developing skill is not required to build slider.
Drag and Drop Builder

Slides Sorting PRO!

Sliders are commonly used on the front page of business or portfolio websites.
All slides are important to show. But It is much important to show slides in arrangement of your choice.
To fulfill this requirement, Avartan Slider allows you to easily rearrange your slides by dragging and dropping it.

Slide Sorting

Copy & Move Slide PRO!

  • Enjoy to copy the same slide from current Slider to another Slider by using the Copy Slide Feature.
  • If you want to remove the same slide from current Slider and add that slide in another Slider then use Move Slide Mechanism.
Copy & Move Slide

Active/Inactive Slide PRO!

Now you have choice for Active or Inactive individual slide as like as WordPress Post.
If "Inactive", the slide will still exist in the backend, but will be excluded when the slider is shown on the front end of your site.

Active/Inactive Slide

Slide Background Overlay PRO!

  • Amazing Color Overlay for Slide using new bootstrap colorpicker with opacity.
  • Set Pattern Overlay on slide background from 35+ pattern collection.
Slide Background Overlay

Preview Slide

All slides are different in a slider. Why not to preview slide before publish?
You can preview each and every slide at the time of creation and modify it and save valuable time.
Now, users can preview the slide, according slider layout like fixed-width or full-width.

Slide Preview

Duplicate Element, Slide and Slider PRO!


Time is money. User can save time by using the duplicate feature.
  • Avartan slider provides the feature to duplicate each and every element.
  • User can a create new slider within seconds by duplicating another slider. Slider also allowed to duplicate slide.
Duplicate Element, Slide and Slider

Animation and Transition


Make your slider with effective animation and transition. Avartan slider is providing you to create more beautiful slide by using delay, ease in/out timing.
  • 6+ Interactive Slide Transitions PRO!
  • 12+ Animation Effects for elements PRO!
Animation and Transition

Amazing Layers PRO!

  • One Text Element plays multiple roles like only text or custom html.
  • User can add a single single image in the slide by Image Element.
  • Add YouTube, Vimeo or Self Hosted HTML5 video by Video Element.
  • Avartan supports all plugin Shortcodes by Shortcode Element.
  • Quick make Button by Button Element.
Text-HTML-Image-Video-Shortcode

Video Support

  • Avartan supports Youtube, Vimeo and Self Hosted HTML5 Videos.
  • Easily add YouTube or vimeo video by url or video id.
  • Get the video information to display on the video.
  • HTML5 video support mp4, webm and ogv type video.
Youtube-Vimeo-HTML5

Video Settings

  • Full width video support.
  • Set/Remove Preview image for YouTube or Vimeo video.
  • You can add poster image for HTML5 video.
  • More video settings like Autoplay, Next slide on video end, Force Rewind, Mute, Loop Video, etc.PRO!
Video Settings

Amazing Navigation Controls

  • Enable/Disable Navigation controls
  • 25+ Customizable Next/Previous Arrows PRO!
Amazing Navigation Controls

Collection of Navigation Bullets

  • Enable/Disable Navigation bullets
  • 20+ Customizable Navigation bullets PRO!
  • 5+ way to set navigation position PRO!
Collection of Navigation Bullets

Huge Collection of Loader

  • 15+ Default Useful Loaders PRO!
  • Upload your custom loader PRO!
Huge Collection of Loader

One Click Import & Export PRO!

No worries to transfer slider from one site to another site.
Powerful Avartan slider provides feature to export and import slider in one click.

One Click Import & Export

SEO Friendly

  • Alt and Title attributes available for all element images and also for background image.
  • All Heading tags (h1, h2, h3, h4, h5, h6) and paragraph (p) can be used in content element to make your content SEO friendly.
  • Rel and Title attributes available for links.
SEO Friendly

Add Favorite Slider into Post/Page

Easily add a favorite slider by single click on Add Avartan slider button into your post or page.

Add Favorite Slider into Post/Page

Avartan Slider Widget

Avartan Slider Widget to display your slider in any widget area. Just select your favorite slider from the list and then enjoy it.

Avartan Slider Widget

Translation

Avartan Slider plugin is language compatible, thus can be translated into multiple languages. You can use POEdit plugin for translation.

  1. Step 1. Install Poedit tool and open it

  2. Step 2. Open .POT file from /wp-content/plugins/avartan-slider-lite/languages/ that you want to translate

    Open .pot file
  3. Step 3. Now, click on "Save"

  4. Step 4. Then one popup will be appear and then enter your Language code ( Ex :- "ca_CA" for English (Canada)) in language option

    Translation property
  5. Step 5. Then select source path tab and you have to modify this path to full path of your plugin that you want to translate.

    Select path
  6. Step 6. Then press ok button.

  7. Step 7. Then give file name like this avartanslider-ca_CA.po for English (Canada) language.

  8. Step 8. Then save file inside language folder in plugin that you want to translate and all strings are appear in your poedit editor

    POT file
  9. Step 9. Select your string that you want to translate and in bottom side there are two options one is Source Text and another one is Translation

    Translate string
  10. Step 10. Source Text keep as it is and in Translation section enter your translated string of selected string that you want to translate and then save it.

  11. Step 11. Repeat step 10 untill your all strings to be translate.

  12. Step 12. Now you will get two separate files – a .po file and a .mo file.

    Note : When you save the files, you must name them according to your language code. Find a list of language codes at WordPress in your Language. For example, the language code for English (Canada) is ca_CA, so you would save the translated files as ca_CA.po and ca_CA.mo.

    PO MO file
  13. Step 13. Then go to wp-config.php file then enter the below code.
    define('WPLANG', 'Your language code'); for Ex.(ca_CA for English (Canada)) then save it.

  14. Step 14. Select language from admin side, Go to Dashboard » Settings » General in that check Site Language options.

    Select language
  15. Step 15. Check language prefix in front end, view HTML.

    Language prefix
For more about translating WordPress themes please visit the following link : https://developer.wordpress.org/themes/functionality/localization/

FAQ

1. Is plugin support shortcode feature as I can display particular slider in any widget area?

Yes, Avartan Slider provides shortcode feature as well as PHP function feature. You can write it in content area and you can see your favorite slider on your website.


2. Can I change my navigation buttons?

Yes, there is inbuilt library of navigation buttons so you can choose navigation button of your choice from Navigation button Library from admin side.


3. I want to change loader, How it possible?

Avaratan Slider Lite version providing 6 default loaders under “Loader” Panel. You can upload your loaders with pro version of plugin.


4. For which purposes I can use Avartan Slider?

Avartan Slider is a multipurpose responsive slider as you can use it for any wordpress website to display your message to website visitor using content slider, animated slider, video slider, form slider, catalog or combination of all.


5. Can I duplicate my slider elements and sliders?

You can only duplicate your slider elements. If you want to duplicate your whole slider then you have to purchase pro version of slider.


6. Can I add “Call to action” functionality with slider elements?

Yes, you can reach with this functionality via adding a links on slider elements.


7. What is the best point with Avartan Slider?

Avartan Slider provides an user friendly admin panel, wide variety of default options that required for all types of sliders. So, beginner can start working with sliders. Avartan Slider also provides third party video integrations like Youtube, Vimeo and HTML5 video.


8. Is there any settings that I will miss when move from free to PRO version of slider?

No, you no need to worry about as you will not miss any settings which is available in free version. All free version slider settings are available in PRO version also.

Upgrade Avartan Slider Lite to Pro version

NOTE : If you are going from Avartan Slider Lite to Pro version then your all changes of Lite version will be lost. You will get advanced features in Pro version.
NOTE : To check Pricing Table and features comparison table of lite and pro version Click Here

You can update Avartan Slider Plugin using 1 of the two ways below

Thank you for using Avartan Slider plugin!

We would like to thank you for using our Avartan Slider Plugin! If you have any difficulties with Avartan Slider Plugin or need any additional service, do not hesitate to contact us. We provide priority support with our all premium WordPress themes and plugins.

Just contact us on support.solwininfotech.com

We are very happy to assist you!