Intro

The theme comes with a number of shortcodes allowing you to add the info where you want the relevant content to show up. In addition, you can use WPBakery Shortcodes to add new elements to the page in a simple way:

1. Create a new page;

2. Press "Backend Editor";

3. There you can select which you want to add to your page("Add Element", "Add Text Block", "Add Template");

Add Element. There you can look at all our theme shortcodes, which are available through the WPBakery Page Builder interface. The full list of elements (shortcodes):

Add Text Block. This option allows you to insert paragraph type text and format it using WYSIWYG editor. Moreover, text block allows adding media(images and videos):
Add Template. There you can select the template which you want to add to your page(you can look at these templates, images will show how will look these templates on the page) :

If you select some short-code which you want to use on your page, you will have to press of this short-code. Ater that this short-code will be added to your page:

There you can set up your short-code. Also on the page, you can set up rows and columns.

“Row“ is the main content element of WPBakery Page Builder (formerly Visual Composer).

Rows are used to divide your page into the logic blocks with columns, columns later will hold your content blocks. Rows can be divided into the layouts (eg. 1/2 + 1/2, 1/3 + 1/3 + 1/3, and so on). Your page can have an unlimited number of rows.

To change row’s position, click and drag row’s drag handler (top left row’s corner) and drag row around (vertical axis).

Add column. This option allows ad one more column on your page:

Toggle row. This option allows "exclude" the row:

Edit this row. This option allows to set up the row, which you want.

General.

Row stretch. Select stretching options for row and content (Note: stretched may not work properly if parent container has “overflow: hidden” CSS property).
Column gap. The set gap between columns, all columns within the row will be affected by this value.
Full height row.Set row to be full height.Note: if the content will exceed screen size then the row will be bigger than screen height as well.
Equal height.Set all columns to be equal in height.Note: all columns will have the same height as longest column.
Content position.Set content position within columns – Default, Top, Middle, Bottom.Note: Default value will be used top or other if defined within the theme.
Use video background. Set YouTube background for the row.
Parallax. Add parallax type background for row (Note: If no image is specified, parallax will use background image from Design Options).
CSS Animation. You can select the type of animation for the element to be animated when it "enters" the viewport of the browser (Note: works only in modern browsers).
Row ID. You can add the ID to your row. The ID attribute specifies a unique id for an HTML element.
Disable row. There you can select the option where the row won't be visible on the public side of your website. You can switch it back any time.
Extra class name. This option allowsto set up style particular content element differently - add a class name and refer to it in custom CSS.
Enable Ovarlay. This option allows Enable Ovarlay on your page.

Design Options.

Design Options allows you to add additional or modify existing styling of the content elements by applying most common style properties and effects.

CSS box. This option allows you are able to control paddings, margins, border, and radius.
Border color. This option allows the select color of the border.
Border style. This option allows the select style of the border.
Border radius. This option allows the select radius of the border.
Background. This option allows setting different types of background images.
Box controls. This option allows the select controls.

Responsive Margins and Paddings.

This option allows changing padding/margin for particular rows, columns and other elements on the different desktops and devices.

Delete row. This option allows deleted the row.