Grid Layout: Row and Column

Row and column are at the very core of Visual Composer Website Builder element hierarchy. You can use row and column elements to create your initial structure via row/column containers and fill it with other content elements.

Note: It is allowed to insert row/column elements into another row/column elements for the creation of complex layouts.

Upon adding a row to your layout, it will automatically contain a column element in the full width of the row. It is possible to control number and sizes of columns within a particular row via Row Layout control.

It is important to understand that row controls and parameters are related to the whole container and can be applied to multiple columns at the same time (within the same row).

Example: You can access row element controls and set all columns within this row to be equal height or control gap between columns. At the same time, you can access column controls to interact with the exact column and it will not affect other columns within the same row.

In comparison to other content elements, row and column elements have advanced Design Options available with more control over container style and effects.

Row Layout (Number of columns)

You can control the number of columns within a row by editing Row Layout of a particular row.

To edit the Row Layout:

  1. Open the Edit window of row (use element controls Edit option);
  2. Find the Row Layout section;
  3. Select values from the predefined option or enter custom values.

Row grid layout control in Visual Composer Website Builder with reverse stacking option

Row Layout option allows the following values to be added:

  • Percentage;
  • Fraction;
  • Auto value;
  • Hide.

By default, you will see the Auto value which means that column strives to be 100% of row width. If you will have 2 Auto values this means that both columns will strive to fit into 100% with - the result will be 2 equal columns (the same principle works with more Auto values).

It is allowed to set percentage and fraction values, and even mix them together to create rows with several columns, each sized differently.

Example: If you enter 70%, 30% in the Row Layout, you will have a row with 2 columns where the first column will take 70% of the width and second will be 30% of the width.

Note: It is allowed to have an overall sum of the Row Layout above or below 100% (or 1, if you use fraction). If you will have a total value of less than 100%, it will leave empty space within a row container. If your total value will be above 100%, part of the columns will be stacked to the next line, but will still remain in the same row.

Column Resize

It is also possible to resize columns via the Resize control mechanism on the Frontend editor:

  1. Hover the row of your choice;
  2. Move the mouse cursor between (at any point) two columns you want to resize;
  3. Resize control will appear;
  4. Click and hold the mouse;
  5. Swipe to the left or right to resize columns;
  6. Release the mouse for resizing to take effect.

Within the column resizing interface, you can see the values of your existing columns displayed as percentages.Visual Composer new column resizing interface

Column Stacking (Responsiveness)

Visual Composer Website Builder automatically takes care of your mobile layout and perform column stacking one under another when the width of the screen is mobile friendly.

Example: If you have a row with 2 equal columns (50%, 50%) on a mobile second column will go under the first one and both columns will be full width to fill row container.

By default, the stacking takes place from left to right, meaning left columns will stay on top, while right columns will be relocated under each other one by one. Yet, there are cases when you need to perform reverse stacking, meaning right columns should stay on top. In such case, you will need to use Reverse stacking toggle in Row Layout and set it to ON.

Disable Column Stacking

With Visual Composer, you can disable column stacking for any of the rows in your layout. If you feel that your layout required more than one column on mobile devices, simply select to edit Row Layout and disable column stacking for this row by switching toggle Disable row stacking to ON.

Disable column stacking in row on mobile with Visual Composer.

Custom Responsiveness Settings

Visual Composer allows you to control/adjust responsiveness via Custom Responsiveness Settings toggle. Custom Responsiveness Settings allows you to control every single column on separate devices independently or even hide columns on certain device types.