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.

 

  1. Create 6 columns in a row.
  2. Click on the pencil icon to edit and add five-columns class name.
  3. Add your content to five columns and Update your page.
  4. Now add the following css using Theme Options or Customizer css editor if your theme support or have that option. Otherwise you will have to add it to your stylesheet.
@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.

Muhammad Zohaib

Hello, I am a Web Developer who loves building, editing and extending WordPress themes and plugins ;-)

2 thoughts on “How To Create 5 Columns in WPBakery Page Builder (Formerly Visual Composer)

  1. 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

    @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;
        }
    }
    1. 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.

Leave a Reply

Your email address will not be published.