Avartan Slider WordPress Plugin Help Document

Introduction

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

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

1) Getting Started: This section will very help full for introduction and understand how plugin works
2) Detailed Document: This section explains every thing about Avartan Slider plugin with every settings.
3) Other: This section provides information about miscellaneous item 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

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

Please extract that codecanyon downloaded zip in your local PC. There are 2 items inside it.

  1. 1) avartan-slider-document.zip
  2. 2) avartanslider.zip

You need to select avartanslider.zip file for next actions.

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 top you can see the Add New button, click the button.
  4. Step 4. Again at top you can see/view Upload Plugin button, click the button.
  5. Step 5. Now upload the plugin zip file (avartanslider.zip). After upload, install the zip and click on Activate Plugin.

Plugin Installation

Plugin Upload

Plugin Upload

Plugin Installation

2. Installation Via FTP

  1. Step 1. Extract Zip file. It will create avartanslider folder with all plugin files & folder inside it. (Remember extracted folder path)
  2. Step 2. Using your ftp program like Filezilla or cPanel, upload the non-zipped plugin folder into the /wp-content/plugins/ folder on your server.
  3. Step 3. Go to Dashboard » Plugins » Installed Plugins and find Avartan Slider from plugin list.
  4. Step 4. Click on Activate to activate Avartan Slider.

Quick Guide

  1. Step 1. Go to Dashboard » Avartan Slider

  2. Step 2. You will see a list of sliders here, and if you have activated plugin very first time, then you will get a screen like below

    Create New Slider

  3. Step 3. Click on "new one" link which is available with the text OR click on "+" sign button which show you link title as 'Create New Slider'.

  4. Step 4. Select your Slider Type.

    (Like: Standard Slider or Post Based Slider...)

    Standard Slider

  5. Step 5. Write a Slider Name with the input field. Alias and Shortcode of slider will be generated automatically based on Slider Name (see image below).

    Save Settings

  6. Step 6. Click on create slide button to save your slider.

  7. Step 7. To add new slide click on Add slide button at right side of the slide list and add new Layer from Add New Layer

    create slide

  8. Step 8. In order to add Avartan Slider on any page, navigate to Pages » Add New

  9. Step 9. Click on add-avartan-slider-btn

    Add Avartan Slider

  10. Step 10. Select slider and click on Insert Avartan Slider

    Select Slider

  11. Avartan Slider added successfully. Now save the page and enjoy the slider.

    slider added

Detail Document




Create a New Slider

  1. Step 1. Go to Dashboard » Avartan Slider

    ( List View ) It's a somple view of created slider with all the possible options.

    Create new slider

    ( Grid View ) It's a thumbnail view of created slider with most used options.

    Slider Grid View

  2. Step 2. Click on

    Save Settings

    Save Settings

  3. Step 3. Select slider type from the dialog box. or select default slider template from the dialog box.

  4. Step 4. Add the slider name. Then shortcode of slider will be generated automatically (see image below).

    Save Settings

  5. Step 5. Click on create slide button at top of page. And Enjoy the Slider!

Slider Settings

Post Based Slider

Note: If you have choose post based slider then following slider settings are available

Layout

General

General settings are divided into two parts.

  • General
  • Loader

1. General

2. Loader

Visual

Visual settings are divided into three types.

  • Appearance
  • Mobile
  • Timer Bar

1. Appearance

2. Mobile

3. Timer Bar

Parallax & 3D

Callbacks

Import Export

1. Import

2. Export

Background Type Transparent

Background Type Solid Color

Background Gradient Color

Featured Image

Featured Image Settings

Custom Image

Custom Image

Background YouTube Video

Background Vimeo Video

Background HTML5 Video

Parallax/3D

Slide Parallax/3D Settings

  • 1. Selected 3D Depth

    1. This setting will show you the parallax 3D depth what you insert in your slider Parallax & 3D setting's Default 3D Depth section

    NOTE: this option is display when you enabled Parallax/3D in your main slider setting.

Ken Burns

Slide  Ken Burns Settings
  • 1. Ken Burns

    1. An smooth zoom effect that will move and scale into the main background image slowly after the slide start.

  • 2. Scale in %

    1. From: Set the starting scale percentage value of the image

    2. To: Set the ending scale percentage value of the image

  • 3. Horizontal Offsets

    1. These offset values are in relation to your main background image’s Background Position value Horizontally

  • 4. Vertical Offsets

    1. These offset values are in relation to your main background image’s Background Position value Vertically

  • 5. Rotation

    1. Apply a starting and ending rotation for the effect to the background image

  • 6. Easing

    1. “Easing” is what gives a web animation that “real life” type of movement. For a traditional Ken Burns effect, “Linear.easeNone” is usually the best choice. But you can test the other options to see which one you like best

  • 7. Duration

    1. The total time the Ken Burns effect will last, in milliseconds, It’s usually best to set this to the same number used for the slide’s delay value.

Overlay

Slide Overlay Settings
  • 1. Color Overlay Type

    1. select color to set it on slide main background image.

    2. Solid Color: Set one color upon the background image

    3. Gradient Color: Set multiple color upon the background image

  • 2. Select Color

    1. Select color to set overlay color upon slide main background image.

    Note: Plugin provide bootstrap Color picker with opacity instead of separate background color opacity.
  • 3. Patterns Overlay

    1. You can add various type of pattern overlay upon main background image in slide.

Animation

Slide Animation Settings
  • 1. Slot Amount

    1. Represents the number of “pieces” the image is divided into for these animations in milliseconds. For Ex.(1000 = 1 second).

  • 2. Slot Rotation

    1. Applies a slide background image rotation to the slot-based animation. For Ex.(10deg).

  • 3. Ease In

    1. The easing applied when the background animates comes into view.

  • 4. Ease Out

    1. The easing applied when the background animates out of view (on slide change).

  • 5. Time

    1. Set slide total time interval values in milliseconds. For Ex.(1000 = 1 second).

  • 6. Start Speed

    1. Set slide starting speed values in milliseconds. For Ex.(1000 = 1 second).

Timeline

Slide Timeline Settings

Hide/Show element.

Click on eye icon to Enable or Disable slide element.


Manage element position.

Click on element name to change it's position in slide.


Slide total time.

Display total time of current slide.


Slide stat delay.

Display element delay speed.


Element start speed.

Choose content animation starting time duration.


Element display time.

Choose content animation dispay time duration.


Element end speed.

Choose content animation end time duration.

Slide Action

Slide Attributes

Slide Advance Settings

Preset

Element Settings

Text/HTML Element

In order to add text element...

Step 1. click on    Text/HTML from   Add New Layer

Step 2. Set layer setting options.

Image Element

In order to add image element...

Step 1. click on    Image

Step 2. And set layer setting options.

Video Element

In order to add video element...

Step 1. click on    Video

Step 2. Navigate to 'Source' tab and 'Choose Video Type'.

Avartan slider provides 3 types of video support.

Shortcode Element

In order to add shortcode element...

Step 1. click on    Shortcode

Step 2. And set shortcode setting options

Button Element

In order to add button element...

Step 1. click on    Button

Step 2. And set button setting options.

Icon Element

In order to add icon element...

Step 1. click on    Icon

Step 2. And set icon setting options.

  • Icon Layer

  • Select Icon
    Select icon from below dialog box.
  • Icon Dialog

Shape Element

In order to add icon element...

Step 1. click on    Shape

Step 2. And shape setting options.

  • Shape Layer

  • Height & Width
    You can set height and width of shape element from above element design options.

Element Builder




Design

Animation

Advance

Parallax / 3D

Advance Editor

Post Based Slider Setting

1. Create Post Based Slider

Post Filter Post based slider:

  1. 1. Post Title:

    To display post title in slider.

    Code: {{title}}


  2. 2. Post Title With Link:

    To display post title with post link in slider.

    Code: {{titlewithlink}}


  3. 3. Post Alias:

    To display post alias with post link in slider.

    Code: {{alias}}


  4. 4. Post content:

    To display post content in post slider.

    Code: {{content}}


  5. 5. Post content limit by words:

    To display post content with limited words in post slider.

    Ex.: 20 words in post content.

    Code: {{content:words:10}}

    In above code format 10 is the limit of post content words.

  6. 6. Post content limit by character:

    To display post content with limited characters in post slider.

    Ex.: 20 characters in post content.

    Code: {{content:characters:10}}

    In above code format 10 is the limit of post content characters.

  7. 7. Post Excerpt:

    To display post except (Short Description of post) in post slider.

    Code: {{excerpt}}


  8. 8. Post Format:

    To display post format in post slider.

    Code: {{post_format}}


  9. 9. Post Format Icon:

    To display post format icon in post slider.

    Code: {{post_format_icon}}


  10. 10. The link to the post:

    To apply post link to slide.

    Code: {{postlink}}


  11. 11. Author name:

    To display post author in to slide.

    Code: {{author_name}}


  12. 12. Total Comment:

    To display number of comments of the post in to slide.

    Code: {{num_comments}}


  13. 13. Click here to see Metakeys:

    To display meta tags of the post in to slide.

    Code: {{meta:somemegatag}}


  14. 14. List of categories with links:

    To display category with link of the post in to slide.

    Code: {{catlistlink}}


  15. 15. List of categories:

    To display only category name list of the post in to slide.

    Code: {{catlist}}


  16. 16. List of categories without comma and link:

    To display only category name without link and comma in to slide.

    Code: {{catonlylink}}


  17. 17. List of categories without comma:

    To display only category name without comma in to slide.

    Code: {{catonly}}


  18. 18. List of tags:

    To display all tag name list of particular post in to slide.

    Code: {{taglist}}


  19. 19. List of tags with link:

    To display all tag name list with link in to slide.

    Code: {{taglistlink}}


  20. 20. List of tags without comma:

    To display all tag name without comma in to slide.

    Code: {{tagonly}}


  21. 21. List of tags without comma and link:

    To display all tag name without comma and link in to slide.

    Code: {{tagonlylink}}


  22. 22. Date created:

    To display post create date in to slide.

    Code: {{date}}


  23. 23. Date modified:

    To display post last date updated in to slide.

    Code: {{date_modified}}


  24. 24. Post year:

    To display post created year (in short value) in to slide.

    Ex.: if post publish year is 2017 then it will dispaly only 17.

    Code: {{year}}


  25. 25. Post full year:

    To display post full year in to slide.

    Ex.: if post publish year is 2017 then it will dispaly only 2017.

    Code: {{fullyear}}


  26. 26. Post year link:

    To display post year with link in to slide.

    Code: {{yearlink}}


  27. 27. Numeric Month:

    To display post month in numeric value in to slide.

    Code: {{monthnum}}


  28. 28. Short month name:

    To display post month short name in to slide.

    Ex.: if post publish month is January then it will dispaly only Jan.

    Code: {{month}}


  29. 29. Full month name:

    To display post month full name in to slide.

    Ex.: if post publish month is January then it will dispaly January.

    Code: {{fullmonth}}


  30. 30. Post month link:

    To display post month with link in to slide.

    Code: {{monthlink}}


  31. 31. Day of the month:

    To display post created day of the month in to slide.

    Code: {{day}}


  32. 32. Day of the month without zero:

    To display post created day without zero of the month in to slide.

    Ex.: if post publish day is January 03 2017 then it will dispaly 2.

    Code: {{daysh}}


  33. 33. Day name:

    To display post created day name of the month in to slide.

    Ex.: if post publish day is January 03 2017 then it will dispaly Sun.

    Code: {{dayname}}


  34. 34. Day full name:

    To display post created day full name of the month in to slide.

    Ex.: if post publish day is January 03 2017 then it will dispaly Sunday.

    Code: {{dayfullname}}


  35. 35. Post day link:

    To display post created day name with link of the month in to slide.

    Code: {{daylink}}


  36. 36. Featured Image URL Original Size:

    To display post featured image link with original size in to slide.

    Code: {{featured_image_url_full}}


  37. 37. Featured Image -> Original Size:

    To display post featured image thumb into original size in to slide.

    Code: {{featured_image_full}}


  38. 38. Featured Image URL Thumbnail:

    To display post featured image thumbnail size url in to slide.

    Thumbnail size of the post is 150x150.

    Code: {{featured_image_url_thumbnail}}


  39. 39. Featured Image img -> Thumbnail:

    To display post featured image thumbnail size in to slide.

    Thumbnail size of the post is 150x150.

    Code: {{featured_image_thumbnail}}


  40. 40. Featured Image URL Medium:

    To display post featured image medium thumbnail url size in to slide.

    Medium thumbnail size of the post is 300×188.

    Code: {{featured_image_url_medium}}


  41. 41. Featured Image img -> Medium:

    To display post featured image medium thumbnail in to slide.

    Medium thumbnail size of the post is 300×188.

    Code: {{featured_image_medium}}


  42. 42. Featured Image URL Large:

    To display post featured image larger thumbnail url in to slide.

    Medium thumbnail size of the post is 1024x640.

    Code: {{featured_image_url_large}}


  43. 43. Featured Image img -> Large:

    To display post featured image larger thumbnail in to slide.

    Medium thumbnail size of the post is 1024x640.

    Code: {{featured_image_large}}


  44. 44. Featured Image URL Medium Large:

    To display post featured image medium large thumbnail url in to slide.

    Medium thumbnail size of the post is 768×480.

    Code: {{featured_image_url_medium_large}}


  45. 45. Featured Image img -> Medium Large:

    To display post featured image medium large thumbnail in to slide.

    Medium thumbnail size of the post is 768×480.

    Code: {{featured_image_medium_large}}


  46. 46. Featured Image URL Post-thumbnail:

    To display post featured image post thumbnail url in to slide.

    Medium thumbnail size of the post is .

    Code: {{featured_image_url_post-thumbnail}}


  47. 47. Featured Image img -> Post-thumbnail:

    To display post featured image post thumbnail in to slide.

    Medium thumbnail size of the post is -.

    Code: {{featured_image_url_post-thumbnail}}


  48. 48. Featured Image URL Blog Img:

    To display post featured image blog thumbnail url in to slide.

    Medium thumbnail size of the post is -.

    Code: {{featured_image_url_blog_img}}


Publishing Slider

Publish avartan slider using below mentioned steps and page editor.

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

Drag and Drop Builder

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

Amazing Layers

  • One Text Element play multiple roles like only text or custom html.
  • User can add single single image in 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.
  • Quick add Icon by Icon Element.
  • Quick add Shape by Shape Element.
Text-HTML-Image-Video-Shortcode-Button-Icon-Shape

Preview Slide And Slider

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.
User can preview the slide according slider layout like fixed-width or full-width and Screen mode Desktop or Mobile.
Now, user can preview whole slider before publish on front.

Preview Slide And Slider

Single Import/Export Slide

No worry to transfer single slide from one site to another site.
Just export your favorite single slide and import that one in your favorite slider.

Single Import/Export Slide

Copy & Move Slide

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

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/avartanslider/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/

Update Avartan Slider Plugin

Credits

Avartan Slider used the third party libraries as per listed below.

Thank you for purchasing 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.

Support and Help FAQ

We are very happy to assist you!