How to Add 5 columns layout in Visual Composer


Method 1: Use Custom VC Column Layout
Method 2: Create 1/12 + 2/12 + 2/12 + 2/12 + 2/12 + 2/12 + 1/12 columns then leave the first and last empty.
Method 3: This one is a bit complicated and requires a bit understand of CSS. The idea is to create 6 columns, gives the first 5 columns the widths of about 20%, then hides the sixth column.
Step 1: Create a row and give it a class home_row
Step 2: Create 6 columns and assign a class to the last one: home_row_sixth
Step 3: Edit the width of each column
.home_row .vc_col-sm-2 {
width: 20%;
position: relative;
}
Step 4: Hide the sixth column
.home_row_sixth {
visibility: hidden;
width: 0px;
padding: 0px;
}
Step 5: Make sure it is responsive
@media only screen and (max-width: 768px){
.home_row .vc_col-sm-2{
width: 100%; }
}

Advertisements

7 thoughts on “How to Add 5 columns layout in Visual Composer

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s