Change the Number of Columns in a Row with Visual Composer
Get a copy of the transcript of this guide (pdf)
Visual Composer columns
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
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
There you have it. The ¼ + ½ + ¼ column combination.
Custom layout
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
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
Now, we’ve got our ¼ + ¼ + ½ customized layout.