WordPress Responsive Touch Slider for a Layman : WP1 Slider Pro – Documentation

Documentation of WP1 Slider Pro Plugin

Installation

  1. Unzip wp-1-slider-pro.zip
  2. Upload all the files to the /wp-content/plugins/wp-1-slider-pro
  3. Activate the plugin through the ‘Plugins’ menu in WordPress.
  4. For customizing the plugin’s settings, click on WP 1 Sliders Pro option menu in WordPress left admin menu.
  5. To display the slider in the frontend, please use dynamically generated shortcode from shortcode WP1S Usage metabox or you can use ‘Add WP 1 slider’ button in post or page for easy insert of the slider into post/pages.

Slider Manager

Once the plugin is installed and activated you will find a menu named “WP 1 Slider Pro” in the left menu bar of the admin menu.Once you click on that menu , you will be redirected to the plugin’s listing page and you will see the add new button, once you click on that button you will be redirected to the slider page where you can create slider. Basically there are 6 type of slider type with its own settings configurations which is individually described below.

Creating New slider

This is the landing page for plugin. Here you can see the listing of the slider created along with its respective shortcodes. Here you can see Add new button at top of slider listing table.For creating a new slider, you will simply need to click on the Add New submenu of the Wp 1 sliders pro menu or click on the Add new button in the slider manager’s listing table. You can also edit or delete slider from here.Once you click the button, you will be redirected to the new slider builder page where you can add the unlimited numbers of slides.

Slider Builder Page

Slider Builder Page

This is the builder page of plugin where you can add unlimited numbers of images ,post ,videos ,woocommerce product,facebook image or instagram images slides and build awesome slider.
In this page you will see Slides metabox inside this metabox you will see the Slider type option which include image slide,video slide,post slide,woocommerce slide,instagram slide and facebook slide option.
Below are the detail description for each slide type.

Creating Image Slider

Once you have selected the image slide in Slider Type option then you will see the Slider mode for image slide option , inside this option you can select either normal mode or animation mode.If you want to create simple slider then you can choose normal mode and if you want to have animation effects and layers in slider then you have to choose the animation mode.You will also see the Add Image Slide button from where you can add unlimited number of image slides.Below are the detail description for these two mode:

  • Normal Mode

  • Normal Mode

    After selecting the normal mode, you can click on the ‘Add Image Slide‘ button then you will see the untitled slide.Once you click in untitled slide a slide box will appear where you can add the available input fields in the slide. You can see all the available fields in the slide box as shown above in the image. You can enable or disable the buttons and can give text and link for button.

    General Settings

    Just below the Slides Metabox ,you will see Slider Style option which include Single Slide Layout and Carousel Slide Layout.These two option include different settings configurations.
    Below are the detail description for each slide style:

    • Single Slide Layout

    • General Setting

      When you will select the single slide layout then the Slider settings,Caption settings,Pager Settings,Navigation arrows settings will appear where you can switch the tab by clicking on each setting tab to go to respective setting tab and can edit the way you want to display slider by changing your own setting options.
      We have following feature available in our current version to choose from:

      • Slider Settings:
      • Slider Setting

        Allows you to choose either display slider box shadow or not and allow you to choose shadow box types template.

      • Caption Settings:
      • Caption Setting

        Allows you to choose four different caption types option with its respective title font size, title font color,description font color and size,button color,background color,border color and caption position settings.

      • Pager Settings:
      • Pager Settings

        Allows you to choose either display dot pager or thumbnail pager or pagination pager or disable the pager.

      • Dot Pager:
      • Dot Pager

        Allow you to choose seven different layout for dot pager with its respective background and active color setting.You can also manage the pager position either top or bottom of the slider image.

      • Thumbnail Pager:
      • Thumbnail Pager

        Here you can choose the thumbnail pager mode which can be either horizontal or vertical. There are thirteen different layout for horizontal thumbnail pager and three different layout for vertical thumbnail pager.It also allow you to set count of thumbs slide for thumbnail pager setting.Here count of thumbs slide means number of image to show at first.You can also manage width and height of each thumbnail images.

      • Navigation Arrow Settings
      • Navigation Arrow Settings

        Allows you to choose any one among eighteen different navigation arrow style.

      Carousel Slide Layout

      Image Carousel

      If you have selected carousel slide style in general settings metabox in choose slider style.Then there will be different settings for this ,which include carousel settings , images or post carousel slide settings and navigation arrow settings.These settings are described below in detail:

      • Carousel Settings
      • Image Carousel

        In this carousel settings you can manage image width and height.You can also manage the number of image to show in frontend through ‘Count of Slide’ and Slide Margin is used for the margin between each images in carousel layout slider.

      • Images or Post Carousel Slide Settings
      • Image Carousel

        In this settings you can select six different template for images or post images for carousel layout.Each template has its own different settings configuration like font-size,title color,description color,button color and button hover color.

      Animation Mode

      Animation mode

      If you select the Animation Mode in slider mode option then you can add images by clicking on Add images slide.After that a Untitled Slide gray tab will appear.Once you click on the tab you will see animated template setting tab and other required field.Here layers are set according to the templates selected in the animation template settings.The animation template settings include 12 different template for animation layers in slider.Each 12 template has its own settings configuration options like title font size,color ,layers font size and color, button colors as shown in below Animation template settings.

      • Animation template settings
      • animation template

        Once you have selected the template then you can manage the settings in animation template settings tab.According to the selected template the layers are set which can be either images layer or text layer.Below text layer you will see the add animated text button which is used for showing text effect in slider text.Once you click on this button a popup will open as show in below Add animated text popup image.

        animation template

      • Simple Text Rotator Effects
      • animation template

        When you will select the simple text rotator effects then you will see the text preview in blue box and then you can enter the text which should appear before rotator in Text before rotator . In Text Rotator you can enter many word by seperating each with comma.Now you can select the color in Text rotator colorfor the text which is rotating in blue box.You can also enter the required speed for text rotator in Text Rotator Speed then you can enter the text which appear after text rotation in Text After Rotator field .After that you can enter the Add Text Effects button which will add your text effect in respective layer in builder page.

      • Sliding Letter Hover Effect

      animation template

      If you will select the sliding letter hover effect in select the text animated effects.Here you have to enter the text which need to appear at first in Text field and then you can enter the text which need to be appear during hover in Hover Text field.After that you have to click the add text effects button which will add you text effect in respective layer in builder page.

      General Settings
      animation template

      Now in General settings you will see the animation settings tab.In this section you can select the animation effects for each title,description,layers and buttons and you can set the animation entry timing for each layers.

    Creating Post Slider

    animation template

    When you will select the Post Slide in Slider Type field then post configuration option will appear with Add Post Slide button.You can enter post images by clicking on the Add Post Slide button.

    post popup

    When you will click on that button a popup will open as shown in the above image.First of all select the post which can be either Post Category or Post/Custom Post Type.Once you select any one of these then respective post will appear.After that you can checked the required post and enter these post by clicking on Add Post Slide button.Then your post will be redirected to the builder page as shown in below image.

    post content

    The post title,description,images will be fetch in builder page and you can add button by checking in Show Button checkbox and to show counts of comments and like you have to checked in Show Date And Count Of Comments checkbox.

    General Settings

    post content

    When you will select the Single Slide Layout in Slider Style then Slider Settings,Pager Settings,Navigation Arrow Settings( which are described in above content) and Post Single Slide Settings tab will appear.The first three settings are described already in above content.

    • Post Single Slide Settings
    • post content

      In the post single slide settings there are two type of template and each template has its own setting configuration which include title font size,title color,description font size and description color.

    • Post Carousel Slide Layout

    The carousel settings for post is same as image carousel settings which are described already.

    Creating Video Slider

    post content

    When you will select the Video Slide in Slider Type field then video configuration option will appear with Add Video Slide button.You can enter unlimited number of video in slider by clicking on the Add Video Slide button.

    post content

    When you will click ‘Add Video Slide’ button a new untitled box is added when you will open it, you can enter title,description and you can select youtube , vimeo , upload your own video type in upload video type select option.After that you have to enter the video URL for youtube or vimeo.You can select the video images which can be either directly upload from youtube or vimeo or you can upload the images for video thumbnail.You can check the ‘show button’ to show button in slider, it is required in template two of single video slide.

    General Setting

    post content

    When you will select single slide layout in ‘Slider style’ in general settings metabox then you will see the slider settings,pager settings,navigation arrow settings, and video single slide settings section.The first three settings are described above. In the video single slide settings we can select template for single video and can set settings respectively.Here you can set the weight and height of video in slider.

    • Carousel Slide Layout
    • post content

      When you will select video carousel slide layout in ‘slider style’ in general settings metabox then navigation arrow settings,carousel settings and video carousel slide settings section will appear.The first two settings are described above.

    • Video Carousel Slide Settings

    post content

    In Video Carousel Slide Settings you can select the template for carousel layout and each template has its own settings configuration like font-size,title color,icon color,icon background color and icon hover color.

    Creating Woocommerce Slider

    post content

    Before using woocommerce product slider , please install the woocommerce plugin.If woocommerce plugin is not install the Add Woocommerce Slide button will not appear.After that you can make unlimited number of woocommerce product slide by clicking on Add Woocommerce Slide button.Once you click on that button a popup will open as shown in below image.

    post content

    In this popup you can manage the description length for post content and then select the category.In select product option the category of woocommerce product will appear.
    Once you will select the category, the product will appear.After that just checked the required product and click the ‘Add Product‘ button.All the checked product will be redirected to builder page as shown in below image.

    post content

    Here the product title,description,price,sale price,product image will be fetched.You can show view product and add to cart button by checking the respective checkbox.

    General Settings

    post content

    Once you will select the single slide layout for slider style in general settings then Slider Settings,Pager Settings,Navigation Arrow Settings,Woocommerce Single Slide Settings will appear.The first three settings are described already in above content.

    • Woocommerce Single Slide Settings

    • post content

      In this setting tab you can manage title font size,title color,description font size and color and button color.

    • Woocommerce Carousel Slide Layout

    post content

    If you will select woocommerce carousel slide layout in ‘Slider style’ in general setting metabox, then navigation arrow settings, carousel settings and woocommerce carousel slide settings will appear.The first two settings are described already in above content.

    In Woocommeerce Carousel Slide Layout there are two template and according to template the settings are set.Here you can manage title font size,title color,description font size,description color and button color.

    Creating Instagram Slider

    instagram metabox

    When you will select Instagram Slide in Slider Type then Add Instagram Image metabox will appear in right side at bottom below of WP1S Usage metabox.There you have to enter the username of instagram, number of photos and access token.Before generating access token you have to save the username.You can get access token from ‘Get Access Token’ link.When you get the access token just copy and paste the access token in access token box.Now you can click the ‘fetch image’ button to fetch the images from instagram. If you had previously fetch images and were saved but want to show latest images directly in frontend without any further changes in previous images then please checked Fetch Latest Images checkbox.

    instagram content

    Once you click the Fetch Images button the images,publish date,count of comment and likes of post will be fetched to slide metabox as shown in above image.

    General Settings

    social media general

    When you will select single slide layout in ‘Slider style’ in general settings metabox then slider settings,pager settings,navigation arrow settings, and Social Media ( Instagram & Facebook ) Single Slide Settings section will appear.The first three settings are described above.

    • Social Media Single Slide Settings
    • social media single

      In the social media ( Instagram & Facebook ) single slide settings section we can set the font size,color,background color for instagram slider.

    • Social Media Carousel Slide Settings

    social media carousel

    When you will select carousel slide layout in ‘Slider style’ in general settings metabox then navigation arrow settings,carousel settings and Social Media ( Instagram & Facebook ) Carousel Slide Settings section will appear.The first two settings are described already.In the Social Media ( Instagram & Facebook ) Carousel Slide Settings sections there are two template and settings are set according to template.Here you can manage date font size,date background color,date font color,border color,username color,description color and description font size.

    Creating Facebook Slider

    facebook metabox

    When you will select Facebook Slide in Slider Type then Add Facebook Image metabox will appear in right side at bottom below of WP1S Usage metabox.There you have to enter facebook page album id,facebook page id,number of photo and access token after that you can fetch the album images by clicking on Fetch Images button.Once you will click on that button the album images along with image description,date of publish post,count of comments and count of like will be fetch and redirected to slide metabox as shown in below image.

    facebook content

    General Settings

    The general settings are same as instagram general settings which are described already in above instagram content.

    Slider Configurations Options

    slider options

    In slider options metabox you can manage the width,speed,pause(The amount of time (in ms) between each auto transition),auto,transitions,controls,responsive for slider configurations option.

    Slider Usages

    slider options

    In WP1S Usage metabox you can get the shortcode for page and theme which you can copy & paste the shortcode directly into any WordPress post or page or theme.

    This documentation tried to cover as much details about plugin to ease your plugin experience. To see screenshots of plugin backend and frontend templates, you can see them here

Available layout Screenshots