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.

Rearrange Columns and Elements in Visual Composer

Rearrange Columns and Elements in Visual Composer

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

rearrange-columns-and-elements-in-visual-composer

Back-end editor of Visual Composer

rearrange-columns-and-elements-in-visual-composer-1

Rearranging elements and rows and columns in Visual Composer is one of the great features which makes reconfiguring the layout of a page very simple. I find it easier to do from the back-end editor than the front-end because you can see the structure of the page more clearly.

Let’s have this page as an example. Our page got three columns and each column contains two elements in it. The current layout of the row in 1/3 + 1/3 + 1/3 structure.

Rearrange a column

rearrange-columns-and-elements-in-visual-composer-2

Let’s rearrange this page wherein all the columns that contain an image be placed on the right side. To do that, we need to drag the first column next to the second column. This will automatically place the second column to the first column. Now, this gives our first column a space in the middle column and drop it. To see our changes, click on Preview Changes.

Before editing the first column

rearrange-columns-and-elements-in-visual-composer-3

This is what the page looks like before we transferred the first column to the second column.

After editing the first column

rearrange-columns-and-elements-in-visual-composer-4

After editing, you can see now that the images are already placed next to each other. The neat part about this is that you don’t have to do any recoding. You can just move the columns to where you want to go. The same is true for the elements on the page.

Let’s go back to our back-end editor.

Edit the elements of a column

rearrange-columns-and-elements-in-visual-composer-5

So, if I decide to put the headers above the image on both of these columns, I can just drag the heading element up. All you need to do is to click and hold the header then drag it up and drop. The text image element will automatically slide down once you drag the heading element up.

To see our changes, click on Preview Changes.

Headers are now placed above the images

rearrange-columns-and-elements-in-visual-composer-6

Now, the headers are already placed above the images. It’s really quite simple.

Let’s go back again to our back-end editor.

Important reminder

rearrange-columns-and-elements-in-visual-composer-7

You just have to be careful when you are moving an element around. You need to watch where it’s dropping into because you might get into trouble finding the element you dropped. You might end up seeing it placed in a different column or whatsoever.

You can drag and drop an element like dragging and dropping an icon in your desktop.

Change the Number of Columns in a Row with Visual Composer

Change the Number of Columns in a Row with Visual Composer

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

changing-the-number-of-columns-in-a-row-with-visual-composer

Visual Composer columns

changing-the-number-of-columns-in-a-row-with-visual-composer-1

Columns are one of the great features of Visual Composer. As you can see in the image above, we’ve got one row and three separate columns.

Now, if we hover over the column editor, highlighted in the red box, you can see that we’re already on the three columns which give us 1/3 + 1/3 + 1/3.

There so many possible combinations of columns using Visual Composer. These are some of the possible combination of columns in Visual Composer:

  • 1/1
  • ½ + ½
  • 2/3 + 1/3
  • 1/3 + 1/3 + 1/3
  • ¼ + ¼ + ¼ + ¼
  • ¼ + ½ + ¼
  • ¼ + ¾
  • 3/4 + ¼
  • 1/6 + 1/6 + 1/6 + 1/6 + 1/6 + 1/6
  • and so many other combinations to choose from

¼ + ½ + ¼ column combination

changing-the-number-of-columns-in-a-row-with-visual-composer-2

Let’s try to have our columns in ¼ + ½ + ¼ combination. As you can see, both first and last columns got narrower while the center column got wider. Let’s preview our changes. To preview our changes, click on the Preview button indicated in red arrow.

¼ + ½ + ¼ column combination preview

changing-the-number-of-columns-in-a-row-with-visual-composer-3

There you have it. The ¼ + ½ + ¼ column combination.

Custom layout

changing-the-number-of-columns-in-a-row-with-visual-composer-4

With Visual Composer, you can also customize your column layout. To create your own custom layout, click on the Custom Layout highlighted in the red box.

Row layout box will pop-up

changing-the-number-of-columns-in-a-row-with-visual-composer-5

So, instead of having a ¼ + ½ + ¼ combination, you want it ¼ + ¼ + ½ combination. So to customize your layout, enter the combination that you wanted in the “Enter custom layout for your row” textbox. After typing your desired combination, click Update. In the image above, after clicking Update, the columns were already in your desired layout.

To preview our changes again, click on Preview Changes.

¼ + ¼ + ½ customized layout

changing-the-number-of-columns-in-a-row-with-visual-composer-6

Now, we’ve got our ¼ + ¼ + ½ customized layout.