How to Use - Video & Parallax Backgrounds for WPBakery Page Builder

How to Use the Video & Parallax Backgrounds for WPBakery Page Builder?

This is a simple guide for users of WPBakery Page Builder and Video and Parallax Backgrounds plugin.

Step 1. Add New Page or Edit your existing page

Step 2. Go to Backend Editor

Step 3. In your Backend Editor, click on the Plus Button or Add Element. First, add a row

Step 4. When you add a Row, You can click the Plus Button in the Row to add our Plugin Components. Choose the options that you may find applicable

Step 5. Save your changes and Publish your work. Well done!

Creating a Parallax Background

Step 1. Proceed on the Basic Usage steps

Step 2. Choose Parallax Row Background. This will take you to the Parallax Background Settings:

Step 3. Make sure to add a Background Image and customize your Background Image Parallax for the direction you prefer. You can also customize more options. Further instructions of what each setting does are included in the settings.

Note: For best results, use images 1600 x 1200 or more to lessen the pixellation from stretching. Parallax Images have to be stretched in order to fill the scrollable space.

Step 4. Click on Save Changes. Note that a Background Image's size will always depend on the Row's content and padding. This will mean that you can resize it by adding more contents, empty spaces or padding to make the background look taller. The width will always depend on how much your theme allows it and how many columns it occupies. Alternatively, you can also add a Full-Width Row to expand the width, or Full-Height Row to stretch the background taller.

Step 5. Preview or Publish your Page to view the changes.

Creating a Video Background

Step 1. Proceed on the Basic Usage steps

Step 2. Choose Video Row Background. This will take you to the Video Background Settings:

Step 3. Make sure that your videos are hosted either in YouTube or Vimeo only. Add the Video URL. You can also customize more options. Further instructions of what each setting does are included in the settings.

Note: Video Backgrounds doesn't work in mobile and tablet browsers. Please use the Row Settings and insert a Background Image as a fallback when the Video Background isn't available. It is highly recommended to mute autoplay videos so that Safari doesn't automatically disable video autoplay.

Step 4. Click on Save Changes. Note that a Background Image's size will always depend on the Row's content and padding. This will mean that you can resize it by adding more contents, empty spaces or padding to make the background look taller. The width will always depend on how much your theme allows it and how many columns it occupies. Alternatively, you can also add a Full-Width Row to expand the width, or Full-Height Row to stretch the background taller.

Step 5. Preview or Publish your Page to view the changes.

Background Layering and Portions

Given the knowledge of using the plugin, you can also do some new tricks to create a more complex background using the plugin. Here's a guide on the other things you can do with the plugin.

Background Layering

Background layering is when you add Parallaxes, Video Backgrounds, Gradients, etc. together to create a cool and more elaborate background.

Step 1. Add all your Backgrounds that you want in the same container in one row.

Step 2. Proceed on putting them in order. Literally, the element that goes at the bottom of the row becomes the "back" background, while the top most element goes at the "front" background. Do note that this rule is only applicable with Parallax Image and Videos for background. Colors will always stay at the back.

Tips:

• You can use transparent PNG for Parallax to make an animating transparent image when you scroll. Make sure to put the render in the exact area of the Transparent PNG and make it so that the PNG is just at the same size as the background size you expect it to be. This is to assure that the render will be placed in the correct area.
• If you want to add a Gradient or Color Overlay for Video Background or Image Parallax, you can proceed by creating a Row Background or Gradient BG Color at the bottom part of the same row where you add the Image Parallax/Video Background. Then proceed on adding the element above the Gradient Background. The above element Image Parallax/Video Background's opacity needs to be changed. You can change their opacity via their settings.

Background Portioning

The Background Portioning is when you divide your row into columns to add a Background exclusively on one column only. This is a good way of dividing backgrounds, adding two or more in a column or constraining them in a certain width or area.

Step 1. Proceed to the row where you want your backgrounds to be and divide it in amount of columns preferred.

Step 2. Add an Inner Row within the same row and add your background/s inside the Inner Row.

Notes:

• Please do note that adding a Full-Width Row or setting your inner row into Full-Width will result in overriding the portions. Please disable the Full-Width if you intend to divide your row backgrounds.