Row is s template creating element which divides the page into logical blocks. A row can have inner row — option to insert row into row, —  and columns. Wrapping row has wider set of options, and option to put row inside. Both types of rows: wrapping row and inner row can be divided in to columns. For example: You can set 1/2 + 1/2 or 1/3+1/3+1/3 and any other various combinations. The most awesome option is possibility change the existing layout.

Default Visual Composer Row has two tabs: General and Design Options. Ultimate Addons for Visual Composer expands default row settings adding tabs: Background and Effect.

Column is inner block of row. Row can have both: inner row and column. Column can only hold an element. Column options  are:

  • you can change column widths in existing layout;
  • you drug and drop culums changing their location;
  • you can set different width of culumn, offset of culumn and visibility depending on device type;

Column has three tabs: General settings, Design options (the same as in a row) and Responsive options. Using Responsive options you can set any width, offset, visibility depending on device type.

Default Visual Composer Row has two tabs in settings: General and Design Options. Ultimate Addons for Visual Composer expands default row settings adding tabs: Background and Effect.

Backgoround Tab has a lot of duplicated options from General Tab, at the same time using Background Tab, you will get wider set of options for your background.  Effect tab has unique parallax  and other options. All the options are provided below. You can view result clicking buttons above.

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).

«Default» — the width or row  and content inside will be equal to default width of content;

«Stretch row» — the width of row will be full screen width, content width inside will be equal to to default width of content;

«Stretch row and content» — the width of row will be full screen (with padding if they are set), content width inside will be equal to full screen width;

«Stretch row and content (no padding)» — — the width of row will be full screen (without padding even if they are set), content width inside will be equal to full screen width;

Inner row does not have this option. 

Column gap Set gap between columns, all columns within row will be affected by this value. By default «0px» is set, hover you will find that your clolums have gaps. They are taken from Visual Composer General Settings.
Full height row Set row to be full height. Inner row does not have this option. 
Note: if content will exceed screen size then row will be bigger than screen height as well.
Columns position Default, Top, Middle, Bottom — this option is very important for full height rows
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 — this option is applicable only when «Column positon» is set to be «strech»
Note: Default value will be used top or other if defined within theme.
Use video background Set YouTube background for row. Inner row does not have this option. 
YouTube link Enter link to YouTube video to set it as row background.Inner row does not have this option. 
Note: YouTube video will overwrite background images and can be used with parallax effect.
Parallax Add parallax type background for row: None, Simple, With Fade (Note: If no image is specified, parallax will use background image from Design Options). Inner row does not have this option. 
Image Select image from media library for parallax.Inner row does not have this option. 
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. Inner row does not have this option. 
Row ID Enter row ID (Note: make sure it is unique and valid according to w3c specification).
CSS Animation Add animation to your element. Inner row does not have this option. 
Disable row (checkbox) If checked the row won’t be visible on the public side of your website. You can switch it back any time. You will find it very convenient when you need test your layout and determine the best way. You do not need delete and add row.
Extra class name Add class name in order to refer to this element in CSS.

Inner row does not have all the parameters which wrapping row has. In this case inner row inherits parameters of wrapping row and behaves as content.

Background Tab is avaliable provided Ultimate Addons
has been installed and activated.

SINGLE COLOR

Allows to set the background color which will overwrite one set in Design Options.

GRADIENT COLOR

  • Gradient Type
    • Vertical;
    • Horizontal;
    • Custom — degree field will appear to set custom gradient direction;
  • Corors

IMAGE/PARALLAX OPTIONS:

  • Parallax Style —
    • Simple Background Image;
    • Auto Moving Background;
    • Vertical Parallax on Scroll;
    • Horizontal Parallax on Scroll;
    • Interactive Parallax on Mouse hover;
    • Multilayer Vertical Parallax;
  • Background Image — Upload or select background image from media gallery.;
  • Background Image Repeat  —
    • Repeat;
    • Repeat X;
    • Repeat Y;
    • No Repeat;
  • Background Image Size — 
    • Cover;
    • Contain;
    • Initial;
  • Scroll Effect —
    • Scroll with the content;
    • Fixed in its position;
  • Background Image Posiiton — You can use any number with px, em, %, etc. Example- 100px 100px.
  • Background Override (Read Description);
  • Parallax Speed — Control speed of parallax. Enter value between 1 to 100 (Default 30)
  • Activate on Mobile
  • Animation Direction — 
    • Left to Right;
    • Right to Left;
    • Top to Botton;
    • Button to Top;

YOUTUBE VIDEO

  • Enter YouTube URL of the Video;
  • Extra Options checkboxes — 
    • Loop;
    • Muted;
  • Placeholder Image — Placeholder image is displayed in case background videos are restricted (Ex — on iOS devices).
  • Start Time
  • Stop Time
  • Play video only when in viewport
  • Background Override (Read Description)

HOSTED VIDEO

  • Link to the video in MP4 Format;
  • Link to the video in WebM / Ogg Format;
    • IE, Chrome & Safari support MP4 format, while Firefox & Opera prefer WebM / Ogg formats. You can upload the video through WordPress Media Library.
  • Extra Options checkboxes — 
    • Loop;
    • Muted;
  • Placeholder Image — Placeholder image is displayed in case background videos are restricted (Ex — on iOS devices).
  • Display Controls — Display play / pause controls for the video on bottom right position.
  • Play video only when in viewport
  • Background Override (Read Description)

Background Override (Read Description)

By default, the background will be given to the Visual Composer row. However, in some cases depending on your theme’s CSS — it may not fit well to the container you are wishing it would. In that case you will have to select the appropriate value from the drop-down appered in order to get desired output

Effect Tab is avaliable provided Ultimate Addons
has been installed and activated.
In order to enable Effects
select something except “Default”
in Background Tab

  • Easy Parallax — If enabled, the elements inside row — will move slowly as user scrolls.
    • Parallax Speed -Enter value between 0 to 100 (Default 30);
  • Fade Effect on Scroll — If enabled, the the content inside row will fade out slowly as user scrolls down.
    • Viewport Position, %  — The area of screen from top where fade out effect will take effect once the row is completely inside that area. (Default 30)
  • Enable Overlay —
    • Color — Select RGBA values or opacity will be set to 20% by default.;
    • Pattern — select;
    • Pattern Opacity,%  — Enter value between 0 to 100 (0 is maximum transparency, while 100 is minimum & default is 80);
    • Pattern Size, px — This is optional; sets the size of the pattern image manually;
    • Pattern Scroll Effect — Dropdown with options: move content or fix;
    • Pattern Scroll Effect — checkbox;
  • Hide Row —
    • Large Screen;
    • Desktop;
    • Tablet;
    • Tablet Portrait;
    • Mobile;
    • Mobile Landscape;

SEPARATOR

  • Type — 
    • Triangle;
    • Big Triangle;
    • Big Triangle Left;
    • Big Triangle Right;
    • Half Circle;
    • Curve Center;
    • Curve Left;
    • Curve right;
    • Tilt Right;
    • Tilt Left;
    • Round Split;
    • Waves;
    • Clouds;
    • Multi Triangle;
  • Positon — 
    • Top;
    • Bottom;
    • Top & Bottom;
  • Icon to dispaly —
    • Font Icon Manager
      • Select Icon;
      • Size of Icon, px;
      • Select color of icon;
      • Icon style: Simple, Square, Circle, Own Design;
      • Background Color;
      • Icon Border Style: Silid, Dashed, Dotted, Double, Inset, Outset;
      • Background Size;
    • Custom Icon 
      • Upload Image Icon:
      • Image Width, px;

Colum Setting have three tabs: General, providing Animation  options and CSS class field, Design options — the same as all the elements have and Resposive option.

The drop-down «Width» shows the current column width and allow to change it just by choosing another one. When you need set special options for different device types usee the Responsivness table.

Responsiveness table allows to set width, offset and visibility of a column for different screen sizes.