Nested Rows within the Visual Composer Columns

Nested Rows within the Visual Composer Columns

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


Use the back-end editor of the Visual Composer


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


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


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


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



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

Add other images to the other columns


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



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


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.