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 the 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.
Visual Composer comes with the option to set rows, columns, and sections as sticky. Sticky option means that container (with all the content inside) will stay fixed at the top of the page and will be always visible to the visitors.
The sticky row option can be used to create a sticky menu, ‘Call to Action’ buttons or dynamic layouts (presentations) by highlighting a part of the content. To access the sticky options:
- Open row, column, or section edit window;
- Navigate to the ‘Sticky’ section;
- Enable stickiness toggle.
Visual Composer will automatically display parameters available to control/adjust container stickiness:
- Margin-top: control the space from the top (in pixels) where container becomes sticky;
- Z-index: control depth of the element to set it either on top or below following containers;
- Relate to parent: apply sticky option only within a parent element (ex. if you set sticky row in section and enable this toggle, the sticky row will work only within the section);
- Show on sticky: element will be displayed only when it becomes sticky (ex. create ‘Call to Action’ buttons that appear only when you scroll down to the certain point of your site.)
The sticky row option is a very powerful tool that can be used for various purposes, like improve user experience, create dynamic layouts, increase conversion, and generate leads.
By using sticky row, you can create various types of design (ex. sticky header).