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 is 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

  • Avartan Responsive Element WordPress Slider Plugin

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 top you can see the Add New button, click the button.

    Plugin Installation

  4. Step 4. Again at top you can see/view Upload Plugin button, click the button.

    Plugin Upload

  5. Step 5.Extract the zip Avartan Slider.zip that you have downloaded from your Member Area at Codecanyon website. You will find Avartan Slider.zip file in it. Now upload the plugin zip file (Avartan Slider.zip). After upload, install the zip and click on Activate Plugin

    Upload Plugin

    Install Plugin

2. Installation Via FTP

  1. Step 1.Download Avartan slider plugin zip file (Avartan Slider.zip) from your Member Area at Codecanyon website.

  2. Step 2.Extract Zip file. You will get two zip files from it. Extract Avartan Slider.zip file and it will create "avartanslider" folder with all plugin files & folder inside it. (Remember 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 plugin from list

  5. Step 5.Click on Activate to active Avartan Slider plugin.

Quick Guide

  1. Step 1. Go to Dashboard » Avartan Slider

  2. Step 2. Click on

    Create new slider

  3. Step 3. Add the slider name. Shortcode of slider will be generated automatically (see image below).

    Save Settings

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

  5. Step 5. Next to that, Click on Edit slides at top of page for edit your slide details.

  6. Step 6. 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

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

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

    Add Avartan Slider

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

    Select Slider

  10. 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 )

    Create new slider

    ( Grid View )

    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

  • Slider Settings

  • Slider Name
    A name used for slider.
  • Alias
    An individual slider name. This name will be embedded in slider shortcode, so do not use special characters.
  • Shortcode
    This is the Shortcode that will be embedded into your pages, widgets, etc.
  • PHP Function
    This is the PHP function used in page template or in core files.

Post

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

  • Source
    Default Post: Slider will take a posts from default wordpress post type.
    Specific Post: Slider will take a posts from specific post ids.
  • Post Type
    Select Post type for display posts on slider.
    Note: If in Source option you have choose Default Post then only Post Type setting is available.
  • Post Terms
    Select post terms to filer posts on slider.
    Note: If in Source option you have choose Default Post then only Post Terms setting is available.
  • Sort Post By
    Select posts order that you want to display on slider. You can sort by post ID, Date, Title, Slug, Author, Last Modified, Number of Comments, Random, Custom Order.
    Default: Post ID
  • Sort Direction
    Select post sort direction.
    Default: Descending
  • Post Per Slider
    Enter numbers of post to display on slider.
    Default: 10
  • Excerpt Limit
    Enter Character limit of post excerpt to display on slider.
    Default: 10
  • Specific Post Settings

  • Specific Post
    Slider will take a specific posts from given ids.
    Note: If in Source option you have choose Specific Post then only Specific Post setting is available.

Layout

  • Layout Settings

  • Layout
    • Full Width
      The Slider will always stretch across the entire width of the screen.
    • Fixed
      Slider will take width and height that are assigned to slider.
  • Force full width
    The slider will display forcefully in full screen.
    Note: This option is only available when slider set as full width.
  • Desktop Layer Grid Size
    Set width and height of slider grid for desktop in pixels.
  • Mobile Layer Grid Size
    Set width and height of slider grid for mobile in pixels.
  • Mobile Custom Design
    Select ON to set Custom mobile layer on slider.

General

General settings are divided into two parts.

  • General
  • Loader

1. General

  • General Settings

    • Automatic Slide
      If set on then the slider's slides are automatically looped.
    • Random Slide
      If on then slider slides are randomly looped.
    • Pause on Hover
      If on then slider progress will be stopped when the user hovers their mouse over the slider.
    • Swipe & Drag
      If on drag/swipe navigation is enabled. User can use mouse drag navigation.

2. Loader

  • Loader Settings

    • Enable
      If on then the loader will be shown when the slider initialize.
    • Type
      There are two types of loaders.
      • Select Default Loader
        Select your favorite CSS3 Loader from Loaders collection.
      • Upload New Loader Image
        You can upload the any loader image that you like.

Visual

Visual settings are divided into three types.

  • Appearance
  • Mobile
  • Timer Bar

1. Appearance

  • Appearance Settings

    • Background Color
      • Transparent
        If you select the transparent background, then the slider's main background will be displayed transparent.
      • Select Color
        Select background color of your choice for slider's background.
        Select Opacity of background color from 0 to 100 percentage(%).
    • Shadow
      Select shadow for your slider from shadow library.

2. Mobile

  • Mobile Settings

    • Hide Slider
      Set width under which you want to hide slider.
    • Hide Defined Elements
      Set width under which you want to hide defined elements.
    • Hide All Elements
      Set width under which you want to hide all the elements.
    • Hide Arrows
      Set width under which you want to hide arrows.
    • Hide Bullets
      Set width under which you want to hide bullets.

3. Timer Bar

  • Timer Bar

    • Show Timer Bar
      Set on to display the timer bar during the slide execution.
    • Timer Bar Position
      • Top
        Set time bar position at top of slider.
      • Bottom
        Set time bar position at bottom of slider.

Parallax & 3D

  • Layout Settings

    • Enable Parallax/3D
      Enable/Disable Parallax/3D in slider
    • Enable 3D
      Enable rotating effect of slider
    • 3D Shadow
      Enable 3D shadow
    • 3D BG Disabled
      Enable background 3D effect
    • Slider Overflow Hidden
      Hide slides when go outside of the slider.
    • Layers Overflow Hidden
      Hide layers when go outside of the slider.
    • Default 3D Depth
      Set default 3D depth level.
    • Animation Speed
      Enter Animation speed when mouse hover or scroll
    • Level Depth
      Add different levels to different slide layers is what gives the content its “depth” in relation to other parallax layers

Callbacks

  • Callbacks

  • onLoaded
    Callback function for slider load.
  • beforeSlideStart
    Callback function for slide start.
  • afterSlideFinish
    Callback function for slide finish.
  • onChange
    Callback function for slide change.
  • onPause
    Callback function for slider pause.
  • onResume
    Callback function for slider resume after pause.

Import Export

1. Import

  • Step 1: Go to Dashboard » Avartan Slider

  • Step 2: To import your exported slider, click on Import

    • Import

  • Step 3: Browse slider .zip(i.e demo_slider.zip) file.

    • Import Browse

  • Step 4: Click on Import Slider

2. Export

  • To export slider click on Slider Export button, that will save your slider related all settings.

    Export

Background Type Transparent

  • Background Type Transparent

  • Background Type Transparent
    Select 'Transparent' option if you don't want any background.

Background Type Solid Color

  • Background Type Solid Color

  • Solid Type Color
    Select 'Solid Color' option if you want to display color as a background.
  • BG Color
    Set Background solid color for slide.
    Note: Plugin provide bootstrap Color picker with opacity instead of separate background color opacity.

Background Gradient Color

  • Background Gradient Color

  • Background Type Gradient
    Select 'Gradient' option if you want to display gradient color as a background.
  • BG Gradient Color
    Set different background gradient color in slide.
  • BG Gradient Angle
    Set Background gradient angle in slide.
  • Note: Plugin provide bootstrap Color picker with opacity instead of separate background color opacity.

Featured Image

Featured Image Settings
  • 1. Background Type

    1. Using this option you can set post image as background image in post slider.

      You can apply feature image only in post base slider.

Custom Image

Custom Image
  • Background Type Image
    Select 'Image' option if you want to set custom image in slide background.
  • BG Image
    Select image from wordpress default media library.
  • Alter Text
    Enter alter text for selected image.
  • Image Title
    Enter title name for selected image.
  • BG position
    Set background position for selected image like Center Top,Center Right,Center Bottom,Center Center,Left Top,Left Center,Left Bottom,Right Top,Right Center,Right Bottom,(X%, Y%).
    Default Settings: Center Center.
  • BG Size
    Set background size for selected image like Cover,Contain,Percentage,Normal.
    Default Settings: Cover.
  • BG Repeat
    Set background repeat flow for selected image like No Repeat,Repeat,Repeat-x,Repeat-y.
    Default Settings: Cover.

Background YouTube Video

  • Background YouTube Video

  • Background Type Youtube Video
    Select 'Youtube Video' option if you want to set youtube video as a slide background.
  • Youtube ID or URL
    Please enter the youtube id/url and you must have to set poster image. Example: iNJdPyoqt8U.
  • Force Cover
    Set ON then video display forcefully in fullwidth.
  • Aspect Ratio
    Select your apropriate Aspect Ratio.
    Default: 16:9
  • Video Settings
    Video embeded setings.
    Loop Video: Video play continuously in slide.
    Next Slider On End: Slider will change automatically after video end.
    Force Rewind: Video will always start from the beginning each time of the slide is shown.
    Mute: Choose on to mute the video’s volume in slider.
    Default Settings: Video should be autoplay and controls should be hide.

Background Vimeo Video

  • Background Vimeo Video

  • Background Type Vimeo Video
    Select 'Vimeo Video' option if you want to set vimeo video as a slide background.
  • Youtube ID or URL
    Please enter the vimeo id/url and you must have to set poster image. Example: iNJdPyoqt8U.
  • Force Cover
    Set ON then video display forcefully in fullwidth.
  • Aspect Ratio
    Select your apropriate Aspect Ratio.
    Default: 16:9
  • Video Settings
    Default Settings: Video should be autoplay and controls should be hide.

Background HTML5 Video

  • Background HTML5 Video

  • Background Type Vimeo Video
    Select 'Vimeo Video' option if you want to set vimeo video as a slide background.
  • Youtube ID or URL
    Please enter the vimeo id/url and you must have to set poster image. Example: iNJdPyoqt8U.
  • Force Cover
    Set ON then video display forcefully in fullwidth.
  • Aspect Ratio
    Select your apropriate Aspect Ratio.
    Default: 16:9
  • Video Settings
    Default Settings: Video should be autoplay and controls should be hide.

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).

Slide Action

  • Slide Action

  • Enable Link
    To Enable / Disable link for slide.
  • Link to Slide
    Select link type for slide. Their are 4 types of link are available: Simple link, next slide, previous slide and Scroll below slider.
  • Slide Link
    Enter link for slide.
  • Link Target
    Link open in new tab / same tab.

Slide Attributes

  • Slide Attributes

  • ID
    Add ID attribute to slide.
  • Classes
    Add Class attribute to slide.
  • Title
    Add Title attribute to slide.
  • Rel
    Add Rel attribute to slide.

Slide Advance Settings

  • Slide Advace

  • Slide Description
    Add description for slide.
  • Custom CSS
    Apply custom CSS to the slide. Ex: display: block;verticle-align: middle; Note: Do not use .class_name{} or #id{}.

Element Settings

  • Element Option

  • There are 7 types of Elements available. Text/HTML, Image, Video, Shortcode, Button, Icon and Shape.
    Each element has different options.

  • Add New Layer
    To add new Layer in editor click on   Add New Layer then select element which you want.
  • Delete Element
    Click on any element from slide and then click on Delete Element to delete the element.
  • Duplicate Element
    Click on any element from slide and then click on Dupliate Element to duplicate the element.
  • Edit Element
    Click on any element from slide and then click on Edit Element to edit the element.

Text/HTML Element

In order to add text element...

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

  • Text Layer Element
  • Basic Text
    Type in some regular text to be used for the element’s content.
  • Icon
    You can set icon from Icon
  • Post Based Filter
    You can set a different types of post filter in slide from Post Based Filter and it's use only in post based slider.
    Note: Post base Filter is available only for post base slider.

Step 2. Set layer setting options.

  • Text Layer Demo

  • Raw HTML Content
    You can add raw HTML depending on your layer content needs.
  • Resize & Rotate
    You can resize and rotate text element in editor.

Image Element

In order to add image element...

Step 1. click on    Image

Step 2. And set layer setting options.

  • Image Layer

  • Change Image
    To change the image then click on Change Image
  • Resize & Rotate
    You can resize and rotate image in editor.

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.

  • 1. Youtube Video

    • Video Layer

  • Choose Video Type
    Select video type as YouTube.
  • Youtube ID or URL
    Enter youtube ID or URL then click on search button to set video in element. Example: iNJdPyoqt8U
  • 2. Vimeo Video

    • Vimeo Video

  • Choose Video Type
    Select video type as Vimeo.
  • Vimeo ID or URL
    Enter Vimeo ID or URL then click on search button to set video in element. Example: 35545973
  • 3. HTML5 Video

    • HTML5 Video Settings

    • Choose Video Type
      Select video type as HTML5.
    • HTML5 Video Links
      Enter HTML5 video links like MP4, WEBM and OGV.
    • Video Advance Settings

    • Step: 3 Set Video Settings
      • Full Screen
        If set "On" then video width and height will both automatically set to 100%.
      • Force Cover
        This means the video will always cover the entire size of the slider, but depending on the video's original size ratio in relation to the slider's actual size.
      • Aspect Ratio
        To set aspect ratio of video. and it only applicable if "Force Cover" is set to "On". Default is 16:9
      • Loop Video
        It specifies that the video will start over again, every time it is finished.
      • Autoplay
        The video will automatically start playing.
      • Autoplay Only First Time
        The video will automatically start playing only one time. Once slide changed the autoplay feature will be disabled.
      • Allow Fullscreen
        If selected then youtube and html5 player will allow to fullscreen feature.
      • Next Slide on Video End
        Automatically change slide after video is completed.
      • Hide Controls
        Hide player controls in Youtube and HTML5.
      • Mute
        It specifies that the audio output of the video should be muted.
      • Show poster on pause
        If preview image is set then poster image will be display when video is paused or ended.
    • Video Preview

    • Image
      Select image to set preview image for video layer.

Shortcode Element

In order to add shortcode element...

Step 1. click on    Shortcode

Step 2. And set shortcode setting options

  • Shortcode Layer Settings

  • Shortcode
    Enter any wordpress valid shortcode in textbox.

Button Element

In order to add button element...

Step 1. click on    Button

Step 2. And set button setting options.

  • Button Layer Settings

  • Button Style
    Select your button style from given option.
  • Button Text
    Enter button label or text.
  • Button Icon
    As well as you can add icon with button element form huge collection of icon from Icon icon elements.
  • Post Filter
    You can set post filter in button from Post Filter but this option is available only post based slider.
    Note: Post Filer setting is available only for Post base Sliders.

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

  • Layer Design
  • Font Family
    You can set 800+ various types of Font family ( Powered by Google Fonts ) from here Font Family to your text elements.
    Note: Font Family is disabled when shape element, video element, image element, and icon element is selected.
  • Font Size
    You can set font size to your text elements from here Fonts Size to your text elements.
    Note: Font Size is disabled when shape element, video element, and image element is selected.
  • Line Height
    You can set font line height to your text elements from here Line Height to your text elements.
    Note: Line Height is disabled when shape element, video element, and image element is selected.
  • Font Weight
    You can set font Weight to your text elements from here Font Weight to your text elements.
    Note: Line Weight is disabled when shape element, video element, image element, and icon element is selected.
  • Italic
    You can set italic font Style to your text elements from here Font Weight to your text elements.
    Note: Italic is disabled when shape element, video element, image element, and icon element is selected.
  • Text Transform
    You can set text transform text Style to your text elements from here Text Transform to your text elements.
    For Example: None (Default selected Value), Capitalize, Uppercase, Lowercase, and Full Width...
    Note: Text Transform is disabled when shape element, video element, image element, and icon element is selected.
  • Letter Spacing
    You can set letter spacing to your text elements from here Letter Spacing to your text elements.
    Note: Letter Spacing is disabled when shape element, video element, and image element is selected.
  • White Space
    You can set white spacing to your text elements from here White Space to your text elements.
    Note: White Space is disabled when shape element, video element, and image element is selected.
  • Text Decoration
    You can text decoration line to your text elements from here Under Line to your text elements.
    Note: Under Line is disabled when shape element, video element, and image element is selected.
  • Text Alignment
    You can set text alignment to your text elements from here Text Alignment to your text elements.
    For Example: Align Left (Default selected Value), Align Center, Align Right, AndAlign Justify.
    Note: Text Alignment is disabled when shape element, video element, and image element is selected.
  • Font Color
    You can set text alignment to your text elements from here Font Color to your text elements.
    Note: Font Color is disabled when shape element, video element, and image element is selected.
    Note: Plugin provide bootstrap Color picker with opacity instead of separate background color opacity.
  • Background Color
    You can set element background color to your text elements from here Font Color to your text elements.
    Note: Plugin provide bootstrap Color picker with opacity instead of separate background color opacity.
  • Element Border
    You can set element border color type and color to your text elements from here Element Border to your text elements.
    Note: Using this option you can set different type of border to your element like this Element Border.
  • Border Radius
    You can set element border radius type and color to your text elements from here Element Border to your text elements.
  • Padding
    You can set element padding type and color to your text elements from here Padding to your text elements.
  • Offset
    You can set element Offset , shadow position, type direction, color and shadow display to your text elements from here Offset to your text elements.
  • X Position
    Using X position Y Position You can move your elements from X axis to selected layered alignment.
  • Y Position
    Using Y position Y Position You can move your elements from Y axis to selected layered alignment.
  • Height Width
    Using Height and Width Height Width You can set elements height and width.
  • Full Width
    By clicking this full width option Full Width You can set elements into selected slider behavior setting.
    Like: If you select Layer Behavior to Grid then apply element full width to grid's Width and,
    Like: If you select Layer Behavior to Slider then apply element full width to slider's Width.
  • Full Height
    By clicking this full height option Full Height You can set elements into full height (related to slider's height).
    Like: If you select Layer Behavior to Grid then apply element full width to grid's height and,
    Like: If you select Layer Behavior to Slider then apply element full width to slider's height.
  • Layer Behavior
    Layer behavior Layer Behavior is generally useful that time when you working with Full Width slider, like sometimes you want your content to align to the sides of the screen as opposed to your slider’s Layers Grid size.
  • Element Alignment
    Using alignment option Element Alignment you can move your alignment to proper position under whole slider area like: Top Left, Top Center, Top Right, Center Left, Center Center, Center Right, Bottom Left, Bottom Center, Bottom Right.

Animation

  • Layer Animation

  • 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
  • Start Speed
    How long element animation will last from starts in milliseconds for Ex.(1000 = 1 second).
  • End Speed
    How long element animation will last finished in milliseconds for Ex.(1000 = 1 second).

Advance

  • Layer Advance

  • Show On Device
    Select device icon to show selected element to that device.
    Default:Both are Selected
  • Hide Under Width
    Hiding Under is useful for when lots of content displays nicely on desktop, but there isn’t really enough screen space to fit everything on mobile..
  • Advance CSS
    Apply Custom css for selected layer

Parallax / 3D

  • Parallax / 3D

  • Layer 3D Depth
    You can assign the 3D depth to selected layer.
    Note: Parallax / 3D setting for particular elements is available when it is on from slider Parallax/3D setting.

Advance Editor

  • Grid Helper
    Using grid option Grid Helper, These are optional pixel based guide lines that can help when positioning your layers on the slider area.
    The Grid Helper is as shown in the screenshot below.
    Grid Lines
  • Snap To
    Using Snap To option Snap ToWhile dragging and dropping elements in to your Layers in the slide area, you can choose to snap the Layer’s position based on the Helper Grid Lines or in related to other existing layers..
    The Grid Helper is as shown in the screenshot below.
    Snap To Demo
  • Mobile View
    Using mobile view option Mobile View you can show/hide layer on screens 360px wide or higher (smartphone portrait).
    The mobile is as shown in the screenshot below.
    Mobile View
  • Element Resize
    Using this resize icon Element Resize you can easily resize your element height and width.
    The resize element is as shown in the screenshot below.
    Element Resize
  • Element Point
    Using element alignment icon Element Point you can easily show the element alignment in your slider area.
    The resize element is as shown in the screenshot below.
    Element Point
  • Element Rotator
    Using element rotator icon Element Rotator you can rotate any element to it's current position in your slider area.
    The resize element is as shown in the screenshot below.
    Element RotatorMain position Element Rotator After rotating element

Post Slider Setting

1. Create Post Based Slider

  • 1. Click on Add new slider icon button

    2. Click on post based slider template section

    • Add Slider To Page

    3. Appy post slider display setting Settings.

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:words: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: {{taglist}}


  18. 18 List of tags:

    To display all tag name list 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 2016 then it will dispaly only 16.

    Code: {{year}}


  25. 25 Post full year:

    To display post full year in to slide.

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

    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 2016 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 2016 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 2016 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_full}}


  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_full}}


  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. 42 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. 43 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. 43 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. 43 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. 43 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. 44 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

1. 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.

2. 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

3. Add Avartan Slider From Visual Composer Plugin.

  • Visual Composer Support

4. Add Avartan Slider From Page Builder by SiteOrigin Plugin.

  • Site Origin Support

5. Add Avartan Slider From Beaver Builder Plugin.

  • Beaver Builder Support

6. Add Avartan Slider From BE Page Builder Plugin.

  • BE Page Builder Support

7. Add Avartan Slider From Elementor Plugin.

  • Elementor Support

8. Add Avartan Slider From WR Pagebuilder Plugin.

  • WR Pagebuilder Support

9. Add Avartan Slider From Tailor Plugin.

  • Tailor Support

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


Step 1 :  Download Avartan plugin zip file (Avartan Slider.zip) from your Member Area at Codecanyon website.
Step 2 :  Extract Zip file. You will file two zip files from it. Extract "Avartan Slider.zip" file. it will create "avartanslider" folder with all plugin files & folder inside it.
Step 3 :  Using FTP or Cpanel, upload the non-zipped plugin folder into the "/wp-content/plugins/" folder on your server.
Step 4 :  Select overwrite option once it will ask by FTP or cPanel.
Step 5 :  Go to Dashboard » Plugins » Installed Plugins and find Avartan Slider from plugin list.
Step 6 :  Click on Activate to activate Avartan Slider.

Credits

I've used the following jQuery Plugins as listed.

  • wp color picker alpha - Overwrite Automattic Iris for enabled Alpha Channel in wpColorPicker.
  • Jquery Growl - jQuery Growl is a Growl like notification plugin for jQuery.
  • Web Font Loader - Web Font Loader gives you added control when using linked fonts via @font-face. It provides a common interface to loading fonts regardless of the source, then adds a standard set of events you may use to control the loading experience.
  • Perfect Scrollbar - Minimalistic but perfect custom scrollbar plugin.
  • Jquery UI Rotatable - jquery-ui-rotatable is a plugin for jQuery UI that works in a similar way to Draggable and Resizable.
  • Select-2 JS - Select2 is a jQuery-based replacement for select boxes. It supports searching, remote data sets, and pagination of results.
  • Clipboard - A pretty common use case is to copy content from another element.
  • TouchSwipe - A jQuery plugin to be used on touch devices such as iPad, iPhone, Android etc.
  • Greensock - Greensock is a JavaScript library for high-performance HTML5 animations that work in all major browsers.
  • Fontawesome - Font Awesome is a full suite of 675 pictographic icons for easy scalable vector graphics on websites, created and maintained.
  • flaticon - Flaticon is the largest search engine of free icons in the world.

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!