Ultimate Row Background - Visual composer Addon
- created: 10/28/2016
- latest update: 11/9/2016
- by: POSIMYTH Themes
- posimyththemes.com/plugins/rowvc/
- email: support@posimyth.com
GETTING STARTED
Thanks for purchasing Ultimate Row Background - Visual composer Addon
BASIC REQUIREMENTS:
You need to have Wordpress setup ready with Visual Composer: Page Builder for WordPress Plugin.
HOW TO INSTALL PLUGIN:
Please take a look at this link for tutorial on how to install any wordpress plugin from wordpress backend by various options: http://www.wpbeginner.com/beginners-guide/step-by-step-guide-to-install-a-wordpress-plugin-for-beginners/
Take a video tutorial look from here : https://www.youtube.com/watch?time_continue=246&v=jl_S0DQMnXg
You will have all needed files from our download bundle. It's super easy and simple process to install our plugin.
NEXT STEPS:
1. After Successful Installation of Wordpress Plugin, Go to any page edit option.
2. In the Page edit option Check Visual Composer Elements Section.
3. You will have one more Element added. You just need to Drag and Drop that on row you want to use and Start looking in to their options.
We have devided Plugin Options in to Three Layers.
1. DEEP LAYER
2. MIDDLE LAYER
3. TOP LAYER
Please take a look below for detailed description on our beautiful options.
BASIC CONCEPT
We have developed this add-on for all creative and modern designers and developers, who want to make their websites super fast with all latest interactive designing options.
Backgrounds play the crucial part in web design. and We have designed this add-on to make that crucial part easy to decorate with latest design trends.
We have the variety of options which are in layers so You can achieve unlimited variations as per project's requirements.
Basic Concept of this add-on is to give depth to the background of each row and provide rich features to make websites more beautiful and interactive.
VIDEO TUTORIALS
Please take a look at basic plugin guide video from : https://www.youtube.com/watch?v=Bwq9FdoqezY or click here
Above video includes video tutorial of how layers will be in the backend and how many options are available for each one of them.
Please take a look at a demo backend video tutorial video from : https://www.youtube.com/watch?v=w2OiF71ifV0 or click here
Above video includes video tutorial of WordPress backend view of demos. By that, you will have the detailed idea about how to use different options to achieve some extraordinary look.
DEEP LAYER
DEEP LAYER
This is foundation layer of row with all classic and modern options.
Select Option
Select option for deepest layer of row.
1. Blank (This Layer will be disappeared.)
2. Solid Color
3. Gradient Color
4. Animated Background Color
5. Creative Background Image
6. Creative Background Video
7. Image Gallery with effects
A. Solid Color
Background color : Select a background color from unlimited options.
B. Gradient Color
First Color
Second Color
Gradient Style : Choose One gradient effect style from four beautiful options.
Opacity : Select opacity of Gradient color layer.
C. Animated Gradient Color
Multiple Colors : Add as many as you want colors from this box.
Animation Duration : Time interval between color change effect. Use values like 3000,5000, etc. That Number will be in milliseconds.
D. Creative Background Image
Upload Image : Directly upload or select image from media library.
Background Effect : Select Background Image effect from given options.
1. Normal Background Image
2. Auto Moving Background Image
D2.1. Direction : Choose direction of auto moving background image
D2.2. Transition Speed : Speed of background image transition . Use values like 30,50, etc.
D 1.1. Mouse Hover Parallax Style : Select Parallax style of background image. Which will make background image sensitive over mouse hover.
Background Size
1. Cover
2. Contain
3. Initial
Background Position
1. All options
Background Image Position
1. Normal
2. Fixed
E. Creative Background Video
Video Source:
1. Self Hosted
IE, Chrome & Safari support MP4 format, while Firefox & Opera prefer WebM / Ogg formats. You can upload the video through Wordpress Media Library and paste link of it here..
2. YouTube
Enter YouTube video ID
Enter YouTube ID from Youtube URL. Example – tSqJIIcxKZM
Extra Options
Loop :
Muted :
Place Holder Image : We highly Recommend to use Placeholder image Because Some older versions of browser and Some Mobile OS doesn’t support video backgrounds.
3. Vimeo
Enter Vimeo video ID
Enter Vimeo ID from Vimeo URL. Example – 67628182
Extra Options
Loop :
Muted :
Place Holder Image : We highly Recommend to use Placeholder image Because Some older versions of browser and Some Mobile OS doesn’t support video backgrounds.
F. Image Gallery with Effects
Upload Multiple Images : For Background Image Gallery, Upload Multiple images by drag and drop or using wordpress media library.
Transition Effects: Choose from Most innovative transition effects.
Texture Overlay : Some Textures to choose from for overlay of image gallery
Transition Duration : Enter the value in millisecond for transition duration of each slide. E.g. 5000,7000 etc.
MIDDLE LAYER
MIDDLE LAYER
This is the middle layer of our row section with lots of creative and unique options.
Select Option
Select option for Middle layer of row.
1. Blank (This Layer will be disappeared.)
2. Canvas Effects
3. Add Modern Mouse Hover Parallax Layer
4. Auto Moving Layer
5. Modern Image Effect
CANVAS Effects
Select Style of Canvas Effect
1. Style 1
Select Multiple Colors for this style from below:
Add Color
2. Style 2
Enter RGB color code value in below boxes, which will be used in this canvas style.
3. Style 3
Enter value of color below which will be used in Canvas Style.
4. Style 4:
Enter value of color below which will be used in Canvas Style.
MODERN MOUSE HOVER EFFECTS
Upload Multiple Image and Configure Simple Options
Upload Image
X- Position : Distance Of Image from X axis Read about this (Link new tab on : http://www.w3schools.com/cssref/pr_class_position.asp) Value will be between 0 to 100. E.g. 10,20 etc.
Y- Position : Distance of Image from Y axis Read about this (Link new tab on : http://www.w3schools.com/cssref/pr_class_position.asp) Value will be between 0 to 100. E.g. 10,20 etc.
Effect Intensity : This value define the intensity of mouse hover on media. Value will be between -100 to 100. Negative values leads to opposite directions. E.g. 30,-40,etc.
Image Width in Mobile Screens : Enter the value in numbers only. For E.g. 50,70, etc. We will use this in a pixel format. This width value take effect after screen size of 480 px.
Image Width in Tablet Screens : Enter the value in numbers only. For E.g. 50,70, etc. We will use this in a pixel format. This width value take effect after screen size of 768 px.
Auto Moving Layer
Upload Image
Direction : Choose direction of auto moving background image
Transition Speed : Speed of background image transition . Use values like 30,50, etc.
X- Position : Distance Of Image from X axis Read about this (Link new tab on : http://www.w3schools.com/cssref/pr_class_position.asp) Value will be between 0 to 100. E.g. 10,20 etc.
Y- Position : Distance of Image from Y axis Read about this (Link new tab on : http://www.w3schools.com/cssref/pr_class_position.asp) Value will be between 0 to 100. E.g. 10,20 etc.
Image Width in Mobile Screens : Enter the value in numbers only. For E.g. 50,70, etc. We will use this in a pixel format. This width value take effect after screen size of 480 px.
Image Width in Tablet Screens : Enter the value in numbers only. For E.g. 50,70, etc. We will use this in a pixel format. This width value take effect after screen size of 768 px.
Modern Image Effect
Upload Image
X- Position : Distance Of Image from X axis Read about this (Link new tab on : http://www.w3schools.com/cssref/pr_class_position.asp) Value will be between 0 to 100. E.g. 10,20 etc.
Y- Position : Distance of Image from Y axis Read about this (Link new tab on : http://www.w3schools.com/cssref/pr_class_position.asp) Value will be between 0 to 100. E.g. 10,20 etc.
Image Width in Mobile Screens : Enter the value in numbers only. For E.g. 50,70, etc. We will use this in a pixel format. This width value take effect after screen size of 480 px.
Image Width in Tablet Screens : Enter the value in numbers only. For E.g. 50,70, etc. We will use this in a pixel format. This width value take effect after screen size of 768 px.
Image Effects:
TOP LAYER
TOP LAYER
This is the Top Most Layer of your row background, Which helps to look your content better.
Select Option
Select an option for Top layer of row.
1. Blank (This Layer will be disappeared.)
2. Normal Color
3. Gradient Color
4. Texture Image
Normal Color
Select Color and Opacity : Select a background color from unlimited options.
Gradient Color
First Color
Second Color
Gradient Style : Choose One gradient effect style from four beautiful options.
Opacity : Select opacity of Gradient color layer.
Texture Image
Upload Image: This image will be on a repeat mode. Just upload small texture image. Check some texture options (Link to new tab on http://subtlepatterns.com/)
Opacity : Select opacity of Texture image color layer.
PLUGIN SUPPORT
First, please fully read the documentation carefully before asking for support.