WordPress Responsive Touch Slider for a Layman : WP1 Slider Pro – Documentation
- Unzip wp-1-slider-pro.zip
- Upload all the files to the /wp-content/plugins/wp-1-slider-pro
- Activate the plugin through the ‘Plugins’ menu in WordPress.
- For customizing the plugin’s settings, click on WP 1 Sliders Pro option menu in WordPress left admin menu.
- 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.
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.
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
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:
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.
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
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:
Allows you to choose either display slider box shadow or not and allow you to choose shadow box types template.
- Caption Settings:
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:
Allows you to choose either display dot pager or thumbnail pager or pagination pager or disable the 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:
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
Allows you to choose any one among eighteen different navigation arrow style.
Carousel Slide Layout
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
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
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.
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 15 different template for animation layers in slider.Each 15 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
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.
- Simple Text Rotator Effects
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
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.
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.
In order to have kenburn effect first off all create animation mode
slide and then go to general settings section and open the slider settings tab, in that checked the kenburn effect checkbox to have kenburn effects in slider images.
Video Background Slider
For video background slider, you should select the animation mode in slider mode option then you can add video 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.Inside this tab you can select video in slider image as shown in above image to have video background slider.After that you can select video type which can be either youtube/vimeo/upload your own video and then enter the video url of youtube/vimeo or upload your video.
In general settings tab you can manage background video width and height in Background video width and Background video height inputs respectively.
SoundCloud Audio Slider
For creating SoundCloud Audio Slider you have to select Audio Slide in slider type options after that add audio slide blue button will appear just click on this button a grey untitled box will appear, open this tab, here you will see Audio Title , Audio URL , Client ID inputs. Just enter the audio URL , client id and save the slider is ready to use. Other settings are same as that of Creating Image Slider
Partial View Slider
For creating Partial View Slider you have to follow normal mode settings which are described above in Creating Image Slider.After creating normal mode slider goto general settings and checked the partial view slide layout checkbox.After that Partial View Settings tab will appear where you can manage title and description font size , color , button color.
Slider in laptop/mobile/frames
When you will select the slide in laptop/mobile/frame options in Slide Type Then Add slide button will appear.You can enter slides by clicking on the Add Slide button.When you click on that button a grey slide box will appear , open the tab then you can choose the slide which can be image or video and then upload the respective image or video types URL.Please use the following recommended width for slider images in laptop/mobile/frames in ‘slider options’ metabox.
Laptop : width 60% (use images sizes 1500*940)
Mobile : width 60% (use images sizes 310*560)
First Frame : width 70% (use images sizes 1100*700)
Second Frame : width 90% (use images sizes 380*490)
In general settings you will see pager settings , navigation arrow settings , background frames settings tab.The first two are already discussed and please note that the thumbnail navigation pager is not provided for this slider type. In background frames setting tab you can select the background types which can be either laptop/mobile/first frame/second frame.
Auto Width Slider
When you will select auto width slide in Slider Type field then Add auto width slide button will appear. You can enter images by clicking on the Add auto width slide button. After that you will see untitled slide grey box, open the tab then you can enter title , description , image and image width for auto width slide.
When you will select content slide in Slider Type field then Add content slide button will appear. You can enter content by clicking on the Add content slide button. After that you will see untitled slide grey box, open the tab then you can enter content title , description.
Then in general settings you will find content slider settings tab where you can manage title and content’s font size and color.
When you will select mixed slide in Slider Type field then Add Image Slide , Add Video Slide , Add Content Slide buttons will appear. You can enter image , video and content by clicking on the respective button.And the settings are same as Video Slides , Image Slides and Content Slides which are described above.
Creating Post Slider
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.
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.
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.
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
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
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.
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.
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
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
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
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.
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.
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.
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
In this setting tab you can manage title font size,title color,description font size and color and button color.
- Woocommerce Carousel Slide Layout
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
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.
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.
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
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
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
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.
The general settings are same as instagram general settings which are described already in above instagram content.
Slider Configurations 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.
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
Also, you might want to,
More WordPress Resources
Themes Compatible with the Plugin :
WP1 Slider Pro works best with every WordPress theme. It’s even more remarkable when used with popular themes like VMagazine and AccessPress Parallax.
AND IF THIS PLUGIN HAS IMPRESSED YOU, THEN YOU WOULD ENJOY OUR OTHER PROJECTS TOO. DO CHECK THESE OUT :
WPAll Club – A complete WordPress resources club. WordPress tutorials, blogs, curated free and premium themes and plugins, WordPress deals, offers, hosting info and more.
Premium WordPress Themes – 6 premium WordPress themes well suited for all sort of websites. Professional, well coded and highly configurable themes for you.
Premium WordPress Plugins – 45+ premium WordPress plugins of many different types. High user ratings, great quality and best sellers in CodeCanyon marketplace.
AccessPress Themes – AccessPress Themes has 50+ beautiful and elegant, fully responsive, multipurpose themes to meet your need for free and commercial basis.
8Degree Themes – 8Degree Themes offers 15+ free WordPress themes and 16+ premium WordPress themes carefully crafted with creativity.