Visual composer 5 columns layout

#1

Anybody know how I can do it ?

THX

#2

Worked like a charm. I can now easily add a 5 column layout.

#3

I take it back. It works in the backend, but the front end is messed up. I’m using the7 theme.

Bummer.

#4

After some time, found a simple solution:

  • Edit Row Layout
  • Custom
  • 1/12 + 2/12 + 2/12 + 2/12 + 2/12 + 2/12 + 1/12


    Leave the first and last empty, and you have 5 column layout.
19 Likes
#5
jaclerigo said

After some time, found a simple solution:

  • Edit Row Layout
  • Custom
  • 1/12 + 2/12 + 2/12 + 2/12 + 2/12 + 2/12 + 1/12


    Leave the first and last empty, and you have 5 column layout.

This works perfectly - I tried both the previous methods I found including the plugin, but neither worked.

Thanks for sharing

5 Likes
#6

That’s great, works well…

1 Like
#7

One more solution https://artbees.net/themes/docs/five-columns/

1 Like
#8

This is the best solution of all, however you need to include some media queries as with this approach it breaks on tablet and phone.
@media only screen and (min-width: 768px) {
.five-columns.vc_row .vc_col-sm-2 { float: left; width: 18.8%; padding: 0; margin-right: 1.5%; min-height: 0; }
.five-columns.vc_row .vc_col-sm-2:nth-last-child(2) {
margin-right: 0;
}
}

1 Like
#9

This worked for me - follow these instructions https://artbees.net/themes/docs/five-columns/37

but use WhaleAgency’s css:

@media only screen and (min-width: 768px) {
.five-columns.vc_row .vc_col-sm-2 { float: left; width: 18.8%; padding: 0; margin-right: 1.5%; min-height: 0; }
.five-columns.vc_row .vc_col-sm-2:nth-last-child(2) {
margin-right: 0;
}
}

#10

Worked like a charm

1 Like
#11

It Worked for me. Thanks a lot

1 Like
#12

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

#13

Hi,

you have any idea how to create 7 column row layout in visual composer?

thanks

#14

Hi,

I just found a solution to create 7 columns.

If you don’t care about the columns being aligned left, you can type:

  • 1/12 + 1/12 + 1/12 + 1/12 + 1/12 + 1/12 + 1/12

in Edit Row layout -> Custom.

If you want the columns to be aligned center (like I did), I found this solution:

  • create 1 row and divide it into 3 columns,
  • insert 1 row in each one of the 3 rows and divide all of them into 3 columns,
  • now that you have 9 columns, enter your elements only in columns 2, 3, 4, 5, 6, 7 and 8, leaving column 1 and 9 empty.

Hope it helps! :slight_smile:

#15

Awesome, thanks!

#16

1/12 + 1/6 + 1/6 + 1/6 + 1/6 + 1/6 + 1/12
copy and paste

1 Like
#17

Great! That code above works for me. (1/12 + 1/6 + 1/6 + 1/6 + 1/6 + 1/6 + 1/12)

#18

So the @Media method just does not work at all.

The other CUSTOM Row methods so not go edge to edge of the main layout. How is it so hard to have 5 columns? Is this a WP Bakery limitation?

#19

Nowadays all are dependent on the business. So most of the people they do it and try to find new. I read the quiestion it was great for all. I have the best suggestion for all people. All people they get all the things from here.
Asus router support

#20

Best solution! :heart_eyes::heart_eyes::heart_eyes: