Visual Composer gives you an option to manipulate with row container properties and instantly affect all the columns it contains. With few clicks, you can control row/column width, gaps between columns, column and content position, and more.
Row and Column Width
By default, row width is defined by your WordPress theme and aligned to the content area. Yet, sometimes you want your row to be the full width of your browser screen (ex. you want to have a featured image with ‘Call to Action’ block).
In Row element controls (select edit row) you can see Row width with following options:
- Boxed: default value when row and column align to the content part of your WordPress theme;
- Stretched Row: Row will be the full width of your browser screen, while columns will stay aligned to the content area (ex. background image of the row will be full width, while a title in the column will be boxed);
- Stretched Row and Column: Row and all columns in a row will be full width (ex. hero section in stretched row and column will be the full width of your browser screen).
Column gap allows you to control space between columns within a row. You can control a gap between all columns in a row via row options.
The default value of the gap between columns is 30, yet you can insert any number to change it. If you want to remove space between columns, simply enter 0 in column gap value.
Full Height Row
Full height option allows you to make any of your rows to be the full height of your browser screen. This means that the minimum height of your row will be the full height of the screen and increase if there is more content that the height of the screen.
You can use full height option if you want to ensure that only one row is visible at the time to remove distractions (ex. hero image row with ‘Call to Action’ title and button).
Once you set your row to be full height, you will have an option to control column vertical position within this row. By default, all columns have a vertical position: top. Yet, sometimes you may need to place content in the middle or bottom of your row, or set columns to be the full height of the browser screen as well.
To summarize, there are following column positions available for the full height row:
- Full height
Note: the first row of your layout may have a bit smaller height value as it will reserve space for the header part of your WordPress theme. The result is that once you start to scroll down, the next row of your layout will appear.
Column Equal Height
Column equal height option allows you to set all columns within a row to be of equal height. The height will be calculated automatically by aligning to the tallest column in a row. To use equal height column, simply enable Equal height column toggle control in row options.
You can use equal height column, for example, to fill columns with the background color and ensure that all columns have the same height to have a beautiful layout design.
Content Position in Column
Visual Composer allows you to control content vertical position within columns of a certain row directly from the row options. There are following content positions available:
- Top (default)
Note: It is recommended to combine this option with Column equal height toggle in order to ensure that all content within all columns will be aligned vertically according to your preferences.