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.
Creating Five Columns Layout
To create a row with five columns layout:
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.
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.
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.
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.
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.
Add your content into the first five columns and leave the sixth column blank.
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.
Go to the front end of your website and you will see the result of the five column layout using the six column trick.
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.
