How To Create 5 Columns in WPBakery Page Builder (Formerly Visual Composer)
WPBakery Page Builder is very popular and there are many theme that includes it. For the time being it does not support 5 columns by default, so if you want to achieve 5 columns layout just follow the steps below.
- Create 6 columns in a row.
- Click on the pencil icon to edit and add
five-columnsclass name. - Add your content to five columns and
Updateyour page. - Now add the following css using
Theme OptionsorCustomizercss editor if your theme support or have that option. Otherwise you will have to add it to your stylesheet.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@media screen and (min-width: 768px) { .five-columns.vc_row .vc_col-sm-2 { float: left; width: 18.5%; padding: 0; margin-right: 1.5%; min-height: 0; } .five-columns.vc_row .vc_col-sm-2:nth-last-child(2) { margin-right: 0; } } |
Update:
WPBakery Page Builder supports 5 columns by default now. Just add 1/5 + 1/5 + 1/5 + 1/5 + 1/5 in custom Row Layout.
This is an elegant solution for a five column layout however it does not render well responsively on iPhone.
Do you have a solution?
Thanks!
Larry
Hi Larry,
This blog post was meant for an older version of WPBakery Page Builder. I just tried and it supports 5 columns by default now. I am updating the post.