Column Settings in WPBakery Page Builder

In this article we will talk about Column Settings in WPBakery Page Builder. We will give detailed information about the responsive options available in column settings. For more information about WPBakery Page Builder click here.

---

Column Settings

You can add columns for the Row and Page Section shortcodes in WPBakery Page Builder. The width of the columns can be set proportionally by small chunks adding up to 12 count. (to find out more about why 12 columns, please check this out) Each Column then has separate options available which you can use to fine tune different aspects of it. You will need to click on the Pencil icon for the specific column you want to change. The following is a detailed breakdown of each option for columns in WPBakery Page Builder.

General Tab

Use this option to set the color of the surrounding border for this particular column.

Use this option to set the blend mode you prefer for the background of this column. Available options are:

1. None
2. Multiply
3. Screen
4. Overlay
5. Darken
6. Lighten
7. Soft Light
8. Luminosity

Use this option to hide the column when viewed by devices with a certain width. Available options are:

1. All
2. Hidden on Phones (Screens smaller than 765px)
3. Hidden on Tablets (Screens in the range of 768px and 1024px)
4. Hidden on Mega Tablets (Screens in the range of 768px and 1280px)
5. Hidden on Desktops (Screens wider than 1224px)
6. Hidden on Mega Desktops (Screens wider than 1290px)
7. Visible on Phones (Screens smaller than 765px)
8. Visible on Tablets (Screens in the range of 768px and 1024px)
9. Visible on Mega Tablets (Screens in the range of 768px and 1280px)
10. Visible on Desktops (Screens wider than 1224px)
11. Visible on Mega Desktops (Screens wider than 1290px)

If you wish to style a particular content element differently, then use this field to add a class name and then refer to it in Custom CSS settings inside Theme Options > Advanced > Custom CSS.

Design Options

This option provides a graphical user tool to set the Margin, Padding and Border width for this particular column.

Use this option to set the border color for the column. The Column Border Color option in General Tab will override this option if set.

Use this option to set the border style of this column. Available options are:

1. Theme Defaults
2. Solid
3. Dotted
4. Dashed
5. None
6. Hidden
7. Double
8. Groove
9. Ridge
10. Inset
11. Outset
12. Initial
13. Inherit

Use this option to set the border radius for this column. It will set the intensity of the curve which border corners will have. Available options are:

1. None
2. 1px
3. 2px
4. 3px
5. 4px
6. 5px
7. 10px
8. 15px
9. 20px
10. 25px
11. 30px
12. 35px

Use this option to set the background color and/or add a background image for the column. On this very same option you have a choice to select how you want the background image layout in the column. Available options are:

1. Theme Defaults
2. Cover
3. Contain
4. No Repeat
5. Repeat

Enable the Simplify Controls option if you want to have same width for all 4 sides of the column regarding the Margin, Padding or Border. The option will change the CSS options graphical user interface to different mode.

Responsive Options

Use this option to set the default width for column in all browser window sizes. (to find out more about what are these columns, please check this out) This option will be the default option for the next series of options in the Width and Responsiveness tab. The option works proportionally and you can set fractures of the whole column width which contains 12 portions. Available options are:

1. 1 column – 1/12
2. 2 columns – 1/6
3. 3 columns – 1/4
4. 4 columns – 1/3
5. 5 columns – 5/12
6. 6 columns – 1/2
7. 7 columns – 7/12
8. 8 columns – 2/3
9. 9 columns – 3/4
10. 10 columns – 5/6
11. 11 columns – 11/12
12. 12 columns – 1/1

Width and Responsiveness

In this settings section you can adjust column for different screen sizes. You can control width, offset and visibility settings.
Device allows you to set different column behavior on different screen sizes:

• Desktop – for screen sizes bigger than 1280px.
• Tablet – Landscape – for screen sizes from 1280px to 1024px.
• Tablet – Portrait – for screen sizes from 1024px to 800px.
• Mobile – for screen sizes smaller than 800px.
• Offset – allows you to set the offset for the column. You may use columns to specify the offset value. It means the amount of space to the edge of the page.
• Width – allows you to set the different width for the column on different screen sizes to restructure the content properly.
• Hide on device? – tick it to hide the elements on certain screen sizes.

The options available on Offset and Width settings are like the ones available in the Width option in the Responsive Options Tab.

---

Preventing Columns from Stacking Up on Mobile

To illustrate the usage of the responsive options in column settings we discuss a case scenario in which you want to prevent columns from stacking up on mobile which is the default behavior of responsive themes including Jupiter and The Ken.

In this case we have two columns in the default positioning of the Row and we want to have the same two columns in mobile view. Follow the steps below:

Click on the Pencil icon of each column and go to the Responsive Options tab and set the 6 Columns – 1/2 option. This will make the columns take up half of the row each.

Switch to the Width and Responsiveness tab for each column and set the Width option for Mobile view to 6 Columns – 1/2. This will force the columns to take up half the width of the row and prevent the columns from stacking up.

If you have any questions, please contact our support team creating a ticket via your Artbees Dashboard.