Create a Single Wide Column with WP Bakery Page Builder
Latest update: February 4, 2019 | Reading time: 2 to 3 minutesThe Single Wide Column in the Middle is very popular among designers and, can be easily accomplished with WP Bakery Page Builder (previously branded as Visual Composer) which is by default included with any one of the Plethora Themes.
The feature is demonstrated in various pages. We will take as an example the Contact Page of Hotel Xenia main Demo but note that, this info is applicable to any website using Page Builder. On this page, we see that a text block is centered (the one that is placed under the map) and the content is limited inside a specific area.
https://dev.plethorathemes.com/support/hotel-xenia/contact/
You can see that the rest of the content captures all the screen area. This is exactly a case of a Single Wide Column in the Middle. The first thing that comes in mind is, the row has a custom layout of 1/6 + 2/3 + 1/6. Right?
This is the row as it appears with the above layout:
Indeed, you can achieve this layout with those settings but, there is one problem: you still have two more columns to deal with, one at the left and, one at the right of the column. Those columns may interfere with the rest of the design, so, we’d better get rid of them.
The best way to achieve the requested layout is by using two different settings on the Column: first, Add a New Row with a single column. Then go to the Column Settings tab and, set Width to 8 columns – 2/3
Then, roll down a bit and, set a value of 2 columns – 1/6 for middle-sized screens. and, save changes.
Now, if you check the layout it should be like that (real configuration as applied in the demo page):
And the front end will look like exactly like this:
This configuration is useful when you need one single responsive column in the middle of the screen that, appears as a single wide column in the large screens but, can adapt to medium and smaller devices without issues.
The concept is based on Bootstrap Framework Grid which divides the screen into 12 columns. For more information about Bootstrap CSS Grid System follow this link. For more information on WP Bakery Responsive Layouts follow that link.