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


Creating Five Columns Layout

To create a row with five columns layout:

1
Add a new page or edit an existing page.
2
From the WPBakery Page Builder screen, click on the + button.
3
In the Add Element pop-up screen, search for Row and click on it to be added to the page.
4
When the shortcode is added, a new pop-up screen called Row Settings will open that allows you to configure the shortcode settings.
5
Close the settings for now. Change the row layout to five columns by hovering and selecting the number of columns.
6
Publish or update the page to check the result.

Manually Creating 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.

Manually Creating 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?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket