“Row“ is the main content element of 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 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).

 

General Options

 

Param name
Description
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 Set gap between columns, all columns within row will be affected by this value.
Full height row Set row to be full height.
Note: if content will exceed screen size then row will be bigger than screen height as well.
Columns position Set columns position for full height row – Top, Middle, Bottom.
Note: active only if “Full height row” is selected.
Equal height Set all columns to be equal height.
Note: all columns will have 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 theme.
Use video background Set YouTube background for row.
YouTube link Enter link to YouTube video to set it as row background.
Note: YouTube video will overwrite background images and can be used with parallax effect.
Parallax Add parallax type background for row (Note: If no image is specified, parallax will use background image from Design Options).
Image Select image from media library for parallax.
Note: active only if “Parallax” effect is chosen.
Parallax speed Control parallax effect speed with 1.5 value set as default. For traditional parallax effect 1.0 is the minimum value.
Note: active only if Image or Video parallax effect is enabled.
Row ID Enter row ID (Note: make sure it is unique and valid according to w3c specification).
CSS Animation Add animation to your element.
Extra class name Add class name in order to refer to this element in CSS.
Design Options Control borders, background and other styling options.

 

Design Options:


 

Param name
Description
CSS box This is layout for row section, you can add padding, margin, border.. for row to make it fit to your design.

  • Margin: there are 4 boxes to enter the margin for row, this option allow you make your section smaller if you use margin-top: – 30px and margin-bottom: -30px
  • Padding: there are 4 boxes to enter the padding for row, this option allow you make your section bigger if you use padding-top: – 30px and padding-bottom: -30px
  • Border:  there are 4 boxes to enter the margin for row, this option allow you make the border for the row, if you use border-top: 3px and border-bottom: 3px
Border color Select color for border
Border style Select style for border
Border radius Select the size of border radius
Background On this option, you can select color or upload image for row section. Continue select the Style of background: Cover/ Contain/ No Repeat/ Repeat
Box controls