What's the best way to manage inconsistent width of sections in a theme, especially if you use Visual Composer?

Envato Authors Theme Authors
1

Ok, since title might sound confusing I’ll try to explain :slight_smile:

On most new type of themes there is inconsistent width of the sections on a page.

So you might have your content something like this:

header/menu

1200px fixed width section

100% full width section

1200px fixed width section

1200px fixed width section

100% full section

1200px fixed width section

footer

If you look at the most themes today, they are like that, it’s basically a nice concept.

How do you guys manage this in your theme? What’s the best practice to give customer easy option to add fixed or full-width section, whichever they choose?

And same question for those using Visual Composer too…
Since Visual Composer always use the width you set in your css for a row… For example if you set your wrapper/page width to 1200px Visual Composer row will take that space. If you set it to 100% row will be 100%.
So to make inconsistent width sections I guess you have to start with 100% width in your css, and then for boxed sections you have to tell Visual Composer that this section should be max 1200px. But Visual Composer by default doesn’t have an option to set section width ( or maybe I’m really blind :slight_smile: ).

I hope someone understands my question. It’s basically a general question about how to manage sections in your theme if you want to use both boxed and full-width sections on the same page :slight_smile:

Thanks,
bojs

2

For page width 1200px/100% I use modified metabox plugin included with theme.

3

By default visual composer does not support full widths. You may have to override default row element.

  • Make your wrapper 100%.
  • Copy row element to your theme and modify it to add container (e.g : 1170px )
4

Since I use bootstrap 3 I add the select box to the VC row options for the user to select boxed or full width and than based on their selection I add container-fluid ( full width ) or container ( boxed ).