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

Create your layout with the help of rows and columns in WordPress

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

Layout with two columns placed inside a single row

To edit Row Layout:

  1. Open the Edit window of row or select Row Layout in the row element control drop-down
  2. Navigate to Row Layout section
  3. Select values from predefined option or enter custom values

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

Row Layout option allows following values to be added:

  • Percentage
  • Fraction
  • Auto value

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

Note: Whenever you will use Add Column option in row element controls drop-down, it will automatically add new Auto value to your Row Layout.

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 less than 100%, it will leave empty space within 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

Column resize option with live preview and simple drag and drop functionality

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

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

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.

Responsive column and content stacking in WordPress

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.