Posted on by WP Brain Box

Nested Rows within the Visual Composer Columns

Nested Rows within the Visual Composer Columns

Get a copy of the transcript of this guide (pdf)

nested-rows-within-visual-composer-columns

Use the back-end editor of the Visual Composer

nested-rows-within-visual-composer-columns-1

Embedding a row within a column is very useful if you need to subdivide a column but you don’t really want to break it out. Let’s try to add a row inside a column. To do that, let’s use the back-end editor of the Visual Composer. It is much easier to do this in the back-end than in the front-end because you can see where the rows and columns are much more likely.

To add a row in a column, click on the + icon to add an element.

Select the Row element

nested-rows-within-visual-composer-columns-2

We will be presented with the Add Element box after clicking the + icon. To add a row element, select on Row. If you’re having a hard time looking for the row element, click on the Content tab to filter out some of the elements.

Select the 1/3 + 1/3 + 1/3 row layout

nested-rows-within-visual-composer-columns-3

After adding the row element, we have now our row embedded inside the column. Let’s have the layout of our embedded row into 1/3 + 1/3 + 1/3 columns.

Add an image in each column

nested-rows-within-visual-composer-columns-4

Let’s add an image in each of these columns. After adding an image, let’s preview our changes by clicking on Preview Changes.

Output

nested-rows-within-visual-composer-columns-5

Now, as you can see, the images are neatly presented inside the row that we have embedded.

Add other images to the other columns

nested-rows-within-visual-composer-columns-6

Let’s try to add other images in different columns then let’s preview our changes.

Output

nested-rows-within-visual-composer-columns-7

The images that we added inside those columns are still neatly presented. This is a really good way of having a varied number of columns.

Having a row with different columns

nested-rows-within-visual-composer-columns-8

It is impossible for us to have a row with 7 columns. WordPress does not support column formats like seven 1/14.28 just to have a row with seven equal columns. So, in order to have a row with seven columns, first, let’s add a row with 2 columns or in ½ + ½ layout. Afterward, in our first column, let’s embed a row and have that row with 3 columns or in 1/3 + 1/3 + 1/3 layout. In our second column, let’s embed a row with 4 columns or in ¼ + ¼ + ¼ + ¼ layout. That’s how we can achieve a row with 7 columns and that’s the real purpose and use of an embedded row.