1. In Visual Composer mode, click on Add Element and add row.
2. Hover your mouse on the column icon and choose 6-column.
3. Add your content on the 5 columns and let the 6th column to be empty or blank.
4. Click on edit row icon.
5. Add an extra class name (ex. home_box_wrap). This class will serve as a CSS target element in overriding the default style of the columns.
6. Go to Appearance > Editor and add the CSS codes below:
.vc_responsive .home_box_wrap.wpb_row .vc_span2 {
float: left;
width: 18.8%;
padding: 0;
margin-right: 1.5%;
min-height: 0;
}
Note: “.vc_span2” targets the individual column of the 6-column layout but you have to
include the primary wrapper of that VC row which is the “.home_box_wrap.wpb_row” and
also the “.vc_responsive” which is one of the “body” tag classes to effectively override the default styles.
7. Click on edit column on the 5th column and add an extra class on the 5th column, example (ex. home_box_last).
8. Go back to Appearance > Editor, then add this CSS snippet to have an evenly distributed column width.
.home_box_wrap .home_box_last {
margin: 0 !important;
}
9. Click on the full width box under canvas custom settings to extend the row of the entire page.
10. Publish or update it and the expected output should be like this:
Please watch the video tutorial below that will walk you through on the process of creating the 5-column layout.