How to Create Five Columns Row in WPBakery Page Builder

Last Updated on

This article gives details on how to create five columns row in WPBakery Page Builder while using Artbees themes including Jupiter and The Ken.

There are two ways of creating a five column row, and in this article both are explained.

In this article


Five Columns Layout – First Approach

WPBakery Page Builder is based on a Twelve Column grid system for each row and layout. That is why it is not possible to have five columns using the graphical user interface by default to create a five column row. To achieve such a layout some extra customization is needed which we will give detailed steps to do so in the following section.

1
Add a Row or Page Section.  

Five Columns

Create a new page in the WordPress Admin section and use the WPBakery Page Builder graphical user interface to add a Row or Page Section shortcode.

Five Columns

2
Open up the Options Panel.  

Click on the Pencil icon of the Row or Page Section top show the options panel of those elements. Scroll down to the bottom of the options list.

 

3
Add Extra Class Name.  

Find the Extra Class Name option and add the class below:

five-columns

After that click on the Save Changes button to save the Extra Class Name.

Five Columns

4
Add a Six Column Layout.  

Use the Add Columns button at the top left section of the Row or Page Section element to add a Six Column layout. This is the standard way of adding columns in a Row or Page Section using WPBakery Page Builder. For more detailed information click here.

 

5
Add Content.  

Add your content into the first five columns and leave the sixth column blank.

 

6
Add the Custom CSS Code.  

Go to Theme Options > Advanced > Custom CSS in Jupiter or Theme Settings > Custom CSS in The Ken and add the code below:

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

Save the Theme Options in Jupiter or the Theme Settings in The Ken.

7
Check the Results.  

Go to the front end of your website and you will see the result of the five column layout using the six column trick.

 

x
Note: After you do the steps mentioned above you will be able to add the Five Column layout anywhere on your website by adding the five-columns Extra Class Name to the Row or Page Section you want to have the layout in.

Five Columns Layout – Second Approach

Since WPBakery Page Builder 4, you can easily add custom layout in each WPBakery Page Builder row. As you want to add a row which only contains five columns, you can do as follow with WPBakery Page Builder custom columns:

In the “Enter Custom Layout For Your Row” input field, add the below layout and hit update:

1/6 + 1/6 + 1/6 + 1/6 + 1 /6

Your row should look like this now:

 

Open the first column settings, and switch the tabs to “Width & Responsiveness”, then set the offset for three first devices to 1 column:

Your row should look like this now:

If you needed to remove the extra margins created with this approach, simply add “the_five_custom_columns” CSS class to the row settings in Extra CSS field and this CSS fix in Jupiter > Theme Options > Advanced > Custom CSS:

@media screen and (min-width: 768px) {

    .the_five_custom_columns {margin: 0 -5%; }

}

If you experience any issues with five columns styling or have any questions, please contact our support team creating a ticket via your Artbees Dashboard.

Was this helpful?

Related Forum Topics

There is no related forum topic

Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket